// http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften
// http://www.html-world.de/program/js_o_obj.php

function TFadingItem()
{
	this.containerID = '';
	this.imageID = '';
}

function TFading()
{
	//private
	var itemList = new Array();
	var direction = 0; //0 = source -> destination, 1 = destination -> source
	var opacity = 0;
	var sourceContainer = null;
	var sourceImage = null;
	var destinationContainer = null;
	var destinationImage = null;

	function setOpacity(element, percent)
	{
		//ie7, ie6
		if (document.all && window.showModalDialog)
		{
			element.style.filter = 'alpha(opacity='+percent+');'; 
		} else

		//opera, mozilla
		{
			element.style.opacity = percent / 100;
		}
	}

	function getOpacity(element)
	{
		var result = 0;

		//ie7, ie6
		if (window.showModalDialog) 
		{
			var m = (element.style.filter).match(/opacity=([0123456789\.\,]*)/i);

			result = (m && m.length > 1?m[1]:result);
		} else

		//opera, mozilla
		{
			result = parseFloat(element.style.opacity)*100;
		}		

		return parseInt(result);		
	}

	//public
	this.delay = 0; //delay between fading in milliseconds
	this.smoothness = 1; //the higher the less the fading smoothness
	this.speed = 25; //the higher the slower the fading
	this.source = new TFadingItem(); 
	this.destination = new TFadingItem(); 
	this.variableName = '';
	this.itemIndex = 0;

	this.itemCount = function()
	{
		return itemList.length;	
	}

	this.add = function(pictureLocation)
	{
		itemList.push(pictureLocation);	
	}

	this.fade = function()
	{
		var delayed = false;

		if (direction == 0)
		{
			sourceContainer.style.zIndex = 1;
			destinationContainer.style.zIndex = 2;

			if (destinationImage.complete)
			{
				setOpacity(destinationImage, opacity);
				opacity += this.smoothness;

				if (opacity > 100)
				{
					opacity = 100;
					direction = 1;
					delayed = true;
				}
			}
		}
		else
		{
			if (sourceImage.complete)
			{
				setOpacity(sourceImage, 100-opacity);
				opacity -= this.smoothness;

				sourceContainer.style.zIndex = 2;
				destinationContainer.style.zIndex = 1;

				if (opacity < 0)
				{
					opacity = 0;
					direction = 0;				
					delayed = true;
				}			
			}
		}

		if (delayed)
		{
			this.itemIndex++;
			if (this.itemIndex > itemList.length-1) { this.itemIndex = 0; };
			document.getElementById((direction==0?this.destination.imageID:this.source.imageID)).src = itemList[this.itemIndex];

			window.setTimeout(this.variableName+'.fade()', this.delay);
		}
		else
		{
			window.setTimeout(this.variableName+'.fade()', this.speed);
		}
	}

	this.begin = function()
	{
		sourceContainer = document.getElementById(this.source.containerID);
		sourceImage = document.getElementById(this.source.imageID);
		destinationContainer = document.getElementById(this.destination.containerID);
		destinationImage = document.getElementById(this.destination.imageID);

		if (sourceImage) { sourceImage.src = itemList[this.itemIndex]; }

		if (destinationImage) 
		{ 
			destinationImage.src = itemList[(this.itemIndex+1 > itemList.length-1?0:this.itemIndex+1)];
			setOpacity(destinationImage, 50);
		}
		
		this.itemIndex++;

		window.setTimeout(this.variableName+'.fade()', this.delay);
	}
}