
// JavaScript Document
// Programmer: Corina Acosta
// Frameworks: JQuery

jQuery.preloadImages = function()
{
	for(var i = 0; i<arguments.length; i++)
	{
		jQuery("<img>").attr("src", arguments[i]);
	}
}

var imageToLoad = "images/farewell_atlantis_cover_800x600.jpg";
			
$(document).ready(function(){
	$(".photobox").each(function(){
		imageToLoad = $(this).attr("href");	
		$.preloadImages(imageToLoad);
		$(".overlayContent").html('<img id="photo" src="'+imageToLoad+'" alt="Photo Gallery Image" />');
		var imgWidth = $(".overlayContent img").width();
		var imgHeight = $(".overlayContent img").height();
	});

	$(".photobox").click(function(){
		imageToLoad = $(this).attr("href");	
		constructOverlay(imageToLoad);
		return false;
	});
	$("#btn_close, .overlay").click(function(){
		destroyOverlay();	
	});

	var constructOverlay = function(imageToLoad){
		var windowWidth = $(window).width();
		var windowHeight = $(window).height();
			
		$(".overlay").css({
			"width": windowWidth + "px",
			"height": windowHeight + "px"
		});
		
		$(".overlayContent").html('<img id="photo" src="'+imageToLoad+'" alt="Photo Gallery Image" />');
		$(".overlayContent img").load(function() {
			var imgWidth = $(".overlayContent img").width();
			var imgHeight = $(".overlayContent img").height();
			$(".overlayContainer")
				.css({
					//"top":        "58%",
					//"left":        "55%",
					"width":      imgWidth + 10, //To account for 10px added to the height from the 5px border
					"height":     imgHeight + 32, //To account for the 22px height close button + the 10px added to the height from the 5px border
					//"margin-top": -(imgHeight/2),
					//"margin-left":-(imgWidth/2) //to position it in the middle
			
			});
			$(".overlayContainer").show();
		});
		
		
		//create overlay elements
		$(".overlayContainer").show();
		$(".overlay").show();
		
	};//end of contructOverlay function
		
	
 
    var destroyOverlay = function(){
        //$(".spectacular_container").show();
        $(".overlay").hide();
        $(".overlayContainer").hide();
    };//end of destroyOverlay function

});//End if Doc Ready