//***********************************************************************************************************************************/
//	LyteBox v3.22
//
//	 Author: Markus F. Hay
//  Website: http://www.dolem.com/lytebox
//	   Date: October 2, 2007
//	License: Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)
// Browsers: Tested successfully on WinXP with the following browsers (using no DOCTYPE and Strict/Transitional/Loose DOCTYPES):
//				* Firefox: 2.0.0.7, 1.5.0.12
//				* Internet Explorer: 7.0, 6.0 SP2, 5.5 SP2
//				* Opera: 9.23
//
// Releases: For up-to-date and complete release information, visit http://www.dolem.com/forum/showthread.php?tid=62
//				* v3.22 (10/02/07)
//				* v3.21 (09/30/07)
//				* v3.20 (07/12/07)
//				* v3.10 (05/28/07)
//				* v3.00 (05/15/07)
//				* v2.02 (11/13/06)
//
//   www.fluffies.org made changes
//
//   Credit: LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more
//			 information please visit http://huddletogether.com/projects/lightbox2/
//***********************************************************************************************************************************/
//	LyteBox Class Definition
//	- LyteBox()
//  - initialize()
//  - updateLyteboxItems()
//  - start()
//  - changeContent(albumId, contentNum)
//  - resizeContainer(width, height)
//  - showContent()
//  - updateDetails()
//  - 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()
//**************************************************************************************************************/
// function to get the event of the end of the flash movie
function getUpdate(typ,name,pr1,pr2)
{
	if ((!myLytebox.isPaused) && ( typ == 'state' ) && ( pr1 == 3 )) {
		myLytebox.slideshowIDArray[myLytebox.slideshowIDCount++] = setTimeout("myLytebox.changeContent("+myLytebox.albumId+","+myLytebox.nextItemId+")", myLytebox.movieInterval);
	}
}

