var photo = new Array();	// ???
var numPages = 0;			// number of pages in album

// get album address from URL
//var folderList = window.location.href.substr( window.location.href.indexOf( "?" ) + 1 );
//document.write(folderList);
//var folder = new Array();
//folder = folderList.split( "&" );
//var path = folder[0]+"/"+folder[1]+"/"+folder[2]+"/";
var path = "spym_files/photos/"
// document.write("<script language="javascript" src='"+path+"data.js" type="text/javascript"      /script>");		// read album data file in HTML
var photoLoaded = new Array();			// true/false for each photo
var nextNum = 0;	var prevNum = 0;	// keeps track of which pages come before and after (allows for wraparound at end/start of album)
var pageNum = 1;						// current page being displayed, start at one
//if( folder[3] )
//	{pageNum = folder[3];}				// if the URL contains a page number then start on that page

// var mapPresent = false;						

var thumbnailRowLength = 10;
var numThumbnailsRow1 = thumbnailRowLength;
var numThumbnailsRow2 = 0;

function FirstPage() {

	test = "this works."
	numPages = text.length-1;								// note: this is here because it cannot be done until after data file is read
	for( var counter=1; counter<image.length; counter++ )
		{photoLoaded[ counter ] = false;}
	if( pageNum < 1 ) {pageNum = 1;} else if( pageNum > numPages ){pageNum = numPages;}	// check that imported page number is within range	
		
	ShowPage();
	DisplayThumbnails();
		
}

function PrevPage() {										// if back button is pressed, show previous page or last page
	pageNum--;
	if( pageNum < 1 ) {pageNum = numPages;}
	ShowPage();
}
	
function NextPage() {										// if next button is pressed, show nest page or first page
	pageNum++;
	if( pageNum > numPages ) {pageNum = 1;}	
	ShowPage();
}

function GoToPage( newPage ) {								// if a thumbnail is pressed, go to that thumbnail's page
	pageNum = newPage;
	ShowPage();
}

function ShowPage() {										// display a new page

	if( photoLoaded[ pageNum ] == false )			
		{PreloadImage( pageNum );}							// load image if it has not been pre-loaded
	
	
	document.getElementById( "photo" ).src = photo[ pageNum ].src;	// display photo (must be loaded with "PreloadImage" first)	
	document.getElementById( "text" ).innerHTML = text[ pageNum ];	// display text
	DisplayThumbnailBox();									// move thumbnail
	PreloadNextPrevImages();								// preload adjacent photos
		
}	

// preload next, or first, photo plus previous, or last, photo
function PreloadNextPrevImages() {
	
	
	var nextNum = pageNum + 1;
	if( nextNum > numPages ) {nextNum = 1;}
	if( photoLoaded[ nextNum ] == false ) {PreloadImage( nextNum );}

	var prevNum = pageNum - 1;
	if( prevNum < 1 ) {prevNum = numPages;}
	if( photoLoaded[ prevNum ] == false ) {PreloadImage( prevNum );}
}

