//on page load set up the Popup Layer Pic links
$(document).ready(function(){
	$('a.popuplayerpic').click(function() {
		var title = ($(this).attr('title') == "") ? "" : $(this).attr('title');

		PopupLayerPic(this.href, title);

		return false;
	});
});

/*
***************************************
* PopupLayerPic
***************************************

Author:			Keegan Rowe
Version:			1.3
Date Created:	01/06/2007
Last Modified:	03/03/2008

Purpose:
	PopupLayerPic is a javascript function that will allow an image to be displayed
	on the page in a layered div. The common use of the script to show an enlarged
	version of an image on the screen rather than using a standard popup screen
	that can often by blocked by browers.

Compatibility:
	IE7, IE6, Firefox 1.5, Firefox 2.0, Safari. More browsers may work but are
	currently untested.

Requirements:
	The only real requirement is the doctype of the website. Use loose.

Changelog:
	1.0 - Created script
	1.1 - Fixed a problem where the loaded image would not show up due to an
			incompatibility with Safari (image.complete method)
	1.2 - Put in the timer so that the script does not infinitely loop trying
			to show an image that cannot be loaded
	1.3 - Reprogrammed CheckPopupLayerPicSize() so it will dynamically check
			the size of the popup layer and and if it is too large it will
			resize the loaded image to make it fit on the users screen. To turn
			this functionality off, set the bDynamicResize variable to false;
*/

// Use this variable the time we wait before alerting the usre that their image
// is not loading correctly. Set the timer to 0 to disable the timer facility
var iTimerSeconds	= 30;

// Use this variable to set whether or not the script should attempt to look
// at the users current resolution and resize the enlarged picture so that
// it will fit on their screen
var bDynamicResize = true;

// Use this variable to set whether debug mode is on or not. It will issue many
// alerts that cover what is happening as the script is executed
var bDebugMode = false;

function PopupLayerPic(sPicURL) {
	var iDivWidth, iDivHeight;
	var sImage;
	var sCaption = "";

	//check to see if we have an image caption passed in
	if ( arguments.length == 2 ) {
		//check to see if we have a 2nd argument
		if ( arguments[1] != null && arguments[1].length > 0 ) {
			sCaption = "<strong>" + arguments[1] + "</strong>";
		}
	}

	//set our image caption
	document.getElementById("PopupLayerCaption").innerHTML = sCaption;

	//hide our main image and text
	document.getElementById("PopupLayerImageDiv").style.display = "none";
	document.getElementById("PopupLayerText").style.display		= "none";	

	if ( bDebugMode ) alert("PopupLayerPic :: Just hid main image"); 

	//set up our main image details
	sImage = '<img src="' + sPicURL + '" alt="" border="0" id="PopupLayerImage" />';

	//transfer the details to the form
	document.getElementById("PopupLayerImageDiv").innerHTML = sImage;

	if ( bDebugMode ) alert("PopupLayerPic :: Just set main image src"); 
	
	//show our loading image
	document.getElementById("PopupLayerLoadingPic").style.display = "";

	if ( bDebugMode ) alert("PopupLayerPic :: Just showed loading image"); 

	//unhide our div to show the loading image
	document.getElementById("PopupLayer").style.display = "";

	if ( bDebugMode ) alert("PopupLayerPic :: now showing entire layer"); 

	//Reposition the main div to the centre of the screen
	RecentrePopupLayer();

	if ( bDebugMode ) alert("PopupLayerPic :: just resized layer (apparently)"); 

	//check to see if the image that we are showing has been fully loaded yet
	setTimeout('CheckPopupLayerPic(0)',500);

	if ( bDebugMode ) alert("PopupLayerPic :: just 'checkeded' popup layer pic"); 
}

