// -----------------------------------------------------------------------------------
//
//	Lightbox v2.02
//	by Lokesh Dhakar - http://www.huddletogether.com
//	3/31/06
//
//	hacked to use iframe for non-jpeg urls
//	by Tim Morgan - http://timmorgan.org
//	8/9/06
//
//	For more information on this script, visit:
//	http://huddletogether.com/projects/lightbox2/
//	...and...
//	http://mpov.wordpress.com/2006/08/08/lightbox-with-iframes/
//
//	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.org), 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()
	- start()
	- changeImage()
	- resizeImageContainer()
	- showImage()
	- updateDetails()
	- updateNav()
	- enableKeyboardNav()
	- disableKeyboardNav()
	- keyboardAction()
	- preloadNeighborImages()
	- end()
	
	Miscellaneous Functions
	- getPageScroll()
	- getPageSize()
	- getKey()
	- listenKey()
	- showSelectBoxes()
	- hideSelectBoxes()
	- pause()
	- initLightbox()
	
	Function Calls
	- addLoadEvent(initLightbox)
	
*/
// -----------------------------------------------------------------------------------

//
//	Configuration
//

	var fileLoadingImage = "templates/global/images/lightbox/loading.gif";		
	var fileBottomNavCloseImage = "templates/global/images/lightbox/closelabel.gif";

	//var iframeWidth = 380;
	//var iframeHeight = 350;

	var iframeWidth = 1050;
	var iframeHeight = 525;
	
	var resizeSpeed = 5;	// controls the speed of the image resizing (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(resizeSpeed > 10){ resizeSpeed = 10;}
	if(resizeSpeed < 1){ resizeSpeed = 1;}
	resizeDuration = (11 - resizeSpeed) * 0.15;

	// -----------------------------------------------------------------------------------

	//
	//	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";
		},
		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 = 1; i < this.length; i++){
			if(this[i][0] == this[i-1][0]){
				this.splice(i,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. Loops through anchor tags looking for 
		// 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
		// the function inserts html at the bottom of the page which is used to display the shadow 
		// overlay and the image container.
		//
		initialize: function() {	
			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];
				
				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;}
				}
			}

			// The rest of this 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(); return false; }
			objBody.appendChild(objOverlay);
			
			var objLightbox = document.createElement("div");
			objLightbox.setAttribute('id','lightbox');
			objLightbox.style.display = 'none';
			objBody.appendChild(objLightbox);
		
			var objOuterImageContainer = document.createElement("div");
			objOuterImageContainer.setAttribute('id','outerImageContainer');
			objLightbox.appendChild(objOuterImageContainer);

			var objImageContainer = document.createElement("div");
			objImageContainer.setAttribute('id','imageContainer');
			objOuterImageContainer.appendChild(objImageContainer);
				
			var objLightboxIframe = document.createElement("iframe");
			objLightboxIframe.setAttribute('id','lightboxIframe');
			objLightboxIframe.style.width = iframeWidth + 'px';
			objLightboxIframe.style.height = iframeHeight + 'px';
			objLightboxIframe.style.border = 'none';
			objImageContainer.appendChild(objLightboxIframe);
		
			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');
			objImageDataContainer.className = 'clearfix';
			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);
		},
		
		//
		//	start()
		//	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
		//
		start: function(imageLink) {	

			hideSelectBoxes();

			// stretch overlay to fill page and fade in
			var arrayPageSize = getPageSize();
			Element.setHeight('overlay', arrayPageSize[1]);
			new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });

			imageArray = [];
			imageNum = 0;		

			if (!document.getElementsByTagName){ return; }
			var anchors = document.getElementsByTagName('a');
			
			var rel = imageLink.getAttribute('rel');

			// if image is NOT part of a set..
			if(!rel.match(/\[/)){
				// add single image to imageArray
				imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('lightbox_caption')));			
				if(rel.match(/\|/)) iframeHeight = parseInt(rel.split(/\|/)[1]);
			} 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('lightbox_caption')));
					}
				}
				imageArray.removeDuplicates();
				while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
			}

			// calculate top offset for the lightbox and display 
			var arrayPageSize = getPageSize();
			var arrayPageScroll = getPageScroll();
			var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);

			Element.setTop('lightbox', lightboxTop);
			Element.show('lightbox');
			
			this.changeImage(imageNum);
		},

		//
		//	changeImage()
		//	Hide most elements and preload image in preparation for resizing image container.
		//
		changeImage: function(imageNum) {	
			
			activeImage = imageNum;	// update global var

			// hide elements during transition
			Element.show('loading');
			Element.hide('lightboxImage');
			Element.hide('lightboxIframe');
			Element.hide('hoverNav');
			Element.hide('prevLink');
			Element.hide('nextLink');
			Element.hide('imageDataContainer');
			Element.hide('numberDisplay');		
			
			if(imageArray[activeImage][0].match(/\.jpg$/)) {
		
				this.content_is_image = true;
		
			imgPreloader = new Image();
			
			// once image is preloaded, resize image container
			imgPreloader.onload=function(){
				Element.setSrc('lightboxImage', imageArray[activeImage][0]);
				myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
			}
			imgPreloader.src = imageArray[activeImage][0];
		
			} else {
				this.content_is_image = false;
				Element.setSrc('lightboxIframe', imageArray[activeImage][0]);
				myLightbox.resizeImageContainer(iframeWidth, iframeHeight);
			}
		},

		//
		//	resizeImageContainer()
		//
		resizeImageContainer: function( imgWidth, imgHeight) {
			
			$('lightboxIframe').style.height = iframeHeight + 'px';

			// get current height and width
			this.wCur = Element.getWidth('outerImageContainer');
			this.hCur = Element.getHeight('outerImageContainer');

			// scalars based on change from old to new
			this.xScale = ((imgWidth  + (borderSize * 2)) / this.wCur) * 100;
			this.yScale = ((imgHeight  + (borderSize * 2)) / this.hCur) * 100;

			// calculate size difference between new and old image, and resize if necessary
			wDiff = (this.wCur - borderSize * 2) - imgWidth;
			hDiff = (this.hCur - borderSize * 2) - imgHeight;

			if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
			if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }

			// if new and old image are same size and no scaling transition is necessary, 
			// do a quick pause to prevent image flicker.
			if((hDiff == 0) && (wDiff == 0)){
				if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
			}

			Element.setHeight('prevLink', imgHeight);
			Element.setHeight('nextLink', imgHeight);
			Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));

			this.showImage();
		},
		
		//
		//	showImage()
		//	Display image and begin preloading neighbors.
		//
		showImage: function(){
			Element.hide('loading');
			new Effect.Appear(this.content_is_image ? 'lightboxImage' : 'lightboxIframe', { duration: 0.5, queue: 'end', afterFinish: function(){	myLightbox.updateDetails(); } });
			this.preloadNeighborImages();
		},

		//
		//	updateDetails()
		//	Display caption, image number, and bottom nav.
		//
		updateDetails: function() {
		
			Element.show('caption');
			Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
			
			// if image is part of set display 'Image x of x' 
			if(imageArray.length > 1){
				Element.show('numberDisplay');
				Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
			}

			new Effect.Parallel(
				[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }), 
				  new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ], 
				{ duration: 0.65, afterFinish: function() { myLightbox.updateNav();} } 
			);
		},

		//
		//	updateNav()
		//	Display appropriate previous and next hover navigation.
		//
		updateNav: function() {
			Element.show('hoverNav');				

			// if not first image in set, display prev image button
			if(activeImage != 0){
				Element.show('prevLink');
				document.getElementById('prevLink').onclick = function() {
					myLightbox.changeImage(activeImage - 1); return false;
				}
			}

			// if not last image in set, display next image button
			if(activeImage != (imageArray.length - 1)){
				Element.show('nextLink');
				document.getElementById('nextLink').onclick = function() {
					myLightbox.changeImage(activeImage + 1); return false;
				}
			}
			
			this.enableKeyboardNav();
		},

		//
		//	enableKeyboardNav()
		//
		enableKeyboardNav: function() {
			document.onkeydown = this.keyboardAction; 
		},

		//
		//	disableKeyboardNav()
		//
		disableKeyboardNav: function() {
			document.onkeydown = '';
		},

		//
		//	keyboardAction()
		//
		keyboardAction: function(e) {
			if (e == null) { // ie
				keycode = event.keyCode;
			} else { // mozilla
				keycode = e.which;
			}

			key = String.fromCharCode(keycode).toLowerCase();
			
			if((key == 'x') || (key == 'o') || (key == 'c')){	// close lightbox
				myLightbox.end();
			} else if(key == 'p'){	// display previous image
				if(activeImage != 0){
					myLightbox.disableKeyboardNav();
					myLightbox.changeImage(activeImage - 1);
				}
			} else if(key == 'n'){	// display next image
				if(activeImage != (imageArray.length - 1)){
					myLightbox.disableKeyboardNav();
					myLightbox.changeImage(activeImage + 1);
				}
			}


		},

		//
		//	preloadNeighborImages()
		//	Preload previous and next images.
		//
		preloadNeighborImages: function(){

			if((imageArray.length - 1) > activeImage){
				preloadNextImage = new Image();
				preloadNextImage.src = imageArray[activeImage + 1][0];
			}
			if(activeImage > 0){
				preloadPrevImage = new Image();
				preloadPrevImage.src = imageArray[activeImage - 1][0];
			}
		
		},

		//
		//	end()
		//
		end: function() {
			this.disableKeyboardNav();
			Element.hide('lightbox');
			new Effect.Fade('overlay', { duration: 0.2});
			showSelectBoxes();
		Element.setSrc('lightboxIframe', 'about:blank');
		}
	}

	// -----------------------------------------------------------------------------------

	//
	// 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;
	}

	// -----------------------------------------------------------------------------------

	//
	// 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'){
		}
	}

	// -----------------------------------------------------------------------------------

	//
	// listenKey()
	//
	function listenKey () {	document.onkeypress = getKey; }
		
	// ---------------------------------------------------

	function showSelectBoxes(){
		selects = document.getElementsByTagName("select");
		for (i = 0; i != selects.length; i++) {
			selects[i].style.visibility = "visible";
		}
	}

	// ---------------------------------------------------

	function hideSelectBoxes(){
		selects = document.getElementsByTagName("select");
		for (i = 0; i != selects.length; i++) {
			selects[i].style.visibility = "hidden";
		}
	}

	// ---------------------------------------------------

	//
	// 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;
		}
	}

	// ---------------------------------------------------



	function initLightbox() { myLightbox = new Lightbox(); }
	Event.observe(window, 'load', initLightbox, false);