var flexiBackground = function(){
	
	/**
		CONFIGURATION:
		Define the size of our background image
	*/
	var bgImageSize = {
		width : 800,
		height : 600
	};
	
	/**
		Declare and define variables
	*/ 
	var $window = $(window), $body = $('startseite'), imageID = "expando",
		tallClass = 'tall', wideClass = 'wide',
                $bgImage, $wrapper, img, url, imgAR,
                $container = $('content-container'),
                $menu = $('menu-container')
                $menuUL = $menu.getElement('ul');

	/**
		Are we dealing with ie6?
	*/
	var ie6 = ( Browser.Engine.trident && parseInt(Browser.Engine.version, 10) <= 4);
	
	/**
		Set up the action that happens on resize
	*/
	var resizeAction = function() {

		var win = {
			height : $window.getSize().y,
			width : $window.getSize().x
		};

		// 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.setStyle('left', Math.min(((win.width - bgImageSize.width) / 2), 0));
		} else /*if (win.width >= bgImageSize.width)*/ {
			$body
				.addClass(wideClass)
				.removeClass(tallClass);
			$bgImage.setStyle('left', 0);
		}
		
		// Need to fix the height of the wrapper for IE6
		if (ie6) {
			$wrapper.setStyle('height', win.height);
		}
		
		$container.setStyle('top', win.height-$container.getSize().y-40);

		var $height = Math.floor(Math.min(Math.max($menuUL.getSize().y+20+45, win.height*0.5),win.height*0.7));
		$menu.setStyle('height', $height);
		$menu.setStyle('top', win.height-$height-20);
	};
	
	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.getStyle('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 = new Element('img', {
						src: url,
						id: imageID
                                            });

			// Create a wrapper and append the image to it.
			// The wrapper ensures we don't get scrollbars.
			$wrapper = new Element('div',{ styles:
							{
								'overflow' : 'hidden',
								'width' : '100%',
								'height' : '100%',
								'z-index' : '-1'
							}})
                        $bgImage.inject($wrapper, 'top');
			$wrapper.inject($body,'top');
							
			// 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.setStyles({
					'position' : 'fixed',
					'top' : 0,
					'left' : 0
				});
			}
			
			// Set up a resize listener to add/remove classes from the body 
			$window.addEvent('resize', resizeAction);

			// Set it up by triggering a resize
			$window.fireEvent('resize');
		}
	};
};

window.addEvent('domready', function() {
    flexiBackground().initialize();
});