//*************************/
// LyteBox constructor
//*************************/
function LyteBox() {
	/*** Start Global Configuration ***/
		this.hideFlash			= false;	// controls whether or not Flash objects should be hidden
		this.resizeSpeed		= 8;		// controls the speed of the image resizing (1=slowest and 10=fastest)
		this.maxOpacity			= 80;		// higher opacity = darker overlay, lower opacity = lighter overlay
		this.autoResize			= true;		// controls whether or not images should be resized if larger than the browser window dimensions
		this.doAnimations		= true;		// controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.
		this.borderSize			= 5;		// if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...
	/*** End Global Configuration ***/
	
	/*** Configure Slideshow Options ***/
		this.imageInterval		= 5000;		// Change value (milliseconds) to increase/decrease the time after an image (5000 = 5 seconds)
		this.movieInterval		= 3000;		// Change value (milliseconds) to increase/decrease the time after a movie (5000 = 5 seconds)
		this.showNavigation		= true;		// true to display Next/Prev buttons/text during slideshow, false to hide
		this.showClose			= true;		// true to display the Close button, false to hide
		this.autoEnd			= false;	// true to automatically close Lytebox after the last image is reached, false to keep open
		this.pauseOnNextClick	= true;		// 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 ***/

	// fluffies minimal width for a comment
	this.minCommentWidth = 300;

	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.showContentTimerArray	= new Array();
	this.showContentTimerCount	= 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.lytebox = "myLytebox";
	this.commentText = "";
	this.itemType = "image";
	this.itemId = 0;
	this.numberOfItems = 0;
	this.indexOfItem = 0;
	this.nextItemId = -1;
	this.previousItemId = -1;
	this.lastItemId = -1;
	this.firstItemId = -1;
	this.itemSourceBase = 'fluffies_album_slideshow_image.php?image_id=';

	// 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 && !window.opera) ? 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. Prepares the lytebox/lyteshow links on the
// page and inserts html at the bottom of the page which is used to display the shadow overlay
// and the image container.
//********************************************************************************************/
LyteBox.prototype.initialize = function() {
	// 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="lbOuterContainer">
	//			<div id="lbImageContainer">
	//				<div id="lbCaption">
	//					<div id="lbNumberDisplay"></div>
	//					<div id="lbFirst"></div>
	//					<div id="lbPrevious"></div>
	//					<div id="lbPlayPause"></div>
	//					<div id="lbNext"></div>
	//					<div id="lbLast"></div>
	//					<div id="lbClose"></div>
	//				</div>
	//				<img id="lbImage">
	//			</div>
	//			<div id="lbLoading"></div>
	//		</div>
	//		<div id="lbCommentContainer">
	//			<div id="lbComment">
	//			</div>
	//		</div>
	//	</div>

	var objBody = document.getElementsByTagName("body").item(0);
	
	if (document.getElementById('lbOverlay')) {
		objBody.removeChild(document.getElementById("lbOverlay"));
		objBody.removeChild(document.getElementById("lbMain"));
	}

	var objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','lbOverlay');
		// Change overlay position to absolute for IE6 and below, and IE7 with no DOCTYPE, since a fixed position screws everything up for these.
		if ((this.ie && !this.ie7) || (this.ie7 && document.compatMode == 'BackCompat')) {
			objOverlay.style.position = 'absolute';
		}
		objOverlay.style.display = 'none';
		objBody.appendChild(objOverlay);

	var objLytebox = document.createElement("div");
		objLytebox.setAttribute('id','lbMain');
		objLytebox.style.display = 'none';
		objBody.appendChild(objLytebox);
	
	var objOuterContainer = document.createElement("div");
		objOuterContainer.setAttribute('id','lbOuterContainer');
		objLytebox.appendChild(objOuterContainer);
		
	var objImageContainer = document.createElement("div");
		objImageContainer.setAttribute('id','lbImageContainer');
		objOuterContainer.appendChild(objImageContainer);

	var objCaption = document.createElement("div");
		objCaption.setAttribute('id','lbCaption');
		objImageContainer.appendChild(objCaption);

	var objCaptionLeft = document.createElement("div");
		objCaptionLeft.setAttribute('id','lbCaptionLeft');
		objCaption.appendChild(objCaptionLeft);
	
	var objNumberDisplay = document.createElement("div");
		objNumberDisplay.setAttribute('id','lbNumberDisplay');
		objCaptionLeft.appendChild(objNumberDisplay);
	
	var objCaptionCenter = document.createElement("div");
		objCaptionCenter.setAttribute('id','lbCaptionCenter');
		objCaption.appendChild(objCaptionCenter);

	var objCaptionCenter2 = document.createElement("div");
		objCaptionCenter2.setAttribute('id','lbCaptionCenter2');
		objCaptionCenter.appendChild(objCaptionCenter2);

	var objFirst = document.createElement("div");
		objFirst.setAttribute('id','lbFirst');
		objCaptionCenter2.appendChild(objFirst);

	var objPrevious = document.createElement("div");
		objPrevious.setAttribute('id','lbPrevious');
		objCaptionCenter2.appendChild(objPrevious);

	var objPlayPause = document.createElement("div");
		objPlayPause.setAttribute('id','lbPlayPause');
		objCaptionCenter2.appendChild(objPlayPause);

	var objNext = document.createElement("div");
		objNext.setAttribute('id','lbNext');
		objCaptionCenter2.appendChild(objNext);

	var objLast = document.createElement("div");
		objLast.setAttribute('id','lbLast');
		objCaptionCenter2.appendChild(objLast);

	var objCaptionRight = document.createElement("div");
		objCaptionRight.setAttribute('id','lbCaptionRight');
		objCaption.appendChild(objCaptionRight);

	var objClose = document.createElement("div");
		objClose.setAttribute('id','lbClose');
		objCaptionRight.appendChild(objClose);
		
	var objLyteboxImage = document.createElement("img");
		objLyteboxImage.setAttribute('id','lbImage');
		objImageContainer.appendChild(objLyteboxImage);
		
	var objLoading = document.createElement("div");
		objLoading.setAttribute('id','lbLoading');
		objOuterContainer.appendChild(objLoading);
		
	var objCommentContainer = document.createElement("div");
		objCommentContainer.setAttribute('id','lbCommentContainer');
		objLytebox.appendChild(objCommentContainer);

	var objComment = document.createElement("div");
		objComment.setAttribute('id','lbComment');
		objCommentContainer.appendChild(objComment);
};

//********************************************************************************/
// start()
// Display overlay and Lytebox.
//********************************************************************************/
LyteBox.prototype.start = function(albumId, itemId) {
	// is all OK with itemId
	if (itemId > 0)
	{
		itemExists = false;
		var normalSequenceArray = itemSequenceArray[albumId].compact().clone();
		normalSequenceArray.find(function(s) {
			if (s == itemId) { itemExists = true; }
		});

		if (!itemExists) { return; }

		this.isPaused = true;
		this.autoEnd = false;
	}
	else
	{
		var isEmpty = true;
		var normalSequenceArray = itemSequenceArray[albumId].compact().clone();
		normalSequenceArray.each(function(s) { isEmpty = false; });
		if (isEmpty) { return; }

		itemId = itemSequenceArray[albumId].first();

		this.isPaused = false;
	}

	// 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	= document.getElementById('lbOverlay');
	var objBody		= document.getElementsByTagName("body").item(0);
	
	objOverlay.style.height = pageSize[1] + "px";
	objOverlay.style.display = '';
	
	// If animations are enabled, then fade in the overlay, otherwise set it to this.maxOpacity.
	this.appear('lbOverlay', (this.doAnimations ? 0 : this.maxOpacity));
	
	// Calculate top offset for the lytebox and display.
	var object = document.getElementById('lbMain');
		object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px";
		object.style.display = '';
		
	// 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.
	document.getElementById('lbOverlay').onclick = function() { myLytebox.end(); return false; }
	document.getElementById('lbMain').onclick = function(e) {
		var e = e;
		if (!e) { e = window.event; }
		var id = (e.target ? e.target.id : e.srcElement.id);
		if (id == 'lbMain') { myLytebox.end(); return false; }
	}
	document.getElementById('lbClose').onclick = function() { myLytebox.end(); return 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.isPaused)
	{
		document.getElementById('lbPlayPause').style.background = 'url(lytebox/images/slideshow_play.jpg) no-repeat';
		document.getElementById('lbPlayPause').onclick = function() { myLytebox.togglePlayPause("lbPlay", "lbPause"); return false; }	
	}
	else
	{
		document.getElementById('lbPlayPause').style.background = 'url(lytebox/images/slideshow_pause.jpg) no-repeat';
		document.getElementById('lbPlayPause').onclick = function() { myLytebox.togglePlayPause("lbPause", "lbPlay"); return false; }	
	}

	this.changeContent(albumId, itemId);
};

//******************************************************************************/
// changeContent()
// Hide most elements and load iframe or preload image in preparation for 
// resizing the content container.
//*******************************************************************************/
LyteBox.prototype.changeContent = function(albumId, itemId) {
	// We clear the slideshow timers, if it's a slideshow, just in case "Next/Prev" navigation is enabled and user moves back/forward.
	for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
	
	// save image number to member variable for later access
	this.itemId = itemId;
	this.albumId = albumId;
	this.commentText = itemCommentArray[this.albumId][this.itemId];
	this.itemType = itemTypeArray[this.albumId][this.itemId];

	// get the nextItemId & indexOfItem & numberOfItems
	takeNextItem = false;
	indexOfItem = 0;
	nextItemId = -1;
	this.numberOfItems = itemSequenceArray[this.albumId].size();
	var normalSequenceArray = itemSequenceArray[this.albumId].clone();
	normalSequenceArray.each(function(s) {
		if (takeNextItem)
		{
			nextItemId = s;
			throw $break;
		}
		if (s == myLytebox.itemId)
		{
			takeNextItem = true;
		}
		indexOfItem++;
	});
	this.nextItemId = nextItemId;
	this.indexOfItem = indexOfItem;
	
	// get the previousItemId
	takePreviousItem = false;
	previousItemId = -1;
	reverseSequenceArray = itemSequenceArray[this.albumId].reverse(false);
	reverseSequenceArray.each(function(s) {
		if (takePreviousItem)
		{
			previousItemId = s;
			throw $break;
		}
		if (s == myLytebox.itemId)
		{
			takePreviousItem = true;
		}
	});
	this.previousItemId = previousItemId;

	// get the firstItemId
	this.firstItemId = itemSequenceArray[this.albumId].first();
	if ( itemId == myLytebox.firstItemId)
	{
		this.firstItemId = -1;
	}

	// get the lastItemId
	this.lastItemId = itemSequenceArray[this.albumId].last();
	if ( itemId == myLytebox.lastItemId)
	{
		this.lastItemId = -1;
	}

	// delete old itemContainer
	var parentNode = document.getElementById("lbImageContainer"); 
	var parentChilds = parentNode.childNodes.length;
	for(var i = 0; i < parentChilds; i++)
	{           
		if (parentNode.childNodes[i].id != 'lbCaption')
		{
			parentNode.removeChild(parentNode.childNodes[i]);
		}
	}

	// make new itemContainer
	if (this.itemType == "image")
	{
		var objImageContainer = document.getElementById("lbImageContainer");

		var objLyteboxImage = document.createElement("img");
		objLyteboxImage.setAttribute('id','lbImage');
		objLyteboxImage.style.color = '#ff0';
		objImageContainer.appendChild(objLyteboxImage);
	}
	else
	{
		var objImageContainer = document.getElementById("lbImageContainer");

		var objFluffiesFlashMovie = document.createElement("div");
		objFluffiesFlashMovie.setAttribute('id','fluffiesFlashMovieContainer');
		objImageContainer.appendChild(objFluffiesFlashMovie);

		var objLyteboxImage = document.createElement("img");
		objLyteboxImage.setAttribute('id','lbImage');
		objFluffiesFlashMovie.appendChild(objLyteboxImage);
	}

	// hide elements during transition
	document.getElementById('lbLoading').style.display = '';
	document.getElementById('lbCaption').style.display = 'none';
	document.getElementById('lbImage').style.display = 'none';
	document.getElementById('lbCommentContainer').style.display = 'none';
	document.getElementById('lbNumberDisplay').style.display = 'none';

	imgPreloader = new Image();
	
	// once image is preloaded, resize image container (and image, if necessary)
	imgPreloader.onload = function() {
			
		var imageWidth = imgPreloader.width;
		var imageHeight = imgPreloader.height;
			
		if (myLytebox.autoResize) {
			// Resizing for large images taken from thickbox
			var pagesize = myLytebox.getPageSize();
			var x = pagesize[2] - 150;
			var y = pagesize[3] - 150;
				
			if (imageWidth > x) {
				imageHeight = Math.round(imageHeight * (x / imageWidth));
				imageWidth = x; 
				if (imageHeight > y) { 
					imageWidth = Math.round(imageWidth * (y / imageHeight));
					imageHeight = y; 
				}
			} else if (imageHeight > y) { 
				imageWidth = Math.round(imageWidth * (y / imageHeight));
				imageHeight = y; 
				if (imageWidth > x) {
					imageHeight = Math.round(imageHeight * (x / imageWidth));
					imageWidth = x;
				}
			}
		}
			
		var lbImage = document.getElementById('lbImage')
		lbImage.src = myLytebox.itemSourceBase+myLytebox.itemId;
		lbImage.width = imageWidth;
		lbImage.height = imageHeight;
		if ((imageWidth > myLytebox.minCommentWidth) || (myLytebox.commentText == ''))
		{
			myLytebox.resizeContainer(imageWidth, imageHeight);
		}
		else
		{
			myLytebox.resizeContainer(myLytebox.minCommentWidth, imageHeight);
		}
		imgPreloader.onload = function() {}; // IE animated .gif fix.
	}			

	imgPreloader.src = myLytebox.itemSourceBase+this.itemId;
};

//******************************************************************************/
// resizeContainer()
//******************************************************************************/
LyteBox.prototype.resizeContainer = function(imgWidth, imgHeight) {
	// get current height and width
	this.wCur = document.getElementById('lbOuterContainer').offsetWidth;
	this.hCur = document.getElementById('lbOuterContainer').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('lbOuterContainer', this.hCur, imgHeight + this.borderSize*2 + 23, this.getPixelRate(this.hCur, imgHeight));
	} else {
		this.hDone = true;
	}
	if (!(wDiff == 0)) {
		this.wDone = false;
		this.resizeW('lbOuterContainer', 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); } 
	}
	
	// Have to add an additional 2 pixels because IE is retarded. This is only if the border is being displayed.
	document.getElementById('lbCommentContainer').style.width = (imgWidth + (this.borderSize * 2) + (this.ie && document.compatMode == "BackCompat" ? 2 : 0)) + "px";
	document.getElementById('lbCaption').style.width = (imgWidth + (this.ie && document.compatMode == "BackCompat" ? 2 : 0)) + "px";
