/**
* Wordt gebruikt om automatisch een div binnen een collectie met divs te tonen
* Eentje wordt er weergegeven, andere verborgen. Na x seconde wordt de volgende getoond, rest verborgen enz.	
*
* @usage:
* --- HTML:
* <div id="switch_1">div 1</div>
* <div id="switch_2">div 2</div>
* <div id="switch_3">div 3</div>
* <div id="switch_4">div 4</div>
* --- JS:
* var switcher    = new DivSwitcher( 'switch_', 4 );
* switcher.delay  = 7500; 
* switcher.Start();
*
* @param:			prefix			[string]	De prefix van het id van de divs ( <div id="headline_1> dan is prefix headline_ )
*					total			[number]	Het totaal aantal divs welke omstebeurt getoond moeten worden
*
* @public vars:		btnPrefix		[string]	Een div met als id btnPrefix + 'foo' ( bijv <div id="btn_1"> dan is btnPrefix btn_ )
*												Wanneer er een muisactie op deze div volgt, wordt de bijbehorende div in de collectie getoond (rest verborgen)
*					btnClass		[String]	De CSS class die de div meekrijgt
*					btnClassCurrent	[String]	De CSS class van de div wanneer het in geselecteerde staat is
*					btnSelect		[String]	De muishandeling op de button (div) om hem te selecteren. Mogelijke opties:
*													- onmouseout
*													- onmouseover
*													- onclick
*					btnDeSelect		[String]	De muishandeling op de button (div) om hem te deselecteren.
*					totalDivs		[Number]	Het totaal aantal divs waartussen geswitch wordt
*					autoSwithDelay	[Number]	Tijd in ms voordat er automatisch geswitched wordt naar de volgende div binnen de collectie
*					actionDelay		[Number]	Tijd in ms voordat de actie op de div getriggerd wordt
**/

var DivSwitcher = function(prefix, total)
{
	//_____________________________ PUBLIC VARS
	this.prefix             = prefix;
	this.btnPrefix			= 'btn_';
	this.btnClass			= 'headlineLink';
	this.btnClassCurrent	= 'current';
	this.btnSelect			= 'onmouseover';
	this.btnDeSelect		= 'onmouseout';

	this.totalDivs          = total;
	this.autoSwithDelay	    = 3000;
	this.actionDelay		= 1000;

	this.intervalMethod		= autoSwitch;
	this.buttonActionMethod	= displayDiv;

	this.enabled            = true;
	this.displayedIndex     = 1;     

	//_____________________________ PRIVATE VARS
	var switchIntervalId	= 0;
	var actionIntervalId	= 0;
	var thisObject;

	init( this.btnClass, this.btnClassCurrent );

	//_________________________________________ PRIVATE METHODS
	function init(btnClass, btnClassCurrent)
	{
		if (total > 0) {
			var firstDiv            = document.getElementById( prefix + '1' );
			var firstButton         = document.getElementById( prefix + 'btn_1' );
			firstDiv.style.display  = 'block';
			firstButton.className   = btnClass + ' ' + btnClassCurrent;
		}
	}

	function autoSwitch()
	{
		if (thisObject.displayedIndex +1 <= thisObject.totalDivs) {
			thisObject.displayedIndex++;
		} else {
			thisObject.displayedIndex = 1;
		}
		
		var div;
		var button;
		
		for (var i=1; i <= thisObject.totalDivs; i++) {
			div     = document.getElementById( thisObject.prefix + '' + i );
			button  = document.getElementById( thisObject.prefix + thisObject.btnPrefix + i );

			if (i != thisObject.displayedIndex) {
				div.style.display   = 'none';
				button.className     = thisObject.btnClass;
			} else {
			   div.style.display    = 'block';
			   button.className     = this.btnClass + ' ' + this.btnClassCurrent;
			}
		}
	}
	
	function displayDiv(id)
	{
		for (var i=1; i <= thisObject.totalDivs; i++) {
			div     = document.getElementById( thisObject.prefix + '' + i );
			button  = document.getElementById( thisObject.prefix + thisObject.btnPrefix + i );
			
			if (button.id != id) {
				div.style.display   = 'none';
				button.className     = thisObject.btnClass;
			} else {
			   div.style.display    = 'block';
			   button.className     = thisObject.btnClass + ' ' + thisObject.btnClassCurrent;
			   
			   thisObject.displayedIndex = i;
			}
		}

		thisObject.Stop();
	}

	//_________________________________________ PRIVILEGED METHODS
	this.enableButtons = function()
	{
		if (thisObject.totalDivs == 0) {
			return;
		}

		for (var i=1; i <= total; i++) {
			var btn = document.getElementById( prefix + thisObject.btnPrefix + i );
			btn[thisObject.btnSelect]		= thisObject.initManualSwitch;
			btn[thisObject.btnDeSelect]		= thisObject.continueSwitch;
		} 

		var container;
		
		if (document.getElementById( prefix + 'container' )) {
			container				= document.getElementById( prefix + 'container' );
			container.onmouseover   = thisObject.stopSwitch;
			container.onmouseout    = thisObject.continueSwitch;
		}
	}

	this.stopSwitch = function()
	{
		thisObject.Stop();
	}

	this.continueSwitch = function()
	{
		clearTimeout( thisObject.actionIntervalId );
		thisObject.Start();
	}
	
	this.initManualSwitch = function()
	{
		var btnId = this.id;

		clearTimeout( thisObject.actionIntervalId );
		thisObject.actionIntervalId = setTimeout(
				function()
				{
					thisObject.buttonActionMethod( btnId ); 
				}, 
				500 
			);
	}

	this.Start = function()
	{
		if (!thisObject) {
			thisObject = this;
			thisObject.enableButtons();
		}
		
		// Clear de interval, anders gaan er meerdere switches tegelijk lopen
		this.Stop();
		this.enabled = new Boolean( true );
		
		if (thisObject.enabled)  {
			thisObject.switchIntervalId = setInterval(
				function()
				{
					thisObject.intervalMethod(); 
				}, 
				thisObject.autoSwithDelay 
			);
		}
	};

	this.Stop = function()
	{
		thisObject.enabled = new Boolean( false );
		clearInterval( thisObject.switchIntervalId );
	};

};