//******************************************************************************************************************************/
//	LyteBox v3.00
//
//	 Author: Markus F. Hay
//  Website: http://www.dolem.com
//	   Date: April 10, 2007
//	License: Creative Commons Attribution 2.5 License (http://creativecommons.org/licenses/by/2.5/)
// Browsers: Tested successfully on WinXP with the following browsers (using no DOCTYPE, Strict DOCTYPE, and Transitional DOCTYPE):
//				* Firefox: 2.0, 1.5.0.11
//				* Internet Explorer: 7.0, 6.0 SP2, 5.5 SP2
//				* Opera: 9.10
//
// Releases: v3.00
//				* Integrated the "Lyteshow" feature into "Lytebox" and improved the functionality by:
//					- Adding pause/play functionality
//					- Allowing multiple slideshows on the same page via grouping
//				* Updated the navigation images (next, prev, close, etc.) and enhanced the stylesheet for more consistent display.
//				* Fixed bug where the "overlay" did not consume 100% of the height if the image resized to a height larger than
//				  the previous page size, i.e. the image data container expanded outside of the "overlayed" area.
//				* Moved all images to the stylesheet (lytebox.css) so image locations only need to be updated in a single file.
//				  This includes the close, loading, pause, and play buttons.
//				* Fixed a bug where the "Close" button did not always work in Internet Explorer.
//				* Fixed a bug where the "ScrollTop" property was not being properly read. This was causing the Lytebox container
//				  to appear out of position when scrollbars were visible, typically near the top of the page instead of adjusting
//				  for the amount that the user has scrolled on the page.
//				* Added the ability to hide Flash objects which prevents Flash from appearing above the Lytebox container.
//				  By default, Lytebox will hide all Flash objects. This can be disabled by setting "this.hideFlash" to false.
//				* Improved keyboard functionality. Some of the original functionality was stripped out (ESC key), so this was
//				  added back in. Also fixed the Prev/Next navigation, which was pretty much broken due to the initial iframe
//				  support addition.
//				* Added the ability to show an outer border. Set this.outerBorder to true to enable.
//				* Prepended "lb" to all id/class definitions to help avoid conflicts.
//
//			 v2.02
//				* Initial release of "Lytebox".
//
//	 Issues: v3.00
//				* Keyboard navigation does not work properly (previous [p] and next [n]).
//				* The "Lyteshow" feature does not work properly in the parent if it is also being used in a child iFrame
//				  window. This will hopefully be resolved in the next release, but so as to not further delay this feature,
//				  and assuming that most people will not want to have slideshows in both "windows", I decided to leave this
//				  as an issue to resolve later, in the interest of national security and run-on sentences.
//
//     NOTE: LyteBox was written from the Lightbox class that Lokesh Dhakar (http://www.huddletogether.com)
//			 originally wrote. The purpose was to write a self-contained object that eliminates the dependency
//			 of prototype.js, effects.js, and scriptaculous.js. Most of the core functionality and code was
//			 left in tact, and several functions were added to mimic the effects provided by sciptaculous. These
//			 newly added functions include: appear(), fade(), resizeW(), resizeH(), and toggleSelects(). Functions
//			 that were not needed were removed, as were global variables. Additionally, support has been added for
//			 iFrame environments without any code modifications needed by the end user (auto-detect).
//
//			 That being said, the original comments by Lokesh are below:
//
//				* 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.
//
//******************************************************************************************************************************/
//  Extended Built-in Objects
//  - Array.prototype.removeDuplicates()
//  - Array.prototype.empty()
//
//	LyteBox Class Definition
//	- LyteBox()
//  - initialize()
//  - start()
//  - changeImage(imageNum)
//  - checkFrame()
//  - resizeImageContainer(imgWidth, imgHeight)
//  - showImage()
//  - updateDetails()
//  - updateNav()
//  - enableKeyboardNav()
//  - disableKeyboardNav()
//  - keyboardAction()
//  - preloadNeighborImages()
//	- togglePlayPause()
//  - end()
//  - appear(id, opacity)
//  - fade(id, opacity)
//  - resizeW(id, curW, maxW, timer)
//  - resizeH(id, curH, maxH, timer)
//  - getPageScroll()
//  - getPageSize()
//	- toggleFlash(state)
//  - toggleSelects(state)
//  - pause(numberMillis)
//
//  - initLytebox()
//**************************************************************************************************************/
Array.prototype.removeDuplicates = function () { for (var i = 1; i < this.length; i++) { if (this[i][0] == this[i-1][0]) { this.splice(i,1); } } }
Array.prototype.empty = function () { for (var i = 0; i <= this.length; i++) { this.shift(); } }

