var imagePath = "stereoimages";
var frame = 0; //start at the beginning
var selectedStyle = "2px solid #ffffff"; //appearance of the highlighted photo in the scrollbar
var current;
var viewType;
var slideshowStatus = 1;


// On startup, build the album and display the correct photo, based on the location.hash in the url
function buildPage(){

// On startup, determine the currently displayed slide
getCurrent();

// On startup, check the display of the previous/next buttons and update the counter
if (current==0) {
	document.getElementById("prevButton").style.visibility = "hidden";
	}
document.getElementById("counter").innerHTML = (current+1)+" of "+stereoArray.length;	


// On startup, create the scrolling thumbnails
var theBody = document.getElementById("thumbHorzData");
tr = theBody.insertRow(theBody.rows.length);
for (i=0;i<stereoArray.length;i++) {

	td = tr.insertCell(tr.cells.length);
	td.innerHTML = "<a href=\"#\" onClick=\"pauseSlideshow("+i+"); fullsize("+i+"); return false;\">					<img src=\""+imagePath+"\/"+stereoArray[i][0]+"_thumb.jpg\" \/></a>";
	}

// On startup, highlight the current thumbnail
var elemTd = document.getElementById("thumbHorz").getElementsByTagName("td");
elemTd[current].getElementsByTagName("a")[0].style.border = selectedStyle;

	
//On startup, reset layout selection	
document.viewType.typeSelect.selectedIndex = 0;

fullsize(current);

}

window.onload = buildPage;

/* ##### Display full size image ##### */
function fullsize(obj) {

clearTimeout(timer); //stop the slideshow

// Determine the type of stereophoto to display (parallel, crosseye, anaglyph)
viewType = document.getElementById("typeSelect").value;

// Display the image and header
fullsizeSrc = imagePath+"/"+stereoArray[obj][0]+"_"+viewType+".jpg";
document.getElementById("currentImage").src = fullsizeSrc;
document.getElementById("currentHeader").innerHTML = stereoArray[obj][1];
location.hash = stereoArray[obj][0];

//Update the counter
document.getElementById("counter").innerHTML = (obj+1)+" of "+stereoArray.length;
if ((obj+1)>1) {
	document.getElementById("prevButton").style.visibility = "visible";
	}
if ((obj+1)==1) {
	document.getElementById("prevButton").style.visibility = "hidden";
	}

//Update the url
location.hash = stereoArray[obj][0];

//set for previous/next navigation (when run from thumbnail)
current=obj;

//Highlight the full-size photo in the scroll tray
var elemTd = document.getElementById("thumbHorz").getElementsByTagName("td");
for (i=0;i<stereoArray.length;i++) {
	elemTd[i].getElementsByTagName("a")[0].style.border = "0";			
	}

elemTd[obj].getElementsByTagName("a")[0].style.border = selectedStyle;

}


/* ##### fullsize navigation (prev/next buttons) ##### */

function photoNext() {

current++;

//control display of next/previous buttons at beginning & end of navigation
if (current>=(stereoArray.length-1)) document.getElementById("nextButton").style.visibility = "hidden";
if (current>-1) document.getElementById("prevButton").style.visibility = "visible";

//display the next fullsize image
fullsize(current);
}

function photoPrev() {

current--;

//control display of next/previous buttons at beginning & end of navigation
if (current<=(stereoArray.length-1)) document.getElementById("nextButton").style.visibility = "visible";
if (current==1) document.getElementById("prevButton").style.visibility = "hidden";

//display the previous fullsize image
fullsize(current);

}



/* ##### Animated thumbnail tray ##### */

// Adjust the animation speed
var speed = 30;

// Function variables
var frameWidth = -1028;
var increment = 0;
document.getElementById("thumbHorz").style.left = "0px";
var currentPos = frameWidth;
 
function scrollNavNext() {
document.getElementById("prev").style.visibility = "visible";

var thumbHorzPos = parseInt(document.getElementById("thumbHorz").style.left);
thumbHorzPos = thumbHorzPos-speed;
document.getElementById("thumbHorz").style.left = thumbHorzPos+"px";
	
var thumbHorzWidth = document.getElementById("thumbHorz").offsetWidth;
var scrollTimeout = setTimeout("scrollNavNext()",0);

//stop at the last thumbnail
if ((thumbHorzPos+frameWidth)<=(thumbHorzWidth*-1)) {
	clearTimeout(scrollTimeout);
	document.getElementById("next").style.visibility = "hidden";
	}

//pause after scrolling past a complete group
if (currentPos>=thumbHorzPos) {
	clearTimeout(scrollTimeout);
	currentPos = currentPos+frameWidth;
	document.getElementById("thumbHorz").style.left = (frameWidth*increment)+"px";
	}
}


