// -----------------------------------------------------------------------------------////	Lightbox v2.03.3//	by Lokesh Dhakar - http://www.huddletogether.com//	5/21/06////	For more information on this script, visit://	http://huddletogether.com/projects/lightbox2/////	Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5///	//	Credit also due to those who have helped, inspired, and made their code available to the public.//	Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), Thomas Fuchs(mir.aculo.us), and others.////// -----------------------------------------------------------------------------------/*	Table of Contents	-----------------	Configuration	Global Variables	Extending Built-in Objects		- Object.extend(Element)	- Array.prototype.removeDuplicates()	- Array.prototype.empty()	Lightbox Class Declaration	- initialize()	- updateImageList()	- start()	- changeImage()	- resizeImageContainer()	- showImage()	- updateDetails()	- updateNav()	- enableKeyboardNav()	- disableKeyboardNav()	- keyboardAction()	- preloadNeighborImages()	- end()		Miscellaneous Functions	- getPageScroll()	- getPageSize()	- getKey()	- listenKey()	- showSelectBoxes()	- hideSelectBoxes()	- showFlash()	- hideFlash()	- pause()	- initLightbox()		Function Calls	- addLoadEvent(initLightbox)	*/// -----------------------------------------------------------------------------------////	Configuration//var fileLoadingImage = "/images/loading.gif";		var fileBottomNavCloseImage = "/images/closelabel.gif";var overlayOpacity = 0.8;	// controls transparency of shadow overlayvar animate = true;			// toggles resizing animationsvar resizeSpeed = 7;		// controls the speed of the image resizing animations (1=slowest and 10=fastest)var borderSize = 10;		//if you adjust the padding in the CSS, you will need to update this variable// -----------------------------------------------------------------------------------////	Global Variables//var imageArray = new Array;var activeImage;if(animate == true){	overlayDuration = 0.2;	// shadow fade in/out duration	if(resizeSpeed > 10){ resizeSpeed = 10;}	if(resizeSpeed < 1){ resizeSpeed = 1;}	resizeDuration = (11 - resizeSpeed) * 0.15;} else { 	overlayDuration = 0;	resizeDuration = 0;}// -----------------------------------------------------------------------------------////	Additional methods for Element added by SU, Couloir//	- further additions by Lokesh Dhakar (huddletogether.com)//Object.extend(Element, {	getWidth: function(element) {	   	element = $(element);	   	return element.offsetWidth; 	},	setWidth: function(element,w) {	   	element = $(element);    	element.style.width = w +"px";	},	setHeight: function(element,h) {   		element = $(element);    	element.style.height = h +"px";	},	setTop: function(element,t) {	   	element = $(element);    	element.style.top = t +"px";	},	setLeft: function(element,l) {	   	element = $(element);    	element.style.left = l +"px";	},	setSrc: function(element,src) {    	element = $(element);    	element.src = src; 	},	setHref: function(element,href) {    	element = $(element);    	element.href = href; 	},	setInnerHTML: function(element,content) {		element = $(element);		element.innerHTML = content;	}});// -----------------------------------------------------------------------------------////	Extending built-in Array object//	- array.removeDuplicates()//	- array.empty()//Array.prototype.removeDuplicates = function () {    for(i = 0; i < this.length; i++){        for(j = this.length-1; j>i; j--){                    if(this[i][0] == this[j][0]){                this.splice(j,1);            }        }    }}// -----------------------------------------------------------------------------------Array.prototype.empty = function () {	for(i = 0; i <= this.length; i++){		this.shift();	}}// -----------------------------------------------------------------------------------////	Lightbox Class Declaration//	- initialize()//	- start()//	- changeImage()//	- resizeImageContainer()//	- showImage()//	- updateDetails()//	- updateNav()//	- enableKeyboardNav()//	- disableKeyboardNav()//	- keyboardNavAction()//	- preloadNeighborImages()//	- end()////	Structuring of code inspired by Scott Upton (http://www.uptonic.com/)//var Lightbox = Class.create();Lightbox.prototype = {		// initialize()	// Constructor runs on completion of the DOM loading. Calls updateImageList and then	// the function inserts html at the bottom of the page which is used to display the shadow 	// overlay and the image container.	//	initialize: function() {					this.updateImageList();		// Code inserts html at the bottom of the page that looks similar to this:		//		//	<div id="overlay"></div>		//	<div id="lightbox">		//		<div id="outerImageContainer">		//			<div id="imageContainer">		//				<img id="lightboxImage">		//				<div style="" id="hoverNav">		//					<a href="#" id="prevLink"></a>		//					<a href="#" id="nextLink"></a>		//				</div>		//				<div id="loading">		//					<a href="#" id="loadingLink">		//						<img src="images/loading.gif">		//					</a>		//				</div>		//			</div>		//		</div>		//		<div id="imageDataContainer">		//			<div id="imageData">		//				<div id="imageDetails">		//					<span id="caption"></span>		//					<span id="numberDisplay"></span>		//				</div>		//				<div id="bottomNav">		//					<a href="#" id="bottomNavClose">		//						<img src="images/close.gif">		//					</a>		//				</div>		//			</div>		//		</div>		//	</div>		var objBody = document.getElementsByTagName("body").item(0);				var objOverlay = document.createElement("div");		objOverlay.setAttribute('id','overlay');		objOverlay.style.display = 'none';		objOverlay.onclick = function() { myLightbox.end(); }		objBody.appendChild(objOverlay);				var objLightbox = document.createElement("div");		objLightbox.setAttribute('id','lightbox');		objLightbox.style.display = 'none';		objLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay			if (!e) var e = window.event;			var clickObj = Event.element(e).id;			if ( clickObj == 'lightbox') {				myLightbox.end();			}		};		objBody.appendChild(objLightbox);					var objOuterImageContainer = document.createElement("div");		objOuterImageContainer.setAttribute('id','outerImageContainer');		objLightbox.appendChild(objOuterImageContainer);		// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.		// If animations are turned off, it will be hidden as to prevent a flicker of a		// white 250 by 250 box.		if(animate){			Element.setWidth('outerImageContainer', 250);			Element.setHeight('outerImageContainer', 250);					} else {			Element.setWidth('outerImageContainer', 1);			Element.setHeight('outerImageContainer', 1);					}		var objImageContainer = document.createElement("div");		objImageContainer.setAttribute('id','imageContainer');		objOuterImageContainer.appendChild(objImageContainer);			var objLightboxImage = document.createElement("img");		objLightboxImage.setAttribute('id','lightboxImage');		objImageContainer.appendChild(objLightboxImage);			var objHoverNav = document.createElement("div");		objHoverNav.setAttribute('id','hoverNav');		objImageContainer.appendChild(objHoverNav);			var objPrevLink = document.createElement("a");		objPrevLink.setAttribute('id','prevLink');		objPrevLink.setAttribute('href','#');		objHoverNav.appendChild(objPrevLink);				var objNextLink = document.createElement("a");		objNextLink.setAttribute('id','nextLink');		objNextLink.setAttribute('href','#');		objHoverNav.appendChild(objNextLink);			var objLoading = document.createElement("div");		objLoading.setAttribute('id','loading');		objImageContainer.appendChild(objLoading);			var objLoadingLink = document.createElement("a");		objLoadingLink.setAttribute('id','loadingLink');		objLoadingLink.setAttribute('href','#');		objLoadingLink.onclick = function() { myLightbox.end(); return false; }		objLoading.appendChild(objLoadingLink);			var objLoadingImage = document.createElement("img");		objLoadingImage.setAttribute('src', fileLoadingImage);		objLoadingLink.appendChild(objLoadingImage);		var objImageDataContainer = document.createElement("div");		objImageDataContainer.setAttribute('id','imageDataContainer');		objLightbox.appendChild(objImageDataContainer);		var objImageData = document.createElement("div");		objImageData.setAttribute('id','imageData');		objImageDataContainer.appendChild(objImageData);			var objImageDetails = document.createElement("div");		objImageDetails.setAttribute('id','imageDetails');		objImageData.appendChild(objImageDetails);			var objCaption = document.createElement("span");		objCaption.setAttribute('id','caption');		objImageDetails.appendChild(objCaption);			var objNumberDisplay = document.createElement("span");		objNumberDisplay.setAttribute('id','numberDisplay');		objImageDetails.appendChild(objNumberDisplay);				var objBottomNav = document.createElement("div");		objBottomNav.setAttribute('id','bottomNav');		objImageData.appendChild(objBottomNav);			var objBottomNavCloseLink = document.createElement("a");		objBottomNavCloseLink.setAttribute('id','bottomNavClose');		objBottomNavCloseLink.setAttribute('href','#');		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }		objBottomNav.appendChild(objBottomNavCloseLink);			var objBottomNavCloseImage = document.createElement("img");		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);		objBottomNavCloseLink.appendChild(objBottomNavCloseImage);	},	//	// updateImageList()	// Loops through anchor tags looking for 'lightbox' references and applies onclick	// events to appropriate links. You can rerun after dynamically adding images w/ajax.	//	updateImageList: function() {			if (!document.getElementsByTagName){ return; }		var anchors = document.getElementsByTagName('a');		var areas = document.getElementsByTagName('area');		// loop through all anchor tags		for (var i=0; i<anchors.length; i++){			var anchor = anchors[i];						var relAttribute = String(anchor.getAttribute('rel'));						// use the string.match() method to catch 'lightbox' references in the rel attribute			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){				anchor.onclick = function () {myLightbox.start(this); return false;}			}		}		// loop through all area tags		// todo: combine anchor & area tag loops		for (var i=0; i< areas.length; i++){			var area = areas[i];						var relAttribute = String(area.getAttribute('rel'));						// use the string.match() method to catch 'lightbox' references in the rel attribute			if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){				area.onclick = function () {myLightbox.start(this); return false;}			}		}	},			//	//	start()	//	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.	//	start: function(imageLink) {			hideSelectBoxes();		hideFlash();		// stretch overlay to fill page and fade in		var arrayPageSize = getPageSize();		Element.setWidth('overlay', arrayPageSize[0]);		Element.setHeight('overlay', arrayPageSize[1]);		new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity });		imageArray = [];		imageNum = 0;				if (!document.getElementsByTagName){ return; }		var anchors = document.getElementsByTagName( imageLink.tagName);		// if image is NOT part of a set..		if((imageLink.getAttribute('rel') == 'lightbox')){			// add single image to imageArray			imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));					} else {		// if image is part of a set..			// loop through anchors, find other images in set, and add them to imageArray			for (var i=0; i<anchors.length; i++){				var anchor = anchors[i];				if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){					imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));				}			}			imageArray.removeDuplicates();			while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}		}		// calculate top and left offset for the lightbox