//*************************/
// LyteBox constructor
//*************************/
function LyteBox() {
	/*** Start Global Configuration ***/
		this.theme				= 'red'	// themes: grey (default), red, green, blue, gold
		this.hideFlash			= false;		// controls whether or not Flash objects should be hidden
		this.outerBorder		= true;		// controls whether to show the outer grey (or theme) border
		this.resizeSpeed		= 8;		// controls the speed of the image resizing (1=slowest and 10=fastest)
		this.borderSize			= 12;		// if you adjust the padding in the CSS, you will need to update this variable
		this.maxOpacity			= 80;		// higher opacity = darker overlay, lower opacity = lighter overlay
	/*** End Global Configuration ***/
	
	/*** Configure Slideshow Options ***/
		this.isPaused			= true;		// true to pause the slideshow if clicked image is not the first in the slideshow, false to auto-play
		this.slideInterval		= 168000;		// Change value (milliseconds) to increase/decrease the time between "slides"
		this.showNavigation		= true;		// true to display Next/Prev buttons for navigation, false to hide
		this.showClose			= true;		// true to display the Close button, false to hide
		this.showDetails		= true;		// true to display image details (caption, count), false to hide
		this.showPause			= true;	// true to display pause/play buttons next to close button, false to hide
		this.autoEnd			= true;		// true to automatically close Lytebox after the last image is reached, false to keep open
		this.pauseOnNextClick	= false;	// true to pause the slideshow when the "Next" button is clicked
        this.pauseOnPrevClick 	= true;		// true to pause the slideshow when the "Prev" button is clicked
	/*** End Slideshow Configuration ***/	
	
	
	if(this.resizeSpeed > 10) { this.resizeSpeed = 10; }
	if(this.resizeSpeed < 1) { resizeSpeed = 1; }
	this.resizeDuration = (11 - this.resizeSpeed) * 0.15;
	
	/* MEMBER VARIABLES USED TO CLEAR SETTIMEOUTS */
	this.resizeWTimerArray		= new Array();
	this.resizeWTimerCount		= 0;
	this.resizeHTimerArray		= new Array();
	this.resizeHTimerCount		= 0;
	this.showImageTimerArray	= new Array();
	this.showImageTimerCount	= 0;
	this.overlayTimerArray		= new Array();
	this.overlayTimerCount		= 0;
	this.imageTimerArray		= new Array();
	this.imageTimerCount		= 0;
	this.timerIDArray			= new Array();
	this.timerIDCount			= 0;
	this.slideshowIDArray		= new Array();
	this.slideshowIDCount		= 0;
	
	/* GLOBAL */
	this.imageArray	 = new Array();
	this.activeImage = null;
	this.slideArray	 = new Array();
	this.activeSlide = null;
	
	/* Check for iFrame environment (will set this.isFrame and this.doc member variables) */
	this.checkFrame();
	
	/* Set to false by default */
	this.isSlideshow = false;
	
	// We need to know the certain browser versions (or if it's IE) since IE is "special" and requires spoon feeding.
	/*@cc_on
		/*@if (@_jscript)
			this.ie = (document.all) ? true : false;
		/*@else @*/
			this.ie = false;
		/*@end
	@*/
	this.ie7 = (this.ie && window.XMLHttpRequest);
	
	/* INITIALIZE */
	this.initialize();
}

//********************************************************************************************/
// initialize()
// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for 
// 'lytebox' 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.
//********************************************************************************************/
LyteBox.prototype.initialize = function() {
	if (!document.getElementsByTagName) { return; }
	
	// populate array of anchors from the appropriate window (could be the parent or iframe document)
	var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : 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 'lytebox' references in the rel attribute
		if (anchor.getAttribute('href')) {
			if (relAttribute.toLowerCase().match('lytebox')) {
				anchor.onclick = function () { myLytebox.start(this, false); return false; }
			} else if (relAttribute.toLowerCase().match('lyteshow')) {
				anchor.onclick = function () { myLytebox.start(this, true); return false; }
			}
		}
	}
	
	// The rest of this code inserts html at the bottom of the page that looks similar to this:
	//
	//	<div id="lbOverlay"></div>
	//	<div id="lbMain">
	//		<div id="lbOuterImageContainer">
	//			<div id="lbImageContainer">
	//				<img id="lbImage">
	//				<div style="" id="lbHoverNav">
	//					<a href="#" id="lbPrevLink"></a>
	//					<a href="#" id="lbNextLink"></a>
	//				</div>
	//				<div id="lbLoading"></div>
	//			</div>
	//		</div>
	//		<div id="lbImageDataContainer">
	//			<div id="lbImageData">
	//				<div id="lbImageDetails">
	//					<span id="lbCaption"></span>
	//					<span id="lbNumberDisplay"></span>
	//				</div>
	//				<div id="lbBottomNav">
	//					<a href="#" id="lbBottomNavPlay"></a>
	//					<a href="#" id="lbBottomNavPause"></a>
	//					<a href="#" id="lbBottomNavClose"></a>
	//				</div>
	//			</div>
	//		</div>
	//	</div>

	var objBody = this.doc.getElementsByTagName("body").item(0);

	var objOverlay = this.doc.createElement("div");
		objOverlay.setAttribute('id','lbOverlay');
		objOverlay.setAttribute((document.all ? 'className' : 'class'), this.theme);
		objOverlay.style.display = 'none';
		objBody.appendChild(objOverlay);
	
	var objLytebox = this.doc.createElement("div");
		objLytebox.setAttribute('id','lbMain');
		objLytebox.style.display = 'none';
		objBody.appendChild(objLytebox);
	
	var objOuterImageContainer = this.doc.createElement("div");
		objOuterImageContainer.setAttribute('id','lbOuterImageContainer');
		objOuterImageContainer.setAttribute((document.all ? 'className' : 'class'), this.theme);
		objLytebox.appendChild(objOuterImageContainer);

	var objImageContainer = this.doc.createElement("div");
		objImageContainer.setAttribute('id','lbImageContainer');
		objOuterImageContainer.appendChild(objImageContainer);

	var objLyteboxImage = this.doc.createElement("img");
		objLyteboxImage.setAttribute('id','lbImage');
		objImageContainer.appendChild(objLyteboxImage);
		
	var objLoading = this.doc.createElement("div");
		objLoading.setAttribute('id','lbLoading');
		objImageContainer.appendChild(objLoading);
		
	var objImageDataContainer = this.doc.createElement("div");
		objImageDataContainer.setAttribute('id','lbImageDataContainer');
		objImageDataContainer.setAttribute((document.all ? 'className' : 'class'), this.theme);
		objLytebox.appendChild(objImageDataContainer);

	var objImageData =this.doc.createElement("div");
		objImageData.setAttribute('id','lbImageData');
		objImageData.setAttribute((document.all ? 'className' : 'class'), this.theme);
		objImageDataContainer.appendChild(objImageData);
	
	var objImageDetails = this.doc.createElement("div");
		objImageDetails.setAttribute('id','lbImageDetails');
		objImageData.appendChild(objImageDetails);

	var objCaption = this.doc.createElement("span");
		objCaption.setAttribute('id','lbCaption');
		objImageDetails.appendChild(objCaption);
		
	var objHoverNav = this.doc.createElement("div");
		objHoverNav.setAttribute('id','lbHoverNav');
		objImageContainer.appendChild(objHoverNav);
	
	var objBottomNav = this.doc.createElement("div");
		objBottomNav.setAttribute('id','lbBottomNav');
		objImageData.appendChild(objBottomNav);
	
	var objPrevLink = this.doc.createElement("a");
		objPrevLink.setAttribute('id','lbPrevLink');
		objPrevLink.setAttribute((document.all ? 'className' : 'class'), this.theme);
		objPrevLink.setAttribute('href','#');
		objHoverNav.appendChild(objPrevLink);
	
	var objNextLink = this.doc.createElement("a");
		objNextLink.setAttribute('id','lbNextLink');
		objNextLink.setAttribute((document.all ? 'className' : 'class'), this.theme);
		objNextLink.setAttribute('href','#');
		objHoverNav.appendChild(objNextLink);
	
	var objNumberDisplay = this.doc.createElement("span");
		objNumberDisplay.setAttribute('id','lbNumberDisplay');
		objImageDetails.appendChild(objNumberDisplay);

