var mainImages = new Array(
	"/images/front00.jpg",
	"/images/front01.jpg",
	"/images/front02.jpg",
	"/images/front03.jpg",
	"/images/front04.jpg"
	);
var counter = 1;

$(document).ready(function()
{
	setTimeout(rotateMainImages, 7 * 1000);
	
	/* While we're waiting, lets preload the images */
	for(i = 0; i < mainImages.length; i++) {
		var tempImage = new Image();
		tempImage.src = mainImages[i];
	}
});

function displayPhoto()
{
	/* We can't (always) just fadeIn because the fadeIn will usually start before the next image
	 * has finished loading, causing the image swap to be during or after the fadeIn.  As a result,
	 * we have to check whether the image has been loaded and, if not, wait a while before trying again.
	 * This is less of a problem when the images have been preloaded.
	 */
	var tempImage = new Image();
	tempImage.src = $("#main_image").attr("src");
	
	if (tempImage.complete != false) {
		$("#main_image").fadeIn("slow");		
	}
	else {
		setTimeout(
			function() {
				displayPhoto();
			}, 100
			);
	}

}

function rotateMainImages()
{
	$("#main_image").fadeOut(
		"slow",
		function () {
			/* Set the image's source to the next value in our mainImages array, wrapping to the first
			 * element when necessary
			 */
			$("#main_image").attr({src:mainImages[(counter<mainImages.length?++counter:counter=1)-1]});
			displayPhoto();
		}
		);

	// Swap images without fading
	//$("#main_image").attr({src:mainImages[(counter<mainImages.length?++counter:counter=1)-1]});


	setTimeout(rotateMainImages, 7 * 1000);
}