// -----------------------------------------------------------------------------------
//
//	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.
//
//
// -----------------------------------------------------------------------------------
/*

	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 = "images/loading.gif";		
var filebottomnavcloseimage = "images/closelabel.gif";

var resizespeed = 7;	// 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 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');

		// 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 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('hovernav');
		element.hide('prevlink');
		element.hide('nextlink');
		element.hide('imagedatacontainer');
		element.hide('numberdisplay');		
		
		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];
	},

	//
	//	resizeimagecontainer()
	//
	resizeimagecontainer: function( imgwidth, imgheight) {

		// 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('lightboximage', { 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();
	}
}

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

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