var objBottomNavCloseLink = this.doc.createElement("a");
		objBottomNavCloseLink.setAttribute('id','lbBottomNavClose');
		objBottomNavCloseLink.setAttribute((document.all ? 'className' : 'class'), this.theme);
		objBottomNavCloseLink.setAttribute('href','#');
		objBottomNav.appendChild(objBottomNavCloseLink);	
		
	var objBottomNavPauseLink = this.doc.createElement("a");
		objBottomNavPauseLink.setAttribute('id','lbBottomNavPause');
		objBottomNavPauseLink.setAttribute((document.all ? 'className' : 'class'), this.theme);
		objBottomNavPauseLink.setAttribute('href','#');
		objBottomNavPauseLink.style.display = 'none';
		objBottomNav.appendChild(objBottomNavPauseLink);
		
	var objBottomNavPlayLink = this.doc.createElement("a");
		objBottomNavPlayLink.setAttribute('id','lbBottomNavPlay');
		objBottomNavPlayLink.setAttribute((document.all ? 'className' : 'class'), this.theme);
		objBottomNavPlayLink.setAttribute('href','#');
		objBottomNavPlayLink.style.display = 'none';
		objBottomNav.appendChild(objBottomNavPlayLink);		
			
};

//********************************************************************************/
// start()
// Display overlay and Lytebox. If image is part of a set, add siblings to imageArray.
//********************************************************************************/
LyteBox.prototype.start = function(imageLink, doSlide) {
	// Hide select boxes for IE6 and below
	if (this.ie && !this.ie7) {	this.toggleSelects('hide');	}
	
	// Hide flash objects (should add a boolean to disable this)
	if (this.hideFlash) { this.toggleFlash('hide'); }
	
	// stretch overlay to fill page and fade in
	var pageSize	= this.getPageSize();
	var objOverlay	= this.doc.getElementById('lbOverlay');
	var objBody		= this.doc.getElementsByTagName("body").item(0);
	
	objOverlay.style.height = pageSize[1] + "px";
	objOverlay.style.display = '';
	this.appear('lbOverlay', 0);
	
	// initialize
	this.imageArray = [];
	this.imageNum = 0;
	this.slideArray = [];
	this.slideNum = 0;

	if (!document.getElementsByTagName){ return; }

	var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');

	// if image is NOT part of a set..
	if((imageLink.getAttribute('rel') == 'lytebox')) {	// add single image to imageArray
		this.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 or slideArray
		if (imageLink.getAttribute('rel').indexOf('lytebox') != -1) {
			for (var i = 0; i < anchors.length; i++) {
				var anchor = anchors[i];
				if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
					this.imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
				}
			}
			this.imageArray.removeDuplicates();
			while(this.imageArray[this.imageNum][0] != imageLink.getAttribute('href')) { this.imageNum++; }
		}
		if (imageLink.getAttribute('rel').indexOf('lyteshow') != -1) {
			for (var i = 0; i < anchors.length; i++) {
				var anchor = anchors[i];
				if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
					this.slideArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
				}
			}
			this.slideArray.removeDuplicates();
			while(this.slideArray[this.slideNum][0] != imageLink.getAttribute('href')) { this.slideNum++; }
		}
	}

	// Calculate top offset for the lytebox and display.
	var object = this.doc.getElementById('lbMain');
		object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px";
		object.style.display = '';
		
	// Reset the bottom border from #lbOuterImageContainer.
	if (!this.outerBorder) {
		this.doc.getElementById('lbOuterImageContainer').style.border = 'none';
		this.doc.getElementById('lbImageDataContainer').style.border = 'none';
	} else {
		this.doc.getElementById('lbOuterImageContainer').style.borderBottom = '';
		this.doc.getElementById('lbOuterImageContainer').setAttribute((document.all ? 'className' : 'class'), this.theme);
		// this.doc.getElementById('lbOuterImageContainer').style.borderBottom = this.borderBottom;
	}
		
	// Now we need to assign "onclick" handlers for various buttons. It's being done here because IE was apparently having
	// problems with assigning these when the elements were actually created on the page. This occurred randomly, and I was
	// not able to determine why. Whatever the case, the buttons appear to work fine by moving the assignments here. IE sux.
	object = this.doc.getElementById('lbOverlay');
	object.onclick = function() { myLytebox.end(); return false; }
	object = this.doc.getElementById('lbBottomNavClose');
	object.onclick = function() { myLytebox.end(); return false; }
	object = this.doc.getElementById('lbBottomNavPause');
	object.onclick = function() { myLytebox.togglePlayPause("lbBottomNavPause", "lbBottomNavPlay"); return false; }
	object = this.doc.getElementById('lbBottomNavPlay');
	object.onclick = function() { myLytebox.togglePlayPause("lbBottomNavPlay", "lbBottomNavPause"); return false; }	
	
	// Setup for a slideshow... will be used later to show/hide certain images, based on settings.
	this.isSlideshow = doSlide;
	this.isPaused = (this.slideNum != 0 ? true : false);
	
	// We need to be sure that the "Play" button is visible if the slideshow is paused, since "Pause" is displayed by default.
	if (this.isSlideshow && this.showPause && this.isPaused) {
		this.doc.getElementById('lbBottomNavPlay').style.display = '';
		this.doc.getElementById('lbBottomNavPause').style.display = 'none';
	}
	
	if (this.isSlideshow) {
		this.changeImage(this.slideNum);
	} else {
		this.changeImage(this.imageNum);
	}
};

