var LOAD_IMAGES_TIMEOUT = 250; //milliseconds
var LOAD_THUMBNAILS_TIMEOUT = 50; //milliseconds

/***************************************************
 * State Variables
 ***************************************************/
var _isPlaying = true;
var _numberOfThumbnailSets = 0;
var _currentImageIndex = 0;

/***************************************************
 * Init Gallery Images
 ***************************************************/
var _firstLoaded = false;
function initGalleryImages(images, imageContainer)
{
	_loadNextImage(images, imageContainer);
}

function _loadNextImage(remainingImages, imageContainer)
{
	if (remainingImages.length == 0) //Nothing left to load, we're done
	{
		return;
	}
	
	//Grab the next image and load it
	var nextImagePath = remainingImages.shift();
	var imageLoader = new Image();
	imageLoader.onload = function()
								{
									_imageLoaded(imageLoader, remainingImages, imageContainer);
								}
	imageLoader.src = nextImagePath;
}

function _imageLoaded(imageLoader, remainingImages, imageContainer)
{
	//Get the image's size
	var imageWidth = imageLoader.width;
	var imageHeight = imageLoader.height;
	
	//var imageContainer = $(containerName);
	var containerSize = imageContainer.getSize();
	
	//Build the image's container
	var imageWrapper = new Element('span', {
		'styles':
		{
			'opacity': (_firstLoaded ? 0 : 1)
		},
		'events':
		{
			'click': function() { nextImage(); return false; }
		},
		'class': "galleryImageEntry"
	});
	
	//Build the image - we make it a background image on a div to protect it from being printed or saved
	var imageObject = new Element("div",
	{
		'styles':
		{
			'position': 'relative',
			'top': Math.max(Math.floor((containerSize.y - imageHeight) / 2), 0), //Centered vertically
			'background-image': "url(" + imageLoader.src + ")",
			'width': imageWidth,
			'height': imageHeight
		},
		'events':
		{
			'contextmenu': function(e) { if (e.stop) e.stop(); }
		},
		'class': "galleryImage"
	});
	
	var d = new Date();
	var year = d.getFullYear();
	
	//Build a clear gif entry to put in the div
	var placeholderImage = new Element("img",
	{
		'src': "/images/common/clear.gif",
		'styles':
		{
			'width': imageWidth,
			'height': imageHeight
		},
		'alt': "Copyright " + year + " Britton Photography"
	});
	
	imageObject.appendChild(placeholderImage);
	imageWrapper.appendChild(imageObject);
	imageContainer.appendChild(imageWrapper);
	
	_firstLoaded = true;
	setTimeout(function() { _loadNextImage(remainingImages, imageContainer); }, LOAD_IMAGES_TIMEOUT);
}


/***************************************************
 * Play/Pause Bezel
 ***************************************************/
var _movedSlideshowTimer = null;
var _bezelVisible = false;
function mouseMovedInSlideshow()
{
	if (!_bezelVisible)
	{
		var bezel = $('playPauseBezelWrapperForMSIE');
		if (bezel != null)
		{
			bezel.setStyle('opacity', 0.6);
			//bezel.setOpacity(0.6);
			_bezelVisible = true;
		}
	}
	
	if (_movedSlideshowTimer)
	{
		clearTimeout(_movedSlideshowTimer);
	}
	
	_movedSlideshowTimer = setTimeout(_hidePlayPauseBezel, 5000);
}

function _hidePlayPauseBezel()
{
	var bezel = $('playPauseBezelWrapperForMSIE');
	if (bezel == null)
	{
		return;
	}
	
	_movedSlideshowTimer = null;
	
	var fxOptions = {duration:1000, transition:Fx.Transitions.linear, wait:false, onComplete: _playPauseBezelHidden, property: 'opacity'};
	var fadeOut = new Fx.Tween(bezel, fxOptions);
	fadeOut.start(0.6, 0.0);
	_bezelVisible = false;
}

function _playPauseBezelHidden()
{
	_bezelVisible = false;
}

