// large image container id
var imageDivId = "largeImageContainer";
var thumbnailHighlightClass = "highlight";
var thumbnailClass = "thumb";

// catch clicking on thumbnails
$(document).ready(function(){
	$(".thumb").click(function(){
		$("#debug").empty();
		// get the image src
		imageSrc = $(this).children("a").children("img").attr("rel");
		imageAlt = $(this).children("a").children("img").attr("alt");
		// create an image obj so we can centre align it if needed
		lrgImage = new Image();
		lrgImage.src = $(this).children("a").children("img").attr("rel");
		
		// fade the image out
		$("#"+imageDivId).fadeOut("normal", function(){
			// set the desc.
			$("#"+imageDivId).children("p").empty();
			$("#"+imageDivId).children("p").append(imageAlt);
			$("#loading").css({display: "block"});
				// set the src
				$("#"+imageDivId).children("div").children("img").attr("src",imageSrc);
				// once it"s loaded fade it back in
				$("#"+imageDivId).children("div").children("img").load(function(){
					// fade the show animation out
					$("#loading").css({display: "none"});
					// figure out left margin to apply to image to center align
					leftMargin = ($("#"+imageDivId).width()/2) - (lrgImage.width/2);
					$("#"+imageDivId).css({display:"block"});
				})
		})
				
		return false;
	})
})