//******************************************************************************/
// changeImage()
// Hide most elements and preload image in preparation for resizing image container.
//******************************************************************************/
LyteBox.prototype.changeImage = function(imageNum) {
	// We clear the slideshow timers, if it's a slideshow, just in case "Next/Prev" navigation is enabled and user moves back/forward.
	if (this.isSlideshow) {
		for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
	}
	
	// save image number to member variable for later access
	this.activeImage = this.activeSlide = imageNum;
	
	// Reset the bottom border from #lbOuterImageContainer.
	if (!this.outerBorder) {
		this.doc.getElementById('lbOuterImageContainer').style.border = 'none';
		this.doc.getElementById('lbImageDataContainer').style.border = 'none';
	} else {
		this.doc.getElementById('lbOuterImageContainer').style.borderBottom = '';
		this.doc.getElementById('lbOuterImageContainer').setAttribute((document.all ? 'className' : 'class'), this.theme);
		// this.doc.getElementById('lbOuterImageContainer').style.borderBottom = this.borderBottom;
	}

	// hide elements during transition
	this.doc.getElementById('lbLoading').style.display = '';
	this.doc.getElementById('lbImage').style.display = 'none';
	this.doc.getElementById('lbPrevLink').style.display = 'none';
	this.doc.getElementById('lbNextLink').style.display = 'none';
	this.doc.getElementById('lbImageDataContainer').style.display = 'none';
	this.doc.getElementById('lbNumberDisplay').style.display = 'none';
	
	imgPreloader = new Image();
	
	// once image is preloaded, resize image container
	imgPreloader.onload = function() {
		myLytebox.doc.getElementById('lbImage').src = (myLytebox.isSlideshow ? myLytebox.slideArray[myLytebox.activeSlide][0] : myLytebox.imageArray[myLytebox.activeImage][0]);
		myLytebox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
	}
	imgPreloader.src = (this.isSlideshow ? this.slideArray[this.activeSlide][0] : this.imageArray[this.activeImage][0]);
};

