/*	_________________________________________________

		SANDER internetoplossingen

		info@sandermedia.nl
		www.sandermedia.nl

		Leliestraat 1
		7943AV Meppel
		0522 24 68 17
		The Netherlands

		Timezone GMT +1
	_________________________________________________

		By:	Roel van Nuland
		Script version: v0.7
	_________________________________________________

		Description:
			Image crossfade with buttons and descriptions

		Needs:
			Nothing

		Usage:
	
			Just include this script likt this
				<script type="text/javascript" src="imagecarrousel.js"></script>

			Available functions:
				my_Crossfade = new Crossfade(	'switcher',		// (id) Element for buttons
												'eyecatcher',	// (id) Element for images
												'text',			// (class) Elements with description
												'test' );		// Name of the crossfader (in case you would want more on one page)
					

				my_Crossfade.addImage( imagename )
					Adds an image to the carrousel

				my_Crossfade.start()
					Using the information the carrousel has, it tries to build a carrousel inside the given element
	_________________________________________________

		Changelog:
			v0.7:	- Search Engine Optimized
			v0.6:	- Updated for Sander site
			v0.5:	- Working version
	_________________________________________________
*/			


// Class Crossfade
function Crossfade( buttondivname, photodivname, descriptiondivname, crossfadeid )
{
	// Public vars
	this.staytime = 5000;		// 1.5 seconds
	this.fadetime = 500;		// 1 second
								// Total time between 2 pictures is fadetime + staytime
	this.stepinterval = 50;		// 0.05 secs (lower is more smooth, but takes more cpu power)
	this.buttonpadding = 0;		// Buttons can have padding, please set to the appropreate amount
	
	// Private vars
	this.active = false;		// Active means normal fade
	this.interrupted = false;	// Don't continue after fade when interrupted
	this.fadebusy = false;		// Is still fading?
	this.contentCounter = 0;	// Counter which loops through all images
	this.content = new Array;	// Array of all CrossFadeImage objects
	this.timeoutid = -1;		// -1 indicates not used

	this.buttondivname = buttondivname;
	this.photodivname = photodivname;
	this.descriptiondivname = descriptiondivname;
	this.crossfadeid = crossfadeid;

	// Add events to the photodiv 
	var photodiv = document.getElementById( this.photodivname );

//	element.onclick = new Function("function('"+parameter+"')");
	photodiv.onmouseover = new Function("onCrossImageOver('"+crossfadeid+"')");
	photodiv.onmouseout = new Function("onCrossImageOut('"+crossfadeid+"')");
}

Crossfade.prototype.start = function()
{
	// check if onFade function is defined
	if (window.onCrossFade)
	{
		// Create buttonbar
		this.createButtons();

		// Are there items to fade to
		if (this.content.length > 1)
		{
			this.active = true;
			onCrossFade( this.crossfadeid );
		}
	}
	else
	{
		alert( 'please create an onFade function to capture the event' );
	}
}

Crossfade.prototype.stop = function()
{
	this.active = false;
}

Crossfade.prototype.addImage = function( imagename )
{
	// Create CrossfadeImage
	tmpimg = new CrossfadeImage( imagename, this.content.length + 1 );

	// Create Image div
	var container = document.getElementById( this.photodivname );
	if (container)
	{
		// Create div
		tmpimg.imagediv = document.createElement( 'div' );
		tmpimg.imagediv.style.position = 'absolute';				// All divs start at same location inside container div
		tmpimg.imagediv.innerHTML = tmpimg.image;					// Add description
		Utils.SetElementOpacity( tmpimg.imagediv, 0 );					// Hide on start

		// Add div to container
		if (container.childNodes.length > 0)
		{
			container.insertBefore( tmpimg.imagediv, container.childNodes[0] )
		}
		else
		{
			container.appendChild( tmpimg.imagediv );
		}
	}
	else
	{
		alert( 'could not get element with id ' + this.photodivname );
	}

	// Store image
	this.content.push( tmpimg );
}

