var ssImage = null;				// img#slideshow-target-image
var mat = null;					// div#slideshow-target
var imageCaption = null;		// p#imageCaption
var objSsPrev = null;			// a#slideshow-target-previous
var objSsNext = null;			// a#slideshow-target-next
var objUl = null;				// ul#previewImages

var ssPreloader = new Array();  // image used to store images for preloading
var nextImg = null;
var nextHeight = null;
var nextWidth = null;
var blnSsPlaying = false;		// boolean is slideshow playing or not
var blnSsTimer = null;			// timeout stores timeout used to play slideshow

// slideshow prep, close + utility functions
// ----------------------------------------------
// this is only called once. it retrieves elements, sets global vars, and adds event listeners
prepSlideShow = function() {
	// retrieve gallery image and mat
	ssImage = $('slideshow-target-image');
	mat = $('slideshow-target');
	// retrieve caption
	imageCaption = $('imageCaption');
	// retrieve previous and next mats
	objSsPrev = $('slideshow-target-previous');
	objSsNext = $('slideshow-target-next');
	// retrieve gallery list
	objUl = $('previewImages');
	// kill all thumbnail links and preload full images
	var arrA = objUl.getElementsBySelector('a');
	for (var i = 0; i < arrA.length; i++) {
		arrA[i].onclick = function() {
			return false;
		}
		ssPreloader[i] = new Image();
		ssPreloader[i].src = arrA[i].href;
	}
	// add event listeners
	Event.observe(objUl, 'click', findImage);
	// initalize slideshow
	initSlideshow();
	// update nav
	updateNav();
	// top play/pause, next, previous controls
	$('btnPlayPause').onclick = function() {
		toggleSlideShow();
		return false;
	}
	$('btnPrevious').onclick = function() {
		// determine current image
		var arrA = objUl.getElementsByClassName('current');
		if (arrA[0].parentNode.previousSibling) {
			var objImg = arrA[0].parentNode.previousSibling.firstChild;
		} else {
			var objImg = objUl.lastChild.firstChild;
		}
		showImage(objImg);
		return false;
	}
	$('btnNext').onclick = function() {
		// determine current image
		arrA = objUl.getElementsByClassName('current');
		if (arrA[0].parentNode.nextSibling) {
			var objImg = arrA[0].parentNode.nextSibling.firstChild;
		} else {
			var objImg = objUl.firstChild.firstChild;
		}
		showImage(objImg);
		return false;
	}
}

// initialize slideshow [when does this get called?]
initSlideshow = function() {
	// determine target image height
	var targetImageHeight = (ssImage.offsetHeight + 12) + 'px';
	var targetImageWidth = ssImage.offsetWidth + 12;
	var buttonWidth = (targetImageWidth / 2) + 'px';
	
	// set mat width
	mat.style.width = targetImageWidth + 'px';
	
	// set previous button dimensions
	objSsPrev.style.height = targetImageHeight;
	objSsPrev.style.width = buttonWidth;
	
	// set next button dimensions
	objSsNext.style.height = targetImageHeight;
	objSsNext.style.marginLeft = buttonWidth;
	objSsNext.style.width = buttonWidth;
	
	// set mat visiblity
	mat.style.visibility = 'visible';
}

// previous/next mat functionality
updateNav = function() {
	// if no nextImg, then gallery is initialized with first thumbnail	
	if (!nextImg) {
		nextImg = objUl.firstChild.firstChild;
	}
	objSsPrev.onclick = function() {
		if (nextImg.parentNode.previousSibling) {
			var objSrc = nextImg.parentNode.previousSibling.firstChild;
		} else {
			var objSrc = objUl.lastChild.firstChild;
		}
		showImage(objSrc);
		return false;
	}
	objSsNext.onclick = function() {
		if (nextImg.parentNode.nextSibling) {
			var objSrc = nextImg.parentNode.nextSibling.firstChild;
		} else {
			var objSrc = objUl.firstChild.firstChild;
		}
		showImage(objSrc);
		return false;
	}
}

// end slideshow, reset all data, close modal window
function closeSlideShow(strId) {
	// reset slideshow
	ssImage.src = '';
	imageCaption.innerHTML = '';
	mat.style.display = 'none';
	// stop slideshow if playing
	if (blnSsPlaying) {
		var btnPlayPause = $('btnPlayPause');
		// show play btn
		btnPlayPause.removeClassName('btnSsPause');
		btnPlayPause.addClassName('btnSsPlay');
		btnPlayPause.title = 'Play slideshow';
		// stop slideshow
		clearTimeout(blnSsTimer);
		blnSsPlaying = false;
	}
	// close modal window
	closeModalWindow(strId);
}

autoPlay = function(selectorId, strStartId) {
	openModalWindow(selectorId, strStartId);
	setTimeout('toggleSlideShow()', 8500);
}

// determine if we're running in IE
var ieDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		}
	]

};
ieDetect.init();

// scaling, swapping, the works functions
// ----------------------------------------------