//******************************************************************************/
// resizeImageContainer()
//******************************************************************************/
LyteBox.prototype.resizeImageContainer = function(imgWidth, imgHeight) {
	// get current height and width
	this.wCur = this.doc.getElementById('lbOuterImageContainer').offsetWidth;
	this.hCur = this.doc.getElementById('lbOuterImageContainer').offsetHeight;

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

	// calculate size difference between new and old image, and resize if necessary
	var wDiff = (this.wCur - this.borderSize * 2) - imgWidth;
	var hDiff = (this.hCur - this.borderSize * 2) - imgHeight;
	
	if (!(hDiff == 0)) {
		this.hDone = false;
		this.resizeH('lbOuterImageContainer', this.hCur, imgHeight + this.borderSize*2, this.getPixelRate(this.hCur, imgHeight));
	} else {
		this.hDone = true;
	}
	if (!(wDiff == 0)) {
		this.wDone = false;
		this.resizeW('lbOuterImageContainer', this.wCur, imgWidth + this.borderSize*2, this.getPixelRate(this.wCur, imgWidth));
	} else {
		this.wDone = true;
	}

	// 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 (this.ie){ this.pause(250); } else { this.pause(100); } 
	}
	
	this.doc.getElementById('lbPrevLink').style.height = imgHeight + "px";
	this.doc.getElementById('lbNextLink').style.height = imgHeight + "px";
	
	// Have to add an additional 2 pixels because IE is retarded. This is only if the border is being displayed.
	this.doc.getElementById('lbImageDataContainer').style.width = (imgWidth + (this.borderSize * 2) + (this.ie && this.doc.compatMode == "BackCompat" && this.outerBorder ? 2 : 0)) + "px";

	this.showImage();
};

//******************************************************************************/
// showImage() - Display image and begin preloading neighbors.
//******************************************************************************/
LyteBox.prototype.showImage = function() {
	if (this.wDone && this.hDone) {
		// Clear the timer for showImage...
		for (var i = 0; i < this.showImageTimerCount; i++) { window.clearTimeout(this.showImageTimerArray[i]); }
		
		// Remove the bottom border from #lbOuterImageContainer.
		if (this.outerBorder) {
			this.doc.getElementById('lbOuterImageContainer').style.borderBottom = 'none';
		}
		
		this.doc.getElementById('lbLoading').style.display = 'none';
		this.doc.getElementById('lbImage').style.display = '';
		this.appear('lbImage', 0);
		this.preloadNeighborImages();
		
		if (this.isSlideshow) {			
			// if last image in set, close the slideshow
			if(this.activeSlide == (this.slideArray.length - 1)) {
				if (this.autoEnd) {
					this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.end('slideshow')", this.slideInterval);
				}
			// otherwise, call changeImage in "this.slideInterval" seconds to automatically move to the next slide
			} else {
				if (!this.isPaused) {
					this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.changeImage("+(this.activeSlide+1)+")", this.slideInterval);
				}
			}
			
			if (!this.showNavigation) { this.doc.getElementById('lbHoverNav').style.display = 'none'; }
			if (!this.showClose) { this.doc.getElementById('lbBottomNavClose').style.display = 'none'; }
			if (!this.showDetails) { this.doc.getElementById('lbImageDetails').style.display = 'none'; }
			if (this.showPause && !this.isPaused) {
				this.doc.getElementById('lbBottomNavPause').style.display = '';
				this.doc.getElementById('lbBottomNavPlay').style.display = 'none';
			} else {
				this.doc.getElementById('lbBottomNavPause').style.display = 'none';
				this.doc.getElementById('lbBottomNavPlay').style.display = '';
			}
		} else {
			this.doc.getElementById('lbHoverNav').style.display = '';
			this.doc.getElementById('lbBottomNavClose').style.display = '';
			this.doc.getElementById('lbImageDetails').style.display = '';
			this.doc.getElementById('lbBottomNavPause').style.display = 'none';
			this.doc.getElementById('lbBottomNavPlay').style.display = 'none';
		}
	} else {
		this.showImageTimerArray[this.showImageTimerCount++] = setTimeout("myLytebox.showImage()", 200);
	}
};

//******************************************************************************/
// updateDetails() - Display caption, and bottom nav.
//******************************************************************************/
LyteBox.prototype.updateDetails = function() {
	var object = this.doc.getElementById('lbCaption');
	object.style.display = '';
	object.innerHTML = (this.isSlideshow ? this.slideArray[this.activeSlide][1] : this.imageArray[this.activeImage][1]);
	this.updateNav()
	
	object = this.doc.getElementById('lbImageDataContainer');
	object.style.display = '';
	
	// if image is part of set display 'Image x of x'
	if (this.isSlideshow) {
		if(this.slideArray.length > 1){
			object = this.doc.getElementById('lbNumberDisplay');
			object.style.display = '';
			object.innerHTML = "Foto " + eval(this.activeSlide + 1) + " de " + this.slideArray.length;
		}
	} else {
		if (this.imageArray.length > 1) {
			object = this.doc.getElementById('lbNumberDisplay');
			object.style.display = '';
			object.innerHTML = "Foto" + eval(this.activeImage + 1) + " de " + this.imageArray.length;
		}
	}

	this.appear('lbImageDataContainer', 0);
};

