/*
The next project would be to comment everything in this free script to assist the programmer's understanding about this cool feature of the lightbox.

Contact the author at his official website and ask him the uncompressed javascript code of both the prototype.js version and this lightbox.
*/
var objImageContainer;
var musicPlayer = "";

var fileLoadingImage = "js/fade/loading.gif";
var fileBottomNavCloseImage1 = "js/fade/close1.gif";
var fileBottomNavCloseImage2 = "js/fade/close2.gif";
var resizeSpeed = 8;
var borderSize = 10;
var slideShowWidth = 250;
var slideShowHeight = 150;
var SlideShowStartImage = "js/fade/start.gif";
var SlideShowStopImage = "js/fade/stop.gif";
var slideshow = 0;
var foreverLoop = 1;
var loopInterval = 3500;
var resize = 0;
var imageArray = new Array;
var activeImage;
if(resizeSpeed > 10){ 
	resizeSpeed = 10;
}
if(resizeSpeed < 1){
	resizeSpeed = 1;
}
resizeDuration = (11 - resizeSpeed) * 0.15;
var so = null;
var objSlideShowImage; // start of objSlideShowImage
var objLightboxImage;
var objImageDataContainer;
var keyPressed = false;
var slideshowMusic = null;
var firstTime = 1;
var saveSlideshow;
var saveForeverLoop;
var saveLoopInterval;
var saveSlideShowWidth;
var saveSlideShowHeight;
//var imgWidth;
//var imgHeight;
Object.extend(
	Element, { 
		getWidth: function(element) { 
			element = $(element);
			return element.offsetWidth;
		}, getHeight: function(element) { 
			element = $(element);
			return element.offsetHeight;
		}, 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;
		}
	}
);

/*Object.extend( // For integration and study purposes
	Element, { 
		getWidth: function(element) { 
			element = $(element);
			return element.offsetWidth;
		}, getHeight: function(element) { 
			element = $(element);
			return element.offsetHeight;
		}, 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;
		}
	}
);*/

Array.prototype.removeDuplicates = function () { 
	for(i = 1; i < this.length; i++){ // this means the length of this array
		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();
	}
};

var Lightbox = Class.create();
var ourOwnToggleEvent = 0; // uncomment for Ajax aware application
// var imageNoBug; // comment for Ajax aware application
// var avoidBug; ==> unverified results
// var objBottomNav; ==> unverified results
var ourOwnToggleEvent2 = 0;