function _updatePlayPauseBezel()
{
	var bezel = $('playPauseBezel');
	if (bezel == null)
	{
		return;
	}
	
	if (_isPlaying)
	{
		if (Browser.Engine.trident)
		{
			bezel.setStyles(
			{
				'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/slideshow/bezel_pause.png", sizingMethod="scale")'
			});
		}
		else
		{
			bezel.setStyles(
			{
				'background-image': "url(/images/slideshow/bezel_pause.png)"
			});
		}
	}
	else
	{
		if (Browser.Engine.trident)
		{
			bezel.setStyles(
			{
				'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/slideshow/bezel_play.png", sizingMethod="scale")'
			});
		}
		else
		{
			bezel.setStyles(
			{
				'background-image': "url(/images/slideshow/bezel_play.png)"
			});
		}
	}
}

/***************************************************
 * Init Thumbnail Sets
 ***************************************************/
var _firstThumbnailSetLoaded = false;
function initThumbnailSets(thumbnailSets, thumbnailSetsContainer)
{
	_numberOfThumbnailSets = thumbnailSets.length;
	_loadNextThumbnailSet(thumbnailSets, thumbnailSetsContainer);
}

function _loadNextThumbnailSet(remainingThumbnailSets, thumbnailSetsContainer)
{
	if (remainingThumbnailSets.length == 0) //Nothing left to load, we're done
	{
		//alert("Sets done");
		return;
	}
	
	//Create the thumbnail set container <div class=\"{$classes}\">
	var thumbnailContainer = new Element('div', {
		'styles':
		{
			'left': (_firstThumbnailSetLoaded ? 800 : 0)
		},
		'class': "thumbnailBar"
	});
	
	//Create the list
	var thumbnailList = new Element('ul', 
	{
		
	});
	
	thumbnailContainer.appendChild(thumbnailList);
	thumbnailSetsContainer.appendChild(thumbnailContainer);
	
	if (_firstThumbnailSetLoaded)
	{
		_updateThumbnailControls();
	}
	
	_firstThumbnailSetLoaded = true;
	
	//Grab the next set and start load it
	var nextThumbnailSet = remainingThumbnailSets.shift();
	_firstThumbnailOfSetLoaded = false;
	_loadNextThumbnail(remainingThumbnailSets, nextThumbnailSet, thumbnailSetsContainer, thumbnailList);
}

var _firstThumbnailOfSetLoaded = false;
function _loadNextThumbnail(remainingThumbnailSets, remainingThumbnails, thumbnailSetsContainer, thumbnailsContainer)
{
	//alert("load");
	if (remainingThumbnails.length == 0) //No more in this set, return out and let it continue to next
	{
		//alert("next set");
		_loadNextThumbnailSet(remainingThumbnailSets, thumbnailSetsContainer);
		return;
	}
	
	//Grab the next image and load it
	var nextImagePath = remainingThumbnails.shift();
	var imageLoader = new Image();
	imageLoader.onload = function()
								{
									_thumbnailImageLoaded(imageLoader, remainingThumbnailSets, remainingThumbnails, thumbnailSetsContainer, thumbnailsContainer);
								}
	imageLoader.src = nextImagePath;
}

function _thumbnailImageLoaded(imageLoader, remainingThumbnailSets, remainingThumbnails, thumbnailSetsContainer, thumbnailsContainer)
{
	//Get the image's size
	var imageWidth = imageLoader.width;
	var imageHeight = imageLoader.height;
	
	var listElementClasses = [];
	if (!_firstThumbnailOfSetLoaded) listElementClasses.push("first");
	if (remainingThumbnails.length == 0) listElementClasses.push("last");
	
	var listElement = new Element("li",
	{
		'class': listElementClasses
	});
	
	//Build the image - we make it a background image on a div to protect it from being printed or saved
	var imageObject = new Element("img",
	{
		'src': imageLoader.src,
		'styles':
		{
			'width': imageWidth,
			'height': imageHeight
		}
	});
	
	listElement.appendChild(imageObject);
	thumbnailsContainer.appendChild(listElement);
	
	_firstThumbnailOfSetLoaded = true;
	setTimeout(function() { _loadNextThumbnail(remainingThumbnailSets, remainingThumbnails, thumbnailSetsContainer, thumbnailsContainer); }, LOAD_THUMBNAILS_TIMEOUT);
}

