var bgImgW = '960';
var bgImgH = '462';
var scrollSize;

var main;
var header;
var footer;
var footerBG;
var bgContainer;
var bgImg;
var bodyInfo;
var tagline;
	
(function($){

	$.fullScreen = function() {

		bodyInfo.addClass('noScroll').width();
		
		var windowW = $(window).width();
		var windowH = $(window).height();
		
		// Calculate ratio
		var ratio = windowW/bgImgW;
		var newWidth = Math.round(bgImgW*ratio);
		var newHeight = Math.round(bgImgH*ratio);

		if (windowH > 462) {
			bgImg.width('960px');
			header.width('960px');
		} else {
			bgImg.width(960-scrollSize+'px');
			header.width(960-scrollSize+'px');
		}
		
		if (windowW < 960) {
			bgImg.height('462px');
			bodyInfo.css('overflow-x','auto');
		} else {
			bgImg.width(newWidth+'px');
			bgImg.height(newHeight+'px');
			header.width('100%');
			bodyInfo.css('overflow-x','hidden');
		}
		
		if (windowH < 650) {
			tagline.css('top', '15px');
		} else if (windowH > 650 && windowH < 700) {
			tagline.css('top', '8%');
		} else {
			tagline.css('top', '14%');
		}
		
		main.width(bgImg.width()+'px');
		main.height(bgImg.height()+'px');
		
		footer.css('top', bgImg.height()+'px');
		footerBG.css('top', bgImg.height()+'px');

		bodyInfo.removeClass();
	}

	$.getWindowInfo = function() {
		
		// Get current overflow status
		var currentStatus = bodyInfo.attr('class');
		
		// Get window size with scrollbars
		windowWidthScroll = bodyInfo.removeClass().addClass('scroll').width();
		windowHeightScroll = bodyInfo.height();
		
		// Get window size without scrollbars
		windowWidth = bodyInfo.removeClass().addClass('noScroll').width();
		windowHeight = bodyInfo.height();
		
		// Revert back to original
		bodyInfo.removeClass().addClass(currentStatus);
		
	}

	$.getScrollbarSize = function() {
		
		$.getWindowInfo();
		
		var scrollSize = windowWidth - windowWidthScroll;
		
		if (scrollSize != null) {
			return scrollSize;
		} else {
			return 0;
		}
		
	}

})(jQuery);

$(document).ready(function(){
	
	bodyInfo = $('body');
	scrollSize = $.getScrollbarSize();
	header = $('#header');
	main = $('#main');
	tagline = $('h2');
	footer = $('#footer');
	footerBG = $('#footer_bg');
	bgContainer = $('#bigbg');
	bgImg = $('#backgroundImg');
	
	$.fullScreen();
	
	$(window).bind('resize', function() {
		$.fullScreen();
	});
});