/*
Set an onload event in the body tag of the document such as seen below.
***************************
	<body onload="timerStart();">
***************************
 
Create a div tag with the ID set to 'imageMaster' and a style attribute of 'position: relative'.
The imgaes will be written inside this div tag.
***************************
	<div id="imageMaster" style="position: relative;"></div>
***************************

Create an array named imageArray and fill the array with images like the example below.
***************************
	var imageArray = new Array();
	var count = 0;
	imageArray[count++] = "images/image1.jpg";
	imageArray[count++] = "images/image2.jpg";
	imageArray[count++] = "images/image3.jpg";
***************************

Include this JS file at the bottom of your file and ythe images fade in and out.	
*/

//Preload images in array
if(imageArray)
{	
	imageObj = new Array();
	
	for(x = 0; x < imageArray.length; x++)
	{
		imageObj[x] = new Image();
		imageObj[x].src = imageArray[x][0];
	}
}

var timerCount = -1;
var rotationNumber = 0;
var mainTimer

//Strat counting down till next image fades in
function timerStart()
{
	//Check to make sure more than one image exsist in the array if only one image just write out single image.
	if(imageArray.length >= 2)
	{
		if(timerCount != 5)
		{
			mainTimer = setTimeout("timerStart()",1000);
			timerCount = timerCount + 1;
			if(imageArray[rotationNumber])
			{
				if(imageArray[rotationNumber][2] == "new_win")
				{ document.getElementById("imageMaster").innerHTML = "<div style=\"position: relative; top: 0px; left: 0px;\"><a href=\"" + imageArray[rotationNumber][1] + "\" target=\"_blank\" onclick=\"window.open(this.href,'_blank','width=790,height=590,scrollbars'); return false;\"><img src=\"" + imageArray[rotationNumber][0] + "\" id=\"picToShowCurrent\"></a></div>"; }
				else
				{ document.getElementById("imageMaster").innerHTML = "<div style=\"position: relative; top: 0px; left: 0px;\"><a href=\"" + imageArray[rotationNumber][1] + "\"><img src=\"" + imageArray[rotationNumber][0] + "\" id=\"picToShowCurrent\"></a></div>"; }
			}
			else
			{ rotationNumber = 0; }
		}
		else
		{	
			timerCount = 0;
			rotationNumber = rotationNumber + 1;
			if(navigator.userAgent.indexOf("MSIE") != -1)
			{
				if(imageArray[rotationNumber])
				{
					if(navigator.userAgent.indexOf("7.0") == -1)
					{ document.getElementById("imageMaster").innerHTML = document.getElementById("imageMaster").innerHTML + "<div style=\"position: absolute; top: 0px; left: 0px;\"><img src=\"" + imageArray[rotationNumber][0] + "\" id=\"picToShowNew\"  style=\"filter: alpha(opacity=0);\"></div>"; }
					else
					{ document.getElementById("imageMaster").innerHTML = document.getElementById("imageMaster").innerHTML + "<div style=\"position: absolute; top: 0px; left: 12px;\"><img src=\"" + imageArray[rotationNumber][0] + "\" id=\"picToShowNew\"  style=\"filter: alpha(opacity=0);\"></div>"; }
					fadeImage()
				}
				else
				{
					rotationNumber = 0;
					if(navigator.userAgent.indexOf("7.0") == -1)
					{ document.getElementById("imageMaster").innerHTML = document.getElementById("imageMaster").innerHTML + "<div style=\"position: absolute; top: 0px; left: 0px;\"><img src=\"" + imageArray[rotationNumber][0] + "\" id=\"picToShowNew\"  style=\"filter: alpha(opacity=0);\"></div>"; }
					else
					{ document.getElementById("imageMaster").innerHTML = document.getElementById("imageMaster").innerHTML + "<div style=\"position: absolute; top: 0px; left: 12px;\"><img src=\"" + imageArray[rotationNumber][0] + "\" id=\"picToShowNew\"  style=\"filter: alpha(opacity=0);\"></div>"; }
					fadeImage()
				}
			}
			else
			{
				if(imageArray[rotationNumber])
				{
					document.getElementById("imageMaster").innerHTML = document.getElementById("imageMaster").innerHTML + "<div style=\"position: absolute; top: 0px; left: 12px;\"><img src=\"" + imageArray[rotationNumber][0] + "\" id=\"picToShowNew\"  style=\"-moz-opacity: .0; opacity: .0;\"></div>";
					fadeImage()
				}
				else
				{
					rotationNumber = 0;
					document.getElementById("imageMaster").innerHTML = document.getElementById("imageMaster").innerHTML + "<div style=\"position: absolute; top: 0px; left: 12px;\"><img src=\"" + imageArray[rotationNumber][0] + "\" id=\"picToShowNew\"  style=\"-moz-opacity: .0; opacity: .0;\"></div>";
					fadeImage()
				}
			}
		}
	}
	else
	{ document.getElementById("imageMaster").innerHTML = "<div style=\"position: relative; top: 0px; left: 0px;\"><a href=\"" + imageArray[rotationNumber][1] + "\"><img src=\"" + imageArray[rotationNumber][0] + "\" id=\"picToShowCurrent\"></a></div>"; }
}

var fadeUp = 0;
var fadeOut = 100;
var subTimer;

//Used to fade out the image showing and fade in the image next in the array.
function fadeImage()
{
	if(navigator.userAgent.indexOf("MSIE") != -1)
	{
		if(document.getElementById("picToShowNew").style.filter != "alpha(opacity=100)")
		{
			document.getElementById("picToShowNew").style.filter = 'alpha(opacity=' + fadeUp + ')'
			fadeUp = fadeUp + 1;
		
			document.getElementById("picToShowCurrent").style.filter = 'alpha(opacity=' + fadeOut + ')'
			fadeOut = fadeOut - 1;
		
			subTimer = setTimeout("fadeImage()",15);
		}
		else
		{
			mainTimer = setTimeout("timerStart()",1000);
			fadeUp = 0;
			fadeOut = 100;
		}
	}
	else
	{
		if(document.getElementById("picToShowNew").style.opacity != 1)
		{
			document.getElementById("picToShowNew").style.opacity = fadeUp/100;
			fadeUp = fadeUp + 1;
		
			document.getElementById("picToShowCurrent").style.opacity = fadeOut/100;
			fadeOut = fadeOut - 1;
		
			subTimer = setTimeout("fadeImage()",15);
		}
		else
		{
			mainTimer = setTimeout("timerStart()",1000);
			fadeUp = 0;
			fadeOut = 100;
		}
	}
}