var showPrev = false;
var showNext = false;
var imgHide = null;
var imgShow = null;
var loaded = false;
var growshrinkTimeout = 50;
var img = new Image();
img.src = "./images/loading.gif";
var totalImages = 0;
var currentImage = 0;
var storeHash = -1;

setInterval(CheckHashChange, 50);

// This is to support the "back" button... we don't need the link thing any more :)
function CheckHashChange()
{
	if ( window.location.hash != storeHash && window.location.hash != "" )
	{
		storeHash = window.location.hash;
		Show(storeHash);
	}
}

document.onkeyup = function keyPress(e) 
{
	// Make sure we are ready to handle key presses....
	if ( document.getElementById('pd_left') == null )
		return;
		
	// Handle IE / Anything else...
	var KeyID = (window.event) ? event.keyCode : e.keyCode;
	switch( KeyID )
	{
		case 37: // left arrow
			window.location.href = document.getElementById('pd_left').href;
		break;
		case 38: // up arrow
			window.location.href = document.getElementById('pd_up').href;
		break;
		case 39: // right arrow
			window.location.href = document.getElementById('pd_right').href;
		break;
	}
}
function showPreviewImage()
{
	if ( XMLHttpRequestObject.readyState == 4 && 
			XMLHttpRequestObject.status == 200 )
	{
		// Let's split our result -- format: "$prevImgNum;;$_GET[SHOWFLAG];;$nextImgNum;;IMG_PREVIOUS;;IMG_CURRENT;;IMG_NEXT;;thumbnailDir;;captionText;;$hardLink;;$imgCount
		//					      			  0            1                2            3             4            5         6             7            8          9
		var imgArr = XMLHttpRequestObject.responseText.split(";;",10);
		// get thumbnail location
		var thumbDir = window.location.pathname;
		thumbDir = window.location.pathname.replace("index.php", "");
		thumbDir = thumbDir.replace(window.location.search, "") + imgArr[6];
		
		// dont add text at all unless there is something
		var photoData = document.getElementById("photo_data");
		if ( imgArr[7] == "" ) // caption - do not show
		{
			if ( photoData )
			{
				photoData.innerHTML = "No caption"; // photo data from db
				HidePDDiv();
			}
		}
		else
		{
			if ( photoData )
			{
				document.getElementById("photo_data").innerHTML = imgArr[7]; // photo data from db
				ShowPDDiv();
			}
		}
			
		showNext = (imgArr[5] != "")
		// Setup next image
		if ( document.getElementById("pd_next_thumb") )
		{
			document.getElementById("pd_next_thumb").src = (showNext) ? thumbDir + "/" + imgArr[5] : "";
			document.getElementById("pd_next_link").href = "javascript:Show(" + imgArr[2] + ")";
		}
		document.getElementById("pd_right").href = "javascript:Show("+imgArr[2]+")";
		
		showPrev = (imgArr[3] != "");
		// Setup previous image
		if ( document.getElementById("pd_prev_thumb") )
		{
			document.getElementById("pd_prev_thumb").src = (showPrev) ? thumbDir + "/" + imgArr[3] : "";
			document.getElementById("pd_prev_link").href = "javascript:Show(" + imgArr[0] + ")";
		}
		document.getElementById("pd_left").href = "javascript:Show("+imgArr[0]+")";

		var link = "\"imgArr[1]\"";
		currentImage = imgArr[1];
		var imgLink = escape(imgArr[4]); 
		// make sure we don't have the _med image
		imgLink = imgLink.replace("_med", "");
		var links = "<a class=\"pd_fulllink\" href=\"javascript:void(0);\" OnClick=\"window.open('"+imgLink+"','','alwaysRaised=yes,scrollbars=yes,menubar=no,resizable=yes,status=no,titlebar=yes,toolbar=no')\">View Original Size</a>";
		document.getElementById("pd_fullsize").innerHTML = 	links;

		var file = imgArr[4];
		file = file.substring(file.lastIndexOf('/')+1, file.length);
		file = file.replace("_med", "");
		
		if ( document.getElementById("crumb_file") )
			document.getElementById("crumb_file").innerHTML  = "&raquo;&nbsp;" + file;
		
		// Set the hard link
		if ( document.getElementById("header_link") )
		{
			document.getElementById('header_link');
			document.getElementById("header_link").href = imgArr[8];
		}
		
		// Set the current image count
		totalImages = imgArr[9];
		document.getElementById("pd_img_count").innerHTML = "Image "  + (parseInt(imgArr[1])+1) + " / " + totalImages;
		
		// set the header img count
		if ( document.getElementById("img_count") )
			document.getElementById("img_count").innerHTML = imgArr[9];
		
		// Set the current image
		document.getElementById("main_div").innerHTML = "<img src=\"" + imgArr[4] + "\" id=\"preview_image\" style=\"display: none;\" class=\"preview_display\" onLoad=\"resizePD()\" />";		
	}
}
function Show(imgNum)
{
	window.location.hash = imgNum;
	ShowPreviewDisplayImage(imgNum);
}
function ShowPreviewDisplayImage(imgNum)
{	
	var dsource = "src/displays.php?ajax&pd&show=";
	
	if ( window.location.hash != "" )
	{
		imgNum = window.location.hash.replace("#","");
		dsource += imgNum;
	}
	else
	{
		// add the hash number
		dsource += imgNum;
		// add the image number to the hash so we can use it for links later
		window.location.hash = imgNum;
		storehash = window.location.hash;
	}
	
	origImgWidth = -1;
	origImgHeight = -1;
	
	// If we are going to an image that doesn't have a previous
	var prev = document.getElementById("prev_div");
	if ( imgNum == 0 && prev != null )
		prev.style.display = "none";
	// If we are going to an image that doesn't have a next
	var next = document.getElementById("next_div");
	if ( imgNum == (totalImages - 1) && next != null)
		next.style.display = "none";
	
	// Hide the current image
	document.getElementById("main_div").style.display = "none";
	document.getElementById("preview_image").style.display = "none";
	document.getElementById("preview_image").src = ""; // have to make the image reload to have proper sizing done
	// show the loading image
	document.getElementById("loading_div").innerHTML = "<div style=\"display:block; margin-top: 5%;\"><font class=\"loading_font\">Loading Images...</font><br><img style=\"\" src=\"" + img.src + "\"></div>";
	document.getElementById("loading_div").style.display = "block";

	AjaxCallWithCallback(dsource, showPreviewImage);
}
// this is called following the load of the image from the Preview Display mode
function resizePD()
{
	var img = document.getElementById("preview_image");

	// This is a 'fix'  for internet exploder... if the image isn't ready, we need to wait....
	if ( img.height == 0 )
	{
		setTimeout("resizePDImage()", 400);
	}
	else 
	{
		resizePDImage();
	}	
	
	showPDPic();
}
function resizePDImage()
{
	var imgLoader = new Image();
	var img = document.getElementById("preview_image");
	var headerBottom = ( document.getElementById("header") == null ) ? 0 : document.getElementById("header").clientTop + document.getElementById("header").offsetHeight;
	var footerTop = document.getElementById("bottombar").offsetTop;
	
	var height = 0, width = 0;
	if ( img.naturalHeight && img.naturalWidth )
	{
		height = img.naturalHeight;
		width = img.naturalWidth;
	}
	else
	{
		height = img.height;
		width = img.width;
	}
	
	if ( (origImgWidth == -1 || origImgHeight == -1) && height > 0 && width > 0 )
	{
		origImgWidth = width;
		origImgHeight = height;
	}
	
	var availHeight = footerTop - headerBottom;
	// if ( availHeight < img.height || availHeight <= origImgHeight ) // we need to shrink
	var ratio = availHeight / height;
	var newWidth = width * ratio;
	// Finally set the image properties (size it)
	img.height = availHeight;
	img.width = newWidth;
}
function showPDPic()
{	
	// hide the loading bar
	document.getElementById("loading_div").style.display = "none";
	
	// Show previous image?
	var prev = document.getElementById("prev_div");
	if ( prev )
		prev.style.display = (showPrev) ? "block": "none";
	
	// Show next image?
	var next = document.getElementById("next_div");
	if ( next )
		next.style.display = (showNext) ? "block" : "none";
		
	// now show the image
	document.getElementById("main_div").style.display = "block";
	document.getElementById("preview_image").style.display = "block";
	
	// get the required positions
	var headerBottom = ( document.getElementById("header") == null ) ? 0 : document.getElementById("header").clientTop + document.getElementById("header").offsetHeight;
	var footerTop = ( document.getElementById('bottombar') ) ? document.getElementById('bottombar').offsetTop : 0;
	
	if ( prev && next )
	{
	var ph = document.getElementById('pd_prev_thumb').height;
	var nh = document.getElementById('pd_next_thumb').height;

	prev.style.top = ((footerTop - headerBottom) / 2) + headerBottom - (ph / 2);
	next.style.top = ((footerTop - headerBottom) / 2) + headerBottom - (nh / 2);
			
	}
	
	//document.getElementById("main_div").style.opacity = 0.0;
	//new Effect.Opacity('main_div', { from: 0.0, to: 1.0, duration: 1.0 });	
}
function SetPDImages(imgHide, imgShow)
{
	this.imgShow = imgShow;
	this.imgHide = imgHide;
}
function ShowPDData()
{
	// see if we should show the div
	var photoData = document.getElementById("photo_data");
	var img = document.getElementById("photo_data_img");
	
	if ( photoData.style.display == "none" )
		ShowPDDiv();
	else
		HidePDDiv();
}
function ShowPDDiv()
{
	var photoData = document.getElementById("photo_data");
	var img = document.getElementById("photo_data_img");
	// show the div...
	photoData.style.display = "block";
	photoData.style.width = ( isIE ? "152" : "148" );
	// move over the image
	img.style.marginLeft = ( isIE ? "152" : "155" );
	img.src = this.imgShow;
	img.title = "Hide Data";
}
function HidePDDiv()
{
	var photoData = document.getElementById("photo_data");
	var img = document.getElementById("photo_data_img");
	// Hide the div
	photoData.style.display = "none";
	photoData.style.width = "0px";
	// move over the image
	img.style.marginLeft = "0";
	img.src = this.imgHide;
	img.title = "Show Data";
}