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

var ssPreloader = new Array();	// image used to store images for preloading
var nextImg = null;
var nextHeight = null;
var nextWidth = null;

prepSlideShow = function()
{
	// retrieve gallery image and mat
	ssImage = $('slideshow-target-image');
	mat = $('slideshow-target');
	
	// retrieve caption
	caption = $('caption');
	
	// retrieve previous and next mats
	objSsPrev = $('slideshow-target-previous');
	objSsNext = $('slideshow-target-next');
	
	// retrieve gallery list
	objUl = $('preview-images');
	
	// 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();
	
	$('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;
	}
}

initSlideshow = function()
{
	// determine target image height
	var targetImageHeight = (ssImage.offsetHeight + 0) + 'px';
	var targetImageWidth = ssImage.offsetWidth + 0;
	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 cancelSlideshow(strId)
{
	// reset slideshow
	ssImage.src = '';
	caption.innerHTML = '';
	mat.style.display = 'none';
	$('close-button').style.display = 'none';
	
	// close modal window
	closeSlideshow(strId);
}

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 and close buttons
	objSsPrev.style.display = 'none';
	objSsNext.style.display = 'none';
			
	new Effect.Parallel(
	[
		new Effect.Fade('close-button',
		{
			sync: true
		}),
		new Effect.Fade('slideshow-target',
		{
			sync: true
		}),
		new Effect.Fade(ssImage,
		{
			sync: true
		})
	],
	{
		duration: 0.1,
		afterFinish: transitionHelper
	});
	return false;
}

transitionHelper = function()
{
	caption.innerHTML = '';
	ssImage.src = '/images/lib/pxTransparent.gif';
	getNextImage();
}

getNextImage = function()
{
	if (mat.style.display == 'none');
	{
		new Effect.Appear(mat);
	}
	showNextImage();
}
	
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('close-button',
		{
			duration: 0.1
		})}
	});
}

showThumbnails = function()
{
	Effect.BlindDown('preview-images',
	{
		duration: 0.4
	});
}

// Event handlers
// ----------------------------------------------
findImage = function(e)
{
	showImage(Event.findElement(e,'a'));
}

slideShowPicker = function(e)
{
	var obj = Event.findElement(e,'a');
	obj.onclick = function()
	{
		return false;
	}
	if (obj.rel)
	{
		openSlideshow('slideshow',obj.rel);
	}
	return false;
}

// Work with the overlay and slideshow canvas
// ----------------------------------------------
var multiWindow = false;
var CurrentModalWindow = "none";

openSlideshow = function(selectorId,strStartId)
{
	var overlayID = 'slideshow-overlay';
	var v = Position.getPageSize();

	// Turn off scrollbars in the viewport as they render above the overlay //
	var problemTags = document.getElementsByTagName("textarea");
	for (var i = 0;i<problemTags.length;i++)
	{
		if (problemTags[i].className != "scrollOK")
		{
			problemTags[i].style.overflow = "hidden";
		}
	}
	
	// Hide flash in the viewport as it interfers with the overlay //
	var flashObjects = (document.getElementsByTagName("object") || document.getElementsByTagName("embed"));
	for (var i = 0;i<flashObjects.length;i++)
	{
		if (flashObjects[i].className != "viewOK")
		{
			flashObjects[i].style.visibility = "hidden";
		}
	}
	
	// Hide select tags in IE as they render through the overlay //
	if (BrowserDetect.browser=="Explorer")
		{
			var problemTagsForIE = document.getElementsByTagName("select");
			for (var i = 0;i<problemTagsForIE.length;s++)
			{
				problemTagsForIE[i].style.visibility = "hidden";
			}		
		}
					
	// Show the overlay and modal window //
	if (CurrentModalWindow != "none")
	{
		document.getElementById(overlayID).style.height = v.page.height + "px";
		document.getElementById(selectorId).style.top = (v.scroll.top+((v.window.height/100)*0)) + "px";
		multiWindow = true;
	}
	else
	{
		document.getElementById(overlayID).style.height = v.page.height + "px";
		document.getElementById(selectorId).style.top = (v.scroll.top+((v.window.height/100)*0)) + "px";
	}

	Effect.Appear(overlayID,
	{
		duration: 0.2,
		fps: 80,
		from: 0,
		to: 0.80,
		afterFinish:function()
		{
			Effect.BlindDown(selectorId,
			{
				delay: 0.1,
				duration: 0.4,
				afterFinish:function()
				{
					if (strStartId)
					{
						var arrA = $('preview-images').getElementsByTagName('a');
						showImage(arrA[strStartId]);
						window.setTimeout(showThumbnails,1000);
					}
					else
					{
						var objTemp = $('preview-images').firstChild.firstChild;
						showImage(objTemp);
						window.setTimeout(showThumbnails,1000);
					}
				}
			});
		}
	});
	CurrentModalWindow = selectorId;
}

closeSlideshow = function()
{
	if (multiWindow!=true)
	{
		CurrentModalWindow = "none";
		var overlayID = 'slideshow-overlay';
		
		Effect.BlindUp('slideshow',
		{
			duration: 0.4,
			fps: 30,
			afterFinish:function()
			{
				$('preview-images').style.display = 'none';
				Effect.Fade(overlayID,
				{
					delay: 0.1,
					duration: 0.3,
					from: 0.80,
					to: 0.0,
					afterFinish:function()
					{
						if (BrowserDetect.browser=="Explorer")
						{
							var problemTagsForIE = document.getElementsByTagName("select");
							for (var i = 0;i<problemTagsForIE.length;s++)
							{
								problemTagsForIE[i].style.visibility = "visible";
							}		
						}
					}
				});
			}
		});
	}
	else
	{
		multiWindow = false;
	}
	
	// Turn scrollbars in the viewport back on //
	var problemTags = document.getElementsByTagName("textarea");
	for (var i = 0;i<problemTags.length;i++)
	{
		if (problemTags[i].className != "scrollOK")
		{
			problemTags[i].style.overflow = "auto";
		}	
	}
	
	// Restore flash in the viewport //
	var flashObjects = (document.getElementsByTagName("object") || document.getElementsByTagName("embed"));
	for (var i = 0;i<flashObjects.length;i++)
	{
		flashObjects[i].style.visibility = "visible";
	}
}