var flexiBackground = function(){

	

	/**

		CONFIGURATION:

		Define the size of our background image

	*/

	var bgImageSize = {

		width : 372,

		height : 245

	};

	

	/**

		Declare and define variables

	*/ 

	var $window = $(window),

		$body = $('body'),

		imageID = "expando",

		tallClass = 'tall',

		wideClass = 'wide',

		$bgImage, $wrapper, img, url, imgAR;

		

	/**

		Are we dealing with ie6?

	*/

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

	

	/**

		Set up the action that happens on resize

	*/

	var resizeAction = function() {

		var win = {

			height : $window.height(),

			width : $window.width()

		};



		// The current aspect ratio of the window

		var winAR = win.width / win.height;



		if(winAR > 2){

			$('#banner').attr('src','/media/files/bg-home.jpg');

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

		}

		else

		{

			$('#banner').attr('src','/media/files/bg-home.jpg');

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

		}



		// Determine if we need to show the image and whether it needs to stretch tall or wide

		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('right', 0);

		}

		

		// Need to fix the height of the wrapper for IE6

		if (ie6) {

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

		}

	};

	

	return {

		

		/*

			Sets up the basic functionality

		*/

		initialize : function(bgImg) {

			

			// No need for any of this if the screen isn't bigger than the background image

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

				return;

			}

			

			// Parse out the URL of the background image and drop out if we don't have one

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

			//alert(url);

			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%',
								
								'backgroundPosition' : 'right',

								'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,
					
					'right' : 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');

		}

	};

}();