/**
 * Photo popup script for Captain Cook website
 * 
 * Uses JQuery http://www.jquery.com/
 *
 * By Andrew Hennessy
 * 
 * Based on code by Adrian 'yEnS' Mato Gondelle
 * http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/
 *
 */

/**
 * Track popup status.
 * @value 0 = disabled (hidden)
 * @value 1 = enabled (showing)
 */
var popupStatus = 0;

/**
 * Wrapper to load popup from thumbnail by replacing a string in the thumbnail source.
 * eg. replacing thumb_width_200.jpg with thumb_width_600_jpg.
 * @param thumbid 	  the ID of the thumb's img tag.
 * @param srcfind 	  the string to be replaced in the img tag's src attribute.
 * @param srcreplace  the string to use as the replacement.
 */
function showPhotoPopupFromThumb(thumbid, srcfind, srcreplace)
{
	var thumbSelector = "#" + thumbid;
	var heading = $(thumbSelector).attr("alt");
	var description = $(thumbSelector).attr("title");
	var src = $(thumbSelector).attr("src");
	src = src.replace(srcfind, srcreplace);
	showPhotoPopup(heading, src, description, 398, 600);
}

/**
 * Show the popup and load it win an image.
 * @param heading		The heading text.
 * @param src			The image source.
 * @param description	The description to display under the image.
 * @param height		The height of the image.
 * @param width			The width of the image.
 */
function showPhotoPopup(heading, src, description, height, width)
{
	// set the popup info
	document.getElementById("popupHeading").innerHTML = heading;
	document.getElementById("popupInfoArea").innerHTML = '<img src="' + src + '" alt="' + description + '" height="' + height + '" width="' + width + '" /><p>' + description + '</p>';
	
	// show the popup
	centerPopup();
	loadPopup();
}

/**
 * Displays the popup
 */
function loadPopup()
{
	//loads popup only if it is disabled
	if(popupStatus==0)
	{
		$("#backgroundPopup").css({"opacity": "0.7"});
		$("#backgroundPopup").fadeIn("slow");
		$("#popupPhoto").fadeIn("slow");
		popupStatus = 1;
	}
}


/**
 * Hides the popup if it is showing.
 */
function disablePopup()
{
	//disables popup only if it is enabled
	if(popupStatus==1)
	{
		$("#backgroundPopup").fadeOut("slow");
		$("#popupPhoto").fadeOut("slow");
		popupStatus = 0;
	}
}


/**
 * Centres the popup on the screen.
 */
function centerPopup()
{
	//request data
	var windowWidth = document.documentElement.clientWidth;
	var windowHeight = document.documentElement.clientHeight;
	var popupHeight = $("#popupPhoto").height();
	var popupWidth = $("#popupPhoto").width();
	
	//centre
	$("#popupPhoto").css({
		"position": "absolute",
		"top": windowHeight/2-popupHeight/2,
		"left": windowWidth/2-popupWidth/2
	});

	//only need force for IE6
	$("#backgroundPopup").css({
		"height": windowHeight
	});
}

/**
 * Attach events to JQuery
 */
$(document).ready(function(){
	
	/**
	 * When the user clicks the X button, close it
	 */
	$("#popupPhotoClose").click(function(){
		disablePopup();
	});
	
	/**
	 * When the user clicks off the popup if it's showing, close it.
	 */
	$("#backgroundPopup").click(function(){
		disablePopup();
	});
	
	/**
	 * When the user presses the ESC key, close it.
	 */
	$(document).keypress(function(e){
		if(e.keyCode==27 && popupStatus==1)
		{
			disablePopup();
		}
	});

});