var galleryWidth = false;
var galleryVisibleWidth = false;
var screenshotWidth = false;
var galleryXPosMin = false;
var galleryXPosMax = false;
var galleryObject = false;
var screenshotsPerVisible = false;
var initialized = false;
var initializerInterval = false;
var imageMargins = false;
var activeThumbnail = false;
var currentScreenshotId = false;
var activeThumbnailBorder = '2px solid #5DAFC9';
var inactiveThumbnailBorder = '2px solid #FFFFFF';

function initializeSlideShow() {	
	//set variables used by slider
	galleryObject = document.getElementById('theThumbnails');
	galleryXPosMax = 0;
	var arrowWidth = document.getElementById('arrow_right').offsetWidth + 3;
	
	galleryVisibleWidth = Math.floor(document.getElementById('visibleArea').offsetWidth);
	
	if (galleryObject.getElementsByTagName('img').length == 0) {
		document.getElementById('galleryContainer').style.display = 'none';
	}
	else {
		var sliderwidth = 0;
		var screenshots = galleryObject.getElementsByTagName('img');
		screenshotWidth = galleryObject.getElementsByTagName('div')[0].offsetWidth;
		galleryObject.style.width = (screenshots.length*screenshotWidth) + 'px';
		
		// IE 6 hack
		if (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion)>=6)
			screenshotWidth = screenshotWidth + 5;
		
		screenshotsPerVisible = Math.floor(galleryVisibleWidth/screenshotWidth);
		
		//calculate image margins on each image
		imageMargins = ((galleryVisibleWidth - (screenshotWidth*screenshotsPerVisible)) / (screenshotsPerVisible));

		galleryWidth = galleryObject.offsetWidth;
		galleryXPosMin = galleryXPosMax - galleryWidth + (screenshotWidth+imageMargins+2)*screenshotsPerVisible;
		
		//set up mouse overs for the screenshots
		var screenshots = galleryObject.getElementsByTagName('div');
		for (var z=0; z<screenshots.length-1; z++)
			screenshots[z].getElementsByTagName('img')[0].style.border = inactiveThumbnailBorder;
		
		activeThumbnail = galleryObject.getElementsByTagName('img')[0].parentNode.parentNode.id.substring(2);
		document.getElementById('sh'+activeThumbnail).getElementsByTagName('img')[0].style.border = activeThumbnailBorder;
		
		greyArrow('arrow_left');

		//hide right arrow if not enough screenshots to go off the page
		if (galleryWidth <= (galleryVisibleWidth + screenshotsPerVisible * 2))
			greyArrow('arrow_right');
	}
	
	//set flag
	initialized = true;
	currentScreenshotId = 0;
}

function shiftLeft() {
	//make sure slider is initialized
	checkInitialized();
	
	//check to make sure that scrolling is needed.  Will not scroll if there is no need
	if (galleryWidth >= galleryVisibleWidth) {
		var newLeftLocation = galleryObject.offsetLeft - galleryVisibleWidth;
		if (newLeftLocation <= galleryXPosMin){
			newLeftLocation = galleryXPosMin;
			greyArrow('arrow_right');
		}
		new Tween(galleryObject.style,'left',Tween.strongEaseOut,galleryObject.offsetLeft,newLeftLocation,1,'px').start();
		blueArrow('arrow_left');
	}
}

function shiftRight() {
	//make sure slider is initialized
	checkInitialized();
	
	//check to make sure that scrolling is needed.  Will not scroll if there is no need
	if (galleryWidth >= galleryVisibleWidth) {
		var newLeftLocation = galleryObject.offsetLeft + galleryVisibleWidth;
		if (newLeftLocation>=galleryXPosMax) {
			newLeftLocation = galleryXPosMax;
			greyArrow('arrow_left');
		}
		
		//now gallery looks like it did before this step.  slide new images into view
		new Tween(galleryObject.style,'left',Tween.strongEaseOut,galleryObject.offsetLeft,newLeftLocation,1,'px').start();
		
		//show right arrow to slide back
		blueArrow('arrow_right');
	}	
}

