// -----------------------------------------------------------------------------------
//
//	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 overlay

var animate = true;			// toggles resizing animations
var 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 
		var arraypagescroll = getpagescroll();
		var lightboxtop = arraypagescroll[1] + (arraypagesize[3] / 10);
		var lightboxleft = arraypagescroll[0];
		element.settop('lightbox', lightboxtop);
		element.setleft('lightbox', lightboxleft);
		
		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
		if(animate){ 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.onload=function(){};	//	clear onload, ie behaves irratically with animated gifs otherwise 
		}
		imgpreloader.src = imagearray[activeimage][0];
	},

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

		// get curren width and height
		this.widthcurrent = element.getwidth('outerimagecontainer');
		this.heightcurrent = element.getheight('outerimagecontainer');

		// get new width and height
		var widthnew = (imgwidth  + (bordersize * 2));
		var heightnew = (imgheight  + (bordersize * 2));

		// scalars based on change from old to new
		this.xscale = ( widthnew / this.widthcurrent) * 100;
		this.yscale = ( heightnew / this.heightcurrent) * 100;

		// calculate size difference between new and old image, and resize if necessary
		wdiff = this.widthcurrent - widthnew;
		hdiff = this.heightcurrent - heightnew;

		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', widthnew);

		this.showimage();
	},
	
	//
	//	showimage()
	//	display image and begin preloading neighbors.
	//
	showimage: function(){
		element.hide('loading');
		new effect.appear('lightboximage', { duration: resizeduration, queue: 'end', afterfinish: function(){	mylightbox.updatedetails(); } });
		this.preloadneighborimages();
	},

	//
	//	updatedetails()
	//	display caption, image number, and bottom nav.
	//
	updatedetails: function() {
	
		// if caption is not null
		if(imagearray[activeimage][1]){
			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, from: 0.0, to: 1.0 }), 
			  new effect.appear('imagedatacontainer', { sync: true, duration: resizeduration }) ], 
			{ duration: resizeduration, afterfinish: function() {
				// update overlay size and update nav
				var arraypagesize = getpagesize();
				element.setheight('overlay', arraypagesize[1]);
				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;
			escapekey = 27;
		} else { // mozilla
			keycode = e.keycode;
			escapekey = e.dom_vk_escape;
		}

		key = string.fromcharcode(keycode).tolowercase();
		
		if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapekey)){	// close lightbox
			mylightbox.end();
		} else if((key == 'p') || (keycode == 37)){	// display previous image
			if(activeimage != 0){
				mylightbox.disablekeyboardnav();
				mylightbox.changeimage(activeimage - 1);
			}
		} else if((key == 'n') || (keycode == 39)){	// 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: overlayduration});
		showselectboxes();
		showflash();
	}
}

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

//
// getpagescroll()
// returns array with x,y page scroll values.
// core code from - quirksmode.com
//
function getpagescroll(){

	var xscroll, yscroll;

	if (self.pageyoffset) {
		yscroll = self.pageyoffset;
		xscroll = self.pagexoffset;
	} else if (document.documentelement && document.documentelement.scrolltop){	 // explorer 6 strict
		yscroll = document.documentelement.scrolltop;
		xscroll = document.documentelement.scrollleft;
	} else if (document.body) {// all other explorers
		yscroll = document.body.scrolltop;
		xscroll = document.body.scrollleft;	
	}

	arraypagescroll = new array(xscroll,yscroll) 
	return arraypagescroll;
}

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

//
// getpagesize()
// returns array with page width, height and window width, height
// core code from - quirksmode.com
// edit for firefox by phaez
//
function getpagesize(){
	
	var xscroll, yscroll;
	
	if (window.innerheight && window.scrollmaxy) {	
		xscroll = window.innerwidth + window.scrollmaxx;
		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;
	
//	console.log(self.innerwidth);
//	console.log(document.documentelement.clientwidth);

	if (self.innerheight) {	// all except explorer
		if(document.documentelement.clientwidth){
			windowwidth = document.documentelement.clientwidth; 
		} else {
			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;
	}

//	console.log("xscroll " + xscroll)
//	console.log("windowwidth " + windowwidth)

	// for small pages with total width less then width of the viewport
	if(xscroll < windowwidth){	
		pagewidth = xscroll;		
	} else {
		pagewidth = windowwidth;
	}
//	console.log("pagewidth " + pagewidth)

	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(){
	var selects = document.getelementsbytagname("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "visible";
	}
}

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

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

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

function showflash(){
	var flashobjects = document.getelementsbytagname("object");
	for (i = 0; i < flashobjects.length; i++) {
		flashobjects[i].style.visibility = "visible";
	}

	var flashembeds = document.getelementsbytagname("embed");
	for (i = 0; i < flashembeds.length; i++) {
		flashembeds[i].style.visibility = "visible";
	}
}

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

function hideflash(){
	var flashobjects = document.getelementsbytagname("object");
	for (i = 0; i < flashobjects.length; i++) {
		flashobjects[i].style.visibility = "hidden";
	}

	var flashembeds = document.getelementsbytagname("embed");
	for (i = 0; i < flashembeds.length; i++) {
		flashembeds[i].style.visibility = "hidden";
	}

}


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

//
// pause(numbermillis)
// pauses code execution for specified time. uses busy code, not good.
// help from ran bar-on [ran2103@gmail.com]
//

function pause(ms){
	var date = new date();
	curdate = null;
	do{var curdate = new date();}
	while( curdate - date < ms);
}
/*
function pause(numbermillis) {
	var curently = new date().gettime() + sender;
	while (new date().gettime();	
}
*/
// ---------------------------------------------------



function initlightbox() { mylightbox = new lightbox(); }
event.observe(window, 'load', initlightbox, false);