/*
File: flexi-background.js

Author:
	Michael Bester <http://kimili.com>

About: Version
	2.0

Description:
	Javascript to set up full-screen flexible backgrounds in all widely used browsers.

License:
	Copyright 2010, Michael Bester.
	Released under the MIT license <http://opensource.org/licenses/mit-license.php>
*/

(function(){
	
	/**
		CONFIGURATION:
		Define the size of our background image
	*/
	var bgImageSize = {
		width	: 1800,
		height	: 1200
	};
	
	/*	END CONFIGURATION */
	
	/**
		Detect support for CSS background-size. No need for any more javascript if background-size is supported.
		Property detection adapted from the most excellent Modernizr <http://modernizr.com>
	*/
	if ((function(){
		var el 		= document.createElement('div'),
			bs 		= 'backgroundSize',
			ubs		= bs.charAt(0).toUpperCase() + bs.substr(1),
			props	= [bs, 'Webkit' + ubs, 'Moz' + ubs, 'O' + ubs];
			
		for ( var i in props ) {
			if ( el.style[props[i]] !== undefined ) {
				return true;
			}
		}
		return false;
	}())) {
		return;
	};
	
	/**
		We also want to leave IE6 and below out in the cold with this
	*/
	if ( false /*@cc_on || @_jscript_version < 5.7 @*/ ) {
		return;
	}
	
	/**
		If we've gotten here, we don't have background-size support,
		so we'll have to mimic it with Javascript.
		Let's set up some variables
	*/
	var elBody,
		imageID		= 'expando',
		tallClass	= 'tall',
		wideClass	= 'wide',
		elBgImage, elWrapper, img, url, imgAR,
	
		/**
			Since we're not relying on a library, we'll need some utility functions
			First, basic cross browser event adders
		*/
		addEvent = function(el, evnt, func) {
			if (el.addEventListener) {
				el.addEventListener(evnt, func, false);
			} else if (el.attachEvent) {
				return el.attachEvent("on" + evnt, func);
			} else {
				el['on' + evnt] = func;
			}
		},
	
		domLoaded = function(callback) {
			/* Internet Explorer */
			/*@cc_on
			@if (@_win32 || @_win64)
			document.write('<script id="ieScriptLoad" defer src="//:"><\/script>');
			document.getElementById('ieScriptLoad').onreadystatechange = function() {
				if (this.readyState == 'complete') {
					callback();
				}
			};
			@end @*/
			/* Mozilla, Chrome, Opera */
			if (document.addEventListener) {
				document.addEventListener('DOMContentLoaded', callback, false);
			}
			/* Safari, iCab, Konqueror */
			if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
				var DOMLoadTimer = setInterval(function () {
					if (/loaded|complete/i.test(document.readyState)) {
						callback();
						clearInterval(DOMLoadTimer);
					}
				}, 10);
			}
		},
	
		/**
		 	Next, a way to properly get the computed style of an element
			Courtesy of Robert Nyman - http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/
		*/
		getStyle = function(el, css){
			var strValue = "";
			if (document.defaultView && document.defaultView.getComputedStyle){
				strValue = document.defaultView.getComputedStyle(el, "").getPropertyValue(css);
			}
			else if (el.currentStyle){
				css = css.replace(/\-(\w)/g, function (strMatch, p1){
					return p1.toUpperCase();
				});
				strValue = el.currentStyle[css];
			}
			return strValue;
		},
	
		/**
			Finally, some element class manipulation functions
		*/
		classRegex = function(cls) {
			return new RegExp('(\\s|^)'+cls+'(\\s|$)');
		},
	
		hasClass = function(el, cls) {
			return el.className.match(classRegex(cls));
		},
	
		addClass = function(el, cls) {
			if ( ! hasClass(el, cls)) {
				el.className += ' ' + cls;
			}
		},
	
		removeClass = function(el, cls) {
			if (hasClass(el, cls)) {
				el.className = el.className.replace(classRegex(cls), '');
			}
		},
	
		/*
			Now we can move on with the core functionality of Flexibackground
		*/
		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;
			}
		
			// Grab elements we'll reference throughout
			elBody		= document.getElementsByTagName('body')[0];
		
			// Parse out the URL of the background image and drop out if we don't have one
			url = getStyle(elBody, 'backgroundImage').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
			elBgImage 		= document.createElement('img');
			elBgImage.src 	= url;
			elBgImage.id 	= imageID;
		
			// Create a wrapper and append the image to it.
			// The wrapper ensures we don't get scrollbars.
			elWrapper = document.createElement('div');
			elWrapper.style.overflow	= 'hidden';
			elWrapper.style.width	= '100%';
			elWrapper.style.height	= '100%';
			elWrapper.style.zIndex	= '-1';
		
			elWrapper.appendChild(elBgImage);
			elBody.appendChild(elWrapper);
		
			// Fix the wrapper into position
			elWrapper.style.position	= 'fixed';
			elWrapper.style.top		= 0;
			elWrapper.style.left		= 0;
		
			// Set up a resize listener to add/remove classes from the body 
			addEvent(window, 'resize', resizeAction);

			// Set it up by triggering a resize
			resizeAction();
		
		},
	
		/**
			Set up the action that happens on resize
		*/
		resizeAction = function() {
			var win = {
				height	: window.innerHeight || document.documentElement.clientHeight,
				width	: window.innerWidth || document.documentElement.clientWidth
			},

			// The current aspect ratio of the window
			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) {
				removeClass(elBody, wideClass);
				removeClass(elBody, tallClass);
			} else if (winAR < imgAR) {
				removeClass(elBody, wideClass);
				addClass(elBody, tallClass);
				// Center the image
				elBgImage.style.left = Math.min(((win.width - bgImageSize.width) / 2), 0);
			} else if (winAR > imgAR) {
				addClass(elBody, wideClass);
				removeClass(elBody, tallClass);
				elBgImage.style.left = 0;
			}
		};
	
	// When the document is ready, run this thing.
	domLoaded(initialize);
	
})();