/**
 * This class takes control of the background display and resize
 * @author José Fernández Alameda
 * @date 2010-09-16
 */

;(function($) {
	
	/**
	 * This class adds all the resizable and mofificable background
	 */
	var BackgroundControl = function() {
		this.init();
	};
	BackgroundControl.prototype = {
		
		/**
		 * A list of images that will be used for the background
		 */
		BACKGROUND_IMAGES: [
			"background.jpg"],
	
		/**
		 * Detect if the the browser is WebKit for iPhone or iPad
		 */
		IS_MOBILE: (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))||
		(navigator.userAgent.match(/iPad/i)),
			
		/**
		 * Stores the current loaded image size
		 */
		originalSize: null,

		/**
		 * Default image to be loaded from the array
		 */
		DEFAULT_IMAGE: 0,
		
		/**
		 * Path to the images folder
		 */
		IMAGES_PATH: "/skin/frontend/default/default/images/",
		
		/**
		 * A reference to the clip mask element in the DOM
		 */

		clipMaskElement: null,
		
		/**
		 * The container element
		 */
		container: null,
		/**
		 * A reference to the background image element in the DOM
		 */

		backgroundImageElement: null,
		
		/**
		 * Stores the scaled size of the image
		 */
		scaledSize: null,
		
		/**
		 * Indicates if it's the first image load
		 */
		firstLoad: true,
		/**
		 * Stores the viewport element that fixes the scrolls for IE
		 */
		viewPortElement: null,
		
		/**
		 * Class constructor
		 */
		init: function() {
			this.createReferencesToDomElements();
			this.preActions();
			this.addObservers();
			this.startImageLoading();
		},
		
		/**
		 * Previous actions that need to be performed over the elements
		 */
		preActions: function() {
			this.backgroundImageElement.hide();
			this.container.hide();
		},
		
		/**
		 * Starts the background image loading
		 */
		startImageLoading: function() {
			var _this = this;
			
			//Getting the initial image
			var image = this.BACKGROUND_IMAGES[this.DEFAULT_IMAGE];
			
			//Loading the image by CSS property
			this.backgroundImageElement.attr("src",
			(this.IMAGES_PATH+image));
			
			//When the image is loaded the rescaling process starts
			this.backgroundImageElement.bind("load",function() { 
				_this.onImageLoadAction();
			});
		},
		
		/**
		 * This function is triggered when the background image is loaded
		 */
		onImageLoadAction: function() {
			var size = {x: this.backgroundImageElement[0].width, y: this.backgroundImageElement[0].height};
			this.originalSize = size;
			//Make the initial scaling
			this.initialScaling();
			//Showing the image on the screen
			this.imageAppearAction();
			this.scaleViewPort();
		},
		
		/**
		 * Make the images appear on the screen
		 */
		imageAppearAction: function() {
			var _this = this;
			this.backgroundImageElement.fadeIn("fast");
			if(this.firstLoad) {
				this.firstLoadDone();
				this.container.fadeIn("fast", function() {
					_this.loadComplete();
				});
			}
		},
		
		/**
		 * This function is called when the backgrounds are loaded by the first time
		 */
		loadComplete: function() {
			//Triggering the backgroundControl.loaed on the DOM document so other classes can interact with it
			$(document).trigger("backgroundControl.loaded");
		},
		
		/**
		 * Gets the window dimensions
		 */
		getWindowDimensions: function() {
			return {x: this.getWindowWidth(), y: this.getWindowHeight()};
		},
		
		/**
		 * Marks that the first load has been done
		 */
		firstLoadDone: function() {
			this.firstLoad = false;
		},
		
		/**
		 * Perform the initial scaling
		 */
		initialScaling: function() {
			this.performScaling();
		},
		
		/**
		 * Perfrom the background scaling
		 */
		performScaling: function() {	
			var dimensions = this.getWindowDimensions();
			
			var windowRatio =  dimensions.x / dimensions.y;
			var imageRatio  = this.originalSize.x / this.originalSize.y;
			var x,y;
			if(windowRatio > imageRatio) {
				//Scaling by X and cropping Y
				y = (dimensions.x * this.originalSize.y) / this.originalSize.x;
				x = dimensions.x;
			}
			else {
				//Scaling by Y and cropping X
				x = (dimensions.y * this.originalSize.x) / this.originalSize.y;
				y = dimensions.y;
			}
			
			this.scaledSize = {x: x, y: y};
			
			//Setting the element dimesions
			this.backgroundImageElement.css("height", y+"px");
			this.backgroundImageElement.css("width", x+"px");
		},
		
		performClipMaskResize: function() {
			var dimensions = this.getWindowDimensions();
			//Setting the element dimesions
		},
		
		/**
		 * Scales the viewport fix
		 */
		scaleViewPort: function() {
			var dimensions = this.getWindowDimensions();
			//Setting the element dimesions
			/* this.viewPortElement.css("height", dimensions.y+"px");
			this.viewPortElement.css("width", dimensions.x+"px");
			
			this.container.css("height", dimensions.y+"px");*/
			this.container.css("min-height", dimensions.y+"px");
			this.container.css("max-width", dimensions.x+"px");
		},
		
		/**
		 * Makes a refecence to the needed elements inside of the DOM document
		 */
		createReferencesToDomElements: function() {
			this.backgroundImageElement = $("#image-background");
			this.container			    = $(".wrapper");
			this.viewPortElement        = this.container;
		},
		
		/**
		 * Adds the observers over the actions that will resize the background e.g. window.resize
		 */
		addObservers: function() {
			var _this = this; //Creating a copy on this attached to the scope
			//When resizing the window the background image should be rescaled
			$(window).resize(function() {
				_this.performScaling();
				_this.performClipMaskResize();
				_this.scaleViewPort();
			});
		},
		
		/**
		 * Gets the window height and make it work on all the browsers
		 */
		getWindowHeight: function() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			if(!this.IS_MOBILE)
				return windowHeight;
			else {
				if(!this.scaledSize)
					return this.originalSize.y;
				else
					return this.scaledSize.y;
			}
		},

	  /**
	   * Gets the window width and makes it work in all the browsers
	   */
		getWindowWidth: function() {
			var windowWidth = 0;
			if (typeof(window.innerWidth) == 'number') {
				windowWidth = window.innerWidth;
			}
			else {
				if (document.documentElement && document.documentElement.clientWidth) {
					windowWidth = document.documentElement.clientWidth;
				}
				else {
					if (document.body && document.body.clientWidth) {
						windowWidth = document.body.clientWidth;
					}
				}
			}
			
			if($.browser == "opera")
				$(window).width();
			
			if(!this.IS_MOBILE)
				return windowWidth;
			else
				if(!this.scaledSize)
					return this.originalSize.x;
				else
					return this.scaledSize.x;
		}
		
	};
	
	/**
	 * Initializing the BackgroundControl class when the document is ready
	 */
	$(document).ready(function() {
		//Creating an instance of BackgroundControl
		var backgroundControl = new BackgroundControl();
	});
	
}($j));