$(document).ready(function() {
	
	// SHOW LARGE IMAGE
	$("#PhotoGallery li a").click(function()
	{
		// On click slide out and fade in the overlay 
		$("#Gallery").animate(
		{
			width: "450px",
			opacity: 0.6
		}, 850, "swing");
		
		// Get large image data for selected thumbnail
		var img = $(this).attr("href");
		var caption = $(this).find("img").attr("alt");
		
		// wait until overlay is almost finished animating
		show = setTimeout(function()
		{
			// and then fade in the large image
			$("#ImgPlaceHolder").fadeIn("normal");
			// build the html for the large image *** NOTE *** if you reverse these two items animation is jumpy
			$("#ImgPlaceHolder").html('<img src="' + img + '" width="385px" /><p>'+ caption +'</p>');
		},750);
		
		// ignore the contents of the a tag's href
		return false;
	});
	
	// CLOSE OVERLAY LARGE IMAGE OPTION 1 (X BUTTON)
	$("#Close").click(function()
	{
		// fade out the large image and caption fast
		$("#ImgPlaceHolder").fadeOut("fast");
		
		// then animate the overlay sliding out and fading away
		$("#Gallery").animate(
		{
			width: "0px",
			opacity: 0.0
		}, 600, "swing");
		
		// clear the html that we added to show the large image
		$("#ImgPlaceHolder").html('');
		
		// ignore the contents of the a tag's href
		return false;
	});
	
	// CLOSE OVERLAY LARGE IMAGE OPTION 2 (CLICK ON LARGE IMAGE)
	$("#ImgPlaceHolder").click(function()
	{
		// fade out the large image and caption fast
		$("#ImgPlaceHolder").fadeOut("fast");
		
		// then animate the overlay sliding out and fading away
		$("#Gallery").animate(
		{
			width: "0px",
			opacity: 0.0
		}, 600, "swing");
		
		// clear the html that we added to show the large image
		$("#ImgPlaceHolder").html('');
		
		// ignore the contents of the a tag's href
		return false;
	});
});