// preload image and record that this has been done
function PreloadImage( loadNum ) {							

	
	photo[ loadNum ] = new Image();
	photo[ loadNum ].src = path + image[ loadNum ];

//	document.write(path + image[loadNum]);

	photoLoaded[ loadNum ] = true;
}
/*
// put map in top right of page (if this album has a location declared)
function AddMap() {									
	if( xpos[ pageNum ] > 0 ) {
		mapPresent = true;
		var map = document.getElementById("mapRow");
			var mapCell = document.createElement("td");
			map.appendChild(mapCell);
			mapCell.setAttribute("align","right");
			mapCell.setAttribute("width","310");
			mapCell.setAttribute("valign","top");

				// this extra element helps to make the positioning work
				var mapEl = document.createElement("div");	
				mapCell.appendChild(mapEl);
				mapEl.style.position = "relative";

					var mapImage = document.createElement("img");
					mapEl.appendChild(mapImage);
					// some albums have special maps
//					if( folder[2] == "engadine" )			
//						{mapImage.src="Graphics/Maps/CH_relief_300_engadine.gif";}
//					else if( folder[2] == "lausanne_Luzern" )
//						{mapImage.src="Graphics/Maps/CH_relief_300_luzern.gif";}
//					else
//						{mapImage.src="Graphics/Maps/CH_relief_300.gif";}
					mapImage.setAttribute("width","300");
					mapImage.setAttribute("height","200");
					mapImage.style.position = "absolute";
					mapImage.style.left = "0px";
					mapImage.style.top = "0px";

					// add red dot to map to indicate photo location
					redDot = document.createElement("img");	
					mapEl.appendChild(redDot);
					redDot.style.position = "absolute";
	}
	else
		{mapPresent = false;}
}
*/
// move location of red dot and determine orientation 
/* function PlotLocation() {
	if( mapPresent == true && xpos[ pageNum ] != 0 ) {
		redDot.style.visibility = "hidden";	// hide image while it is being updated or it is not necessary for this page
		// send file-name, height, width, and x & y offset to function
		if( rot[ pageNum ] == "N" )			{ProcessLocation( "Graphics/Maps/red_dot_N.png", 6, 12, 0, -6 ); }
		else if( rot[ pageNum ] == "S" )	{ProcessLocation( "Graphics/Maps/red_dot_S.png", 6, 12, 0, 0 ); }
		else if( rot[ pageNum ] == "E" )	{ProcessLocation( "Graphics/Maps/red_dot_E.png", 12, 6, 0, 0 ); }
		else if( rot[ pageNum ] == "W" )	{ProcessLocation( "Graphics/Maps/red_dot_W.png", 12, 6, -6, 0 ); }
		else if( rot[ pageNum ] == "NE" )	{ProcessLocation( "Graphics/Maps/red_dot_NE.png", 11, 11, 0, -5 ); }
		else if( rot[ pageNum ] == "NW" )	{ProcessLocation( "Graphics/Maps/red_dot_NW.png", 11, 11, -5, -5 ); }
		else if( rot[ pageNum ] == "SE" )	{ProcessLocation( "Graphics/Maps/red_dot_SE.png", 11, 11, 0, 0 ); }
		else if( rot[ pageNum ] == "SW" )	{ProcessLocation( "Graphics/Maps/red_dot_SW.png", 11, 11, -5, 0 ); }
		else if( rot[ pageNum ] == "NNE" )	{ProcessLocation( "Graphics/Maps/red_dot_NNE.png", 8, 12, 0, -6 ); }
		else if( rot[ pageNum ] == "NNW" )	{ProcessLocation( "Graphics/Maps/red_dot_NNW.png", 8, 12, -2, -6 ); }
		else if( rot[ pageNum ] == "SSE" )	{ProcessLocation( "Graphics/Maps/red_dot_SSE.png", 8, 12, 0, 0 ); }
		else if( rot[ pageNum ] == "SSW" )	{ProcessLocation( "Graphics/Maps/red_dot_SSW.png", 8, 12, -2, 0 ); }
		else if( rot[ pageNum ] == "ENE" )	{ProcessLocation( "Graphics/Maps/red_dot_ENE.png", 12, 8, 0, -2 ); }
		else if( rot[ pageNum ] == "ESE" )	{ProcessLocation( "Graphics/Maps/red_dot_ESE.png", 12, 8, 0, 0 ); }
		else if( rot[ pageNum ] == "WNW" )	{ProcessLocation( "Graphics/Maps/red_dot_WNW.png", 12, 8, -6, -2 ); }
		else if( rot[ pageNum ] == "WSW" )	{ProcessLocation( "Graphics/Maps/red_dot_WSW.png", 12, 8, -6, 0 ); }
		else if( rot[ pageNum ] == "none" )	{ProcessLocation( "Graphics/Maps/red_dot.gif", 6, 6, 0, 0 ); }

		// process offset data in three steps:
		var xInt = xpos[ pageNum ] + xOffset;					// first do sum				
		var yInt = ypos[ pageNum ] + yOffset;									
		var x = xInt + "px";									// then make a string
		var y = yInt + "px";
		redDot.style.left = x;									// then load strings
		redDot.style.top = y;
		redDot.style.visibility = "visible"
	}
}

function ProcessLocation( dotSource, wd, ht, xO, yO ) {
	redDot.src = dotSource;
	redDot.setAttribute("width",wd);
	redDot.setAttribute("height",ht);
	var xOffset = xO;
	var yOffset = yO;
}
*/
function DisplayThumbnails() {
	
	
	if( image.length > 2 ) {
		if( image.length <= thumbnailRowLength )						// determine length of each thumbnail row
			{numThumbnailsRow1 = image.length-1;}						// ??? I don't know why it is '-1' here, ...
		else															// but otherwise it makes one too many on the last row ???
			{numThumbnailsRow2 = image.length-1;}

		var row = document.getElementById("thumbnailRow");				// access first thumbnail row
		for( var counter=1; counter<=numThumbnailsRow1; counter++ )		// add cell, link, and image for each thumbnail
			{AddThumbnail( row, counter );}

		if( numThumbnailsRow2 > 0 )	{												
			row = document.getElementById("thumbnailRow2");				// if necessary, access second thumbnail row
			for( counter=11; counter<=numThumbnailsRow2; counter++ )	// add cell, link, and image for each thumbnail
				{AddThumbnail( row, counter );}												
		}
	}
}
function AddThumbnail( row, counter ) {
	// when an album uses images stores in other folders, I need to trim path details from thumbnail filename using position of last "/" character
	var lastOccurrence = -1;
	for( var pos=0; pos<=image[counter].length; pos++ ) {
		if( image[counter].substring( pos, (pos+1) ) == "/" )						
			{lastOccurrence = pos;}
	}
	var thumbnailFilename = image[counter].substring( (lastOccurrence+1) );

	var cell = document.createElement("td");
	row.appendChild( cell );
	cell.setAttribute("width","100" );
	cell.setAttribute("height","100" );
	cell.setAttribute("align","center" );
	cell.setAttribute("valign","middle" );
		var link = document.createElement("a");
		cell.appendChild( link );
		link.setAttribute("href","javascript:GoToPage(" + counter + ")");
		link.setAttribute("onmouseover","javascript:MouseOver(" + counter + ")");
		link.setAttribute("onmouseout","javascript:MouseOut(" + counter + ")");
			var thumbnailImg = document.createElement("img");
			link.appendChild( thumbnailImg );
			thumbnailImg.src = "Winter2008_files/thumbnails/" + thumbnailFilename;

			thumbnailImg.setAttribute("id","thumbnail"+counter);
			thumbnailImg.setAttribute("class","noBorder");
			thumbnailImg.setAttribute("className","noBorder");
}