/***************************************************
 * Thumbnail Set Switching
 ***************************************************/
var _currentThumbnailSet = 0;
function nextThumbnails()
{
	if (_currentThumbnailSet >= _numberOfThumbnailSets - 1)
	{
		return;
	}
	
	_transitionFromThumbnailsToThumbnails(_currentThumbnailSet, _currentThumbnailSet + 1);
}

function previousThumbnails()
{
	if (_currentThumbnailSet < 1)
	{
		return;
	}
	
	_transitionFromThumbnailsToThumbnails(_currentThumbnailSet, _currentThumbnailSet - 1);
}

function _transitionFromThumbnailsToThumbnails(fromIndex, toIndex)
{
	var thumbnails = $$('div.thumbnailBar');
	if (thumbnails == null || thumbnails.length == 0)
	{
		return;
	}
	
	var fxOptions = {duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false, onComplete: _thumbnailTransitionComplete, property: 'left'};
	
	var imageFxOut = new Fx.Tween(thumbnails[fromIndex], fxOptions);
	var imageFxIn = new Fx.Tween(thumbnails[toIndex], fxOptions);
	
	imageFxOut.start(0, (fromIndex < toIndex ? -800 : 800));
	imageFxIn.start((fromIndex < toIndex ? 800 : -800), 0);
	_currentThumbnailSet = toIndex;
	
	_updateThumbnailControls();
}

function _thumbnailTransitionComplete()
{
	
}

function gotoThumbnailPage(pageIndex)
{
	if (pageIndex < 0 || pageIndex > _numberOfThumbnailSets - 1)
	{
		return;
	}
	
	_transitionFromThumbnailsToThumbnails(_currentThumbnailSet, pageIndex);
}

/***************************************************
 * Thumbnail Controls
 ***************************************************/
