var tickLoop = 0;
var intervalId;

var currentImage = 0;

//Array of image file paths
var imageList = new Array();

//Array of images
var imageArray = new Array();

function RotateImages()
{
	//Buffer image array
	for (i = 0; i < imageList.length; i++)
	{
		imageArray[i] = new Image();
		imageArray[i].src = imageList[i];
	}

	//Minimum of 2 images must be in the array to transition properly
	if(i > 1)
	{
		setInterval("ImageTransition()", 4000);
	}
}

function ImageTransition()
{
	//It is assumed that the first image on display is in array position 0, so skip
	currentImage++;
	if(currentImage == imageList.length)
	{
		currentImage = 0;
	}

	//Set the background to the new image
	document.getElementById('ImageTransitionBackground').style.backgroundImage = "url(" + imageList[currentImage] + ")";

	//Begin the transition
	OpacityTransition("ImageTransitionForeground", 0.00, 500);
}

function OpacityTransition(elementId, newOpacity, transitionTime)
{
	var targetTick = 30;
	//Desired tick time, the tick time calculation will use this number to calculate a tick time as close as possible

	var currentOpacity = document.getElementById(elementId).style.opacity * 100;
	//Mozilla uses the CSS3 opacity value directly, IE uses the filter value to create opacity effects but will still store and report from the opacity value. This will be converted to a 0-100 scale for calculation purposes within the function

	var tickCount = Math.round(transitionTime / targetTick);
	//Calculated even number of ticks, rounding the desired transition time over the desired tick time

	var tick = transitionTime / tickCount;
	//Calculated single tick duration

	var opacityStep = (currentOpacity - (newOpacity * 100)) / tickCount;
	//Calculated change in opacity per tick

	tickLoop = tickCount;
	//Set the loop counter to the number of ticks to process

	intervalId = setInterval("SetNewOpacity('"+elementId+"', "+opacityStep+", "+newOpacity+")", tick);
	//Initiate the SetNewOpacity loop
}

function UpdateImageView()
{
	document.getElementById('ImageTransitionImg').src = imageArray[currentImage].src;
	document.getElementById('ImageTransitionForeground').style.filter = "alpha(opacity=100)";

	//Opacity set to 0.99 to avoid flickering bug in Firefox
	document.getElementById('ImageTransitionForeground').style.opacity = 0.99;
}

function SetNewOpacity(elementId, opacityStep, finalOpacity)
{
	tickLoop--;

	if(tickLoop == 0)
	{
		//Set the final value for opacity

		document.getElementById(elementId).style.filter = "alpha(opacity=" + (parseFloat(finalOpacity) * 100) + ")";
		//IE filter value
		document.getElementById(elementId).style.opacity = finalOpacity;
		//CSS3 opacity value

		//Set the forground to the new image and set opacity to 1.0/100
		UpdateImageView();

		clearInterval(intervalId);
	}
	else
	{
		//adjust the opacity by the value of one step

		document.getElementById(elementId).style.filter = "alpha(opacity=" + (parseFloat(document.getElementById(elementId).style.opacity * 100) - parseFloat(opacityStep)) + ")";
		//IE filter value
		document.getElementById(elementId).style.opacity = parseFloat(document.getElementById(elementId).style.opacity) - parseFloat(opacityStep/100);
		//CSS3 opacity value
	}
}