/*	Lightbox JS: Fullsize Image Overlays 	by Lokesh Dhakar - http://www.huddletogether.com	For more information on this script, visit:	http://huddletogether.com/projects/lightbox/	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)		Table of Contents	-----------------	Configuration		Functions	- getPageScroll()	- getPageSize()	- pause()	- getKey()	- listenKey()	- showLightbox()	- hideLightbox()	- initLightbox()	- addLoadEvent()		Function Calls	- addLoadEvent(initLightbox)*///// Configuration//// If you would like to use a custom loading image or close button reference them in the next two lines.var loadingImage = 'loading.gif';		var closeButton = 'close.gif';		//// getPageScroll()// Returns array with x,y page scroll values.// Core code from - quirksmode.org//function getPageScroll(){	var yScroll;	if (self.pageYOffset) {		yScroll = self.pageYOffset;	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict		yScroll = document.documentElement.scrollTop;	} else if (document.body) {// all other Explorers		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// Edit for Firefox by pHaez//function getPageSize(){		var xScroll, yScroll;		if (window.innerHeight && window.scrollMaxY) {			xScroll = document.body.scrollWidth;		yScroll = window.innerHeight + window.scrollMaxY;	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac		xScroll = document.body.scrollWidth;		yScroll = document.body.scrollHeight;	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari		xScroll = document.body.offsetWidth;		yScroll = document.body.offsetHeight;	}		var windowWidth, windowHeight;	if (self.innerHeight) {	// all except Explorer		windowWidth = self.innerWidth;		windowHeight = self.innerHeight;	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode		windowWidth = document.documentElement.clientWidth;		windowHeight = document.documentElement.clientHeight;	} else if (document.body) { // other Explorers		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;	}	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 	return arrayPageSize;}//// pause(numberMillis)// Pauses code execution for specified time. Uses busy code, not good.// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602//function pause(numberMillis) {	var now = new Date();	var exitTime = now.getTime() + numberMillis;	while (true) {		now = new Date();		if (now.getTime() > exitTime)			return;	}}//// getKey(key)// Gets keycode. If 'x' is pressed then it hides the lightbox.//function getKey(e){	if (e == null) { // ie		keycode = event.keyCode;	} else { // mozilla		keycode = e.which;	}	key = String.fromCharCode(keycode).toLowerCase();		if(key == 'x'){ hideLightbox(); }}//// listenKey()//function listenKey () {	document.onkeypress = getKey; }	//// showLightbox()// Preloads images. Pleaces new image in lightbox then centers and displays.//function showLightbox(objLink){		// prep objects	var objOverlay = document.getElementById('overlay');	var objLightbox = document.getElementById('lightbox');	var objCaption = document.getElementById('lightboxCaption');	var objImage = document.getElementById('lightboxImage');	var objLoadingImage = document.getElementById('loadingImage');	var objLightboxDetails = document.getElementById('lightboxDetails');		var arrayPageSize = getPageSize();	var arrayPageScroll = getPageScroll();	// center loadingImage if it exists	if (objLoadingImage) {		objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');		objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');		objLoadingImage.style.display = 'block';	}	// set height of Overlay to take up whole page and show	objOverlay.style.height = (arrayPageSize[1] + 'px');	objOverlay.style.display = 'block';	// preload image	imgPreload = new Image();	imgPreload.onload=function(){		objImage.src = objLink.href;		// center lightbox and make sure that the top and left values are not negative		// and the image placed outside the viewport		var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);		var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);				objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";		objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";		objLightboxDetails.style.width = imgPreload.width + 'px';				if(objLink.getAttribute('title')){			objCaption.style.display = 'block';			//objCaption.style.width = imgPreload.width + 'px';			objCaption.innerHTML = objLink.getAttribute('title');		} else {			objCaption.style.display = 'none';		}				// A small pause between the image loading and displaying is required with IE,		// this prevents the previous image displaying for a short burst causing flicker.		if (navigator.appVersion.indexOf("MSIE")!=-1){			pause(250);		} 		if (objLoadingImage) {	objLoadingImage.style.display = 'none'; }		// Hide select boxes as they will 'peek' through the image in IE		selects = document.getElementsByTagName("select");        for (i = 0; i != selects.length; i++) {                selects[i].style.visibility = "hidden";        }			objLightbox.style.display = 'block';		// After image is loaded, update the overlay height as the new image might have		// increased the overall page height.		arrayPageSize = getPageSize();		objOverlay.style.height = (arrayPageSize[1] + 'px');				// Check for 'x' keypress		listenKey();		return false;	}	imgPreload.src = objLink.href;	}//// flashLightbox()// Preloads images. Pleaces new image in lightbox then centers and displays.//function flashLightbox(imgURL,flashTitle){			// prep objects	var objOverlay = document.getElementById('overlay');	var objLightbox = document.getElementById('lightbox');	var objCaption = document.getElementById('lightboxCaption');	var objImage = document.getElementById('lightboxImage');	var objLoadingImage = document.getElementById('loadingImage');	var objLightboxDetails = document.getElementById('lightboxDetails');		var arrayPageSize = getPageSize();	var arrayPageScroll = getPageScroll();	// center loadingImage if it exists	if (objLoadingImage) {		objLoadingImage.style.top = (arrayPageScroll[1] + ((arrayPageSize[3] - 35 - objLoadingImage.height) / 2) + 'px');		objLoadingImage.style.left = (((arrayPageSize[0] - 20 - objLoadingImage.width) / 2) + 'px');		objLoadingImage.style.display = 'block';	}	// set height of Overlay to take up whole page and show	objOverlay.style.height = (arrayPageSize[1] + 'px');	objOverlay.style.display = 'block';	// preload image	imgPreload = new Image();	imgPreload.onload=function(){		objImage.src = imgURL;		// center lightbox and make sure that the top and left values are not negative		// and the image placed outside the viewport		var lightboxTop = arrayPageScroll[1] + ((arrayPageSize[3] - 35 - imgPreload.height) / 2);		var lightboxLeft = ((arrayPageSize[0] - 20 - imgPreload.width) / 2);				objLightbox.style.top = (lightboxTop < 0) ? "0px" : lightboxTop + "px";		objLightbox.style.left = (lightboxLeft < 0) ? "0px" : lightboxLeft + "px";		objLightboxDetails.style.width = imgPreload.width + 'px';				if(flashTitle!=undefined){			objCaption.style.display = 'block';			//objCaption.style.width = imgPreload.width + 'px';			objCaption.innerHTML = flashTitle;		} else {			objCaption.style.display = 'none';		}				// A small pause between the image loading and displaying is required with IE,		// this prevents the previous image displaying for a short burst causing flicker.		if (navigator.appVersion.indexOf("MSIE")!=-1){			pause(250);		} 		if (objLoadingImage) {	objLoadingImage.style.display = 'none'; }		// Hide select boxes as they will 'peek' through the image in IE		selects = document.getElementsByTagName("select");        for (i = 0; i != selects.length; i++) {                selects[i].style.visibility = "hidden";        }			objLightbox.style.display = 'block';		// After image is loaded, update the overlay height as the new image might have		// increased the overall page height.		arrayPageSize = getPageSize();		objOverlay.style.height = (arrayPageSize[1] + 'px');				// Check for 'x' keypress		listenKey();		return false;	}	imgPreload.src = imgURL;	}//// hideLightbox()//function hideLightbox(){	// get objects	objOverlay = document.getElementById('overlay');	objLightbox = document.getElementById('lightbox');	// hide lightbox and overlay	objOverlay.style.display = 'none';	objLightbox.style.display = 'none';	// make select boxes visible	selects = document.getElementsByTagName("select");    for (i = 0; i != selects.length; i++) {		selects[i].style.visibility = "visible";	}	// disable keypress listener	document.onkeypress = '';}//// initLightbox()// Function runs on window load, going through link tags looking for rel="lightbox".// These links receive onclick events that enable the lightbox display for their targets.// The function also 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 initLightbox(){		if (!document.getElementsByTagName){ return; }	var anchors = document.getElementsByTagName("a");	// loop through all anchor tags	for (var i=0; i<anchors.length; i++){		var anchor = anchors[i];		if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){			anchor.onclick = function () {showLightbox(this); return false;}		}	}	// the rest of this code inserts html at the top of the page that looks like this:	//	// <div id="overlay">	//		<a href="#" onclick="hideLightbox(); return false;"><img id="loadingImage" /></a>	//	</div>	// <div id="lightbox">	//		<a href="#" onclick="hideLightbox(); return false;" title="Click anywhere to close image">	//			<img id="closeButton" />			//			<img id="lightboxImage" />	//		</a>	//		<div id="lightboxDetails">	//			<div id="lightboxCaption"></div>	//			<div id="keyboardMsg"></div>	//		</div>	// </div>		var objBody = document.getElementsByTagName("body").item(0);		// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)	var objOverlay = document.createElement("div");	objOverlay.setAttribute('id','overlay');	objOverlay.onclick = function () {hideLightbox(); return false;}	objOverlay.style.display = 'none';	objOverlay.style.position = 'absolute';	objOverlay.style.top = '0';	objOverlay.style.left = '0';	objOverlay.style.zIndex = '90'; 	objOverlay.style.width = '100%';	objBody.insertBefore(objOverlay, 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 lightbox and create loadingimage	imgPreloader.onload=function(){		var objLoadingImageLink = document.createElement("a");		objLoadingImageLink.setAttribute('href','#');		objLoadingImageLink.onclick = function () {hideLightbox(); return false;}		objOverlay.appendChild(objLoadingImageLink);				var objLoadingImage = document.createElement("img");		objLoadingImage.src = loadingImage;		objLoadingImage.setAttribute('id','loadingImage');		objLoadingImage.style.position = 'absolute';		objLoadingImage.style.zIndex = '150';		objLoadingImageLink.appendChild(objLoadingImage);		imgPreloader.onload=function(){};	//	clear onLoad, as IE will flip out w/animated gifs		return false;	}	imgPreloader.src = loadingImage;	// create lightbox div, same note about styles as above	var objLightbox = document.createElement("div");	objLightbox.setAttribute('id','lightbox');	objLightbox.style.display = 'none';	objLightbox.style.position = 'absolute';	objLightbox.style.zIndex = '100';		objBody.insertBefore(objLightbox, objOverlay.nextSibling);		// create link	var objLink = document.createElement("a");	objLink.setAttribute('href','#');	objLink.setAttribute('title','Click to close');	objLink.onclick = function () {hideLightbox(); return false;}	objLightbox.appendChild(objLink);	// preload and create close button image	var imgPreloadCloseButton = new Image();	// if close button image found, 	imgPreloadCloseButton.onload=function(){		var objCloseButton = document.createElement("img");		objCloseButton.src = closeButton;		objCloseButton.setAttribute('id','closeButton');		objCloseButton.style.position = 'absolute';		objCloseButton.style.zIndex = '200';		objLink.appendChild(objCloseButton);		return false;	}	imgPreloadCloseButton.src = closeButton;	// create image	var objImage = document.createElement("img");	objImage.setAttribute('id','lightboxImage');	objLink.appendChild(objImage);		// create details div, a container for the caption and keyboard message	var objLightboxDetails = document.createElement("div");	objLightboxDetails.setAttribute('id','lightboxDetails');	objLightbox.appendChild(objLightboxDetails);	// create caption	var objCaption = document.createElement("div");	objCaption.setAttribute('id','lightboxCaption');	objCaption.style.display = 'none';	objLightboxDetails.appendChild(objCaption);	// create keyboard message	var objKeyboardMsg = document.createElement("div");	objKeyboardMsg.setAttribute('id','keyboardMsg');	objKeyboardMsg.innerHTML = 'press <kbd>x</kbd> to close';	objLightboxDetails.appendChild(objKeyboardMsg);}//// 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();		}	}}addLoadEvent(initLightbox);	// run initLightbox onLoad