function RecentrePopupLayer() {
	var iDivWidth, iDivHeight;

	//ensure we have a valid image width before continuing
	if ( document.getElementById("PopupLayerImage").width > 0 ) {
		//set our text box div width o be the same as the layer
		document.getElementById("PopupLayerText").style.width = document.getElementById("PopupLayerImage").width + "px";
	}

	//retrieve the final size of our main popup div now that our main image is visible
	iDivWidth	= document.getElementById("PopupLayer").offsetWidth;
	iDivHeight	= document.getElementById("PopupLayer").offsetHeight;

	if ( bDebugMode ) alert("1 :: iDivWidth :: overall div width :: " + iDivWidth); 
	if ( bDebugMode ) alert("1 :: iDivHeight :: overall div height :: " + iDivHeight);

	//divide this size by two to calculate how far our div has to be moved
	iDivWidth	= Math.floor(iDivWidth/2);
	iDivHeight	= Math.floor(iDivHeight/2);

	if ( bDebugMode ) alert("2 :: iDivWidth :: divided by 2 :: " + iDivWidth); 
	if ( bDebugMode ) alert("2 :: iDivHeight :: divided by 2 :: " + iDivHeight);

	//also take into account that the user may have scrolled around the page first
	iDivHeight	= iDivHeight - GetScrollTop();

	if ( bDebugMode ) alert("3 :: iDivHeight :: with top scroll :: " + iDivHeight);

	//check if our div height is greater than zero or not
	if ( iDivWidth > 0 ) {
		//make our div height a negative number if it is currently greater than zero
		iDivWidth = "-" + iDivWidth + "px";
	}
	else {
		//make our div height a positive number if it is currently less than zero
		iDivWidth = Math.abs(iDivWidth) + "px";
	}

	//check if our div height is greater than zero or not
	if ( iDivHeight > 0 ) {
		//make our div height a negative number if it is currently greater than zero
		iDivHeight = "-" + iDivHeight + "px";
	}
	else {
		//make our div height a positive number if it is currently less than zero
		iDivHeight = Math.abs(iDivHeight) + "px";
	}

	if ( bDebugMode ) alert("4 :: iDivWidth :: final figure :: " + iDivWidth); 
	if ( bDebugMode ) alert("4 :: iDivHeight :: final figure :: " + iDivHeight);

	//re-set our top/left and margin settings on our overall div (set up for the loading image)
	document.getElementById("PopupLayer").style.marginLeft	= iDivWidth;
	document.getElementById("PopupLayer").style.marginTop		= iDivHeight;
}

function CheckPopupLayerPic(iCount) {

	if ( bDebugMode ) alert("CheckPopupLayerPic :: start"); 
	if ( bDebugMode ) alert("CheckPopupLayerPic :: complete? " + document.getElementById("PopupLayerImage").complete);
	if ( bDebugMode ) alert("CheckPopupLayerPic :: src > 0? " + (document.getElementById("PopupLayerImage").src.length > 0));
	if ( bDebugMode ) alert("CheckPopupLayerPic :: counter :: " + iCount);

	var bStop		= false;
	var sMessage	= "";

	//Check that our user hasn't been waiting more than 30 seconds
	if ( iCount > iTimerSeconds*2 && iTimerSeconds != 0 ) {
		if ( bDebugMode ) alert("CheckPopupLayerPic :: counter too large - asking question");

		sMessage = sMessage + "The image appears to be taking a considerable amount of time to load.\n\n";
		sMessage = sMessage + "It is possible that the image path is not valid and that the image will never load successfully.\n\n";
		sMessage = sMessage + "Do you wish to continue to wait?";

		//Check to see if our user wants to exit
		if ( !confirm(sMessage) ) {
			//Remove the source from the image and hide the layer
			document.getElementById("PopupLayerImage").src = "";
			HidePopupLayer();

			bStop = true;
		}
		else {
			iCount = 0;
		}
	}

	//Continue processing unless we have been requested to stop processing
	if ( !bStop ) {
		iCount++;

		//check to see if our main pic has loaded or not
		if ( document.getElementById("PopupLayerImage").complete && document.getElementById("PopupLayerImage").src.length > 0 ) {
			if ( bDebugMode ) alert("CheckPopupLayerPic :: is complete and have src"); 

			//our pic has loaded, show the image
			ShowPopupLayerPic();
		}
		else {
			//Wait and check to see if it is loaded in 0.5 seconds
			setTimeout('CheckPopupLayerPic(' + iCount + ')',500);
		}
	}
}