//	document.getElementById('lbComment').style.width = (imgWidth + (this.ie && document.compatMode == "BackCompat" ? 2 : 0)) + "px";
	this.showContent(imgWidth, imgHeight);
};

//******************************************************************************/
// showContent() - Display content (iframes, images, etc.) and begin preloading 
//				   neighbors images, if we are dealing with images.
//******************************************************************************/
LyteBox.prototype.showContent = function(imgWidth, imgHeight) {
	if (this.wDone && this.hDone) {
		// Clear the timer for showContent...
		for (var i = 0; i < this.showContentTimerCount; i++) { window.clearTimeout(this.showContentTimerArray[i]); }
		
		document.getElementById('lbLoading').style.display = 'none';
		
		document.getElementById('lbCaption').style.display = '';
		document.getElementById('lbImage').style.display = '';

		// fluffies
		if (this.itemType == "movie")
		{
			var FU = { movie:"flvplayer.swf", width: imgWidth, height: imgHeight, majorversion:"8", build:"0", bgcolor:"#FFFFFF", id:"fluffiesFlashPlayer", name:"fluffiesFlashPlayer", wmode:"transparent", flashvars:"wmode=transparent&file="+slideshowPath+"fluffies_album_play_movie.php%3Ffile%3Dpostdata.flv%26item_id%3D"+myLytebox.itemId+"&movie_id=fluffiesFlashPlayer&image_name="+slideshowPath+"fluffies_album_standard_image.php%3Fimage_id%3D"+myLytebox.itemId };
			UFO.create( FU,'fluffiesFlashMovieContainer');

			this.appear('lbImageContainer', (this.doAnimations ? 0 : 100));

			setTimeout("document.getElementById('fluffiesFlashPlayer').sendEvent('playmovie')", 1200);
		}
		else
		{
			this.appear('lbImageContainer', (this.doAnimations ? 0 : 100));
		}

		this.preloadNeighborImages();
		
		if(this.nextItemId > 0) {
			// if not last image in set, call changeContent in "this.imageInterval" seconds to automatically move to the next slide
			if ((!this.isPaused) && (this.itemType == 'image')) {
				this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.changeContent("+myLytebox.albumId+","+myLytebox.nextItemId+")", this.imageInterval);
			}
		} else {
			// otherwise, close the slideshow
			if (this.autoEnd) {
				this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.end()", this.imageInterval);
			}
		}
			
		document.getElementById('lbClose').style.display = (this.showClose ? '' : 'none');
	} else {
		this.showContentTimerArray[this.showContentTimerCount++] = setTimeout("myLytebox.showContent("+imgWidth+", "+imgHeight+")", 200);
	}
};

