var portfolioImages = new Array(
	"/images/portfolio/thumbnails/ans_intranet.jpg",
	"/images/portfolio/thumbnails/archway_home.jpg",
	"/images/portfolio/thumbnails/easyarch_specs.jpg",
	"/images/portfolio/thumbnails/gemini_home.jpg",
	"/images/portfolio/thumbnails/kellys_home.jpg",
	"/images/portfolio/thumbnails/mvc.jpg",
	"/images/portfolio/thumbnails/s3_home.jpg",
	"/images/portfolio/thumbnails/unico_gallery.jpg"
);
var portfolioCounter = 1;


/* Schedule our portfolio viewer to start rotating thumbnails */
$(document).ready(function() {
	setTimeout(rotatePortfolioImages, 7 * 1000);
	
	/* While we're waiting, lets preload the images */
	for(i = 0; i < portfolioImages.length; i++) {
		var tempImage = new Image();
		tempImage.src = portfolioImages[i];
	}
})

function displayPortfolioPhoto()
{
	/* We can't (always) just fadeIn because the fadeIn will sometimes 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 = $("#portfolio_viewer img").attr("src");
	
	if (tempImage.complete != false) {
		$("#portfolio_viewer img").fadeIn("slow");		
	}
	else {
		setTimeout(
			function() {
				displayPortfolioPhoto();
			}, 100
			);
	}

}

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

	setTimeout(rotatePortfolioImages, 7 * 1000);
}