// -- Config Settings --

// Add image files here.
var imgsToRotate = 
	[
		"img/rotate1.jpg",
		"img/rotate2.jpg",
		"img/rotate3.jpg"
	];

var timeBetweenRotation = 5000; // in milliseconds
var timeToFade			= 1000;	// in milliseconds

// -- END OF CONFIG -- 
// Don't Edit Anything Below Here
//

$(document).ready(function()
{
	currentImgIndex = 0;
	
	// Preload the next image.
	nextImgIndex = (currentImgIndex+1) % imgsToRotate.length;
	$("<img>").attr("src", imgsToRotate[nextImgIndex]);
	
	headerDiv = $("div#headerright");
	// Create a container around the target div
	// to contain the current image while the
	// next one fades in.
	headerDiv.wrap("<div id=\"headerrightcontainer\"></div>")
			 .css("background-image", "url('"+imgsToRotate[currentImgIndex]+"')");
	
	$.timer(timeBetweenRotation, function(timer)
	{
		// Set the container background to the current image.
		$("div#headerrightcontainer").css("background-image", headerDiv.css("background-image"));
		currentImgIndex = (currentImgIndex+1) % imgsToRotate.length;
		
		// Hide immediately.  This is ok since the container has the same background.
		headerDiv.fadeOut(0, function()	
		{
			// Fade in the next image.
			headerDiv.css("background-image", "url('"+imgsToRotate[currentImgIndex]+"')");
			headerDiv.fadeIn(timeToFade);

			// Preload the next image.
			nextImgIndex = (currentImgIndex+1) % imgsToRotate.length;
			$("<img>").attr("src", imgsToRotate[nextImgIndex]);
		});
	});
});