/*
	ImageOverlay JS: Fullsize Image Overlays 
	by Lokesh Dhakar - http://www.huddletogether.com
	Edited by Justin Tubbs - http://www.justintubbs.com - Jan 9th 2006

	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
	(basically, do anything you want, just leave my name and link)
*/

//////////////////////////////
// Configuration & Settings //
//////////////////////////////

// Declare some global variables
var loadingImage = 'rp_resources/loading.gif';	
var showEXIFInfo = false;
var EXIF_Panel = "";
var EXIF_Panel_Left = "";
var EXIF_Panel_Top_hidden = "";
var EXIF_Panel_Top_shown = "";
var VerticalYScroll = null;
var captionHeight = 30;
var ScrollBarsWidth = 0;
var ReducingFinished = false;
var ElementID = "";
var ElementOpacityLevel = 0;
var DIVElementById = new Object();
var FadingFinished = false;
var EXIFPanelOpacityLevel = 60;
var OverlayBackground_Height = "";
var OverlayBackground_Width = "";
var PictureFrame_Top = 0;
var PictureFrame_Left = 0;
var PictureFrame_Height = 0;
var PictureFrame_Width = 0;
var LoadingText_Top = 0;
var LoadingText_Left = 0;
var EXIFPanelDimensionsSet = false;

function HideSelectboxes()
{
	if (!document.getElementsByTagName)
	{ return; }
	var anchors = document.getElementsByTagName("select");

	// Loop through all <select> elements
	for (var i=0; i<anchors.length; i++)
	{
		var anchor = anchors[i];
		anchor.style.visibility='hidden';
	}
}
function ShowSelectboxes()
{
	if (!document.getElementsByTagName)
	{ return; }
	var anchors = document.getElementsByTagName("select");

	// Loop through all <select> elements
	for (var i=0; i<anchors.length; i++)
	{
		var anchor = anchors[i];
		anchor.style.visibility='visible';
	}
}

// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
function getPageScroll()
{
	var yScroll;

	if (self.pageYOffset)
	{
		yScroll = self.pageYOffset;
	}
	// Explorer 6 Strict
	else if (document.documentElement && document.documentElement.scrollTop)
	{
		yScroll = document.documentElement.scrollTop;
	}
	// all other Explorers
	else if (document.body)
	{
		yScroll = document.body.scrollTop;
	}
	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}

// getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
function getPageSize()
{	
	var xScroll, yScroll;

 	// All but Explorer Mac
	if (document.body.scrollHeight > document.body.offsetHeight)
	{
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} 
	 // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
	else 
	{
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	// All except Internet Explorer 5.0+
	if (self.innerHeight) 
	{	
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	}  
	// Internet Explorer 6 Strict Mode
	else if (document.documentElement && document.documentElement.clientHeight) 
	{
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	}
	// Other Explorers 
	else if (document.body) 
	{
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight)
	{	pageHeight = windowHeight;	} 
	else
	{ pageHeight = yScroll;	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth)
	{	pageWidth = windowWidth;	}
	else
	{	pageWidth = xScroll;	}
	
//	alert("PageWidth: "+pageWidth+"\nPageHeight: "+pageHeight+"\nWindowWidth: "+windowWidth+"\nWindowHeight: "+windowHeight);

	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}

function setEXIFPanelDimensions()
{		
	// Retrieve PageHeight/PageWidth/PageScroll variables in array
	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();
//	alert("PageHeight: "+arrayPageSize[0]+"\nPageWidth: "+arrayPageSize[1]+"\nWindowWidth: "+arrayPageSize[2]+"\nWindowHeight: "+arrayPageSize[3]+"\nPageScrollY: "+arrayPageScroll[1]); 
	
	// Store YPageScroll setting
	VerticalYScroll = arrayPageScroll[1];
	
	// If page has scrollbars because PageHeight > WindowHeight
	if (arrayPageSize[1] > arrayPageSize[3])
	{	ScrollBarsWidth = 21;	}
	else
	{	ScrollBarsWidth = 0;	}

	EXIF_Panel_Top_shown = (((arrayPageSize[3] - pictureFrameHeight - 14 - captionHeight) /2 ) + arrayPageScroll[1] + pictureFrameHeight - 176) + 'px';
	EXIF_Panel_Top_hidden = (((arrayPageSize[3] - pictureFrameHeight - 14 - captionHeight) /2 ) + arrayPageScroll[1] + pictureFrameHeight + 12) + 'px';
	EXIF_Panel_Left = ((arrayPageSize[0] - (pictureFrameWidth-18) - ScrollBarsWidth)/2)+'px';

	EXIFPanelDimensionsSet = true;
}

function setOverlayBkdDimensions()
{		
	// Retrieve PageHeight/PageWidth/PageScroll variables in array
	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();
	
	// Create JS Objects to hold references to our <DIV> elements
	var objImageDiv = document.getElementById('objImageDiv');
	var objLoadingImage = document.getElementById('objLoadingImage');		
	
	// Calculate values for LoadingText_Top
	LoadingText_Top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');
	LoadingText_Left = (((arrayPageSize[0] - 40 - objLoadingImage.width) / 2) + 'px');
	
	// If page has scrollbars because PageHeight > WindowHeight
	if (arrayPageSize[1] > arrayPageSize[3])
	{	ScrollBarsWidth = 21;	}
	else
	{	ScrollBarsWidth = 0;	}	

	// Set the Width and Height of the Black Background Overlay
	OverlayBackground_Height = (arrayPageScroll[1] + arrayPageSize[1])+'px';
	
	if (navigator.appVersion.indexOf("MSIE")!= -1) // If browser is NOT IE
	{	OverlayBackground_Width = (arrayPageSize[2])+'px';	}
	else
	{	OverlayBackground_Width = (arrayPageSize[2]-ScrollBarsWidth)+'px';	}

	// Set the height of objImageDiv
	objImageDiv.style.height = pictureFrameHeight+'px';
	objImageDiv.style.width = pictureFrameWidth+'px';

	// Center ImageOverlay PictureFrame object
	PictureFrame_Height = (pictureFrameHeight+captionHeight) + 'px';
	PictureFrame_Width = pictureFrameWidth+'px';	
	PictureFrame_Top =  (((arrayPageSize[3] - pictureFrameHeight - 14 - captionHeight) /2 ) + arrayPageScroll[1]) + 'px';
	PictureFrame_Left = (((arrayPageSize[0] - pictureFrameWidth - ScrollBarsWidth) / 2) + 'px');
//	alert("Height: "+PictureFrame_Height+"\nWidth: "+PictureFrame_Width+"\nTop: "+PictureFrame_Top+"\nLeft: "+PictureFrame_Left);
}

// showImageOverlay()
// Preloads images. Pleaces new image in ImageOverlay then centers and displays.
function showImageOverlay(imgFilePath)
{	
	var arrayPageScroll = getPageScroll();
	// Makes all SELECT boxes on the page hidden
	HideSelectboxes();
	// Fire off AJAX routine to return EXIF Info + Photo Captions from database
	getPhotoDetails(imgFilePath);
	
	// Create JS Objects to hold references to our <DIV> elements
	var objBkgdOverlay = document.getElementById('objBkgdOverlay');
	var objPictureFrame = document.getElementById('objPictureFrame');
	var objImage = document.getElementById('objImage');
	var objLoadingText = document.getElementById('objLoadingText');
		
	// If BackgroundOverlay dimensions not yet been calculated, we need to setOverlayBkdDimensions()
	if (OverlayBackground_Width == "")
	{	setOverlayBkdDimensions();	}

	// If EXIFPanelDimensionsSet is false, we need to setEXIFPanelDimensions()
	if (EXIFPanelDimensionsSet == false)
	{	setEXIFPanelDimensions();	}

	// Initialize new Preload image
	imgPreload = new Image();

	imgPreload.onload=function()
	{	
		// Center objLoadingText
		objLoadingText.style.top = LoadingText_Top;
		objLoadingText.style.left = LoadingText_Left;
		
		// Fill entire page with objBkgdOverlay
		objBkgdOverlay.style.top = "0px";
		objBkgdOverlay.style.left = "0px";
		objBkgdOverlay.style.height = OverlayBackground_Height;
		objBkgdOverlay.style.width = OverlayBackground_Width;
		objBkgdOverlay.style.visibility = 'visible';		
		
		// Center objPictureFrame <DIV> to hold LargePic image and CaptionText
		objPictureFrame.style.height = PictureFrame_Height;
		objPictureFrame.style.width = PictureFrame_Width;
		objPictureFrame.style.top = PictureFrame_Top;
		objPictureFrame.style.left = PictureFrame_Left;
//		alert(objPictureFrame.innerHTML);
//		alert(PictureFrame_Height+", "+PictureFrame_Width+", "+PictureFrame_Top+", "+PictureFrame_Left);
		
		// Fill objPictureFrame <DIV> with fade-in image using increaseOpacity() function
		ReducingFinished = true;
		DIVElementById = document.getElementById("objPictureFrame");
		increaseOpacity();
		
		objImage.src = imgFilePath;
	
		return false;
	}
	imgPreload.src = imgFilePath;
}

function hideImageOverlay()
{	
	// Hide objBkgdOverlay and objPictureFrame
	document.getElementById('objBkgdOverlay').style.visibility = 'hidden';
	document.getElementById('objBkgdOverlay').style.width = '0px';
	document.getElementById('objBkgdOverlay').style.height = '0px';
	
	// Hide EXIF information panel
	document.getElementById('exif_panel').style.display = 'none';
	
	DIVElementById = document.getElementById("objPictureFrame");
	reduceOpacity();

	// Makes all SELECT boxes on the page visible again
	ShowSelectboxes();
}

// initImageOverlay()
// The function inserts html markup at the top of the page which will be used as a
// container for the overlay pattern and the inline image.

function initImageOverlay()
{	
	// the rest of this code inserts html at the top of the page that looks like this:
	// <div id="overlay"><a href="#"><img id=loadingImage style="z-index:150; left:557px; position:absolute; top:403px;" height=22 src="loading.gif" width=126></a></div>
	// <div id="ImageOverlay"><img id=objImage src="jensmes_parents_house/PICT0004.JPG"></div>
	
	var objBody = document.getElementsByTagName("body").item(0); // get first BODY tag in page
	
	// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
	var objBkgdOverlay = document.createElement("div");
	objBkgdOverlay.setAttribute('id','objBkgdOverlay');
	objBkgdOverlay.style.visibility = 'hidden';
	objBkgdOverlay.style.position = 'absolute';
	objBkgdOverlay.style.top = '0px';
	objBkgdOverlay.style.left = '0px';
	objBkgdOverlay.style.zIndex = '1';
	objBkgdOverlay.onclick = function () {hideImageOverlay(); return false;}
	objBody.insertBefore(objBkgdOverlay, objBody.firstChild);
	
	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();

	// preload and create loader image
	var imgPreloader = new Image();
	
	// if loader image found, create link to hide ImageOverlay and create loadingimage
	imgPreloader.onload=function()
	{
		var objLoadingText = document.createElement("div");
		objLoadingText.setAttribute('id','objLoadingText');
		objLoadingText.setAttribute('align','center');
		objLoadingText.style.position = 'absolute';
		objLoadingText.style.color = '#ffffff';
		objLoadingText.style.fontSize = '22px';
		objLoadingText.innerHTML = 'Image Loading';
		objBkgdOverlay.appendChild(objLoadingText);
				
		var objBR = document.createElement("br");
		objLoadingText.appendChild(objBR);
		
		var objLoadingImage = document.createElement("img");
		objLoadingImage.src = loadingImage;
		objLoadingImage.setAttribute('id','objLoadingImage');
		objLoadingImage.style.zIndex = '150';
		objLoadingText.appendChild(objLoadingImage);

		imgPreloader.onload=function(){};	//	clear onLoad, as IE will flip out w/animated gifs

		return false;
	}

	imgPreloader.src = loadingImage;

	// create objPictureFrame div [this is the container for the largePic, the caption text, the arrow buttons, etc]
	var objPictureFrame = document.createElement("div");
	objPictureFrame.setAttribute('id','objPictureFrame');
//	objPictureFrame.setAttribute('title','Click the image to close');
	objPictureFrame.setAttribute('border','0');
	objPictureFrame.style.visibility = 'hidden';
	objPictureFrame.style.textAlign = 'center';
	objPictureFrame.style.position = 'absolute';
	objPictureFrame.style.width = '1px';
	objPictureFrame.style.height = '1px';
	objPictureFrame.style.zIndex = '2';	
	objBody.insertBefore(objPictureFrame, objBkgdOverlay.nextSibling);

	// create objImageDiv
	var objImageDiv = document.createElement("div");
	objImageDiv.setAttribute('id','objImageDiv');
	objImageDiv.setAttribute('align','left');
	objPictureFrame.appendChild(objImageDiv);

	// create objImage
	var objImage = document.createElement("img");
	objImage.setAttribute('id','objImage');
	objImage.setAttribute('alt','Click the image to close');
	objImage.setAttribute('title','Click the image to close');
	objImage.style.cursor = 'hand';
	objImage.style.cursor = 'pointer';
	objImage.setAttribute('border','0');
	objImage.onclick = function () {hideImageOverlay(); return false;}
	objImageDiv.appendChild(objImage);

	// create objCaption <div> for text caption	
	var objCaption = document.createElement("div");
	objCaption.setAttribute('id','objCaption');
	objPictureFrame.appendChild(objCaption);
}

// Makes element more visible
function increaseOpacity() 
{
	// Check to make sure the DIVElementById is already set as visibility=visible
	if (DIVElementById.style.visibility != 'visible')
	{	DIVElementById.style.visibility = 'visible';	}
	
	// If opacity level is less than 100, we can still increase the opacity
	if ((ElementOpacityLevel < 100) && (ReducingFinished == true))
	{
		ReducingFinished = true;
		ElementOpacityLevel += 20;
		DIVElementById.style.MozOpacity = ""+(ElementOpacityLevel/100);
		DIVElementById.style.opacity = ""+(ElementOpacityLevel/100);
		DIVElementById.style.filter = 'alpha(opacity='+ElementOpacityLevel+')';
		setTimeout("increaseOpacity()", 5);
	}
	else
	{
		ReducingFinished = false;
	}
}
// Makes element less visible
function reduceOpacity() 
{
	// If opacity level is greater than 0, we can still reduce the opacity
	if ((ElementOpacityLevel > 0) && (ReducingFinished == false))
	{
		ReducingFinished = false;
		ElementOpacityLevel -= 20;
		DIVElementById.style.MozOpacity = ""+(ElementOpacityLevel/100);
		DIVElementById.style.opacity = ""+(ElementOpacityLevel/100);
		DIVElementById.style.filter = 'alpha(opacity='+ElementOpacityLevel+')';
		setTimeout("reduceOpacity()", 10);
	}
	else
	{
		ReducingFinished = true;
		DIVElementById.style.width = '1px';
		DIVElementById.style.height = '1px';

		// When finished, make sure the DIVElementById is set to visibility=hidden
		if (DIVElementById.style.visibility != 'hidden')
		{	
			DIVElementById.style.visibility = 'hidden';
		}
	}
}

// Makes element more visible
function fadeEXIFin() 
{	
	// If opacity level is less than 71, we can still increase the opacity
	if ((EXIFPanelOpacityLevel < 71) && (FadingFinished == true))
	{
		FadingFinished = true;
		EXIFPanelOpacityLevel += 10;
		document.getElementById('exif_panel').style.MozOpacity = ""+(EXIFPanelOpacityLevel/100);
		document.getElementById('exif_panel').style.opacity = ""+(EXIFPanelOpacityLevel/100);
		document.getElementById('exif_panel').style.filter = 'alpha(opacity='+EXIFPanelOpacityLevel+')';
		setTimeout("fadeEXIFin()", 5);
	}
	else
	{
		FadingFinished = false;
	}
}
// Makes element less visible
function fadeEXIFout() 
{
	// If opacity level is greater than 0, we can still reduce the opacity
	if ((EXIFPanelOpacityLevel > 0) && (FadingFinished == false))
	{
		FadingFinished = false;
		EXIFPanelOpacityLevel -= 20;
		document.getElementById('exif_panel').style.MozOpacity = ""+(EXIFPanelOpacityLevel/100);
		document.getElementById('exif_panel').style.opacity = ""+(EXIFPanelOpacityLevel/100);
		document.getElementById('exif_panel').style.filter = 'alpha(opacity='+EXIFPanelOpacityLevel+')';
		setTimeout("fadeEXIFout()", 10);
	}
	else
	{
		FadingFinished = true;
		HideEXIFPanel();
	}
}

// Show EXIF information panel
function ShowEXIFPanel()
{	
	showEXIFInfo = true;
	
	var exifPanel = document.getElementById('exif_panel');

	exifPanel.innerHTML = EXIF_Panel;
	exifPanel.style.width = '200px';
	exifPanel.style.top = EXIF_Panel_Top_shown;
	exifPanel.style.left = EXIF_Panel_Left;
	exifPanel.style.backgroundColor = '#444444';
	exifPanel.style.color = '#ffffff';
	
	fadeEXIFin();
}

// Hide EXIF information panel from showing again
function HideEXIFPanel()
{	
	showEXIFInfo = false;
	
	var exifPanel = document.getElementById('exif_panel');
	
	exifPanel.innerHTML = "<div class=\"12px bold\"><img src=\"rp_resources/orange-up-arrow.gif\" border=\"0\" height=\"14\" width=\"14\" style=\"cursor:pointer; vertical-align:top;\" onClick=\"ShowEXIFPanel()\" alt=\"Show EXIF Info Panel\">&nbsp;&nbsp;Show Photo Info</div>";
	exifPanel.style.MozOpacity = ""+1;
	exifPanel.style.opacity = ""+1;
	exifPanel.style.filter = 'alpha(opacity='+100+')';
	exifPanel.style.width = '140px';
	exifPanel.style.top = EXIF_Panel_Top_hidden;
	exifPanel.style.left = EXIF_Panel_Left;
	exifPanel.style.backgroundColor = '#ffffff';
	exifPanel.style.color = '#000000';
	exifPanel.style.cursor = 'pointer';
}

// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
// Function found at Simon Willison's weblog - http://simon.incutio.com/

function addLoadEvent(func)
{	
	var oldonload = window.onload;
	if (typeof window.onload != 'function')
	{
    window.onload = func;
	}
	else 
	{
		window.onload = function()
		{
			oldonload();
			func();
		}
	}
}

// Fire up initImageOverlay onLoad()
addLoadEvent(initImageOverlay);