Array.prototype.in_array = function(p_val) {
	for(var i = 0, l = this.length; i < l; i++) {
		if(this[i] == p_val) {
			return true;
		}
	}
	return false;
}

/**
 * Object that animate the header
 */
function MultiBoxAnimation ()
{
	/**
	 * @var (string) multiBoxContainer - Store the selector name of the Animation Container.
	 */
	this.multiBoxContainer;
	
	/**
	 * @var (string) imagesPath - Store the path of the images folder
	 */
	this.imagesPath;

	/**
	 * @var (array) initContent - Store the layout at it's initial state 
	 * 							  initContent[x][0] = boxId
	 * 							  initContent[x][1] = boxContent
	 */
	this.initContent = new Array();
	
	/**
	 * @var (array) animationContent - Store the layout to be built durring the animation.
	 */
	this.animationContent = new Array();
	
	this.availableHeadImages = new Array();
	this.availableFootImages = new Array();
	
	
	/**
	 * @var (int) initInterval - Define the laps of time in millisecond between the display of two entries of the initial state (ref: initContent)
	 */
	this.initInterval = 100;
	
	/**
	 * @var (int) animationInterval - Define the laps of time in millisecond between the display of two entries of the animation state (ref: animationContent)
	 */
	this.animationInterval = 2000;
	
	/**
	 * @var (int) animationEndBreak - Laps of time to wait at the end of the animation to restart the loop
	 */
	this.animationEndBreak = 5000;
	
	/**
	 * @var (int) currentTimeout - Store the value of the current Timeout.
	 */
	this._currentTimeout = 0;
	
	/**
	 * @var (bool) layoutCreated - ...
	 */
	this._layoutCreated = false;
	
	/**
	 * Set the selector of the main container
	 *
	 * @param (string) container - Selector name
	 */
	this.setMultiBoxContainer = function (container)
	{
		this.multiBoxContainer = container;
		return this;
	}
	
	/**
	 * Get the selector of the main container
	 */
	this.getMultiBoxContainer = function ()
	{
		return this.multiBoxContainer;
	}
	
	/**
	 * Set the absolute path of the images folder.
	 *
	 * @param (string) path
	 */ 
	this.setImagesPath = function (path)
	{
		this.imagesPath = path;
		return this;
	}
	
	/**
	 * Get the absolute path of the images folder.
	 */
	this.getImagesPath = function ()
	{
		return this.imagesPath;
	}
	
	/**
	 * Set the content of the initial state, first declared, first showed.
	 * 
	 * @param (int) boxId - the id of the selected box. (ids needs to be sequencial and to start at 0, good: 0,1,2,3 | bad: 1,3,4,5,8)
	 * @param (string) boxImage - the file name of the background image.
	 * @param (string) effect - ref : _animateBox @param animationEffect
	 */
	this.setInitContent = function (boxId, boxImage, effect, timeoutModifier) 
	{
		var currentKey = this.initContent.length;
		this.initContent[currentKey] = new Array();
		this.initContent[currentKey][0] = boxId;
		this.initContent[currentKey][1] = boxImage;
		this.initContent[currentKey][2] = effect;
		this.initContent[currentKey][3] = timeoutModifier;
	
		return this;
	}
	
	/**
	 * Set the content of the animation state, first declared, first showed.
	 * 
	 * @param (int) boxId - the id of the selected box. (needs to be an existent boxId predefine in the init state)
	 * @param (string) boxImage - the file name of the background image.
	 * @param (string) effect - ref : _animateBox @param animationEffect
	 */
	this.setAnimationContent = function (boxId, boxImage, effect, timeoutModifier)
	{
		var currentKey = this.animationContent.length;
		this.animationContent[currentKey] = new Array();
		this.animationContent[currentKey][0] = boxId;
		this.animationContent[currentKey][1] = boxImage;
		this.animationContent[currentKey][2] = effect;
		this.animationContent[currentKey][3] = timeoutModifier;

		return this;
	}
	
	/**
	 * Animate a box (change de background-image)
	 *
	 * @param (int) boxId - Specify the box id where the action will occur
	 * @param (int) boxImage - Specify the new backgrond-image file name
	 * @param (string) animationEffect - Define the type of transition
										 fade : fadeOut, change bg, fadeIn
										 terminalHead : random Head images. state background
										 terminalFoot : random Foot images. state background
	 */
	this._animateBox = function (boxId, boxImage, animationEffect)
	{	
		/**
		 * Define an object of the current class (fix to work with jQuery)
		 */
		var mba = this;
		
		/**
		 * Get a jQuery object of the specified multiBoxContainer
		 */
		var mbaContainer = $(this.getMultiBoxContainer());

		if (animationEffect == 'fade')
		{
			mbaContainer
				.children('div.box-'+boxId)
				.fadeTo(500, 0, function () {
					$(this)
						.css({ 'background-image' : 'url(' + mba.getImagesPath() + boxImage + ')' })
						.fadeTo(500, 1);
				});
		}
		
		else if (animationEffect == 'terminalHead')
		{
			/**
			 * Get 4 different random images.
			 */
			var randomImages = new Array();
			
			var i = 0;
			while (i < 4)
			{
				randomNum = this.getRandom(0, this.availableHeadImages.length);
				if (randomImages.in_array(randomNum) == false && this.availableHeadImages[randomNum] != boxImage)
				{
					randomImages[i] = randomNum;
					i++;
				}
			}
			
			var countTimeout = 0;
			for (i=0;i<5;i++)
			{
				if (i<4)
				{
					setTimeout("$(mba.getMultiBoxContainer()).children('div.box-" + boxId + "').stop(false, true).fadeTo(50, 0.01, function () { $(this).css({ 'background-image' : 'url(" + mba.getImagesPath() + mba.availableHeadImages[randomImages[i]] + ")' }).fadeTo(150, 1)})", countTimeout);
					countTimeout += 250;
				}
								
				else
				{
					setTimeout("$(mba.getMultiBoxContainer()).children('div.box-" + boxId + "').stop(false, false).fadeTo(50, 0.01, function () { $(this).css({ 'background-image' : 'url(" + mba.getImagesPath() + boxImage + ")' }).fadeTo(150, 1)})", countTimeout);
				}
				
			}
		}
		
		else if (animationEffect == 'terminalFoot')
		{
			/**
			 * Get 4 different random images.
			 */
			var randomImages = new Array();
			
			var i = 0;
			while (i < 4)
			{
				randomNum = this.getRandom(0, this.availableFootImages.length);
				if (randomImages.in_array(randomNum) == false  && this.availableFootImages[randomNum] != boxImage)
				{
					randomImages[i] = randomNum;
					i++;
				}
			}
			
			var countTimeout = 0;
			for (i=0;i<5;i++)
			{
				if (i<4)
				{
					setTimeout("$(mba.getMultiBoxContainer()).children('div.box-" + boxId + "').stop(false, true).fadeTo(50, 0.1, function () { $(this).css({ 'background-image' : 'url(" + mba.getImagesPath() + mba.availableFootImages[randomImages[i]] + ")' }).fadeTo(150, 1)})", countTimeout);
					countTimeout += 250;
				}
				
				else
				{
					setTimeout("$(mba.getMultiBoxContainer()).children('div.box-" + boxId + "').stop(false, false).fadeTo(50, 0.1, function () { $(this).css({ 'background-image' : 'url(" + mba.getImagesPath() + boxImage + ")' }).fadeTo(150, 1)})", countTimeout);
				}
				
			}
		}
	}
	
	this.getRandom = function (min, max)
	{
		return Math.round(Math.random() * (max-min)) + min;
	}
	
	/**
	 * Create the default layout before proceeding to any animation
	 */
	this._createLayout = function ()
	{
		if (this._layoutCreated == true) {
			return false;
		}
		/**
		 * Get a jQuery object of the specified multiBoxContainer
		 */
		var mbaContainer = $(this.getMultiBoxContainer());
		
		/**
		 * Create the layout
		 */
		for (i=0;i<this.initContent.length;i++)
		{
			mbaContainer .append('<div class="box-' + i + '"></div>');
		}
		
		/**
		 * Define the layout as created.
		 */
		this._layoutCreated = true;
		return this;
	}
	
	/**
	 * Render the display
	 */
	this.render = function () 
	{
		/**
		 * Define an object of the current class
		 */
		var mba = this;
		 
		/**
		 * Get a jQuery object of the specified multiBoxContainer
		 */
		var multiBoxContainer = $(this.getMultiBoxContainer());
		
		/**
		 * Reset the current timeout
		 */
		mba._currentTimeout = 0;
		
		/**
		 * Create the layout
		 */
		this._createLayout(); 
		
		/**
		 * Initial State
		 */
		$.each(this.initContent, function(key, boxContent) {
			mba._currentTimeout += (typeof boxContent[3] != 'undefined') ? parseInt(boxContent[3]) : mba.initInterval;
			setTimeout('mba._animateBox("'+ boxContent[0] +'", "' + boxContent[1] + '", "' + boxContent[2] + '");', mba._currentTimeout);
		});

		setTimeout("$(mba.getMultiBoxContainer()).css({'background-image':'url(/images/commons/animation-dark.jpg)'});", mba._currentTimeout+1000);

		
			 
		/**
		 * Animation State
		 */
		 $.each(this.animationContent, function(key, boxContent) {
			mba._currentTimeout += (typeof boxContent[3] != 'undefined') ? parseInt(boxContent[3]) : mba.animationInterval;
			setTimeout('mba._animateBox('+ boxContent[0] +', "' + boxContent[1] + '", "' + boxContent[2] + '");', mba._currentTimeout);
		 });
		 
		/**
		 * Loop.
		 */
		mba._currentTimeout += mba.animationEndBreak;
		setTimeout('mba.render()', mba._currentTimeout);
	}
}