showImage = function(objImg) {
	// set global nav to function parameter
	nextImg = objImg;
	// create new image and set its src to function parameter
	var newImg = new Image();
	newImg.src = nextImg.href;
	nextHeight = newImg.height;
	nextWidth = newImg.width;
	// removel all highlights and then highlight currently selected thumbnail
	arrA = objUl.getElementsByClassName('current');
	for (var i = 0; i < arrA.length; i++) {
		Element.removeClassName(arrA[i], 'current');
	}
	Element.addClassName(nextImg, 'current');
	// hide previous/next buttons
	objSsPrev.style.display = 'none';
	objSsNext.style.display = 'none';
	// empty caption
	imageCaption.innerHTML = '';
	// If IE 6, simply fade
	if (ieDetect.browser == 'Explorer' && ieDetect.version == '6') {
		new Effect.Parallel(
			[
			 	new Effect.Fade('slideshow-target', { sync: true } ),
				new Effect.Fade(ssImage, { sync: true } )
			],
			{
				duration: 1.5,
				afterFinish: transitionHelperIe
			}
		);
	} else {

		new Effect.Parallel(
			[
			 	new Effect.Fade('slideshow-target', { sync: true } ),
				new Effect.Fade(ssImage, { sync: true } )
			],
			{
				duration: 1.5,
				afterFinish: transitionHelperIe
			}
		);
	}

	return false;
}
// called
transitionHelperIe = function()
{
	imageCaption.innerHTML = 'Loading&#8230;';
	ssImage.src = '../../img/lib/pxTransparent.gif';
	ssImage.style.backgroundColor = '#000';
	Element.setOpacity(ssImage, 0.2);
	getNextImageIe();
}
transitionHelper = function() // called by showImage
{
	imageCaption.innerHTML = 'Loading&#8230;';
	ssImage.src = '../../img/lib/pxTransparent.gif';
	ssImage.style.backgroundColor = '#000';
	Element.setOpacity(ssImage, 0.2);
	getNextImageIe();
}
getNextImageIe = function()
{
	if (mat.style.display == 'none'); {
		new Effect.Appear(mat);
	}
	// hide caption, but set for future display
	imageCaption.style.display = 'none';
	imageCaption.innerHTML = nextImg.title;
	showNextImageIe();
}

getNextImage = function() // called by transitionHelper
{
	if (mat.style.display == 'none'); {
		new Effect.Appear(mat);
	}
	// hide caption, but set for future display
	imageCaption.style.display = 'none';
	imageCaption.innerHTML = nextImg.title;
	showNextImageIe();
}

showNextImageIe = function()
{
	ssImage.src = nextImg.href;
	new Effect.Parallel(
			[
			 	new Effect.Appear('slideshow-target', { sync: true } ),
				new Effect.Appear(ssImage, { sync: true } )
			],
			{
				afterFinish: function()
			{	
				initSlideshow();
				objSsPrev.style.display = 'block';
				objSsNext.style.display = "block";
				new Effect.Appear(imageCaption,
				{
					duration: 0.2
				})
			}
			}
		);
}
// called by getNextImage
showNextImage = function()
{
	ssImage.src = nextImg.href;
	new Effect.Parallel(
			[
			 	new Effect.Appear('slideshow-target', { sync: true } ),
				new Effect.Appear(ssImage, { sync: true } )
			],
			{
				afterFinish: function()
			{	
				initSlideshow();
				objSsPrev.style.display = 'block';
				objSsNext.style.display = "block";
				new Effect.Appear(imageCaption,
				{
					duration: 0.2
				})
			}
			}
		);
}

// play/pause functions
// ----------------------------------------------
function playSlideShow(objImg,intHeight,intWidth) {
	// determine current image
	arrA = objUl.getElementsByClassName('current');
	if (arrA[0].parentNode.nextSibling) {
		var objImg = arrA[0].parentNode.nextSibling.firstChild;
	} else {
		var objImg = objUl.firstChild.firstChild;
	}
	showImage(objImg);	
	blnSsTimer = setTimeout('playSlideShow(nextImg,nextHeight,nextWidth)', 9000);
	blnSsPlaying = true;
}
function toggleSlideShow() {
	// retrieve control
	var btnPlayPause = $('btnPlayPause');
	if (blnSsPlaying) {
		// show play btn
		btnPlayPause.removeClassName('btnSsPause');
		btnPlayPause.addClassName('btnSsPlay');
		btnPlayPause.title = 'Play slideshow';
		// stop slideshow
		clearTimeout(blnSsTimer);
		blnSsPlaying = false;
	} else {
		// show pause btn
		btnPlayPause.removeClassName('btnSsPlay');
		btnPlayPause.addClassName('btnSsPause');
		btnPlayPause.title = 'Pause slideshow';
		// play slideshow
		playSlideShow();
		blnSsPlaying = true;
	}
}

// event handlers
// ----------------------------------------------
findImage = function(e) {
	// stop slideshow if playing
	if (blnSsPlaying) {
		var btnPlayPause = $('btnPlayPause');
		// show play btn
		btnPlayPause.removeClassName('btnSsPause');
		btnPlayPause.addClassName('btnSsPlay');
		btnPlayPause.title = 'Play slideshow';
		// stop slideshow
		clearTimeout(blnSsTimer);
		blnSsPlaying = false;
	}
	// update slideshow
	showImage(Event.findElement(e, 'a'));
}
slideShowPicker = function(e) {
	var obj = Event.findElement(e, 'a');
	obj.onclick = function() {
		return false;
	}
	if (obj.rel) {
		openModalWindow('imageGallery', obj.rel);
	}
	return false;
}