/**
 * (c) 2010 viamedia . online concepts
 * All rights reserved 
 * 
 * Author: Georg Grossberger <grossberger@viamedia.at>
 * Version: $Id$
 */

var Background = function() {

	var image, container, ratio, init = false, initCb;

	/**
	 * Set the proportions of the image element
	 * 
	 * @param imageEl
	 * @returns void
	 */
	function setProportions(imageEl) {

		var el 		= getEl(imageEl),
			winSize = {x: window.getWidth(), y: window.getHeight()};

		width  = winSize.x;
		if (width < 960) {
			$(document.body).setStyle("overflow-x", "scroll");
			width = 960;
		} else {
			$(document.body).setStyle("overflow-x", "hidden");
		}

		height = width / ratio; 
		mL = -((height - 750) / 2);

		el.setStyles({
			width: width,
			height: height,
			marginTop: mL
		});

		scrWidth = window.getScrollWidth();
		container.setStyle("width", scrWidth).getChildren().each(function(item) {
			item.setStyles({
				width: width,
				height: height,
				marginTop: mL
			});
		});


		$("hg_wrapper_top").setStyles({
			width:  scrWidth,
			height: 750
		});
		$("hg_wrapper_bottom").setStyles({
			width:  scrWidth
		});
	}

	/**
	 * Calculate the with/height ratio of the image
	 * 
	 * @param Element imageEl
	 * @returns void
	 */
	function calcRatio(imageEl) {
		var el = getEl(imageEl);
		el.removeProperty("width").removeProperty("height").setStyles({width: "", height: ""});
		
		removeAfter = false;
		if (!el.getParent()) {
			$(document.body).adopt(el);
			removeAfter = true;
		}
		
		ratio = parseInt(el.getSize().size.x, 10) / parseInt(el.getSize().size.y, 10);
		
		if (removeAfter) {
			el.remove();
		}
	}
	
	function getEl(el) {
		return $type(el) == "element" ? el : image;
	}
	
	var _globalCounter = 0, isActive = false;
	
	/**
	 * Public API
	 */
	return {
		/**
		 * Initialize and set the given image as background
		 * 
		 */
		Init: function() {
			container = $("hg_container");
			if (container && container.getElement("span") && !image) {
				
				var imageUrl = container.getElement("span").innerHTML;
				container.empty();
				
				new Asset.image(imageUrl, {onload: function() {

					image = new Element("img", {src: imageUrl, id:"img" + _globalCounter++, styles: {zIndex:-90}});
					container.empty().adopt(image);
					calcRatio(image);

					window.addEvents({
						resize: setProportions,
						load: setProportions
					});

					setProportions(image);

					init = true;
					if (typeof initCb == "function") {
						initCb();
					}

				}});
			}
		},

		/**
		 * Fade the background image to the new image
		 * 
		 * @params string imageUrl
		 */
		fadeImage: function(imageUrl) {

			if (!container || !image) {
				return;
			}

			new Asset.image(imageUrl, {onload: function() {

				var newImage = new Element("img", {
					src: imageUrl,
					id: "img" + _globalCounter++
				});
				container.appendChild(newImage);

				calcRatio(newImage);
				setProportions(newImage);

				new Element("div").injectInside(container).adopt(image);
				new Element("div").injectInside(container).adopt(newImage);

				new Fx.Style(newImage.getParent(), "opacity", {duration: 1000}).set(0).start(1);
				new Fx.Style(image.getParent(), "opacity", {duration: 1000, onComplete: function() {
					image = newImage;
					image.injectAfter(image.getParent());
					while (image.getPrevious()) {
						image.getPrevious().remove();
					}
				}}).set(1).start(0);

			}});
		},

		/**
		 * Register a callback function to be executed 
		 * after the background image has been initialized
		 * 
		 * @param function func
		 */
		onInit: function(func) {
			if (init) {
				func();
			} else {
				initCb = func;
			}
		}
	};
	
}();

window.addEvent("domready", function() {

	$("hg_container").setStyles({
		overflow: "hidden",
		position: "absolute",
		height: 750
	}).getParent().style.backgroundColor = "#000";

	Background.Init();

});