var flexiBackground = function(){
	var bgImageSize = {
		width : 372,
		height : 245
	};


	var $window = $(window),
		$body = $('body'),
		imageID = "expando",
		tallClass = 'tall',
		wideClass = 'wide',
		$bgImage, $wrapper, img, url, imgAR;
	var ie6 = ($.browser.msie && parseInt($.browser.version, 10) <= 6);
	var resizeAction = function() {

		var win = {

			height : $window.height(),

			width : $window.width()

		};


		var winAR = win.width / win.height;



		if(winAR > 2){

			$('#banner').attr('src','images/body-bg.png');

			$('#banner').css('margin-top', '0px');

		}

		else

		{

			$('#banner').attr('src','images/body-bg.png');

			$('#banner').css('margin-top', '0px');

		}
		if (win.width < bgImageSize.width && win.height < bgImageSize.height) {

			$body

				.removeClass(wideClass)

				.removeClass(tallClass);

		} else if ((win.width < bgImageSize.width && win.height >= bgImageSize.height) || (winAR < imgAR)) {

			$body

				.removeClass(wideClass)

				.addClass(tallClass);

			// Center the image

			$bgImage.css('left', Math.min(((win.width - bgImageSize.width) / 2), 0));

		} else if (win.width >= bgImageSize.width) {

			$body

				.addClass(wideClass)

				.removeClass(tallClass);

			$bgImage.css('left', 0);

		}

		
		if (ie6) {

			$wrapper.css('height', win.height);

		}

	};

	

	return {

	
		initialize : function() {

			
			if (screen.availWidth <= bgImageSize.width || screen.availHeight <= bgImageSize.height) {

				return;

			}

			

			url = 'images/bg.jpg';//$body.css('background-image').replace(/^url\(("|')?|("|')?\);?$/g, '') || false;	


			if (!url || url === "none" || url === "") {

				return;

			}

			

			// Get the aspect ratio of the image

			imgAR = bgImageSize.width / bgImageSize.height;



			// Create a new image element

			$bgImage = $('<img />')

						.attr('src', url)

						.attr('id', imageID);

						

			// Create a wrapper and append the image to it.

			// The wrapper ensures we don't get scrollbars.

			$wrapper = $('<div></div>')

							.css({

								'overflow' : 'hidden',

								'width' : '100%',

								'height' : '100%',

								'z-index' : '-1'

							})

							.append($bgImage)

							.appendTo($body);

							

			// IE6 Doesn't do position: fixed, so let's fake it out.

			// We'll apply a class which gets used in the CSS to emulate position: fixed

			// Otherwise, we'll simply used position: fixed.

			if (ie6) {

				$wrapper.addClass('ie6fixed');

			} else {

				$wrapper.css({

					'position' : 'fixed',

					'top' : 0,

					'left' : 0

				});

			}

			

			// Set up a resize listener to add/remove classes from the body 

			$window.bind('resize', resizeAction);



			// Set it up by triggering a resize

			$window.trigger('resize');

		}

	};

}();



$(document).ready(flexiBackground.initialize);