/**
 * This file oversees the image opacity fades and random selection for the
 * splash page.
 *
 * There are 2 containers.  Each hold a different image and only one is visible
 * at a time.  This is done so the images and be preloaded before being shown.
 * Otherwise, there may be a lag sometimes in the image switch and the fades
 * look tacky and off.
 */
 
var containers = new Array();		// img elements that hold splash image
var currentContainerIndex = 0;
var fading;							// track whether the current image is fading
var opacity = 0;					// tracks opacity value
var opacityChangeInterval = 100;	// how often opacity changes in ms
var splashImages = new Array();		// store splash page images
var cycleOptions = new Array();		// copy of splashImages to cycle through
var fadeTimer;						// handler for fade interval timer
var waitTimer;						// handler for waiting timer

// Add a new splash image to the collection
function addSplashImage(imagePath, creditText)
{
	var count = splashImages.length;
	splashImages[count] = new Object();
	splashImages[count].src = imagePath;
	splashImages[count].credit = creditText;
}

// Cycle splash images and fade them
function cycleSplashImages(containerId1, containerId2)
{
	containers[0] = new Object();
	containers[0].container = document.getElementById(containerId1);
	containers[0].image = document.getElementById(containerId1 + '_img');
	
	containers[1] = new Object();
	containers[1].container = document.getElementById(containerId2);
	containers[1].image = document.getElementById(containerId2 + '_img');
	
	// center image for IE */
	if (navigator.appName == 'Microsoft Internet Explorer')
	{
		containers[0].container.style.width = '800px';
		containers[0].container.style.left = '50%';
		containers[0].container.style.marginLeft = '-400px';
		containers[1].container.style.width = '800px';
		containers[1].container.style.left = '50%';
		containers[1].container.style.marginLeft = '-400px';
	}
	changeSplashImage();
	fading = false;
	
	fadeTimer = setInterval('fadeSplashImage()', opacityChangeInterval);
}

// Choose a new splash image to show
function changeSplashImage()
{
	if (cycleOptions.length == 0)
	{
		resetSplashImageCycle();
	}
	
	// if images have not been loaded at all, prime both
	var curImage;
	if (containers[currentContainerIndex].container.src == "")
	{
		curImage = getNextSplashImage();
		containers[currentContainerIndex].image.src = curImage.src;
		containers[currentContainerIndex].credit = curImage.credit;
		
		curImage = getNextSplashImage();
		containers[(currentContainerIndex+1)%2].image.src = curImage.src;
		containers[(currentContainerIndex+1)%2].credit = curImage.credit;
	}
	// otherwise prime only one image since the other container has one already
	else
	{
		containers[currentContainerIndex].image.src = containers[(currentContainerIndex+1)%2].image.src;
		curImage = getNextSplashImage();
		containers[(currentContainerIndex+1)%2].image.src = curImage.src;
		containers[(currentContainerIndex+1)%2].credit = curImage.credit;
	}
	
	switchContainers();
}

// Get an image from the current cycle
function getNextSplashImage()
{
	var imageIndex = Math.floor(Math.random()*cycleOptions.length);
	var imagePath = cycleOptions[imageIndex];
	cycleOptions.splice(imageIndex, 1);	// remove selection from candidates
	return imagePath;
}

// Switches the current container
function switchContainers()
{
	containers[currentContainerIndex].container.style.display = 'none';
	
	if (navigator.appName == 'Microsoft Internet Explorer')
	{
		opacity = 0;
		containers[(currentContainerIndex+1)%2].image.filters.alpha.opacity = opacity;
	}
	else
	{
		opacity = 0.0;
		containers[(currentContainerIndex+1)%2].image.style.MozOpacity = opacity;
	}
	document.getElementById('credits').innerHTML = containers[(currentContainerIndex+1)%2].credit;
	containers[(currentContainerIndex+1)%2].container.style.display = 'block';
	currentContainerIndex = (currentContainerIndex+1)%2;
}

// Replenishes list of images to cycle through
function resetSplashImageCycle()
{
	cycleOptions = new Array();
	var i;
	for (i=0; i<splashImages.length; i++)
	{
		cycleOptions[i] = splashImages[i];
	}
}

// Alters opacity of the current image and changes current splash image.
function fadeSplashImage()
{
	if (fading == true)
	{
		if (navigator.appName == 'Microsoft Internet Explorer')
		{
			opacity = opacity - 5;
			containers[currentContainerIndex].image.filters.alpha.opacity = opacity;
		}
		else
		{
			opacity = opacity - 0.05;
			containers[currentContainerIndex].image.style.opacity = opacity;
		}
		if (opacity <= 0)
		{
			changeSplashImage();
			fading = false;
		}
	}
	else
	{
		if (navigator.appName == 'Microsoft Internet Explorer')
		{
			opacity += 5;
			containers[currentContainerIndex].image.filters.alpha.opacity = opacity;
			if (opacity >= 100)
			{
				fading = true;
			}
		}
		else
		{
			opacity += 0.05
			containers[currentContainerIndex].image.style.opacity = opacity;
			if (opacity >= 1.0)
			{
				fading = true;
			}
		}
	}
}