// 'Constants'
var FADE_TIME           = 500;
var TIMER_INTERVAL      = 25;
var STATE_FADING        = 1;
var STATE_FADED         = 2;
var STATE_WAITING       = 3;
var STATE_STILL_WAITING = 4;
var STATE_RESTORING     = 5;
var STATE_RESTORED      = 6;

// Globals
var curState = STATE_RESTORED ;
var imageId;
var toUrl;
var fadeStart;
var curOpacity;
var nextUrl = 1;

// Control fading an image in and out.  imageID is the ID of the image.  toUrl is the location of the image we are fading to
function transition ( fromId, targetUrl, nextUrl, isFirstImage )
{
//displayImageNext();
//return;
	// Are we already fading an image?
	if ( curState != STATE_RESTORED )
	{
		// For now, do nothing.  May want to do something a bit smarter in the future
		return ;
	}

	// Set initial state
	imageId    = fromId;
	toUrl      = targetUrl;
	curState   = STATE_FADING;

	// If this is the first image, then don't bother fading out the previous one
	if ( isFirstImage )
	{

		curOpacity = 0 ;
	}
	else
	{
		curOpacity = 100 ;
	}

	// Start the target loading in the background, and also start off the next image
	preLoadImage ( targetUrl );
	preLoadImage ( nextUrl );
	
	// Determine how long fade will run for, and record the current time
	fadeStart = new Date().getTime();

	// Start the timer
	setTimeout ( "fadeImage ();", TIMER_INTERVAL );
}

function preLoadImage ( url )
{
	var hidenUrl;

	hiddenUrl = "hiddenImage" + nextUrl;
	nextUrl = ( nextUrl % 3 ) + 1;

	var hiddenImg = document.getElementById ( hiddenUrl );
	hiddenImg.src = url ;
	hiddenImg.style.visibility = "hidden"; 
}

// Timer function to fade the image in and out
function fadeImage ()
{
	// Determine the fraction be which the opacity of the image should be changed
	var fadeAmount = (TIMER_INTERVAL / FADE_TIME) * 100 ;

	// Find out how far we've got
	var curTime = new Date().getTime();

	switch ( curState )
	{
		case STATE_FADING:
		// Set new opacity, fading further each time
		curOpacity = curOpacity - fadeAmount ;
		if ( curOpacity <= 0 )
		{
			// Image should have (nearly) disappeared, so move to next state
			curOpacity = 0;
			curState   = STATE_FADED;
		}
		setOpacity();
		break ;

		case STATE_FADED:
		// Set the image to the new one, and move to next state
		imageId = displayImageNext();
		setOpacity();
		imageId.style.visibility = "visible";

		curState = STATE_WAITING;
		break;

		case STATE_WAITING:
		if ( isImageLoaded() )
		{
			// Image loaded succesfully - we can now start making it visible
			curState = STATE_RESTORING;
		}
		else
		{
			// Not loaded, show hourglass
			displayHourglass( "visible" );
			curState = STATE_STILL_WAITING;
		}
		break;
	
		case STATE_STILL_WAITING:
		if ( isImageLoaded() )
		{
			// Image loaded succesfully - we can now start making it visible
			curState = STATE_RESTORING;
			// Hide Hourglass
			displayHourglass( "hidden" );
		}
		break;

		case STATE_RESTORING:
		// Set new opacity, restoring further each time
		curOpacity = curOpacity + fadeAmount ;
		if ( curOpacity >= 100 )
		{
			// Image should have (nearly) disappeared, so move to next state
			curOpacity = 100;
			curState   = STATE_RESTORED;
		}
		setOpacity();
		break;

		case STATE_RESTORED:
		// Nothing further to do
		return;
		break;

		default:
		Alert ( "Unknown fade state" );
		curState = STATE_RESTORED;
		return;
		break;
	}

	// Start the timer again
	setTimeout ( "fadeImage ();", TIMER_INTERVAL );
}

// Control the opacity of the image
function setOpacity()
{
	// As usual, different browsers do things differently.  The first line is for IE, the second line is for everyone else
	imageId.style.filter = 'alpha(opacity = ' + curOpacity + ')';
	imageId.style.opacity = curOpacity / 100;
}

// Determine if an image is loaded or not.  
function isImageLoaded()
{
	// Again, different browsers do it differently.  IE has a property to let you know the image is loaded
	if ( imageId.complete )
	{
		return true;
	}

	// Others don't, but naturalWidth shouldn't be set until the image is loaded
	if (typeof (imageId.naturalWidth) != "undefined" && imageId.naturalWidth > 0) 
	{
		return true;
	}

	// not loaded yet
	return false;
}

// Show or hde the hour glass
function displayHourglass( visible )
{
	document.getElementById ( "hourGlassDiv" ).style.visibility = visible;
}