//******************************************************************************/
// updateNav() - Display appropriate previous and next hover navigation.
//******************************************************************************/
LyteBox.prototype.updateNav = function() {
	if (this.isSlideshow) {
		// if not first image in set, display prev image button
		if(this.activeSlide != 0){
			var object = this.doc.getElementById('lbPrevLink');
				object.style.display = '';
				object.onclick = function() {
					if (myLytebox.pauseOnPrevClick) { myLytebox.togglePlayPause("lbBottomNavPause", "lbBottomNavPlay"); }
					myLytebox.changeImage(myLytebox.activeSlide - 1); return false;
				}
		}
		// if not last image in set, display next image button
		if(this.activeSlide != (this.slideArray.length - 1)){
			var object = this.doc.getElementById('lbNextLink');
				object.style.display = '';
				object.onclick = function() {
					if (myLytebox.pauseOnNextClick) { myLytebox.togglePlayPause("lbBottomNavPause", "lbBottomNavPlay"); }
					myLytebox.changeImage(myLytebox.activeSlide + 1); return false;
				}
		}
	} else {
		// if not first image in set, display prev image button
		if(this.activeImage != 0){
			var object = this.doc.getElementById('lbPrevLink');
				object.style.display = '';
				object.onclick = function() {
					myLytebox.changeImage(myLytebox.activeImage - 1); return false;
				}
		}
		// if not last image in set, display next image button
		if(this.activeImage != (this.imageArray.length - 1)){
			var object = this.doc.getElementById('lbNextLink');
				object.style.display = '';
				object.onclick = function() {
					myLytebox.changeImage(myLytebox.activeImage + 1); return false;
				}
		}
	}
	
	this.enableKeyboardNav();
};

//********************************************************************************/
// enableKeyboardNav(), disableKeyboardNav(), keyboardAction() -- COMBINED COMMENT
//********************************************************************************/
LyteBox.prototype.enableKeyboardNav = function() { document.onkeydown = this.keyboardAction; };
LyteBox.prototype.disableKeyboardNav = function() { document.onkeydown = ''; };
LyteBox.prototype.keyboardAction = function(e) {
	var keycode = key = escape = null;
	keycode	= (e == null) ? event.keyCode : e.which;
	key		= String.fromCharCode(keycode).toLowerCase();
	escape  = (e == null) ? 27 : e.DOM_VK_ESCAPE;
	
	if ((key == 'x') || (key == 'c') || (keycode == escape)) {	// close lytebox
		myLytebox.end();
	} else if ((key == 'p') || (keycode == 37)) {	// display previous image
		if (this.isSlideshow) {
			if(this.activeSlide != 0) {
				myLytebox.disableKeyboardNav();
				myLytebox.changeImage(this.activeSlide - 1);
			}
		} else {
			if(this.activeImage != 0) {
				myLytebox.disableKeyboardNav();
				myLytebox.changeImage(this.activeImage - 1);
			}
		}
	} else if ((key == 'n') || (keycode == 39)) {	// display next image
		if (this.isSlideshow) {b
			if(this.activeSlide != (this.slideArray.length - 1)) {
				myLytebox.disableKeyboardNav();
				myLytebox.changeImage(this.activeSlide + 1);
			}
		} else {
			if(this.activeImage != (this.imageArray.length - 1)) {
				myLytebox.disableKeyboardNav();
				myLytebox.changeImage(this.activeImage + 1);
			}
		}
	}
};

//********************************************************************************/
// preloadNeighborImages() - Preload previous and next images.
//********************************************************************************/
LyteBox.prototype.preloadNeighborImages = function() {
	if (this.isSlideshow) {
		if ((this.slideArray.length - 1) > this.activeSlide) {
			preloadNextImage = new Image();
			preloadNextImage.src = this.slideArray[this.activeSlide + 1][0];
		}
		if(this.activeSlide > 0) {
			preloadPrevImage = new Image();
			preloadPrevImage.src = this.slideArray[this.activeSlide - 1][0];
		}
	} else {
		if ((this.imageArray.length - 1) > this.activeImage) {
			preloadNextImage = new Image();
			preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
		}
		if(this.activeImage > 0) {
			preloadPrevImage = new Image();
			preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
		}
	}
};

//********************************************************************************/
// togglePlayPause() - Toggle play/pause buttons, and set isPaused to play or 
//					   pause the slideshow.
//********************************************************************************/
LyteBox.prototype.togglePlayPause = function(hideID, showID) {
	// clear all settimeout's immediately to avoid going to next slide... if "pause" was pressed.
	// if this was a slideshow, then clear the appropriate timeout id array
	if (this.isSlideshow && hideID == "lbBottomNavPause") {
		for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
	}
	
	this.doc.getElementById(hideID).style.display = 'none';
	this.doc.getElementById(showID).style.display = '';
	
	// determine the state (paused or not) and take the appropriate action (changeImage or end) if the play button is clicked
	if (hideID == "lbBottomNavPlay") {
		this.isPaused = false;
		
		if (this.activeSlide == (this.slideArray.length - 1)) {
			// last image... close the slideshow
			this.end();
		} else {
			// change to the next image in the slideshow
			this.changeImage(this.activeSlide + 1);
		}
	} else {
		this.isPaused = true;
	}
};

//********************************************************************************/
// end() - caller was added as a parameter so that we could close Lytebox if
//		   the "Close" button is clicked while in the "paused" state.
//********************************************************************************/
LyteBox.prototype.end = function(caller) {
	var closeClick = (caller == 'slideshow' ? false : true);
	
	// if we're doing a slideshow and in a paused state, just return
	if (this.isSlideshow && this.isPaused && !closeClick) { return; }
	
	this.disableKeyboardNav();
	this.doc.getElementById('lbMain').style.display = 'none';
	this.fade('lbOverlay', 80);
	this.toggleSelects('visible');
	if (this.hideFlash) { this.toggleFlash('visible'); }
	
	// if this was a slideshow, then clear the appropriate timeout id array
	if (this.isSlideshow) {
		for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
	}
};