//******************************************************************************/
// updateDetails() - Display comment, and bottom nav.
//******************************************************************************/
LyteBox.prototype.updateDetails = function() {
	// if part of set display 'Image x of x' or 'Page x of x'
	object = document.getElementById('lbNumberDisplay');
	object.style.display = '';
	object.innerHTML = this.indexOfItem + "/" + this.numberOfItems;

	// if not first image in set, display first image button
	if (this.firstItemId > 0) {
		var object = document.getElementById('lbFirst');
			object.style.background = 'url(lytebox/images/slideshow_first.jpg) no-repeat';
			object.onclick = function() {
				if (myLytebox.pauseOnPrevClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
				myLytebox.changeContent(myLytebox.albumId,myLytebox.firstItemId); return false;
			}
	} else {
		document.getElementById('lbFirst').style.background = 'url(lytebox/images/slideshow_empty.jpg) no-repeat';
	}
	// if not first image in set, display previous image button
	if (this.previousItemId > 0) {
		var object = document.getElementById('lbPrevious');
			object.style.background = 'url(lytebox/images/slideshow_previous.jpg) no-repeat';
			object.onclick = function() {
				if (myLytebox.pauseOnPrevClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
				myLytebox.changeContent(myLytebox.albumId,myLytebox.previousItemId); return false;
			}
	} else {
		document.getElementById('lbPrevious').style.background = 'url(lytebox/images/slideshow_empty.jpg) no-repeat';
	}
	// if not last image in set, display next image button
	if (this.nextItemId > 0) {
		var object = document.getElementById('lbNext');
			object.style.background = 'url(lytebox/images/slideshow_next.jpg) no-repeat';
			object.onclick = function() {
				if (myLytebox.pauseOnNextClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
				myLytebox.changeContent(myLytebox.albumId,myLytebox.nextItemId); return false;
			}
	} else {
		document.getElementById('lbNext').style.background = 'url(lytebox/images/slideshow_empty.jpg) no-repeat';
	}
	// if not last image in set, display last image button
	if (this.lastItemId > 0) {
		var object = document.getElementById('lbLast');
			object.style.background = 'url(lytebox/images/slideshow_last.jpg) no-repeat';
			object.onclick = function() {
				if (myLytebox.pauseOnNextClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
				myLytebox.changeContent(myLytebox.albumId,myLytebox.lastItemId); return false;
			}
	} else {
		document.getElementById('lbLast').style.background = 'url(lytebox/images/slideshow_empty.jpg) no-repeat';
	}
	
	this.enableKeyboardNav();

	// The comment part
	if (myLytebox.commentText == '')
	{
		var object = document.getElementById('lbComment');
		object.style.display = 'none';
		object.innerHTML = '';
	}
	else
	{
		var object = document.getElementById('lbComment');
		object.style.display = '';
		object.innerHTML = myLytebox.commentText;
	}

	document.getElementById('lbCommentContainer').style.display = '';
};

//********************************************************************************/
// 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(myLytebox.previousItemId > 0) {
			myLytebox.disableKeyboardNav();
			myLytebox.changeContent(myLytebox.albumId,myLytebox.previousItemId);
		}
	} else if ((key == 'n') || (keycode == 39)) {	// display next image
		if(myLytebox.nextItemId > 0) {
			myLytebox.disableKeyboardNav();
			myLytebox.changeContent(myLytebox.albumId,myLytebox.nextItemId);
		}
	}
};

//********************************************************************************/
// preloadNeighborImages() - Preload previous and next images.
//********************************************************************************/
LyteBox.prototype.preloadNeighborImages = function() {
	if (myLytebox.previousItemId > 0) {
		preloadNextImage = new Image();
		preloadNextImage.src = myLytebox.itemSourceBase+myLytebox.previousItemId;
	}
	if(myLytebox.nextItemId > 0) {
		preloadPrevImage = new Image();
		preloadPrevImage.src = myLytebox.itemSourceBase+myLytebox.nextItemId;
	}
};

//************************************************************************************************/
// 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 (hideID == "lbPause") {
		for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
	}

	// determine the state (paused or not) and take the appropriate action (changeContent or end) if the play button is clicked
	if (hideID == "lbPlay") {
		document.getElementById('lbPlayPause').style.background = 'url(lytebox/images/slideshow_pause.jpg) no-repeat';
		document.getElementById('lbPlayPause').onclick = function() { myLytebox.togglePlayPause("lbPause", "lbPlay"); return false; }	
		this.isPaused = false;
		
		if (this.nextItemId > 0) {
			// change to the next image in the slideshow
			this.changeContent(myLytebox.albumId,this.nextItemId);
		} else {
			// last image... close the slideshow
			this.end();
		}
	} else {
		document.getElementById('lbPlayPause').style.background = 'url(lytebox/images/slideshow_play.jpg) no-repeat';
		document.getElementById('lbPlayPause').onclick = function() { myLytebox.togglePlayPause("lbPlay", "lbPause"); return false; }	
		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() {
	this.disableKeyboardNav();
	document.getElementById('lbMain').style.display = 'none';
	this.fade('lbOverlay', (this.doAnimations ? this.maxOpacity : 0));
	this.toggleSelects('visible');
	if (this.hideFlash) { this.toggleFlash('visible'); }
	
	// if this was a slideshow, then clear the appropriate timeout id array
	for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
	
	this.initialize();
};

//*******************************************************************************************/
// 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 10; }		/* Replaced > with >= for popup window fix. */
	if (diff > 100 && diff <= 200) { return 15; }
	if (diff > 200 && diff <= 300) { return 20; }
	if (diff > 300 && diff <= 400) { return 25; }
	if (diff > 400 && diff <= 500) { return 30; }
	if (diff > 500 && diff <= 600) { return 35; }
	if (diff > 600 && diff <= 700) { return 40; }
	if (diff > 700) { return 45; }
};