Lightbox.prototype = { 
	initialize: function() { 
	if (!document.getElementsByTagName){ 
		return;
	}
	var anchors = document.getElementsByTagName('a');

	for (var i=0; i<anchors.length; i++){ 
		var anchor = anchors[i];

		var relAttribute = String(anchor.getAttribute('rel'));

		if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){ 
			anchor.onclick = function () {
				myLightbox.start(this); // note this start() for future reference

				return false;
			};
		}
	}
	var objBody = document.getElementsByTagName("body").item(0);
	var objOverlay = document.createElement("div");
	objOverlay.setAttribute('id','overlay');
	objOverlay.style.display = 'none';
	objOverlay.onclick = function() {
		imageNoBug.setAttribute('src', SlideShowStartImage); // reset the toggler button
		ourOwnToggleEvent = 0; // We make sure that our toggler is initialized back to zero
		myLightbox.end();
		return false;
	};
	objBody.appendChild(objOverlay);
	
	var objLightbox = document.createElement("div");
	objLightbox.setAttribute('id','lightbox');
	objLightbox.style.display = 'none'; /* set this to objLightbox.style.display = 'none';
	when the image will show */
	objBody.appendChild(objLightbox);
	
	var objOuterImageContainer = document.createElement("div");
	objOuterImageContainer.setAttribute('id','outerImageContainer');
	objLightbox.appendChild(objOuterImageContainer);
	
	objImageContainer = document.createElement("div");
	objImageContainer.setAttribute('id','imageContainer');
	objOuterImageContainer.appendChild(objImageContainer);
	objLightboxImage = document.createElement("img"); // This is the image that is not showing on AJAX
	objLightboxImage.setAttribute('id','lightboxImage'); /*
	The Prayer:
		Lord please help me. Everything is possible
		help me to see your wisdom on this.
	*/
	/*
	The Result:
		The Lord opened my mind to set the attribute of this image:
		objLightboxImage.setAttribute('src','13/uploads/images/babyhand.jpg');
		Then I implemented the browser detection which I have taken from
		HTML & XHTML: The Complete Reference, Fourth Edition by Thomas A. Powell
		Chapter 14 Common Scripts ==> Conditional Markup Inclusion==> Browser Detect Example
		The line:
			objLightbox.style.display = 'none'; changed to:
			objLightbox.style.display = 'block'; was also beneficial to assist me wither the image was
			really showing. It was a mix of curiousity, chance I guess which is more like an accident.
			But since the Lord it is that directs our steps (metaphorically speaking), then this could
			be none other than a Divine and Marvelous coincidence.
			
		Therefore, the Lord is so much worthy of my thanks and highest appreciation.
		Then I enjoyed my peace -- The evidence of the experiencing of the Kingdom of God! Halleluiah!
		
		By faith, all the other challenges will be crossed over by the power of the Omniscient God.
		
		Even so. Amen.
		
		Prayer diary by: Oliver Bob Lagumen
		Monday: April 6, 2009 10:33 A.M.
	*/
	objLightboxImage.setAttribute('width',''); // image dimensions blank
	objLightboxImage.setAttribute('height','');
	objLightboxImage.setAttribute('galleryimg','no');
	objLightboxImage.setAttribute('oncontextmenu','return false;');
	objLightboxImage.setAttribute('onmousedown','return false;');
	objLightboxImage.setAttribute('onmousemove','return false;');
	objLightboxImage.onclick = function() {
		//alert('test');	
	}
	
<!--
   var useragent=navigator.userAgent.toLowerCase();
   var is_nav=((useragent.indexOf('mozilla')!=-1));
   var is_ie=(useragent.indexOf("msie") != -1); 
   if (is_nav && !is_ie) {
      //alert("<blink>Netscape should blink</blink>");
   } else if (is_ie) {
       //alert("<marquee>IE loves the marquee</marquee>");
	   //objLightboxImage.setAttribute('src','13/uploads/images/babyhand.jpg');
	   //objLightboxImage.setAttribute('width', imgPreloader.width);
	   //objLightboxImage.setAttribute('width', imgPreloader.height);
	   //imgWidth = 500;
	   //imgHeight = 333;
	   
	   /* The Prayer:
	   Thank you Lord for this big help. What I have in mind is that if there is a way we can detect the browser, then we can set this value to some value if the browser being detected is E.I. Please help me on this Lord. */
	   /* The Result: */
	   // Start working:
	   //objLightboxImage.getAttribute('lightboxImage');
	   // The images are now showing
   } else {
      //alert("<strong>Strong for the unknown browser</strong>");
   }
//-->

	/* actual solution is found in the imgPreloader object instance of Image();
		Element.setWidth('lightboxImage', imgPreloader.width); // Set the width of the preloaded images
		Element.setHeight('lightboxImage', imgPreloader.height);
		If we forget to set the width and the height, then our software will not become AAA:
		--that is, Ajax Aware Application. I just had that term yesterday, but I learned today 
		that it can also be an accronym. I dont know if that term has already existed in the 
		vocabulary of computer terminology standards.
		
		The author of the lightbox application has set the
		Element.setSrc('lightboxImage', imageArray[activeImage][0]); 
		to set the source of the image and it does good on a none embed Ajax of a single window
		application without innerHTML implementation but becomes a big bug in I.E.
	*/
	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','#');
	objPrevLink.setAttribute('onFocus', 'if (this.blur) this.blur()');
	objHoverNav.appendChild(objPrevLink);
	
	var objNextLink = document.createElement("a");
	objNextLink.setAttribute('id','nextLink');
	objNextLink.setAttribute('href','#');
	objNextLink.setAttribute('onFocus', 'if (this.blur) this.blur()');
	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.setAttribute('onFocus', 'if (this.blur) this.blur()');
	objLoadingLink.onclick = function() { 
		myLightbox.end();
		return false;
	};
	objLoading.appendChild(objLoadingLink);
	var objLoadingImage = document.createElement("img");
	
	objLoadingImage.setAttribute('src', fileLoadingImage);
	objLoadingLink.appendChild(objLoadingImage);
	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');
	objCaption.setAttribute('align','left');
	objImageDetails.appendChild(objCaption);
	
	var objNumberDisplay = document.createElement("span");
	objNumberDisplay.setAttribute('align','left');
	objNumberDisplay.setAttribute('id','numberDisplay');
	objImageDetails.appendChild(objNumberDisplay);
	
	// myhtml
	var myHTMLDisplay = document.createElement("span");
	myHTMLDisplay.setAttribute('align','left');
	myHTMLDisplay.setAttribute('id','somehtml');
	myHTMLDisplay.style.fontWeight = 'bold';
	objLightbox.appendChild(myHTMLDisplay); // objImageDetails.appendChild(myHTMLDisplay);
	var getImageWidth;
	
	// myhtml2
	var myHTMLDisplay2 = document.createElement("span");
	myHTMLDisplay2.setAttribute('align','left');
	myHTMLDisplay2.setAttribute('id','somehtml2');
	myHTMLDisplay.onclick = function() {
/*		



		*/
		//Element.setSrc('somehtml2', 'test.php');
		//doAjax('test.php','','callbk2','post','0', 'somehtml2');
		getServerData();
		//updateDIV();
		
		function getServerData() {
			
		/*var myAjax = new Ajax.PeriodicalUpdater(
			'somehtml2', 'bags.html', 
				{evalscripts:true,
					method: 'post', frequency: 3.0, decay: 1
				}
			);*/
			new Ajax.Updater('somehtml2', 'test.php', {
				parameters: { text: $('somehtml2') },
				insertion: Insertion.top, // top || before || After || Bottom
				evalScripts:true
			});
			cool = function() {
				//myhtml2=description;
				Element.setInnerHTML('somehtml2',description); // This code is like the instruction below:
				// alert(myhtml2); // uncomment this only after you follow the instructions below:
				/*Put this inside your url.html defined within Ajax.Updater() argument
				<script language="javascript">
					tools = 'vars';
					cool();
				</script>
				//
				*/
			}
		}
	}
	
	/*var myAjax = new Ajax.Updater('body', 'test.php', options);
	var myAjax = new Ajax.Updater('body', 'test.php', '');*/
/*	function updateDIV(somehtml2){
		var url = 'test.php';
		var params = 'param1=value1&param2=value2';
		var myAjax = new Ajax.Updater
		(
			mydiv,
			url,
			{
				method: 'post', parameters: params
			}
		);
	}*/


	myHTMLDisplay2.style.fontWeight = 'bold';
	objLightbox.appendChild(myHTMLDisplay2); // objImageDetails.appendChild(myHTMLDisplay2);

	
	var objBottomNav = document.createElement("div");
	objBottomNav.setAttribute('id','bottomNav');
	objImageData.appendChild(objBottomNav);

	/*Tha nature of the following links is that they are aligned right*/
	// start of objBottomNavCloseLink
	var objBottomNavCloseLink = document.createElement("a"); // 1.)
	objBottomNavCloseLink.setAttribute('id','bottomNavClose'); // 2.)
	objBottomNavCloseLink.setAttribute('href','#'); // 3.)
	objBottomNavCloseLink.setAttribute('title','exit'); // 4.) // unique due to its title
	objBottomNavCloseLink.setAttribute('onFocus', 'if (this.blur) this.blur()'); // 5.)
	objBottomNavCloseLink.onclick = function() { // 6.)
		imageNoBug.setAttribute('src', SlideShowStartImage); // reset the toggler button
		ourOwnToggleEvent = 0; // We make sure that our toggler is initialized back to zero
		myLightbox.end();
		//The next two lines eliminated, gets rid of IE errors when the lightbox is closed application exits.
		/*window.clearInterval(chid);
		history.go(-1);*/ // Uncomment to experiment and close
		return false;
	};
	objBottomNav.appendChild(objBottomNavCloseLink); // 7.)
	var objBottomNavCloseImage = document.createElement("img"); // 8.)
	objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage1); // 9.)
	objBottomNavCloseImage.setAttribute('align', 'right'); // 10.)
	objBottomNavCloseImage.setAttribute('name', 'close'); // 11.)
	objBottomNavCloseImage.setAttribute('height', '11'); // 12.)
	objBottomNavCloseImage.setAttribute('width', '48'); // 13.)
	objBottomNavCloseLink.appendChild(objBottomNavCloseImage); // 14.) // Image appended to the link
	objBottomNavCloseLink.onmouseover = function () { // 15.)
		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage2);
	};
	objBottomNavCloseLink.onmouseout = function () {
		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage1);
	};