//***********************************************************************************/
// checkFrame() - Determines if we are in an iFrame or not so we can display properly
//***********************************************************************************/
LyteBox.prototype.checkFrame = function() {
	// If we are an iFrame ONLY (framesets are excluded because we can't overlay a frameset). Note that there are situations
	// where "this" will not refer to LyteBox, such as when buttons are clicked, therefor we have to set this.lytebox appropriately.
	if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {
		this.isFrame = true;
		this.lytebox = "window.parent." + window.name + ".myLytebox";
		this.doc = parent.document;
	} else {
		this.isFrame = false;
		this.lytebox = "myLytebox";
		this.doc = document;
	}
};

//*******************************************************************************************/
// getPixelRate() - Determines the rate (number of pixels) that we want to scale PER call
//				    to a setTimeout() function. "cur" represents the current width or height,
//					and img represents the image (new) width or height.
//*******************************************************************************************/
LyteBox.prototype.getPixelRate = function(cur, img) {
	var diff = (img > cur) ? img - cur : cur - img;
	
	if (diff > 0 && diff <= 100) { return 4; }
	if (diff > 100 && diff <= 200) { return 8; }
	if (diff > 200 && diff <= 300) { return 12; }
	if (diff > 300 && diff <= 400) { return 16; }
	if (diff > 400 && diff <= 500) { return 20; }
	if (diff > 500 && diff <= 600) { return 24; }
	if (diff > 600 && diff <= 700) { return 28; }
	if (diff > 700) { return 32; }
};

//********************************************************************************/
// appear() - Makes an element fade in (appear).
//********************************************************************************/
LyteBox.prototype.appear = function(id, opacity) {
	var object = this.doc.getElementById(id).style;
	object.opacity = (opacity/100);
	object.MozOpacity = (opacity/100);
	object.KhtmlOpacity = (opacity/100);
	object.filter = "alpha(opacity=" + (opacity+10) + ")";
	
	if (opacity == 100 && id == 'lbImage') {
		this.updateDetails();
	} else if (opacity == this.maxOpacity && id == 'lbOverlay') {
		// Clear the overlay timer...
		for (var i = 0; i < this.overlayTimerCount; i++) { window.clearTimeout(this.overlayTimerArray[i]); }
		return;
	} else if (opacity == 100 && id == 'lbImageDataContainer') {
		// Clear all the image timers...
		for (var i = 0; i < this.imageTimerCount; i++) { window.clearTimeout(this.imageTimerArray[i]); }
		
		// Here we resize the overlay to ensure that it stretches the length of the page, since there is
		// an issue with white space remaining if the image scales outside of the known page height...
		this.doc.getElementById('lbOverlay').style.height = this.getPageSize()[1] + "px";
	} else {
		if (id == 'lbOverlay') {
			this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+20) + ")", 1);
		} else {
			this.imageTimerArray[this.imageTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+10) + ")", 1);
		}
	}
};

//********************************************************************************/
// fade() - Makes an element fade out (disappear).
//********************************************************************************/
LyteBox.prototype.fade = function(id, opacity) {
	var object = this.doc.getElementById(id).style;
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
	
	if (opacity == 0) {
		try {
			object.display = 'none';
		} catch(err) { }
	} else if (id == 'lbOverlay') {
		this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-20) + ")", 1);
	} else {
		this.timerIDArray[this.timerIDCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-10) + ")", 1);
	}
};

//********************************************************************************/
// resizeW() - Resize the width of an element (smooth animation)...
//********************************************************************************/
LyteBox.prototype.resizeW = function(id, curW, maxW, pixelrate, speed) {
	if (!this.hDone) {
		this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + curW + ", " + maxW + ", " + pixelrate + ")", 100);
		return;
	}
	
	var object = this.doc.getElementById(id);
	var timer = speed ? speed : (this.resizeDuration/2);
	
	object.style.width = (curW) + "px";
	
	if (curW < maxW) {
		curW += (curW + pixelrate >= maxW) ? (maxW - curW) : pixelrate;	// increase size
	} else if (curW > maxW) {
		curW -= (curW - pixelrate <= maxW) ? (curW - maxW) : pixelrate;	// decrease size
	}
	this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + curW + ", " + maxW + ", " + pixelrate + ", " + (timer+0.02) + ")", timer+0.02);
	
	if (parseInt(object.style.width) == maxW) {
		this.wDone = true;
		// Clear all the timers for resizing...
		for (var i = 0; i < this.resizeWTimerCount; i++) { window.clearTimeout(this.resizeWTimerArray[i]); }
	}
};