function DisplayThumbnailBox() { 

	if( image.length > 2 ) {											// not necessary if there is only one photo (which would make image.length = 2 due to counting 0)
		var row = document.getElementById("thumbnailRow");				// access first thumbnail row							
		
		for( var counter=1; counter<=numThumbnailsRow1; counter++ )		
			{MoveThumbnailBox( counter );}								// reset boxes around all thumbnails in first row 
		
		if( numThumbnailsRow2 > 0 )	{
			row = document.getElementById("thumbnailRow2");				// if necessary, access second thumbnail row
			for( counter=11; counter<=numThumbnailsRow2; counter++ )	
				{MoveThumbnailBox( counter );}							// reset boxes around all thumbnails in second row 
		}
		
	}

}
function MoveThumbnailBox( index ) {

	var thumbnailImg = document.getElementById("thumbnail"+index);
	
	if( index == pageNum ) {
		thumbnailImg.setAttribute("class","currentBorder");				// do this two ways to make it compatible with most browsers
		thumbnailImg.setAttribute("className","currentBorder");			// the problem is really here

	}
	else {
		thumbnailImg.setAttribute("class","noBorder");
		thumbnailImg.setAttribute("className","noBorder");
	}

}

function MouseOver( index ) {
	if( index != pageNum ) {											// ignore mouseover if mouse is over thumbnail of current page
		var thumbnailImg = document.getElementById("thumbnail"+index);
		thumbnailImg.setAttribute("class","hoverBorder");
		thumbnailImg.setAttribute("className","hoverBorder");
	}
}
function MouseOut( index ) {
	if( index != pageNum ) {
		var thumbnailImg = document.getElementById("thumbnail"+index);
		thumbnailImg.setAttribute("class","noBorder");
		thumbnailImg.setAttribute("className","noBorder");
	}
}