function displayScreenshot(imagePath, imageIndex) {
	var screenshots = galleryObject.getElementsByTagName('div');
	//if a manual screenshot select is performed, we need to figure out which screenshot is selected
	for (var i = 0; i < screenshots.length; i++){
		if (screenshots[i].id == 'sh' + imageIndex){
			currentScreenshotId = i;
			break;
		}
	}
	
	//clear current background image
	if (activeThumbnail)
		document.getElementById('sh'+activeThumbnail).getElementsByTagName('img')[0].style.border = inactiveThumbnailBorder;
	
	var displayImage = document.getElementById('previewPane').getElementsByTagName('img');
	var img = false;
	
	//check if displayImage is empty
	if (displayImage.length == 0) {
		//if so, create a new image and add to preview pane
		img = document.createElement('IMG');
		document.getElementById('previewPane').appendChild(img);
	}
	else
		img = displayImage[0];
	
	img.src = imagePath;
	activeThumbnail = imageIndex;
	document.getElementById('sh'+activeThumbnail).getElementsByTagName('img')[0].style.border = activeThumbnailBorder;
}

function displayNextScreenshot() {
	var screenshots = galleryObject.getElementsByTagName('div');
	var currentScreenshot = false;
	var screenshotInView = false;
	
	currentScreenshotId++;
	if (currentScreenshotId == screenshots.length)
		currentScreenshotId = 0;

	displayScreenshot(servletContext + '/servedimages/'+screenshots[currentScreenshotId].id.substring(2)+'.png/?t=2', screenshots[currentScreenshotId].id.substring(2));

	//scroll selected screenshot into view
	currentScreenshot = document.getElementById('sh'+activeThumbnail);
	
	if (((galleryObject.offsetLeft/1 + currentScreenshot.offsetLeft/1) < galleryVisibleWidth/1) && (galleryXPosMax/1 <= (galleryObject.offsetLeft/1 + currentScreenshot.offsetLeft/1))) {
		screenshotInView = true;
	}
	else {
		var startPos = galleryObject.offsetLeft;
		var endPos = galleryXPosMax/1 - currentScreenshotId*(screenshotWidth+imageMargins);
		if (endPos < galleryXPosMin) {
			endPos = galleryXPosMin;
			//hide right arrow because at beginning of gallery
			greyArrow('arrow_right');
		}
		else if (endPos > galleryXPosMax) {
			endPos = galleryXPosMax;
			//hide left arrow because at beginning of gallery
			greyArrow('arrow_left');
		}
		var mtween = new Tween(galleryObject.style,'left',Tween.strongEaseOut,startPos,endPos,2,'px');
		mtween.onMotionFinished = function() {
			if (endPos == galleryXPosMin)
				greyArrow('arrow_right');
			else if (endPos == galleryXPosMax)
				greyArrow('arrow_left');
		};
		
		//show the arrows if needed
		if (startPos < endPos)
			blueArrow('arrow_right');
		else if (startPos > endPos)
			blueArrow('arrow_left');
		
		mtween.start();
	}
}

function checkInitialized() {
	var flag = false;
	if (document.getElementById('theThumbnails').getElementsByTagName('img').length > 0) {
		if (document.getElementById('theThumbnails').getElementsByTagName('img')[0].offsetWidth > 0) {
			flag = true;
			clearInterval(initializerInterval);
		}
	}
	else {
		flag = true;
		clearInterval(initializerInterval);
	}
	if (!initialized && flag)
		initializeSlideShow();
}

function greyArrow(arrowName){
	if (arrowName == 'arrow_left')
		document.getElementById('larrow').src = '../../img/slider_left_disabled.png';
	else
		document.getElementById('rarrow').src = '../../img/slider_right_disabled.png';
	document.getElementById(arrowName).onclick = null;
	document.getElementById(arrowName).style.cursor = 'default';
}

function blueArrow(arrowName){
	document.getElementById(arrowName).style.cursor = 'pointer';
	if (arrowName == 'arrow_left'){
		document.getElementById(arrowName).onclick = shiftRight;
		document.getElementById('larrow').src = '../../img/slider_left.png';
	}else{
		document.getElementById(arrowName).onclick = shiftLeft;
		document.getElementById('rarrow').src = '../../img/slider_right.png';
	}
}

initializerInterval = setInterval(checkInitialized, 200);