function CheckPopupLayerPicSize() {
	//check to see if we have been set to dynamically resize the images
	if ( bDynamicResize ) {
		var iLayerHeight	= document.getElementById("PopupLayer").offsetHeight;
		var iLayerWidth	= document.getElementById("PopupLayer").offsetWidth;
		var iWindowHeight	= window.screen.height - 250;
		var iWindowWidth	= window.screen.width - 100;
		var iImageHeight	= document.getElementById("PopupLayerImage").height;
		var iImageWidth	= document.getElementById("PopupLayerImage").width;
		var iTemp			= 0;

		if ( bDebugMode ) alert('iLayerHeight :: ' + iLayerHeight );
		if ( bDebugMode ) alert('iWindowHeight :: ' + iWindowHeight );
		if ( bDebugMode ) alert('iImageHeight :: ' + iImageHeight );

		//check that the final size of our image is less than the users resolution
		if ( iLayerHeight > iWindowHeight ) {
			//reduce our image size so that the popup fits on the screen
			iImageHeight = iImageHeight - (iLayerHeight - iWindowHeight);

			//Check the amount that we are going to resize our image by
			iTemp = iImageHeight / document.getElementById("PopupLayerImage").height;

			if ( bDebugMode ) alert("Adjusting image height as it is too large");

			//resize our image because it is too big
			document.getElementById("PopupLayerImage").height = iImageHeight;

			if ( bDebugMode ) alert("Adjusting image width to the same percentage as the height (" + iTemp + "%)");

			if ( bDebugMode ) alert("Width was : " + iImageWidth);

			//Change our image width by the same percentage as the height
			iImageWidth = iImageWidth * iTemp;

			//Round our new width to the nearest pixel
			iImageWidth = iImageWidth.toFixed(0);

			if ( bDebugMode ) alert("Width now is : " + iImageWidth);

			if ( bDebugMode ) alert("Setting calculated width to " + iImageWidth + "px");

			//resize our image because it is too big
			document.getElementById("PopupLayerImage").width = iImageWidth;

			CheckPopupLayerPicSize();

			return false;
		}

		if ( iLayerWidth > iWindowWidth ) {
			//reduce our image size so that the popup fits on the screen
			iImageWidth = iImageWidth - (iLayerWidth - iWindowWidth);

			//Check the amount that we are going to resize our image by
			iTemp = iImageWidth / document.getElementById("PopupLayerImage").width;

			//resize our image because it is too big
			document.getElementById("PopupLayerImage").width = iImageWidth;

			if ( bDebugMode ) alert("Adjusting image width as it is too large");

			if ( bDebugMode ) alert("Adjusting image height to the same percentage as the width (" + iTemp + "%)");

			if ( bDebugMode ) alert("Height was : " + iImageHeight);

			//Change our image height by the same percentage as the width
			iImageHeight = iImageHeight * iTemp;

			//Round our new width to the nearest pixel
			iImageHeight = iImageHeight.toFixed(0);

			if ( bDebugMode ) alert("Height now is : " + iImageHeight);

			if ( bDebugMode ) alert("Setting calculated height to " + iImageHeight + "px");

			//resize our image because it is too big
			document.getElementById("PopupLayerImage").height = iImageHeight;

			CheckPopupLayerPicSize();

			return false;
		}
	}
}

function ShowPopupLayerPic() {
	if ( bDebugMode ) alert("ShowPopupLayerPic :: start"); 

	//hide our loading image
	document.getElementById("PopupLayerLoadingPic").style.display = "none";

	//show our main image and text
	document.getElementById("PopupLayerImageDiv").style.display = "";
	document.getElementById("PopupLayerText").style.display		= "";

	//Check the size of the image before continuing
	CheckPopupLayerPicSize();

	//Reposition the main div to the centre of the screen
	RecentrePopupLayer();
}

function HidePopupLayer () {
	//hide our main image and text
	document.getElementById("PopupLayerImageDiv").style.display = "none";
	document.getElementById("PopupLayerText").style.display		= "none";

	//show our loading image
	document.getElementById("PopupLayerLoadingPic").style.display = "";

	//hide our div
	document.getElementById("PopupLayer").style.display = "none";

	//reset our div size to be the width of our logo div
	document.getElementById("PopupLayer").width = document.getElementById("PopupLayerLogo").width;
}

function GetScrollTop()
{	
	var IE = document.all?true:false;
	if(navigator.userAgent.indexOf('Netscape/7.0') != -1) var ns7 = true;
	layer = document.getElementById("PopupLayer");

	var iScrollTop = 0;
	
	if(IE)
		iScrollTop = document.documentElement.scrollTop;
	else
		iScrollTop	= document.body.parentNode.scrollTop;
	if(ns7)
		iScrollTop = window.pageYOffset;

	return iScrollTop;
}