/**
*	Callback function where invoke all functions to be start when window is loaded
*
*/
function domLoaded(event)
{
	
}

/**
*	Triggering the start of the callback which is responsable of all functions to be
*	started when window is loaded
*/
var oCarusel;
//Event.observe(window, 'load', domLoaded );

var Carusel = Class.create(
{
	aItems				: [],
	iNumBlocks			: null,
	iNumTotalItems		: null,
	iNumItemsPerBlock	: 3,
	iCurrentImageID		: '',	// id of the actual active DOM object { 'home_woningaanbod_'+iCurrentID}
	iCurrentID			: 0,	// Position order id of the actual active DOM object
	iCurrentBlockID		: 0,
	iBlockID			: 0,	// ID of the DOM block items container
	iOldBlockID			: 0,	// ID of the previous viewed block
	iTotBlocks			: 0,	// Total number of blocks
	bPaused				: true,
	iSpeed				: 0,
	sNextButton			: 'button_next',
	sPrevButton			: 'buttonn_prev',
	bImageReelShow		: false,
	sActiveBlock		: null,
	aButtons			: [],	// The 3 circles in the textinformation area where mouseover and out are triggered
	
	/**
	 * Standard prototype initialize contructor
	 */
	initialize: function(sSpeed)
	{
		this.iSpeed = parseInt(sSpeed)*1000;
		this.domLoaded();
	},
	
	domLoaded: function()
	{
		this.retriveItems();
		this.unsetAllItems();
		
		if(this.iNumTotalItems > 0)
		{
			// At the beginning, the active item is always the first of the 3 visible items
			this.iCurrentImageID = this.aItems[0].id;
			this.iCurrentID = 1;
			this.iBlockID = 1;
			this.iOldBlockID = 1;
			
			// Show the first block of items
			$('etalageItem1').setStyle({display: 'block' });
			this.aButtons[0].addClassName('active');
			
			this.aButtons.each(function(oItem){
				Event.observe(oItem, 'click', function()
				{
					oCarusel.selectAsActive(oItem);
				});
				/*
				Event.observe(oItem, 'mouseout', function()
				{
					oCarusel.iIntervalID = setInterval(oCarusel.intervalHandler, oCarusel.iSpeed*1000);
				});
				*/
			});
			
			
			// Triggering the start of the carusel
			this.iIntervalID = setInterval(this.intervalHandler, this.iSpeed);	
		}
	},
	
	/**
	*	Load the items to roll-over and the buttons for the mouseover action.
	*/
	retriveItems: function()
	{
		this.aItems = $$('div.etalageItem');
		this.iNumTotalItems = this.aItems.length;
		this.iTotBlocks = (this.iNumTotalItems / this.iNumItemsPerBlock) - (this.iNumTotalItems % this.iNumItemsPerBlock);
	
		this.aButtons = $$('div#etalageNav a');
	},
	
	/**
	*	Set the opacity of all items to 'inactive' state
	*/
	unsetAllItems: function()
	{
		for(var i = 1; i <= this.aItems.length; i++)
		{
			$( 'etalageItem'+i ).setStyle({ display: 'none' });
		}
	},
	
	/**
	*	Set actual item as the active one
	*
	*/
	selectAsActive: function(oItem)
	{
		oCarusel.pause();
		
		var iThisItemID = oItem.id.substring(13, oItem.id.length);
		
		// Inactivate the red button: set on inactive status
		oCarusel.disableButton(oCarusel.iCurrentID);
		
		Effect.Queue.each(function(e) { e.cancel() });
		// Show as inactive the last active item
		new Effect.Fade('etalageItem'+ oCarusel.iCurrentID , {
			duration: 0.4,
			afterFinish: function()
			{
				// ID number to make active.
				oCarusel.iCurrentID = iThisItemID;
				new Effect.Appear('etalageItem'+ oCarusel.iCurrentID, {
					duration: 0.4,
					afterFinish: function()
					{
						oCarusel.enableButton(iThisItemID);
					}
				});
			}
		});
	},
	
	/**
	*	Select the previous item as the active item
	* 	@return void
	*/
	switchPrev: function()
	{
		Effect.Queue.each(function(e) { e.cancel() });
		
		// Show as inactive the last active item
		new Effect.Fade('etalageItem'+ oCarusel.iCurrentID , {
			duration: 0.4,
			afterFinish: function()
			{
				// Inactivate the red button: set on inactive status
				oCarusel.disableButton(oCarusel.iCurrentID);
				
				if(oCarusel.iCurrentID == 1)
				{
					// We are on the last item of the array and the next is the first of the list
					oCarusel.iCurrentID = oCarusel.iNumTotalItems;
				}
				else
				{
					// Just increase the number of 1 unit
					oCarusel.iCurrentID--;
				}
				oCarusel.iOldBlockID = oCarusel.iBlockID;
				// Updating the active blockID
				oCarusel.updateBlockID(-1);
				
				new Effect.Appear('etalageItem'+ oCarusel.iCurrentID, {
					duration: 0.4,
					afterFinish: function()
					{
						// Set on active the new button (the red one.
						oCarusel.enableButton(oCarusel.iCurrentID);
					}
				});
			}
		});
	},
				
	/**
	*	Select the next item as the active item
	* 	@return void
	*/
	switchNext: function()
	{
		Effect.Queue.each(function(e) { e.cancel() });
		
		// Show as inactive the last active item
		new Effect.Fade('etalageItem'+ oCarusel.iCurrentID , {
			duration: 0.4,
			afterFinish: function()
			{
				// Inactivate the red button: set on inactive status
				oCarusel.disableButton(oCarusel.iCurrentID);
				
				if(oCarusel.iCurrentID == oCarusel.iNumTotalItems)
				{
					// We are on the last item of the array and the next is the first of the list
					oCarusel.iCurrentID = 1;
				}
				else
				{
					// Just increase the number of 1 unit
					oCarusel.iCurrentID++;
				}
				
				oCarusel.iOldBlockID = oCarusel.iBlockID;
				
				// Updating the active blockID
				oCarusel.updateBlockID(1);	
					
				new Effect.Appear('etalageItem'+ oCarusel.iCurrentID, {
					duration: 0.4,
					afterFinish: function()
					{
						// Set on active the new button (the red one.
						oCarusel.enableButton(oCarusel.iCurrentID);
					}
				});
			}
		});
	},
	
	/**
	*	Make inactive the button (one of the 3 as circles).
	*	@param integer	Integer part of the DOM object ID
	*/
	disableButton: function(iId)
	{
		if($( 'etalagebutton' + iId ).hasClassName('active'))
		{
			$( 'etalagebutton' + iId ).removeClassName('active');
		}
	},
	
	/**
	*	Make active the button (one of the 3 as circles).
	*	@param integer	Integer part of the DOM object ID
	*/
	enableButton: function(iId)
	{
		$( 'etalagebutton' + iId ).addClassName('active');
	},
	
	/**
	*	Updating the actual blockID
	*	@param integer iInt		If '1' then moves to the next item.
	*							If '-1'  then moves to the previous item.							
	*/
	updateBlockID: function(iInt)
	{
		if(iInt == 1)
		{
			if(oCarusel.iCurrentID%3 == 1)
			{
				// Calculate the actual blockID when moving to the right
				oCarusel.iBlockID = (Math.floor(oCarusel.iCurrentID/3)  )+1;
			}
		}
		else if(iInt == -1)
		{
			if(oCarusel.iCurrentID%3 == 0)
			{
				// Calculate the actual blockID when moving to the left
				oCarusel.iBlockID = Math.floor(oCarusel.iCurrentID/3);
			}
		}
	},
	
	/**
	*	Clearing the setInterval handler.
	*/
	pause: function()
	{
		var iInt = window.clearInterval(oCarusel.iIntervalID);
	},
	
	/**
	*	Triggers the starting of the active selection-item
	* 	@return void
	*/
	intervalHandler: function()
	{
		oCarusel.switchNext();
		//oCarusel.switchPrev();
	}
});