var pImages = new Array();		// An array of all the images added
var pfOpacity = new Array();		// An array of the opacity for each image
					// This is needed because dObject.style.opacity is based on the stylesheet	
	
var nImageCount = 0;			// Total number of images
var nCurrImage = 0;			// The currently fading out image
var nNextImage = 0;			// The currently fading in image

var nImageSwitchDelay = 3000;		// The number of milliseconds to wait before swapping the image.
var fOpacityPerFrame = 0.05;		// The amount to change the opacity per animation frame. 0.1 would be 10% per frame
var fAnimationRate = 22;		// The speed in milliseconds to animate each frame. 33 is 30 FPS


var dImageRotator;			// Document object references

function AddImage(szFileName)
{
	pImages[nImageCount] = document.createElement("img");
	pImages[nImageCount].src = szFileName;
	pfOpacity[nImageCount] = 0.0;
	dImageRotator.appendChild(pImages[nImageCount]);
	nImageCount++;
}

function RotateImages()
{
	if(nImageCount >= 2)
	{
		nCurrImage = nNextImage;
		nNextImage++;
		if(nNextImage >= nImageCount)
		{
			nNextImage = 0;
		}
		pfOpacity[nCurrImage] = 1.0;
		pImages[nCurrImage].style.opacity = pfOpacity[nCurrImage];
		AnimateImages();
	}
}

function AnimateImages()
{
	var bProceed = false;	// Should we rotate again?
	
	pfOpacity[nCurrImage] -= fOpacityPerFrame;
	pfOpacity[nNextImage] += fOpacityPerFrame;
	
	if(pfOpacity[nCurrImage] <= 0.0)
	{
		pfOpacity[nCurrImage] = 0.0;
		bProceed = true;
	}
	if(pfOpacity[nNextImage] >= 1.0)
	{
		pfOpacity[nNextImage] = 1.0;
		bProceed = true;
}		
	
	pImages[nCurrImage].style.opacity = pfOpacity[nCurrImage];
	pImages[nCurrImage].style.filter = "alpha(opacity=" + (pfOpacity[nCurrImage] * 100) + ")";
	pImages[nNextImage].style.opacity = pfOpacity[nNextImage];
	pImages[nNextImage].style.filter = "alpha(opacity=" + (pfOpacity[nNextImage] * 100) + ")";
	
	if(bProceed)
	{
		setTimeout("RotateImages()", nImageSwitchDelay);
	}
	else
	{
		setTimeout("AnimateImages()", fAnimationRate);
	}
}

function Init()
{
	dImageRotator = document.getElementById("dImageRotator");
	AddImage("images/mtl-internal-1.jpg");
	AddImage("images/mtl-internal-2.jpg");
	RotateImages();
}