/** 
* @author   $Author: martijn $
* @revision $Revision: 2 $
* @date     $Date: 2009-02-11 15:58:55 +0100 (Wed, 11 Feb 2009) $
*
* this fotofader class can be used to fade images in and out
* it works with a div and an image inside it.
* - the div this.as the back and has a image as background, from now on called : back
* - the image in it works like the front, from now on called : front
*
* the back never fades in or out, only the front fades in and out.
* when the front is 100% visible, the back is not visible (because the front is overlapping it), thus the back image can be changed without notice 
* other way around, when the front is 0% visible (thus hidden), the back is shown and the front can be changed without notice
*/


/**
* fotoFader class
*/
fotoFader = function()
{
	
	// This is a workaround for an error in the ECMAScript Language Specification which causes this to be set incorrectly for inner functions.
	var self = this;

	this.fotoFaderBack        = 'header_image';  // todo make this configurable/settable 
	this.fotoFaderFront       = 'fotoFaderFront'; // todo make this configurable/settable
	this.imageToDisplay;                          // the current image that should be displayed
	this.imageAlpha;                              // the alpha/opacity 0-100 for the fading front
	this.imageCollection;                         // the images to fade
	this.imageCollectionSize;                     // the number of total images to fade
	this.imageToDisplay       = 0;                // holds the image to fade in/out. the initial displayed image is 0
	this.imageAlpha           = 100;              // the initial alhpa value of initial image
	this.displayTime          = 10000;             // nr of millisecs that a image is displayed before fading. todo make this publicaly configurable/settable
	this.fadeSpeed            = 50;               // the smaller the faster the fading. todo make this publicaly configurable/settable

	
	/**
	* Sets the image collection to fade in/out
	*/
	this.setImages = function(images)
	{
		//alert('setImages(' + images + ')');
		
		this.imageCollection     = images;
		this.imageCollectionSize = this.imageCollection.length;
	}
	
	/**
	* Does some inital testing and setting up
	*/
	this.initFotoFader = function()
	{
		//alert('initFotoFader()');
		//alert(this.imageCollectionSize);
		
		
		// are there more then 1 image?
		if(this.imageCollectionSize <= 1) 
		{
			// no, there is just 1 image, don't do anything
			return;
		}
		
		// there is more then 1 image, assume there already is a front image, so start with fading out		
		// start with fading in, but because the front alpha already is 100, 
		// a new back will be loaded and fading the front out will start after display time
		fotoFader.fadeInFront();
	
	}
	
	/**
	* Sets the back, background image expect urls without spaces
	*/
	this.setBack = function(backImageUrl)
	{
		//alert('setBack(' + backImageUrl + ')');
		
		document.getElementById(this.fotoFaderBack).style.backgroundImage = 'url(' + backImageUrl + ')';
	}
	
	/**
	* Set the front, front image
	*/
	this.setFront = function (frontImageUrl)
	{
		//alert('setFront(' + frontImageUrl + ')');
		
		// set a nwe background image into the front
		document.getElementById(this.fotoFaderFront).src = frontImageUrl;
	}
	
	
	/**
	* Handles the fading in of the front (from 0 to 100%)
	* Sets a new back image and starts the fading out (again)
	*/
	this.fadeInFront = function() 
	{
		//alert('fadeInFront()')
		
		// increase the alpha of the front image
		this.imageAlpha += 5;
		this.setFrontOpacity(this.imageAlpha);
		
		if(this.imageAlpha >= 100)
		{
			// when fading in is 100% done, load the next photo into the back
		
			// increment the image to display
			this.imageToDisplay++;
			//alert('fadeInFront, displayed image : ' + this.imageToDisplay);
			if(this.imageToDisplay >= this.imageCollectionSize) 
			{
				// when there is no more next image restart
				this.imageToDisplay = 0;
			}
			
			this.setBack(this.imageCollection[this.imageToDisplay])
			
			// start fading out the front after dipslay time
			setTimeout( function() { fotoFader.fadeOutFront(); }, this.displayTime);
			
		}
		else
		{
			// continue fading in
			setTimeout( function() { fotoFader.fadeInFront(); }, this.fadeSpeed);
			
		}
	}
	
	/**
	* Handles the fading out of the front image (from 100 to 0)
	* Sets a new front image and starts the fading in (again)
	*/
	this.fadeOutFront = function()
	{
		//alert('fadeOutFront()');
		
		// decrease the alpha for the front image
		this.imageAlpha -= 5;
		this.setFrontOpacity(this.imageAlpha);
		
		if(this.imageAlpha <= 0)
		{
			// when the front image is invisible, set a new front image
			
			// increment image to display
			this.imageToDisplay++;
			//alert('fadeOutFront, displayed image : ' + this.imageToDisplay);
			if(this.imageToDisplay >= this.imageCollectionSize) 
			{
				// when there is no more next image restart
				this.imageToDisplay = 0;
			}
	
			// set the next image into the front
			this.setFront(this.imageCollection[this.imageToDisplay]);
			
			// start fading in after display time
			setTimeout( function() { fotoFader.fadeInFront(); }, this.displayTime);
		}
		else
		{
			// continue fading out
			setTimeout( function() { fotoFader.fadeOutFront() }, this.fadeSpeed);
		}
	}
	
	/**
	* Sets the opacity of the front
	*/
	this.setFrontOpacity = function(iAlpha)
	{
		//alert('setFrontOpacity(' + iAlpha + ')');
		
		oObject = document.getElementById(this.fotoFaderFront);
		oObject.style.filter = 'alpha(opacity = ' + iAlpha + ')'; // for IE
		oObject.style.MozOpacity = (iAlpha / 100);                // for firefox
		oObject.style.opacity = (iAlpha / 100);                   // for opera
		
	}

}