function scrollNavPrev() {

document.getElementById("next").style.visibility = "visible";

var thumbHorzPos = parseInt(document.getElementById("thumbHorz").style.left);
thumbHorzPos = thumbHorzPos+speed;
document.getElementById("thumbHorz").style.left = thumbHorzPos+"px";
	
var thumbHorzWidth = document.getElementById("thumbHorz").offsetWidth;
var scrollTimeout = setTimeout("scrollNavPrev()",0);

//stop at the last thumbnail
if ((thumbHorzPos+frameWidth)>=frameWidth) {
	clearTimeout(scrollTimeout);
	document.getElementById("prev").style.visibility = "hidden";
	}

//pause after scrolling past a complete group
if (currentPos<=thumbHorzPos) {
	clearTimeout(scrollTimeout);
	document.getElementById("thumbHorz").style.left = (frameWidth*increment)+"px";
	if (thumbHorzPos == 0) currentPos = frameWidth;
	else currentPos = currentPos-frameWidth;	

	}
	
}

function prevButton() {
increment--;
currentPos = frameWidth*increment;
scrollNavPrev();
}

function nextButton() {
increment++;
currentPos = frameWidth*increment;
scrollNavNext();
}


/* ##### "How to View" popin #####  */
function showHowToView() {
if (document.getElementById("howToView").style.display != "block") {
	document.getElementById("howToView").style.display = "block";
	}
else {
	document.getElementById("howToView").style.display = "none";
	}
}



function popinClose(obj) {
document.getElementById(obj).style.display = "none";
}




/* ##### slideshow ##### */

//window.addEventListener?window.addEventListener("load",init,false):window.attachEvent("onload",init);

/* performance variables */
var fadeDuration = 1; //duration of the cross-fades in seconds
var pauseDuration = 6 //duration of the pause between frames in seconds

var frames = new Array(); //the slideshow frames
var current=0; //the slideshow frame that's displayed
var timer;


/* ##### run the cross-fade ##### */
function crossfade() {

cOpacity = frames[current].xOpacity;
nIndex = frames[current+1]?current+1:0;

nOpacity = frames[nIndex].xOpacity;

cOpacity-=.05; 
nOpacity+=.05;

frames[nIndex].style.display = "block";
frames[current].xOpacity = cOpacity;
frames[nIndex].xOpacity = nOpacity;

setOpacity(frames[current]); 
setOpacity(frames[nIndex]);
	
//Highlight the full-size photo in the scroll tray
var elemTd = document.getElementById("thumbHorz").getElementsByTagName("td");
for (i=0;i<frames.length;i++) {
	elemTd[current].getElementsByTagName("a")[0].style.border = "0";	
	}
if (elemTd[current+1]) elemTd[current+1].getElementsByTagName("a")[0].style.border = "2px solid #ffffff";

	if(cOpacity<=0) {
		frames[current].style.display = "none";
		frames[nIndex].xOpacity = 1;
		setOpacity(frames[nIndex]);
		timer = setTimeout('endpause()',(pauseDuration*1000));
		current = nIndex;

	} else {
	timer = setTimeout(crossfade,50);
	}
	
	
}