// end of objBottomNavCloseLink

	/* Creating our own custom links to avoid the start/stop bug */
	// start of avoidBug
	var avoidBug = document.createElement("a"); // 1.)
	avoidBug.setAttribute('id','bottomNavClose'); // 2.)
	avoidBug.setAttribute('href','#'); // 3.)
	avoidBug.setAttribute('title','Toggle Auto or Stop mode'); // 4.) // unique due to its title
	avoidBug.setAttribute('onFocus', 'if (this.blur) this.blur()'); // 5.)
	// var ourOwnToggleEvent = 0; comment for Ajax aware application
	avoidBug.onclick = function() { // 6.)
		if (ourOwnToggleEvent == 0) {
			imageNoBug.setAttribute('src', SlideShowStopImage); // traced toggle command before toggle
			ourOwnToggleEvent = 1;
		} else {
			imageNoBug.setAttribute('src', SlideShowStartImage); // traced toggle command before toggle
			ourOwnToggleEvent = 0;
		}
		myLightbox.toggleSlideShow();
		return false;
	};

	objBottomNav.appendChild(avoidBug); // 7.)
	var imageNoBug = document.createElement("img"); // 8.)
	imageNoBug.setAttribute('src', SlideShowStartImage); // 9.)
	imageNoBug.setAttribute('align', 'right'); // 10.)
	imageNoBug.setAttribute('name', 'close'); // 11.)
	imageNoBug.setAttribute('height', '14'); // 12.)
	imageNoBug.setAttribute('width', '53'); // 13.)
	avoidBug.appendChild(imageNoBug); // 14.) // Image appended to the link
	// end of avoidBug

	// start use of objSlideShowImage
	var objSlideShowLink = document.createElement("a"); // 1.)
	objSlideShowLink.setAttribute('id','slideshowLink'); // 2.)
	objSlideShowLink.setAttribute('href','#'); // 3.)
	objSlideShowLink.setAttribute('title','Slideshow'); // 4.) // unique due to its title
	objSlideShowLink.setAttribute('onFocus', 'if (this.blur) this.blur()'); // 5.)
	objSlideShowLink.onclick = function() { // 6.)
		//myLightbox.toggleSlideShow();
		//return false;
	};
	objBottomNav.appendChild(objSlideShowLink); // 7.)
	objSlideShowImage = document.createElement("img"); // 8.)
	objSlideShowImage.setAttribute('src', SlideShowStartImage); // 9.)
	objSlideShowImage.setAttribute('align', 'right'); // 10.)
	objSlideShowImage.setAttribute('name', 'close'); // 11.)
	objSlideShowImage.setAttribute('height', '14'); // 12.)
	objSlideShowImage.setAttribute('width', '53'); // 13.)
	//objSlideShowLink.appendChild(objSlideShowImage); // 14.) // We need to comment this to avoid bugs
	// end of objSlideShowImage

	// We want to make these formerly local variables global:
	var startSlideshow; // we declare the variable "startSlideshow"
	var forever; // we declare the variable "forever"
	var slideDuration; // we declare the variable "slideDuration"
	var width; // we declare the variable "width"
	var height; // we declare the variable "height"
	var objFlashPlayer = document.createElement("div");
	objFlashPlayer.setAttribute('id','flashPlayer');
	objBottomNav.appendChild(objFlashPlayer);
}, 
start: function(imageLink) { // watch this thing its the same start() function
	firstTime = 1;
	saveSlideshow = slideshow;
	saveForeverLoop = foreverLoop;
	saveLoopInterval = loopInterval;
	saveSlideShowWidth = slideShowWidth;
	saveSlideShowHeight = slideShowHeight;
	hideSelectBoxes();
	var arrayPageSize = getPageSize();
	Element.setHeight('overlay', arrayPageSize[1]);
	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((imageLink.getAttribute('rel') == 'lightbox')){ // Start of image HTML detection of anchors
		imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('caption')));
	} else { 
		for (var i=0; i<anchors.length; i++){ 
			var anchor = anchors[i]; // This will keep the record of all the links in the document
			if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){ // to parse only specific links
			imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('caption'))); // This will return a number array
			if (imageArray.length == 1) { 
				slideshowMusic = anchor.getAttribute('music');
			if (slideshowMusic == null) { 
				Element.hide('flashPlayer');
			} else { 
				Element.show('flashPlayer');
			}
			startSlideshow = anchor.getAttribute('startslideshow'); // we initialize "startSlideshow"
			// alert(startSlideshow);
			if (startSlideshow != null) { 
				if (startSlideshow == "false") 
					slideshow = 0;
				}
				forever = anchor.getAttribute('forever'); // we initialize "forever"
				if (forever != null) { 
					if (forever == "true") 
						foreverLoop = 1;
					else foreverLoop = 0;
				}
				slideDuration = anchor.getAttribute('slideDuration');
				if (slideDuration != null) { 
					loopInterval = slideDuration * 1000;
				}
				width = anchor.getAttribute('slideshowwidth'); // we initialize "width"
				if (width != null) { 
					slideShowWidth = width *1;
				}
				height = anchor.getAttribute('slideshowheight');; // we initialize "height"
				if (height != null) { 
					slideShowHeight = height *1;
				}
			}
		}
	}
	imageArray.removeDuplicates();
	while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { // if the first
		// element in the array is not equal to the href attribute, do something:
		imageNum++; //alert(imageNum);
	}
} // end of start();
//imageNum != imageLink.getAttribute('href')
this.changeImageByTimer(imageNum); // it just returns the image height but not the image itself;

}, showLightBox: function() { 
	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();
	var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);
	Element.setTop('lightbox', lightboxTop);
	Element.show('lightbox'); // controls the showing up of the lightbox
	// plan to create your own version of this lightbox with new features.
}, changeImageByTimer: function(imageNum) { 
	activeImage = imageNum;
	this.imageTimer = setTimeout(function() { 
		this.showLightBox();
		this.changeImage(activeImage);
	}.bind(this), 10);
}, 
changeImage: function(imageNum) { 
	activeImage = imageNum;
	Element.show('loading');
	Element.hide('lightboxImage');
	Element.hide('hoverNav');
	Element.hide('prevLink');
	Element.hide('nextLink');
	Element.hide('imageDataContainer');
	Element.hide('numberDisplay');
	Element.hide('numberDisplay');
	Element.hide('somehtml'); // We want to include our element as hidden
	Element.hide('somehtml2');
	imgPreloader = new Image();
	imgPreloader.onload=function(){ // on load do the following:
		Element.setSrc('lightboxImage', imageArray[activeImage][0]); // Set the source of the active image
		Element.setWidth('lightboxImage', imgPreloader.width); // Set the width of the preloaded images
		Element.setHeight('lightboxImage', imgPreloader.height); // Set the heigth
		/*It took me 3 days to figure out this problem for an Ajax Aware Appliation
		See the prayer above:). My Joy! Blessed be God The problem is solved on:
		Monday: April 6, 2009
		11:42 A.M.
		*/
		
		if ((imageArray.length > 1) && (slideShowWidth != -1 || slideShowHeight != -1)) { 
			if ( (slideShowWidth >= imgPreloader.width) && (slideShowHeight >= imgPreloader.height) ) {
				
				/*if ((imgPreloader.width <=300) || (imgPreloader.height <=300) ) {
					myLightbox.resizeImageAndContainer(500, 333);
				} else {*/
					myLightbox.resizeImageContainer(slideShowWidth, slideShowHeight);
				//}
				
			} else { 
				myLightbox.resizeImageAndContainer(imgPreloader.width, imgPreloader.height);
			}
		} else { 
			myLightbox.resizeImageAndContainer(imgPreloader.width, imgPreloader.height);
		}
	}
	imgPreloader.src = imageArray[activeImage][0];
}, 
resizeImageAndContainer: function(imgWidth, imgHeight) { 
	if(resize == 1) { 
		useableWidth = 0.9;
		useableHeight = 0.8;
		var arrayPageSize = getPageSize();
		windowWidth = arrayPageSize[2];
		windowHeight = arrayPageSize[3];
		scaleX = 1;
		scaleY = 1;
		if ( imgWidth > windowWidth * useableWidth ) 
			scaleX = (windowWidth * useableWidth) / imgWidth;
		if ( imgHeight > windowHeight * useableHeight ) 
			scaleY = (windowHeight * useableHeight) / imgHeight;
			scale = Math.min( scaleX, scaleY );
			imgWidth *= scale;
			imgHeight *= scale;
			objLightboxImage.setAttribute('width', imgWidth);
			objLightboxImage.setAttribute('height', imgHeight);
		}
		this.resizeImageContainer(imgWidth, imgHeight);
	}, resizeImageContainer: function( imgWidth, imgHeight) { 
		this.wCur = Element.getWidth('outerImageContainer');
		this.hCur = Element.getHeight('outerImageContainer');
		this.xScale = ((imgWidth + (borderSize * 2)) / this.wCur) * 100;
		this.yScale = ((imgHeight + (borderSize * 2)) / this.hCur) * 100;
		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((hDiff == 0) && (wDiff == 0)){ 
			if (navigator.appVersion.indexOf("MSIE")!=-1){ 
				pause(250);
			} else { 
				pause(100);
			}
		}
		
			Element.setHeight('prevLink', imgHeight);
			Element.setHeight('nextLink', imgHeight);
			//initialize getImageWidth
			getImageWidth = imgWidth + (borderSize * 2);
			Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));
			this.showImage();
		}, 
		showImage: function(){ Element.hide('loading');
			new Effect.Appear('lightboxImage', { 
				duration: 0.5, queue: 'end', 
				afterFinish: function(){ 
					myLightbox.updateDetails();
				}
			}
		);
			
		this.preloadNeighborImages();
	}, 
	updateDetails: function() {
		Element.show('numberDisplay');
		if (imageArray[activeImage][1] != '') { 
			Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
		} else { 
			Element.setInnerHTML( 'caption', "&nbsp;");
		}
	if(imageArray.length>1){ 
		var ndhtml;
		
		Element.show('caption');
		ndhtml=""+eval(activeImage+1)+" of "+imageArray.length;
		if(eval(activeImage+1)>1){ 
			ndhtml="<a id='prevLink2'>Previous</a>&nbsp;&nbsp;-&nbsp;&nbsp;"
			+
			ndhtml;
		}
		if(eval(activeImage+1)<imageArray.length){ 
			ndhtml=ndhtml+"&nbsp;&nbsp;-&nbsp;&nbsp;<a id='nextLink2'>Next</a>";
		}
		Element.setInnerHTML('numberDisplay',ndhtml);
	}
	if (1 == 1) { 
		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();

		//alert(imgWidth);
		myhtml = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+getImageWidth+'" height="50" id="FlashID5" accesskey="flash5" tabindex="5">'
			  +'<param name="movie" value="flash/animation.swf" />'
			  +'<param name="quality" value="high" />'
			  +'<param name="wmode" value="transparent" />'
			  +'<param name="swfversion" value="9.0.45.0" />'
			  +'<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->'
			  +'<param name="expressinstall" value="Scripts/expressInstall.swf" />'
			  +'<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->'
			  +'<!--[if !IE]>-->'
			  +'<object type="application/x-shockwave-flash" data="flash/animation.swf" width="'+getImageWidth+'" + "height="50">'
				+'<!--<![endif]-->'
				+'<param name="quality" value="high" />'
				+'<param name="wmode" value="opaque" />'
				+'<param name="swfversion" value="9.0.45.0" />'
				+'<param name="expressinstall" value="Scripts/expressInstall.swf" />'
				+'<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->'
				+'<div>'
				+'  <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>'
				+'  <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>'
				+'</div>'
				+'<!--[if !IE]>-->'
			  +'</object>'
			  +'<!--<![endif]-->'
			+'</object>';
			
			myhtml2 = description;
			
			Element.show('somehtml');
			Element.setInnerHTML('somehtml',myhtml);
			//Element.show('numberDisplay');
			
			Element.show('somehtml2');
			Element.setInnerHTML('somehtml2',myhtml2);
			
			Element.show('numberDisplay');
			
				} 
			}
		);
	} else { 
		myLightbox.updateNav();
	}
	if (imageArray.length > 1) { 
		Element.show('flashPlayer');
		Element.show('slideshowLink');
	} else { 
		Element.hide('flashPlayer');
		Element.hide('slideshowLink');
	}
	if (slideshow == 1) { 
		this.startSlideShow();
	}
}, 
updateNav: function() { // animate previous and next button
	Element.show('hoverNav');
	if(activeImage != 0){ 
		Element.show('prevLink');
		document.getElementById('prevLink').onclick = function() { 
			if (slideshow == 1) keyPressed = true;
			myLightbox.changeImage(activeImage - 1);
			return false;
		}
		document.getElementById('prevLink2').onclick = function() { 
			if (slideshow == 1) keyPressed = true;
			myLightbox.changeImage(activeImage - 1);
			return false;
		}
	}
	if(activeImage != (imageArray.length - 1)){ 
		Element.show('nextLink');
		document.getElementById('nextLink').onclick = function() { 
			if (slideshow == 1) keyPressed = true;
			myLightbox.changeImage(activeImage + 1);
			return false;
		}
		document.getElementById('nextLink2').onclick=function(){ 
			if (slideshow == 1) keyPressed = true;
			myLightbox.changeImage(activeImage+1);return false;
		}
	}
	this.enableKeyboardNav();
	if (firstTime == 1) { 
		firstTime = 0;
		if (imageArray.length > 1 && slideshow == 1) 
			this.showMusicPlayer();
		if (slideshow == 1) 
		this.playMusic();
	}
}, 
enableKeyboardNav: function() { 
	document.onkeydown = this.keyboardAction;
}, 
disableKeyboardNav: function() { 
	document.onkeydown = '';
}, 
keyboardAction: function(e) { 
	if (e == null) { 
		keycode = event.keyCode;
	} else { 
		keycode = e.which;}
		key = String.fromCharCode(keycode).toLowerCase();
	if((key == 'x') || (key == 'o') || (key == 'c')){ 
		imageNoBug.setAttribute('src', SlideShowStartImage); // reset the toggler button
		ourOwnToggleEvent = 0; // We make sure that our toggler is initialized back to zero
		myLightbox.end();
	} else if((keycode == 188) || (key == 'p') || (keycode == 37)){ 
		if(activeImage != 0){ 
			if (slideshow == 1) 
				keyPressed = true;
				myLightbox.disableKeyboardNav();
				myLightbox.changeImage(activeImage - 1);
			}
		} else if((keycode == 190) || (key == 'n') || (keycode == 39)){ 
			if(activeImage != (imageArray.length - 1)){ if (slideshow == 1) keyPressed = true;
				myLightbox.disableKeyboardNav();
				myLightbox.changeImage(activeImage + 1);
			}
		} else if(key == 's'){
			changeToggler();
		} else if(key == 'a'){
			// alert('a');
			changeToggler();
		}
		
	}, 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];}
		}, toggleSlideShow: function() { 
		if(slideshow == 1) {
			this.stopSlideShow();
		} else { 
		if(activeImage == (imageArray.length-1)) {
			slideshow = 1;
			this.changeImage(0);
		} else { 
			this.startSlideShow();
		}
	}
},
startSlideShow: 
function() { 
	slideshow = 1;
	objSlideShowImage.setAttribute('src', 'js/fade/stop.gif');
	this.slideShowTimer = setTimeout(
		function() { //alert(objSlideShowImage);
			if (keyPressed) {
				keyPressed = false;
				return;
			}
			if(activeImage < (imageArray.length-1)) 
				this.changeImage(activeImage + 1);
				else { 
					if(foreverLoop) {
						this.changeImage(0);
							objSlideShowImage.setAttribute('src', SlideShowStopImage);
						} else { slideshow = 0;
							objSlideShowImage.setAttribute('src', SlideShowStartImage);
						}
					}
				}.bind(this), loopInterval);
	}, 
	stopSlideShow: function() { 
		slideshow = 0;
		objSlideShowImage.setAttribute('src', SlideShowStartImage);
		if(this.slideShowTimer) { 
			clearTimeout(this.slideShowTimer);
			this.slideShowTimer = null;
			Element.setInnerHTML('flashPlayer', '');
		}
	}, end: function() { 
		this.stopSlideShow();
		this.disableKeyboardNav();
		Element.hide('lightbox');
		new Effect.Fade('overlay', { 
			duration: 0.2});
			showSelectBoxes();
			slideshow = saveSlideshow;
			foreverLoop = saveForeverLoop;
			loopInterval = saveLoopInterval;
			slideShowWidth = saveSlideShowWidth;
			slideShowHeight = saveSlideShowHeight;
		}
	}
	function getPageScroll(){ 
		var yScroll;
		if (self.pageYOffset) { 
			yScroll = self.pageYOffset;} 
			else if (document.documentElement && document.documentElement.scrollTop){ 
				yScroll = document.documentElement.scrollTop;
			} else if (document.body) { 
				yScroll = document.body.scrollTop;
			}
			arrayPageScroll = new Array('',yScroll)
			return arrayPageScroll;
		}
	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){ 
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;} else { xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;}
			var windowWidth, windowHeight;
		if (self.innerHeight) { 
			windowWidth = self.innerWidth;
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { 
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { 
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}
		if(yScroll < windowHeight){ pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
		if(xScroll < windowWidth){ 
			pageWidth = windowWidth;
		} else { 
			pageWidth = xScroll;
		}
		arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
		return arrayPageSize;
	}
	function getKey(e){ 
		if (e == null) { 
			keycode = event.keyCode;
		} else { 
			keycode = e.which;
		}
		key = String.fromCharCode(keycode).toLowerCase();
		if(key == 'x'){ }
	}
	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";
	}
}
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(); // Try to make the lightbox function reload after the AJAX call has returned
}
function init() { 
	if (arguments.callee.done)
	return;

	arguments.callee.done = true;

	if (_timer) { 
		clearInterval(_timer);
_timer = null;
	}
	initLightbox();
};

if (document.addEventListener) { 
	document.addEventListener("DOMContentLoaded", init, false);
}
if (/WebKit/i.test(navigator.userAgent)) { 
	var _timer = setInterval(function() { 
		if (/loaded|complete/.test(document.readyState)) { 
			init();
		}
	}, 10);
}
window.onload = init;
var description ="<p><font color='gray'>This website is under construction.</font></p>";

/*
Comments I searched in the web under the author's website:
Thank you for your quick answer.

the initialization function is init(). call this one after the AJAX call. this function can be called only once… call initLightbox() function.
#
rupertolson on January 30, 2008

Yes, you may want to have the lightbox not load until after the AJAX returns, then call it.

*/