Crossfade.prototype.createButtons = function()
{
	if (this.buttondivname)
	{
		buttondiv = document.getElementById( this.buttondivname );
		buttonwidth = Math.floor(buttondiv.offsetWidth / this.content.length) - this.buttonpadding;
		if (buttondiv)
		{
			for (idxCreateButtons = 0; idxCreateButtons < this.content.length; idxCreateButtons++)
			{
				// Create a div for the new button
				newimagebuttondiv = document.createElement('span');

				// Add imagebuttondiv to buttondiv
				buttondiv.appendChild( newimagebuttondiv );

				normaldivid = 'buttondivnormal_'+idxCreateButtons;
				activedivid = 'buttondivactive_'+idxCreateButtons;

				// These divs are created manualy because IE can't add events like this dynamicaly
				// and other browsers only can with a depricated function.
				// To stay browser-independant, resorted to this kind of "hack".
				divs = '<div id="'+normaldivid+'" >'+this.content[idxCreateButtons].imagetitle+'</div><div id="'+activedivid+'" onmouseover="onCrossButtonOver(event, \''+this.crossfadeid+'\', '+idxCreateButtons+')" onmouseout="onCrossButtonOut(event, \''+this.crossfadeid+'\', '+idxCreateButtons+')">'+this.content[idxCreateButtons].imagetitle+'</div>';
				newimagebuttondiv.innerHTML = divs;

				// Get normal div
				this.content[idxCreateButtons].buttondivnormal = document.getElementById( normaldivid );
				this.content[idxCreateButtons].buttondivnormal.style.position = 'absolute';
				this.content[idxCreateButtons].buttondivnormal.className = 'nocircle';
				//this.content[idxCreateButtons].buttondivnormal.style.width = buttonwidth+'px';

				// Get active div
				this.content[idxCreateButtons].buttondivactive = document.getElementById( activedivid );
				this.content[idxCreateButtons].buttondivactive.style.position = 'absolute';
				this.content[idxCreateButtons].buttondivactive.className = 'circle';
				//this.content[idxCreateButtons].buttondivactive.style.width = buttonwidth+'px';
				Utils.SetElementOpacity( this.content[idxCreateButtons].buttondivactive, 0 );
			}
		}
		else
		{
			alert( 'createButtons failed! element "'+this.buttondivname+'" not found' );
		}
	}
	else
	{
		alert( 'createButtons failed! buttondivname not found' );
	}

	if ((this.descriptiondivname) && (this.photodivname))
	{
		searchdiv = document.getElementById( this.photodivname );
		if (searchdiv)
		{
			// To be universal, we shouldn't use the searchdiv. (just search the whole document)
			descriptionelements = Utils.GetElementsByClass( this.descriptiondivname, searchdiv );
			for( idxElement=0; idxElement<descriptionelements.length && idxElement<this.content.length; idxElement++)
			{
				this.content[idxElement].descriptiondiv = descriptionelements[idxElement];
			}
		}
		else
		{
			alert( 'createButtons failed! element "'+this.searchdiv+'" not found' );
		}
	}
	else
	{
		alert( 'createButtons failed! descriptiondivname or photodivname not found' );
	}
}

Crossfade.prototype.onCrossFade = function()
{
	Log('onCrossFade');
	if (!this.active)
	{
		// Stop if we are not active
		this.setTimeout();
		return;
	}

	// Calculate next opacity
	stepsize = 100 / this.fadetime * this.stepinterval;

	for (idxFadeItem = 0; idxFadeItem < this.content.length; idxFadeItem++)
	{
		newOpacity = this.content[idxFadeItem].opacity;
		if (idxFadeItem == this.contentCounter)
		{
			newOpacity = newOpacity + stepsize;
		}
		else
		{
			newOpacity = newOpacity - stepsize;
			if (newOpacity < 0)
			{
				newOpacity = 0;
			}
		}

		// Set Opacity
		this.content[idxFadeItem].setOpacity( newOpacity );
	}

	// Done?
	if (this.content[this.contentCounter].opacity >= 100)
	{
		// Set all other items to 0
		for (idxFadeItem = 0; idxFadeItem < this.content.length; idxFadeItem++)
		{
			if (idxFadeItem != this.contentCounter)
			{
				// Set Opacity
				this.content[idxFadeItem].setOpacity( 0 );
			}
		}

		// Prepair for next image
		this.contentCounter++;
		if (this.contentCounter >= this.content.length)
		{
			this.contentCounter = 0;
		}

		if (!this.interrupted)
		{
			Log('Setting timeout('+this.staytime+') for id '+this.contentCounter);

			// Show content for xx seconds
			this.setTimeout('onCrossFade(\''+this.crossfadeid+'\');', this.staytime);
		}

		// Fade is done
		this.fadebusy = false;
	}
	else
	{
		// Fade is busy
		this.fadebusy = true;

		// Do next shade of opacity
		this.setTimeout('onCrossFade(\''+this.crossfadeid+'\');', this.stepinterval);	
	}
}