//********************************************************************************/
// appear() - Makes an element fade in (appear).
//********************************************************************************/
LyteBox.prototype.appear = function(id, opacity) {
	var object = document.getElementById(id).style;
	object.filter = "alpha(opacity=" + (opacity + 10) + ")";
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.opacity = (opacity / 100);
	
	if (opacity == 100 && id == 'lbImageContainer') {
		try { object.removeAttribute("filter"); } catch(e) {}	/* Fix added for IE Alpha Opacity Filter bug. */
		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 == 'lbCommentContainer') {
		try { object.removeAttribute("filter"); } catch(e) {}	/* Fix added for IE Alpha Opacity Filter bug. */
		
		// 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...
		document.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 = document.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) {
	// Ensure that the "height" is finished resizing before scaling the width.
	if (!this.hDone) {
		this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + curW + ", " + maxW + ", " + pixelrate + ")", 100);
		return;
	}
	
	var object = document.getElementById(id);
	var timer = speed ? speed : (this.resizeDuration/2);
	var newW = (this.doAnimations ? curW : maxW);
	
	object.style.width = (newW) + "px";
	
	if (newW < maxW) {
		newW += (newW + pixelrate >= maxW) ? (maxW - newW) : pixelrate;	// increase size
	} else if (newW > maxW) {
		newW -= (newW - pixelrate <= maxW) ? (newW - maxW) : pixelrate;	// decrease size
	}
	this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + newW + ", " + 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 = document.getElementById(id);
	var newH = (this.doAnimations ? curH : maxH);
	
	object.style.height = (newH) + "px";
	
	if (newH < maxH) {
		newH += (newH + pixelrate >= maxH) ? (maxH - newH) : pixelrate;	// increase size
	} else if (newH > maxH) {
		newH -= (newH - pixelrate <= maxH) ? (newH - maxH) : pixelrate;	// decrease size
	}
	this.resizeHTimerArray[this.resizeHTimerCount++] = setTimeout("myLytebox.resizeH('" + id + "', " + newH + ", " + 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 self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		return document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		return document.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 = document.scrollWidth;
		yScroll = self.innerHeight + self.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.getElementsByTagName("html").item(0).offsetWidth;
		yScroll = document.getElementsByTagName("html").item(0).offsetHeight;
		
		// Strict mode fixes
		xScroll = (xScroll < document.body.offsetWidth) ? document.body.offsetWidth : xScroll;
		yScroll = (yScroll < document.body.offsetHeight) ? document.body.offsetHeight : yScroll;
	}
	
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.getElementsByTagName("html").item(0).clientWidth;
		windowHeight = document.getElementsByTagName("html").item(0).clientHeight;
		
		// Strict mode fixes...
		windowWidth = (windowWidth == 0) ? document.body.clientWidth : windowWidth;
		windowHeight = (windowHeight == 0) ? document.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 = document.getElementsByTagName("object");
	for (var i = 0; i < objects.length; i++) {
		objects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
	}

	var embeds = document.getElementsByTagName("embed");
	for (var i = 0; i < embeds.length; i++) {
		embeds[i].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 = document.getElementsByTagName("select");
	for (var i = 0; i < selects.length; i++ ) {
		selects[i].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(); }