var imgCount = 0, iCurrImg, evt;
var imageContainer = "headerbanner";
var imagePrefix = "ssimg";

window.onload = function()
{				
	if(document.getElementById(imageContainer))
	{
		var images = document.getElementById(imageContainer).getElementsByTagName("img");
		
		// Get the total number of images
		imgCount = images.length;
		
		// iCurrentImag is the image currently being displayed, as a default, set it to the first image
		iCurrImg = imgCount;
		
		if(images.length > 1)
		{			
			showAnimation();
		}
		else
		{
			clearTimeout(evt);
		}
	}
}

function showAnimation()
{	
	var sImg1, sImg2;
	
	// if the current image is lower than the last image then we've gone too far, we need to loop back to the first image
	if(iCurrImg < 1)
	{
		iCurrImg = imgCount;
	}	
	
	// set the current image  (the one we're about to fade out)
	sImg1 = document.getElementById(imagePrefix + iCurrImg);
		
	// set the new image (the one we're about to fade in)
	if (document.getElementById(imagePrefix + (iCurrImg-1)))
	{
		sImg2 = document.getElementById(imagePrefix + (iCurrImg-1));
	}
	else
	{
		// if we get to the first image, go back to the first one
		sImg2 = document.getElementById(imagePrefix + imgCount);
	}
	
	// swap the images
	sImg1.style.display = "none";
	sImg2.style.display = "block";
		
	iCurrImg -= 1;		
			
	evt = setTimeout("showAnimation()", 7000);
}