// global variables
var statusfirst = true;
var statussecond = false;
var statusthird = false;
var currentImage;

function initImages()
{
	// do nothing to image first
	// fade out image second and image third
	outsecond.start();
	outthird.start();
	
	currentImage = "statusfirst";
	// finish initialising the images
	return true;
}

function fadeInImage(rowID)
{
	if ( rowID == "first" )
	{
		// let's see what currentImage is, because this tells us where it comes from
		if ( currentImage == "statusfirst" )
		{
			// do nothing
			return;
		}
		else if ( currentImage == "statussecond" )
		{
			if ( statussecond )
			{
				statussecond = false; // set to false
				outsecond.start(); // fade out second
				
				infirst.start(); // fade in first
				// do nothing to third
				
				currentImage = "statusfirst";
				statusfirst = true;
				return;
			}
		}
		else if ( currentImage == "statusthird" )
		{
			if ( statusthird )
			{
				statusthird = false; // set to false
				outthird.start(); // fade out third
				
				infirst.start(); // fade in first
				// do nothing to second
				
				currentImage = "statusfirst";
				statusfirst = true;
				return;
			}
		}
	}
	else if ( rowID == "second" )
	{
		// let's see what currentImage is, because this tells us where it comes from
		if ( currentImage == "statusfirst" )
		{
			if ( statusfirst )
			{
				statusfirst = false; // set to false
				outfirst.start(); // fade out first
				
				insecond.start(); // fade in second
				// do nothing to third
				
				currentImage = "statussecond";
				statussecond = true;
				//alert(currentImage);
				return;
			}
		}
		else if ( currentImage == "statussecond" )
		{
			// do nothing
			return;
		}
		else if ( currentImage == "statusthird" )
		{
			if ( statusthird )
			{
				statusthird = false; // set to false
				outthird.start(); // fade out third
				
				insecond.start(); // fade in second
				// do nothing to first
				
				currentImage = "statussecond";
				statussecond = true;
				return;
			}
		}
	}
	else if ( rowID == "third" )
	{
		// let's see what currentImage is, because this tells us where it comes from
		if ( currentImage == "statusfirst" )
		{
			if ( statusfirst )
			{
				statusfirst = false; // set to false
				outfirst.start(); // fade out first
				
				inthird.start(); // fade in third
				// do nothing to second
				
				currentImage = "statusthird";
				statusthird = true;
				//alert(currentImage);
				return;
			}
		}
		else if ( currentImage == "statussecond" )
		{
			if ( statussecond )
			{
				statussecond = false; // set to false
				outsecond.start(); // fade out second
				
				inthird.start(); // fade in third
				// do nothing to first
				
				currentImage = "statusthird";
				statusthird = true;
				return;
			}
		}
		else if ( currentImage == "statusthird" )
		{
			// do nothing
			return;
		}
	}
	
	return false;
}

function fadeOutImage(rowID)
{

	var posx = 0;
	var posy = 0;
	var e;
	var isOpera = (navigator.userAgent.indexOf('Opera') != -1);
	var isIE = (!isOpera && navigator.userAgent.indexOf('MSIE') != -1);
	
	if (!e) { e = window.event; }
	if (e.pageX || e.pageY)
	{
		posx = e.pageX;
		posy = e.pageY;
	}
	else if (e.clientX || e.clientY)
	{
		posx = e.clientX;
		posy = e.clientY;
		if (isIE)
		{
			posx += document.body.scrollLeft;
			posy += document.body.scrollTop;
		}
	}
	// posx and posy contain the mouse position relative to the document
	// Do something with this information

	//alert("posx: " + posx + "\n\nposy: " + posy);
	// moving in right direction ----->
	
	if ( (posx >= 893 && posx <= 992) && (posy >= 283 && posy <= 524 ) ) // must be div called second
	{
		if ( currentImage == "statusfirst" )
		{
			fadeInImage("first");
		}
		else if ( currentImage == "statusthird" )
		{
			fadeInImage("third");
		}
		// do nothing to statussecond
	}
	else if ( (posx >= 993 && posx <= 1091) && (posy >= 283 && posy <= 524 ) ) // must be div called third
	{
		if ( currentImage == "statussecond" )
		{
			fadeInImage("second");
		}
		else if ( currentImage == "statusthird" )
		{
			fadeInImage("third");
		}
		// do nothing to statusfirst
	}
	
	// <----- moving in left direction
	if ( (posx >= 392 && posx <= 492) && (posy >= 283 && posy <= 524 ) ) // must be div called first
	{
		if ( currentImage == "statusfirst" )
		{
			fadeInImage("first");
		}
		else if ( currentImage == "statussecond" )
		{
			fadeInImage("second");
		}
		// do nothing to statusthird
	}
	else if ( (posx >= 494 && posx <= 592) && (posy >= 0 && posy <= 240 ) ) // must be div called second
	{
		if ( currentImage == "statussecond" )
		{
			fadeInImage("second");
		}
		else if ( currentImage == "statusthird" )
		{
			fadeInImage("third");
		}
		// do nothing to statusthird
	}

	return false;
}