//********************************************************************************/
// resizeH() - Resize the height of an element (smooth animation)...
//********************************************************************************/
LyteBox.prototype.resizeH = function(id, curH, maxH, pixelrate, speed) {
	var timer = speed ? speed : (this.resizeDuration/2);
	var object = this.doc.getElementById(id);
	
	object.style.height = (curH) + "px";
	
	if (curH < maxH) {
		curH += (curH + pixelrate >= maxH) ? (maxH - curH) : pixelrate;	// increase size
	} else if (curH > maxH) {
		curH -= (curH - pixelrate <= maxH) ? (curH - maxH) : pixelrate;	// decrease size
	}
	this.resizeHTimerArray[this.resizeHTimerCount++] = setTimeout("myLytebox.resizeH('" + id + "', " + curH + ", " + maxH + ", " + pixelrate + ", " + (timer+.02) + ")", timer+.02);
	
	if (parseInt(object.style.height) == maxH) {
		this.hDone = true;
		// Clear all the timers for resizing...
		for (var i = 0; i < this.resizeHTimerCount; i++) { window.clearTimeout(this.resizeHTimerArray[i]); }
	}
};

//**************************************************/
// getPageScroll() - returns the y page scroll value
//**************************************************/
LyteBox.prototype.getPageScroll = function() {
	if (self.pageYOffset) {
		return this.isFrame ? parent.pageYOffset : self.pageYOffset;
	} else if (this.doc.documentElement && this.doc.documentElement.scrollTop){	 // Explorer 6 Strict
		return this.doc.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		return this.doc.body.scrollTop;
	}
};

//*******************************************************************************/
// getPageSize() - Returns array with page width, height and window width, height
// Core code from - quirksmode.org, Edit for Firefox by pHaez
//*******************************************************************************/
LyteBox.prototype.getPageSize = function() {	
	var xScroll, yScroll, windowWidth, windowHeight;
	
	if (window.innerHeight && window.scrollMaxY) {
		xScroll = this.doc.scrollWidth;
		yScroll = (this.isFrame ? parent.innerHeight : self.innerHeight) + (this.isFrame ? parent.scrollMaxY : self.scrollMaxY);
	} else if (this.doc.body.scrollHeight > this.doc.body.offsetHeight){ // all but Explorer Mac
		xScroll = this.doc.body.scrollWidth;
		yScroll = this.doc.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = this.doc.getElementsByTagName("html").item(0).offsetWidth;
		yScroll = this.doc.getElementsByTagName("html").item(0).offsetHeight;
		
		// Strict mode fixes
		xScroll = (xScroll < this.doc.body.offsetWidth) ? this.doc.body.offsetWidth : xScroll;
		yScroll = (yScroll < this.doc.body.offsetHeight) ? this.doc.body.offsetHeight : yScroll;
	}
	
	if (self.innerHeight) {	// all except Explorer
		windowWidth = (this.isFrame) ? parent.innerWidth : self.innerWidth;
		windowHeight = (this.isFrame) ? parent.innerHeight : self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = this.doc.documentElement.clientWidth;
		windowHeight = this.doc.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = this.doc.getElementsByTagName("html").item(0).clientWidth;
		windowHeight = this.doc.getElementsByTagName("html").item(0).clientHeight;
		
		// Strict mode fixes...
		windowWidth = (windowWidth == 0) ? this.doc.body.clientWidth : windowWidth;
		windowHeight = (windowHeight == 0) ? this.doc.body.clientHeight : windowHeight;
	}
	
	// for small pages with total height/width less then height/width of the viewport
	var pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll;
	var pageWidth = (xScroll < windowWidth) ? windowWidth : xScroll;
	
	return new Array(pageWidth, pageHeight, windowWidth, windowHeight);
};

//**********************************************************************************************************/
// toggleFlash(state) - Toggles embedded Flash objects so they don't appear above the overlay/lytebox.
//**********************************************************************************************************/
LyteBox.prototype.toggleFlash = function(state) {
	var objects = this.doc.getElementsByTagName("object");
	for (var i = 0; i < objects.length; i++) {
		objects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
	}

	var embeds = this.doc.getElementsByTagName("embed");
	for (var i = 0; i < embeds.length; i++) {
		embeds[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
	}
	
	if (this.isFrame) {
		for (var i = 0; i < parent.frames.length; i++) {
			objects = parent.frames[i].window.document.getElementsByTagName("object");
			for (var j = 0; j < objects.length; j++) {
				objects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
			}
			embeds = parent.frames[i].window.document.getElementsByTagName("embed");
			for (var j = 0; j < embeds.length; j++) {
				embeds[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
			}
		}
	}
};

//**********************************************************************************************************/
// toggleSelects(state) - Toggles select boxes between hidden and visible states, including those in iFrames
//**********************************************************************************************************/
LyteBox.prototype.toggleSelects = function(state) {
	// hide in the parent frame, then in child frames
	var selects = this.doc.getElementsByTagName("select");
	for (var i = 0; i < selects.length; i++ ) {
		selects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
	}

	if (this.isFrame) {
		for (var i = 0; i < parent.frames.length; i++) {
			selects = parent.frames[i].window.document.getElementsByTagName("select");
			for (var j = 0; j < selects.length; j++) {
				selects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
			}
		}
	}
};

//********************************************************************************/
// 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
//********************************************************************************/
LyteBox.prototype.pause = function(numberMillis) {
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime) { return; }
	}
};

//***************/
// add listeners
//***************/
if (window.addEventListener) {		// W3C
	window.addEventListener("load",initLytebox,false);
} else if (window.attachEvent) {	// Exploder
	window.attachEvent("onload",initLytebox);
} else {							// Old skool
	window.onload = function() {initLytebox();}
}

/* START IT UP! */
function initLytebox() { myLytebox = new LyteBox(); }