var currentTop;
var theImage;
var theTimer;
var nextImage;
var fadeInOpacity;
var arrayOfImages;

var timeBetweenChanges = 7000;
var amountPerFade = 8;
var timeBetweenAnims = 50;

function initPage(){
	arrayOfImages = new Array();
	
	currentTop = nextImage = 1;	
	fadeInOpacity = 0;
	
	theTimer = new Date();
	
	loadNextImage();
}

function addEvent(elm, evType, fn, useCapture){
	if(elm.addEventListener){
		elm.addEventListener(evType, fn, useCapture);
		return true;
	}
	else if (elm.attachEvent){
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	}
	else{
		elm['on' + evType] = fn;
	}
}

addEvent(window, 'load', initPage, false);

function loadNextImage()
{
	// let's see if we've already loaded that image or not
	if(theImages[nextImage] in arrayOfImages)
	{
		// already got it
		imageLoaded();
	}
	else
	{
		// we haven't loaded this one yet
		arrayOfImages[theImages[nextImage]] = true;
		theImage = new Image();
		addEvent(theImage,'load',imageLoaded,false);
		theImage.src = theImages[nextImage];
	}
}

function imageLoaded()
{
	// put the new image in the hidden image field
	imageToChange = currentTop++ == 1 ? "image2" : "image1";
	if(currentTop > 2)currentTop = 1;
	
	document.getElementById("image1").style.zIndex = currentTop == 1 ? 2 : 1;
	document.getElementById("image2").style.zIndex = currentTop == 2 ? 2 : 1;
	
	document.getElementById(imageToChange).src = theImages[nextImage];
	
	t = new Date();
	
	tm = t - theTimer;
	
	if(tm >= timeBetweenChanges)
	{
		fadeImagesUp();
	}
	else
	{
		tm = timeBetweenChanges - tm;
			
		setTimeout("fadeImagesUp()",tm);
	}
}

function fadeImagesUp()
{
	fadeInOpacity+=amountPerFade;
	if(fadeInOpacity>100)
		fadeInOpacity = 100;
		
	t = currentTop == 1 ? "image1" : "image2";
	b = currentTop == 1 ? "image2" : "image1";
	
	setOpacity(t,fadeInOpacity);
	setOpacity(b,100-fadeInOpacity);
	
	if(fadeInOpacity == 100)
	{
		fadeInOpacity = 0;
		nextImage++;
		if(nextImage >= theImages.length)
			nextImage = 0;
		theTimer = new Date();
		loadNextImage();
	}
	else
	{
		setTimeout("fadeImagesUp()",timeBetweenAnims);
	}
}

function setOpacity(layer,op)
{
	// op is from 0 to 100
	ops = Math.round(op/10) / 10;
	document.getElementById(layer).style.opacity = ops;
	document.getElementById(layer).style.filter = "alpha(opacity="+op+")";
}