function _updateThumbnailControls()
{
	var thumbnails = $$('div.thumbnailBar');
	if (thumbnails == null || thumbnails.length == 0) //If no thumbnails being displayed, don't need to update
	{
		return;
	}
	
	var leftButtonDisabled = (_currentThumbnailSet < 1);
	var rightButtonDisabled = (_currentThumbnailSet == (_numberOfThumbnailSets - 1));
	
	//Left Arrow
	var leftArrowContainer = $$('div.leftArrow')[0];
	var leftArrowImage = new Element('img',
	{
		'src': (leftButtonDisabled ? "/images/common/buttons/btn_left_disabled.gif" : "/images/common/buttons/btn_left_default.gif"),
		'name': "nav_galleryLeft",
		'border': "0",
		'alt': "Left Arrow"
	});
	var leftArrowAnchor = new Element('a',
	{
		'href': "#"
	});
	if (!leftButtonDisabled)
	{
		leftArrowAnchor.onmouseout = 	function()
												{
													restoreImage('nav_galleryLeft', this);
												}
		leftArrowAnchor.onmouseover = function()
												{
													hoverImage('nav_galleryLeft', '/images/common/buttons/btn_left_hover.gif', this);
												}
		leftArrowAnchor.onclick = 		function()
												{
													previousThumbnails();
													return false;
												}
	}
	else
	{
		leftArrowAnchor.onclick = 		function()
												{
													return false;
												}
	}
	leftArrowAnchor.appendChild(leftArrowImage);
	leftArrowContainer.empty();
	leftArrowContainer.appendChild(leftArrowAnchor);
	
	//Right Arrow
	var rightArrowContainer = $$('div.rightArrow')[0];
	var rightArrowImage = new Element('img', {
		'src': (rightButtonDisabled ? "/images/common/buttons/btn_right_disabled.gif" : "/images/common/buttons/btn_right_default.gif"),
		'name': "nav_galleryRight",
		'border': "0",
		'alt': "Right Arrow"
	});
	var rightArrowAnchor = new Element('a', {
		'href': "#"
	});
	if (!rightButtonDisabled)
	{
		rightArrowAnchor.onmouseout = 	function()
												{
													restoreImage('nav_galleryRight', this);
												}
		rightArrowAnchor.onmouseover = function()
												{
													hoverImage('nav_galleryRight', '/images/common/buttons/btn_right_hover.gif', this);
												}
		rightArrowAnchor.onclick = 		function()
												{
													nextThumbnails();
													return false;
												}
	}
	else
	{
		rightArrowAnchor.onclick = 		function()
												{
													return false;
												}
	}
	rightArrowAnchor.appendChild(rightArrowImage);
	rightArrowContainer.empty();
	rightArrowContainer.appendChild(rightArrowAnchor);
	
	//Thumbnail Pages
	var pagesContainer = $$('div.pages')[0];
	pagesContainer.empty();
	var stackLimiter = 0;
	while (stackLimiter < _numberOfThumbnailSets)
	{
		var start = stackLimiter;
		var end = Math.min(stackLimiter + 10, _numberOfThumbnailSets);
		(function loop(i) //Hideously ugly hack to get around javascript's total ignorance of scope
		{
			if (i >= end)
			{
				return;
			}
		
			var pageIconImage = null;
			if (_currentThumbnailSet == i)
			{
				pageIconImage = new Element('img', 
				{
					'src': "/images/slideshow/page_current.gif",
					'alt': "Current Page Marker",
					'border': "0",
					'class': "pageIndicator"
				});
			}
			else
			{
				pageIconImage = new Element('img', 
				{
					'src': "/images/slideshow/page_other.gif",
					'alt': "Other Page Marker",
					'border': "0",
					'class': "pageIndicator"
				});
			}
			
			var pageIndex = i;
			var pageIconAnchor = new Element('a', 
			{
				'href': "#",
				'events': 
				{
					'click': function()
								{
									gotoThumbnailPage(pageIndex);
								}
				}
			});
			pageIconAnchor.appendChild(pageIconImage);
			pagesContainer.appendChild(pageIconAnchor);
		
			loop(i + 1);
		})(start);
		
		stackLimiter = end;
	}
	
	_updateThumbnailLight();
}

function _updateThumbnailLight()
{
	var thumbnailPages = $$('div.thumbnailBar');
	if (thumbnailPages == null || thumbnailPages.length == 0)
	{
		return;
	}
	
	var thumbnailsInPage = thumbnailPages[_currentThumbnailSet].getElementsByTagName("li");
	
	
	var pageFirstIndex = 8 * _currentThumbnailSet;
	var pageLastIndex = pageFirstIndex + Math.min(8, thumbnailsInPage.length) - 1;
	
	if (_currentImageIndex < pageFirstIndex || _currentImageIndex > pageLastIndex) //Not here
	{
		_highlightThumbnailIndex(-2);
	}
	else
	{
		_highlightThumbnailIndex(_currentImageIndex - pageFirstIndex);
	}
}

function _highlightThumbnailIndex(index)
{
	var overlay = $('thumbnailBarOverlay');
	if (overlay == null)
	{
		return;
	}
	
	if (index < 0)
	{
		overlay.setStyle('left', -990);
		return;
	}
	
	var thumbnails = $$('#thumbnailBars li');
	
	var offsetX = thumbnails[index].offsetLeft;
	//alert("Start: " + offsetX);
	
	if (Browser.Engine.trident)
	{
		offsetX += thumbnails[index].offsetParent.offsetLeft;
		//alert("IE Offset: " + offsetX);
	}
	
	offsetX += thumbnails[index].getStyle('padding-left').toInt();
	//alert("Padding: " + offsetX);
	offsetX = -900 + offsetX;
	//alert("Final: " + offsetX);
	overlay.setStyle('left', offsetX);
}

