// -----------------------------------------------------------------------------------
//
//	Lightbox v2.02
//	by Lokesh Dhakar - http://www.huddletogether.com
//	3/31/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.org), Thomas Fuchs(mir.aculo.us), and others.
//
//	adaptation to yui + yui-ext library by Nicolas Le Gras (http://ghyster.fr)
// -----------------------------------------------------------------------------------
/*

	Table of Contents
	-----------------
	Configuration
	Global Variables

	Extending Built-in Objects	
	- 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 = "/img/loading.gif";		
var fileBottomNavCloseImage = "/img/closelabel.gif";
var resizeSpeed = 10;	// 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;
var anim2;
if(resizeSpeed > 10){ resizeSpeed = 10;}
if(resizeSpeed < 1){ resizeSpeed = 1;}
resizeDuration = (11 - resizeSpeed) * 0.15;

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

//
//	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 myLightbox = function(){
	return {
		init : 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'));
				var classAttribute = String(anchor.getAttribute('class'));
				
				// use the string.match() method to catch 'lightbox' references in the rel attribute
				if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox') || classAttribute.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="../yuiFormWidgets/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="../yuiFormWidgets/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 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();
			
			Ext.get('overlay').setStyle('height',arrayPageSize[1]+'px');
			Ext.get('overlay').setOpacity(0);
			Ext.get('overlay').setStyle('display','block');
			var anim = new YAHOO.util.Anim('overlay', { opacity: { to: 0.8 } }, 0.2, YAHOO.util.Easing.easeOut);
			anim.animate();
			
			imageArray = [];
			imageNum = 0;		
	
			if (!document.getElementsByTagName){ return; }
			var anchors = document.getElementsByTagName('a');
	
			// 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') && anchor.className == imageLink.className )){
						imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
					}
				}
				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);
	
			Ext.get('lightbox').setStyle('top',lightboxTop+'px');
			//à revoir
			Ext.get('lightbox').setStyle('display','block');
			
			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
			Ext.get('loading').setStyle('display','block');
			Ext.get('lightboxImage').setStyle('display','none');	
			Ext.get('hoverNav').setStyle('display','none');	
			Ext.get('prevLink').setStyle('display','none');	
			Ext.get('nextLink').setStyle('display','none');	
			Ext.get('imageDataContainer').setStyle('display','none');	
			Ext.get('numberDisplay').setStyle('display','none');	
			
			imgPreloader = new Image();
			
			// once image is preloaded, resize image container
			imgPreloader.onload=function(){
				Ext.get('lightboxImage').dom.src=imageArray[activeImage][0];
				myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
			}
			imgPreloader.src = imageArray[activeImage][0];
		},
	
		//
		//	resizeImageContainer()
		//
		resizeImageContainer: function( imgWidth, imgHeight) {
	
			// get current height and width
			this.wCur = Ext.get('outerImageContainer').dom.offsetWidth;
			this.hCur = Ext.get('outerImageContainer').dom.offsetHeight;
			
			// scalars based on change from old to new
			this.xScale = (imgWidth  + (borderSize * 2)) ;
			this.yScale = (imgHeight  + (borderSize * 2));
	
			// calculate size difference between new and old image, and resize if necessary
			wDiff = (this.wCur - borderSize * 2) - imgWidth;
			hDiff = (this.hCur - borderSize * 2) - imgHeight;
	
			var manager=YAHOO.util.AnimMgr;
			if(!( hDiff == 0)){ 
				var attributes = { height: {to: this.yScale}};
	      		var anim = new YAHOO.util.Anim('outerImageContainer', attributes, resizeDuration, YAHOO.util.Easing.backOut);
				if(wDiff == 0){	
					anim.onComplete.subscribe(myLightbox.showImage);
					anim.animate();
				}	
			}
			if(!( wDiff == 0)){ 
				var attributes = { width: {to: this.xScale}};
	      		anim2 = new YAHOO.util.Anim('outerImageContainer', attributes, resizeDuration, YAHOO.util.Easing.backOut);
				anim2.onComplete.subscribe(myLightbox.showImage);
				if(hDiff == 0){
					anim2.animate();
				}	
			}
			if((!( hDiff == 0))&&(!( wDiff == 0))){
				anim.onComplete.subscribe(myLightbox.animComp);
				anim.animate();
			}
			if(( hDiff == 0)&&( wDiff == 0)){
				myLightbox.showImage();
			}
			// 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);} 
			}
	
			Ext.get('prevLink').setStyle('height',imgHeight+'px');
			Ext.get('nextLink').setStyle('height',imgHeight+'px');
			Ext.get('imageDataContainer').setStyle('width',(imgWidth + (borderSize * 2))+'px');
		},
		animComp:function(){
			anim2.animate();
		},
		
		//
		//	showImage()
		//	Display image and begin preloading neighbors.
		//
		showImage: function(){
			//alert('test');
			Ext.get('lightboxImage').setStyle('display','block');
			Ext.get('lightboxImage').setOpacity(0);
			Ext.get('loading').setStyle('display','none');
			var anim = new YAHOO.util.Anim('lightboxImage', { opacity: { from: 0.0, to: 1 } }, 0.5, YAHOO.util.Easing.easeOut);
			anim.onComplete.subscribe(myLightbox.updateDetails);
			anim.animate();
			myLightbox.preloadNeighborImages();
		},
		//
		//	updateDetails()
		//	Display caption, image number, and bottom nav.
		//
		updateDetails: function() {
			Ext.get('caption').setStyle('display','block');
			Ext.get('caption').update(imageArray[activeImage][1]);
			
			// if image is part of set display 'Image x of x' 
			if(imageArray.length > 1){
				Ext.get('numberDisplay').setStyle('display','block');
				Ext.get('numberDisplay').update("Image " + eval(activeImage + 1) + " of " + imageArray.length);
			}
	
			Ext.get('imageDataContainer').setStyle("height",0);
			Ext.get('imageDataContainer').setStyle("display","block");
			var anim = new YAHOO.util.Anim('imageDataContainer', { height: {to: 35} }, resizeDuration + 0.25, YAHOO.util.Easing.bounceOut);
			var anim2 = new YAHOO.util.Anim('imageDataContainer', { opacity: { to: 1 } }, 1.0, YAHOO.util.Easing.easeOut);
			anim.animate();
			anim2.animate();
			myLightbox.updateNav();
	   	},
		//
		//	updateNav()
		//	Display appropriate previous and next hover navigation.
		//
		updateNav: function() {
			Ext.get('hoverNav').setStyle('display','block');				
	
			// if not first image in set, display prev image button
			if(activeImage != 0){
				Ext.get('prevLink').setStyle('display','block');
				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)){
				Ext.get('nextLink').setStyle('display','block');
				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();
			Ext.get('lightbox').setStyle('display','none');
			var anim = new YAHOO.util.Anim('overlay', { opacity: {  to: 0 } }, 0.2, YAHOO.util.Easing.easeOut);
			anim.onComplete.subscribe(cacheroverlay);
			anim.animate();
			
			showSelectBoxes();
		}	
	};	
}();	

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

function cacheroverlay(){
	Ext.get('overlay').setStyle('display','none');
}

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