// Variable that holds the minimum contaier size
var minSize = {
	width : 810,
	height : 610
};
// Variable that holds the current container size
var currSize = {
	width : 810,
	height : 610
};
// Variable that holds the current window size
var winSize = {
	width : $('window').width(),
	height : $('window').height()
};

// ie check
var ie6 = ($.browser.msie && parseInt($.browser.version, 10) <= 6);

// variables
var fbg_window,
	fbg_body,
	fbg_container,
	fbg_bgImage,
	fbg_logo,
	fbg_loader, 
	fbg_popup,
	fbg_footer,
	fbg_containerAR,
	fbg_imageAR;

// define function package
var flexBG =
{
	// Sets up the basic functionality
	initialize : function() 
	{	
		// Grab elements we'll reference throughout
		fbg_window 		= $(window);
		fbg_body 		= $('body');
		fbg_container 	= $('div#container');
		fbg_logo	 	= $('img#logo');
		fbg_loader	 	= $('div#loader');
		fbg_popup	 	= $('div.popup');
		fbg_footer	 	= $('div.footer');
		fbg_bgImage		= $('img#bg');
		
		// Set up a resize listener to add/remove classes from the body 
		fbg_window.bind('resize', flexBG.resizeAction);

		// Set it up by triggering a resize
		fbg_window.trigger('resize');
		
		// resets the overflow of the html
		$('html').css('overflow', 'auto');
	},
	
	// Set up the action that happens on resize
	resizeAction : function() 
	{
		// fetch the window size and store it in the winSize array.
		winSize.height = fbg_window.height() - 12;
		winSize.width = fbg_window.width() - 12;

		// determine container aspect ratio
		fbg_containerAR = minSize.width / minSize.height;
		
		// The current aspect ratio of the window
		var winAR = winSize.width / winSize.height;
		
		var w, h, t = 6;
		
		// Determine new size of the container
		if (winSize.width < minSize.width || winSize.height < minSize.height) 
		{
			w = minSize.width - 10;
			h = minSize.height - 10;
		} 
		else if (winAR > fbg_containerAR)
		{
			h = winSize.height - 10;
			w = h * fbg_containerAR;
		}
		else
		{
			w = winSize.width - 10;
			h = w * (1/fbg_containerAR);
		}
		currSize.width 	= Math.floor(w);
		currSize.height = Math.floor(h);
				
		flexBG.positionContainer();
		
		flexBG.positionPopup();
		
		flexBG.positionFooter();
		
		flexBG.positionLogo();
		
		flexBG.positionBg(fbg_bgImage);
		
		// Need to fix the height of the wrapper for IE6
		if (ie6) 
		{
			fbg_body.css('height', winSize.height);
		}
	},
	
	// resize and position the container
	positionContainer : function()
	{
		t = Math.max(6, (winSize.height - 12 - currSize.height) / 2);
		
		// sets the containers width, height and margin
		fbg_container.css({	'width'  : currSize.width + 'px',
							'height' : currSize.height + 'px',
							'margin-top' : t + 'px'});
	},
	
	// position the popup
	positionPopup : function()
	{
		// position popup
		var popup_top = ((currSize.height - fbg_popup.height() - fbg_footer.height() - fbg_logo.height()) / 3);
		fbg_popup.css({'margin-top' : popup_top + 'px'});
	},
	
	// resize and position the footer
	positionFooter : function()
	{
		t = Math.max(6, (winSize.height - 12 - currSize.height) / 2);
		fbg_footer.css({	'width'	 : currSize.width + 'px',
							'top'	 : (currSize.height  + t - fbg_footer.height()) + 'px'});
	},
	
	// position the logo
	positionLogo : function()
	{
		// fetches the current offset of the container
		var offs = fbg_container.offset();
		
		var loader_left = offs['left'] + ((currSize.width - 60) / 2);
		var popup_top 	= ((currSize.height - fbg_popup.height() - fbg_footer.height() - fbg_logo.height()) / 3);
		var loader_top 	= popup_top + fbg_logo.height() + (fbg_popup.height() / 2);
		
		fbg_loader.css({	'top' : loader_top + 'px',
							'left' : loader_left + 'px'});
	},
	
	// updates the background size and position according to the current
	// image and container size.
	positionBg : function(img)
	{
		// if no image was defined, quit
		if (img.attr('src') == null)
			return;
		
		// store current image object
		fbg_bgImage 	= img;
		var bgT 		= Math.max(6, (fbg_window.height() - 24 - currSize.height) / 2);
		
		fbg_imageAR 	= img.width() / img.height();
		var offs 		= fbg_container.offset();
		
		var bgW 	= currSize.width;
		var bgH 	= currSize.width * (1 / fbg_imageAR);
		if (bgH > currSize.height) 
		{
			bgH = currSize.height;
			bgW = bgH * fbg_imageAR;
		}
		
		// resize div with background color
		$('div#bg_color').css({ 'width'  : currSize.width + 'px',
								'height' : currSize.height + 'px',
								'top' : bgT + 'px'});
		
		if (currSize.width - bgW < 10) {
			bgW = currSize.width;
		}
		
		if (currSize.height - bgH < 10) {
			bgH = currSize.height;
		}
		
		var bgL = offs['left'] + ((currSize.width - bgW) / 2);
		img.css({	'width'  : bgW + 'px',
					'height' : bgH + 'px',
					'top' : bgT + 'px',
					'left' : bgL + 'px'});
	}
};

//$(document).ready(flexBG.initialize);