/***************************************************
 * Image Switching
 ***************************************************/

function previousImage()
{
	var images = $$('span.galleryImageEntry');
	var outIndex = _currentImageIndex;
	var inIndex = outIndex - 1;
	
	if (_currentImageIndex == 0)
	{
		inIndex = images.length - 1;
	}
	
	_transitionFromImageToImage(outIndex, inIndex);
}

function nextImage()
{
	var images = $$('span.galleryImageEntry');
	var outIndex = _currentImageIndex;
	var inIndex = outIndex + 1;
	
	if (_currentImageIndex >= images.length - 1)
	{
		inIndex = 0;
	}
	
	_transitionFromImageToImage(outIndex, inIndex);
}

function _transitionFromImageToImage(fromImage, toImage)
{
	if (fromImage == toImage) return;
	
	var images = $$('span.galleryImageEntry');
	var fxOptions = {duration:1000, transition:Fx.Transitions.Cubic.easeInOut, wait:false, property: 'opacity'};
	var imageFxOut = new Fx.Tween(images[fromImage], fxOptions);
	var imageFxIn = new Fx.Tween(images[toImage], fxOptions);
	imageFxOut.start(1, 0);
	imageFxIn.start(0, 1);
	_currentImageIndex = toImage;
	
	_updateThumbnailLight();
}

function gotoImage(event)
{
	pause();
	
	var mouseX = event.clientX;
	var mouseY = event.clientY;
	
	var thumbnailBarLoc = $('thumbnailBars').getPosition();
	mouseX -= thumbnailBarLoc.x;
	mouseY -= thumbnailBarLoc.y;
	
	var thumbnails = $$('#thumbnailBars li');
	var clickedIndex = -1;
	for (var i = 0; i < thumbnails.length; i++)
	{
		var t = thumbnails[i];
		var tSize = t.getSize();
		
		var offsetX = t.offsetLeft;
		if (Browser.Engine.trident)
		{
			offsetX += t.offsetParent.offsetLeft;
		}
	
		offsetX += t.getStyle('padding-left').toInt();
		if (mouseX > offsetX && mouseX < offsetX + tSize.x)
		{
			clickedIndex = i;
			break;
		}
	}
	
	clickedIndex += 8 * _currentThumbnailSet;
	var images = $$('span.galleryImageEntry');
	if (clickedIndex < 0 || clickedIndex > images.length - 1)
	{
		return;
	}
	
	_transitionFromImageToImage(_currentImageIndex, clickedIndex);
}

(window.addEventListener) ? window.addEventListener("keydown", function(event) { return _bodyKeyPressed(event); }, true) : window.attachEvent("onkeydown", function(event) { return _bodyKeyPressed(event); });
function _bodyKeyPressed(event)
{
	if (event.keyCode == 37) //Left
	{
		previousImage();
	}
	else if (event.keyCode == 39) //Right
	{
		nextImage();
	}
	else if (event.keyCode == 33) //Page up
	{
		previousThumbnails();
		_stopEvent(event);
		return false;
	}
	else if (event.keyCode == 34) //Page down
	{
		nextThumbnails();
		_stopEvent(event);
		return false;
	}
	
	return true;
}

/***************************************************
 * Slideshow
 ***************************************************/

(window.addEventListener) ? window.addEventListener("load", initAutoplay, false) : window.attachEvent("onload", initAutoplay);
function initAutoplay()
{
	_updatePlayPauseBezel();
	setInterval(_autoplay, 5000);
}

function _autoplay()
{
	if (_isPlaying)
	{
		nextImage();
	}
}

function play()
{
	_isPlaying = true;
	_updatePlayPauseBezel();
	mouseMovedInSlideshow();
}

function pause()
{
	_isPlaying = false;
	_updatePlayPauseBezel();
	mouseMovedInSlideshow();
}

function togglePlayPause()
{
	_isPlaying = !_isPlaying;
	_updatePlayPauseBezel();
	mouseMovedInSlideshow();
}