mba = new MultiBoxAnimation();

$(document).ready(function() 
{
	mba
	.setImagesPath('/images/header/')
	.setMultiBoxContainer('.animation');
/* 
	mba.availableHeadImages[0] = '01A.jpg';
	mba.availableHeadImages[1] = '02A.jpg';
	mba.availableHeadImages[2] = '03A.jpg';
	mba.availableHeadImages[3] = '04A.jpg';
	mba.availableHeadImages[4] = '05A.jpg';
	mba.availableHeadImages[5] = '06A.jpg';
	mba.availableHeadImages[6] = '07A.jpg';
	mba.availableHeadImages[7] = '08A.jpg';
	mba.availableHeadImages[8] = '09A.jpg';
	mba.availableHeadImages[9] = '10A.jpg';
	mba.availableHeadImages[10] = '11A.jpg';
	mba.availableHeadImages[11] = '12A.jpg';
	mba.availableHeadImages[12] = '13A.jpg';
	mba.availableHeadImages[13] = '14A.jpg';
	mba.availableHeadImages[14] = '15A.jpg';
	
	imgHead = new Array();
	for(i=0;i<mba.availableHeadImages.length;i++)
	{
		imgHead[i] = new Image(200,105);
		imgHead[i].src = mba.getImagesPath() + mba.availableHeadImages[i];
	}
	
	mba.availableFootImages[0] = '01B.jpg';
	mba.availableFootImages[1] = '02B.jpg';
	mba.availableFootImages[2] = '03B.jpg';
	mba.availableFootImages[3] = '04B.jpg';
	mba.availableFootImages[4] = '05B.jpg';
	mba.availableFootImages[5] = '06B.jpg';
	mba.availableFootImages[6] = '07B.jpg';
	mba.availableFootImages[7] = '08B.jpg';
	mba.availableFootImages[8] = '09B.jpg';
	mba.availableFootImages[9] = '10B.jpg';
	mba.availableFootImages[10] = '11B.jpg';
	mba.availableFootImages[11] = '12B.jpg';
	mba.availableFootImages[12] = '13B.jpg';
	mba.availableFootImages[13] = '14B.jpg';
	mba.availableFootImages[14] = '15B.jpg';
	
	imgFoot = new Array();
	for(i=0;i<mba.availableFootImages.length;i++)
	{
		imgFoot[i] = new Image(200,105);
		imgFoot[i].src = mba.getImagesPath() + mba.availableFootImages[i];
	}
 */
	// var randomHeader = Math.floor(Math.random()*3);
	var randomHeader = 1;
	if (randomHeader == 1)
	{
		mba
		.setInitContent('3', '05A.gif', 'fade')
		.setInitContent('7', '08B.gif', 'fade')
		.setInitContent('0', '10A.gif', 'fade')
		.setInitContent('4', '11A.gif', 'fade')
		.setInitContent('6', '14B.gif', 'fade')
		.setInitContent('1', '14A.gif', 'fade')
		.setInitContent('5', '10B.gif', 'fade')
		.setInitContent('2', '08A.gif', 'fade')
		.setInitContent('9', '11B.gif', 'fade')
		.setInitContent('8', '05B.gif', 'fade')
		
		.setAnimationContent('2', '06A.gif', 'fade', 5000)
		.setAnimationContent('7', '06B.gif', 'fade', 300)
		.setAnimationContent('5', '03B.gif', 'fade', 500)
		.setAnimationContent('0', '03A.gif', 'fade', 300)
		.setAnimationContent('4', '09A.gif', 'fade', 500)
		.setAnimationContent('9', '09B.gif', 'fade', 300)
		.setAnimationContent('1', '01A.gif', 'fade', 500)
		.setAnimationContent('6', '01B.gif', 'fade', 300)
		.setAnimationContent('3', '15A.gif', 'fade', 500)
		.setAnimationContent('8', '15B.gif', 'fade', 300);
	}
	
	else if (randomHeader == 2)
	{
		mba
		.setInitContent('3', '13A.gif', 'fade')
		.setInitContent('7', '15B.gif', 'fade')
		.setInitContent('0', '01A.gif', 'fade')
		.setInitContent('4', '02A.gif', 'fade')
		.setInitContent('6', '03B.gif', 'fade')
		.setInitContent('1', '03A.gif', 'fade')
		.setInitContent('5', '01B.gif', 'fade')
		.setInitContent('2', '15A.gif', 'fade')
		.setInitContent('9', '02B.gif', 'fade')
		.setInitContent('8', '13B.gif', 'fade')
		
		.setAnimationContent('2', '05A.gif', 'fade', 5000)
		.setAnimationContent('7', '05B.gif', 'fade', 300)
		.setAnimationContent('5', '09B.gif', 'fade', 500)
		.setAnimationContent('0', '09A.gif', 'fade', 300)
		.setAnimationContent('4', '12A.gif', 'fade', 500)
		.setAnimationContent('9', '12B.gif', 'fade', 300)
		.setAnimationContent('1', '07A.gif', 'fade', 500)
		.setAnimationContent('6', '07B.gif', 'fade', 300)
		.setAnimationContent('3', '04A.gif', 'fade', 500)
		.setAnimationContent('8', '04B.gif', 'fade', 300)
	}
	
	else
	{
		mba
		.setInitContent('3', '02A.gif', 'fade')
		.setInitContent('7', '14B.gif', 'fade')
		.setInitContent('0', '05A.gif', 'fade')
		.setInitContent('4', '03A.gif', 'fade')
		.setInitContent('6', '11B.gif', 'fade')
		.setInitContent('1', '11A.gif', 'fade')
		.setInitContent('5', '05B.gif', 'fade')
		.setInitContent('2', '14A.gif', 'fade')
		.setInitContent('9', '03B.gif', 'fade')
		.setInitContent('8', '02B.gif', 'fade')
		
		.setAnimationContent('2', '01A.gif', 'fade', 5000)
		.setAnimationContent('7', '01B.gif', 'fade', 300)
		.setAnimationContent('5', '08B.gif', 'fade', 500)
		.setAnimationContent('0', '08A.gif', 'fade', 300)
		.setAnimationContent('4', '10A.gif', 'fade', 500)
		.setAnimationContent('9', '10B.gif', 'fade', 300)
		.setAnimationContent('1', '06A.gif', 'fade', 500)
		.setAnimationContent('6', '06B.gif', 'fade', 300)
		.setAnimationContent('3', '09A.gif', 'fade', 500)
		.setAnimationContent('8', '09B.gif', 'fade', 300)
	}
	
	mba.render();	
});