/* #### Cross-browser method to apply opactiy #####  */	
function setOpacity(obj) {
if (obj.xOpacity>1) {
	obj.xOpacity = 1;
	return;
	}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
	

function endpause() {
timer = setTimeout(crossfade,(fadeDuration*1000));
	
// Determine the currently displayed image
getCurrent();

// Update URL with the image we've landed on
location.hash = stereoArray[current+1][0];
	
//Update the previous/next navigation
document.getElementById("counter").innerHTML = (current+2)+" of "+frames.length;
if (current+1==frames.length) {
	document.getElementById("counter").innerHTML = "1 of "+frames.length;
	document.getElementById("nextButton").style.visibility = "visible";	
	document.getElementById("prevButton").style.visibility = "hidden";	
	return;
	}

if (current+1==frames.length-1) {
	document.getElementById("nextButton").style.visibility = "hidden";		
	document.getElementById("prevButton").style.visibility = "visible";		
	return;
	}

else {
	document.getElementById("nextButton").style.visibility = "visible";	
	document.getElementById("prevButton").style.visibility = "visible";	
	return;
	}
}


/* ##### slideshow controls ##### */
function slideshow() {

//Determine the currently displayed slide
getCurrent();

// Hide still photos and content
document.getElementById("currentImage").style.display = "none";
document.getElementById("currentHeader").style.display = "none";


/* Need a loader */

document.getElementById("loading").innerHTML = "Loading...";
document.getElementById("loading").style.display = "block";



// Create slideshow frames

for (i=0;i<stereoArray.length;i++) {
	listItemImage = document.createElement("div");
	listItemImage.src = imagePath+"/"+stereoArray[i][0]+"_"+viewType+".jpg";
	listItemHeaderText = stereoArray[i][1];
	listItemHeader = document.createElement("h1");
	listItemHeader.innerHTML = listItemHeaderText;
	listItem = document.createElement("li");
	document.getElementById("slideshow").appendChild(listItem);
	listItem.appendChild(listItemImage);
	listItem.appendChild(listItemHeader);
	}

// Configure slideshow frames
frames = document.getElementById("slideshow").getElementsByTagName("li");

for(i=1;i<frames.length;i++) {
	frames[i].xOpacity = 0;
	}

//if slideshow is playing, pause it
if (slideshowStatus==0) {
	pauseSlideshow('');
	}
	
//if slideshow is paused, play it from the currently displayed frame	
else if (slideshowStatus==1) {

	//update the url with the next slide name when the show restarts
	location.hash = stereoArray[current][0];

	//update counter
	document.getElementById("counter").innerHTML = (current+2)+" of "+frames.length;	

	//reset the frames
	for(i=1;i<frames.length;i++) {
		frames[i].xOpacity = 0;
		}

	//if the frame was paused in the middle of a transition
	if (frames[current+1] && frames[current+1].style.display=="block") {
		frames[current+1].style.display = "block";
		frames[current+1].xOpacity = 1;
		}
	
	//if the frame was paused in between transitions
	else {
		frames[current].style.display = "block";
		frames[current].xOpacity = 1;
		}

	timer = setTimeout(crossfade,(fadeDuration*1000));

	//update the status message
	document.getElementById("slideshowSwitch").innerHTML = "slideshow is <span>on</span>";
	slideshowStatus = 0;
	}
	

	

frames[current].style.display = "block";
frames[current].xOpacity = 1;
showSlideshow();
	
}

function showSlideshow() {
document.getElementById("loading").style.display = "none";
document.getElementById("slideshow").style.display = "block";

}


function pauseSlideshow(obj) {

if (slideshowStatus==0) {

	//halt the running timer
	clearTimeout(timer);
	
	//update the navigation
	document.getElementById("slideshowSwitch").innerHTML = "slideshow is <span>off</span>";
	
//detect the frame to display when the slideshow stops
getCurrent();

/*
if (location.hash) {
	//Don't increment the next slide if the show is paused for info dialogues.
	if (obj.id=="howToViewNav" || obj.id=="infoNav" || obj.id=="nextButton") {
		var nextFrame=parseInt(location.hash.slice(4));
		}
	//Increment the next slide if the show is paused with the button	
	else {
		var nextFrame=parseInt(location.hash.slice(4));	
		}
	}
	
//if the url doesn't specify which slide to start with, show the first slide	
else {
	location.hash="mat0";
	var nextFrame=0;
	}
*/

//adjust the display of the paused slide if the "prev" nav button or right arrow scroll button is clicked
if (obj.id=="prevButton" || obj.id=="next") {
	current--;
	}
	
		
	//clear all frames
document.getElementById("slideshow").innerHTML = "";
document.getElementById("slideshow").style.display = "none";
document.getElementById("currentImage").style.display = "block";
document.getElementById("currentHeader").style.display = "block";

	//highlight the current tab and display the screen
	fullsize(current);
	
	slideshowStatus = 1;
	}
else {return;}
}


// Set the display type of the stereophoto (parallel, crosseye, anaglyph)
function changeViewType(type) {
viewType = type;
fullsize(current);
}

function getCurrent() {
if (location.hash) {
	for (i=0;i<stereoArray.length;i++) {
		if ("#"+stereoArray[i][0]==location.hash) {
			current=i;
			}
		}
	}
else {
	current = 0;
	}
return current;
}