Crossfade.prototype.onCrossButtonOver = function( buttonid )
{
	Log('onCrossButtonOver('+buttonid+')');
	// This is the element which fired the event!
	// When mouse is over an image button, fade to that image
	this.interrupted = true;

	// Set to this element!
	this.contentCounter = buttonid;
	// Start fade!
	this.setTimeout('onCrossFade(\''+this.crossfadeid+'\');', this.stepinterval);
}

Crossfade.prototype.onCrossButtonOut = function( buttonid )
{
	Log('onCrossButtonOut('+buttonid+')');
	// When mouse leaves an image button, start timeout to continue normal loop
	this.interrupted = false;

	if (!this.fadebusy)
	{
		// Are there items to fade to
		if (this.content.length > 1)
		{
			// Show content for xx seconds
			this.setTimeout('onCrossFade(\''+this.crossfadeid+'\');', this.staytime);
		}
	}
}

Crossfade.prototype.onCrossImageOver = function()
{
	Log('onCrossImageOver');
	// This is the element which fired the event!
	// When mouse is over an image button, fade to that image
	this.interrupted = true;

	if (!this.fadebusy)
	{
		this.clearTimeout();
	}
}

Crossfade.prototype.onCrossImageOut = function()
{
	Log('onCrossImageOut');
	// When mouse leaves an image button, start timeout to continue normal loop
	this.interrupted = false;

	if (!this.fadebusy)
	{
		// Are there items to fade to
		if (this.content.length > 1)
		{
			// Show content for xx seconds
			this.setTimeout('onCrossFade(\''+this.crossfadeid+'\');', this.staytime);
		}
	}
}

Crossfade.prototype.setTimeout = function( statement, interval )
{
	if (this.timeoutid != -1)
	{
		clearTimeout( this.timeoutid );
	}
	this.timeoutid = setTimeout( statement, interval );
}

Crossfade.prototype.clearTimeout = function()
{
	if (this.timeoutid != -1)
	{
		clearTimeout( this.timeoutid );
	}
}


// Class CrossfadeImage
function CrossfadeImage( imagename, imagetitle )
{
	this.image = '<img alt="" src="' + imagename + '" >';
	this.imagetitle = imagetitle;
	this.buttondivnormal = null;
	this.buttondivactive = null;
	this.imagediv = null;
	this.descriptiondiv = null;
	this.opacity = 0;
}

CrossfadeImage.prototype.setOpacity = function( opacity )
{
	if (opacity < 0)
	{
		opacity = 0;
	}
	if (opacity > 100)
	{
		opacity = 100;
	}
	this.opacity = opacity;

	// Button
	Utils.SetElementOpacity( this.buttondivactive, opacity );
	// Image
	Utils.SetElementOpacity( this.imagediv, opacity );
	// Description
	Utils.SetElementOpacity( this.descriptiondiv, opacity );
}


// TEMP REMOVE PLOX
function Log( text )
{
	var logElement = document.getElementById('logdiv');
	if (logElement)
	{
		var logline = document.createElement('p');
		logline.innerHTML = text;
	
		// Add to logElement to top
		if (logElement.childNodes.length > 0)
		{
			logElement.insertBefore( logline, logElement.childNodes[0] )
		}
		else
		{
			logElement.appendChild( logline );
		}
	}
}