var flexiBackground = function(){
	
	/**
		CONFIGURATION:
		Define the size of our background image
	*/
	var bgImageSize = {
    width : 1024,
    height : 681
	};
	
	/**
		Declare and define variables
	*/ 
	var $ = jQuery;
	var $window = $(window),
		$body = $('body'),
		imageID = "expando",
		tallClass = 'tall',
		wideClass = 'wide',
		$bgImage, img, url, imgAR;
	
	/**
		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;

		// 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.w < 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);
		}
	};
	
	return {
		
		/*
			Sets up the basic functionality
		*/
		initialize : function() {
			
			// 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 = $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);
						
			// Append the image to the body with a wrapper.
			// The wrapper ensures we don't get scrollbars.
			$body.append(
				$('<div></div>')
					.css({
						'position' : 'absolute',
						'top' : 0,
						'left' : 0,
						'overflow' : 'hidden',
						'width' : '100%',
						'height' : '100%',
						'z-index' : '-1'
					})
					.append($bgImage)
			);
			
			// 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');
		}
	};
}();

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