// initialize all variables to default state
size = -1;			// assume large size not know yet
image = -1;			// assume thumbnail view
refresh = -1;		// refresh the screen?

// parse the URL to find any variables that were passed in
passed = location.search;
if (passed)
{
	// something was passed in, so split into each variable
	parms = passed.substring(1).split('&');

	// loop through each variable
	parmsindex = 0;
	while (parmsindex < parms.length)
	{
		// split apart the variable to get its name and value
		parm = parms[parmsindex].split('=');
		if (parm.length == 2)
		{
			// we have name and value, so see what name we got
			switch (parm[0])
			{
				case "s":
					size = parm[1];
					break;
				case "i":
					image = parm[1];
					break;
				case "r":
					refresh = parm[1];
					break;
			}
		}
		parmsindex++;
	}
}

// if size is not determined yet, then do that now
if ((size < 0) || (size > 2))
{
	// if the browser is new enough, then get the width  from it
	size = 640;					// pick a default
	if (parseInt(navigator.appVersion) > 3)
	{
		size = screen.width;
	}

	// convert screen width to 'our' size
	if (size <= 800)
	{
		size = 0;
	}
	else if (size < 1280)
	{
		size = 1;
	}
	else
	{
		size = 2;
	}
}

// determine previous and next size. there was 'bug' with a simple "+ 1",
// so I had to do the funky "++" and "--"
sizeprev = size - 1;
size++;
sizenext = size;
size--;

// valid that we can display a single image
if ((image >= 0) && (image < images.length))
{
	// determine previous and next image. there was 'bug' with a simple "+ 1",
	// so I had to do the funky "++" and "--"
	imageprev = image - 1;
	image++;
	imagenext = image;
	image--;
}
else
{
	image = -1;					// force a disabled previous
	imageprev = 0;
	imagenext = images.length;	// force a disabled next
}

// do we need to refresh the screen?
playing = false;
if (refresh != -1)
{
	if (imagenext < images.length)
	{
		// only if we are 'playing' and there is another image left to show
		document.write('<META HTTP-EQUIV="Refresh" CONTENT="'+refresh+'; URL=pictures.htm?i='+imagenext+'&s='+size+'&r='+refresh+'">');
		playing = true;
	}
}

// see if we had a mismatch with the large images
if (largemismatch != -1)
{
	document.write('<p><strong>IMAGE MISMATCH' +largemismatch+ '</strong></p>');
}

// see if we had an uppercase JPG file
if (anyuppercase != "")
{
	document.write('<p><strong>UPPERCASE FILE: '+anyuppercase+'</strong></p>');
}

//////////////////////////////////////////////////////////////////////////////////////
// display navigation menu
document.write('<p style="margin-top: 0; margin-bottom: 0">');
//
// show sizes
if (image < 0)					// thumbnail
{
	document.write('<a><img src="/nav/thumbd');
}
else
{
	document.write('<a href="pictures.htm?t='+image+'&s='+size+'"><img src="/nav/thumb');
}
document.write('.png" border="0" title="Index images"></a>');
//
document.write(' ');
//
if ((size == 0) && (image >= 0))// small
{
	document.write('<a><img src="/nav/full3d');
}
else
{
	document.write('<a href="pictures.htm?i=');
	if (image >= 0)
	{
		document.write(''+image+'');
	}
	else
	{
		document.write('0');
	}
	document.write('&s=0');
	if (refresh != -1)
	{
		document.write('&r='+refresh+'');
	}
	document.write('"><img src="/nav/full3');
}
document.write('.png" border="0" title="Small-size images"></a>');
//
document.write(' ');
//
if ((size == 1) && (image >= 0))// medium
{
	document.write('<a><img src="/nav/full2d');
}
else
{
	document.write('<a href="pictures.htm?i=');
	if (image >= 0)
	{
		document.write(''+image+'');
	}
	else
	{
		document.write('0');
	}
	document.write('&s=1');
	if (refresh != -1)
	{
		document.write('&r='+refresh+'');
	}
	document.write('"><img src="/nav/full2');
}
document.write('.png" border="0" title="Medium-size images"></a>');
//
document.write(' ');
//
if ((size == 2) && (image >= 0))// large
{
	document.write('<a><img src="/nav/full1d');
}
else
{
	document.write('<a href="pictures.htm?i=');
	if (image >= 0)
	{
		document.write(''+image+'');
	}
	else
	{
		document.write('0');
	}
	document.write('&s=2');
	if (refresh != -1)
	{
		document.write('&r='+refresh+'');
	}
	document.write('"><img src="/nav/full1');
}
document.write('.png" border="0" title="Large-size images"></a>');
//
// gap between button groups
document.write('<a><img src="/nav/space.png" border="0"></a>');
//
if (image > 0)					// previous
{
	document.write('<a href="pictures.htm?i='+imageprev+'&s='+size+'"><img src="/nav/previous');
}
else
{
	document.write('<a><img src="/nav/previousd');
}
document.write('.png" border="0" title="Previous"></a>');
//
document.write(' ');
//
if (playing == true)			// stop
{
	document.write('<a href="pictures.htm?i=0&s='+size+'"><img src="/nav/stop');
}
else
{
	document.write('<a><img src="/nav/stopd');
}
document.write('.png" border="0" title="Stop"></a>');
//
document.write(' ');
//
if (playing == false)			// play/pause
{
	document.write('<a href="pictures.htm?i=');
	if (imagenext < images.length)
	{
		document.write(''+image+'');
	}
	else
	{
		document.write('0');	// at last image, so start with first next time
	}
	document.write('&s='+size+'&r=');
	if (refresh != -1)
	{
		document.write(''+refresh+'');
	}
	else
	{
		document.write('5');
	}
	document.write('"><img src="/nav/play.png" border="0" title="Play"></a>');
}
else
{
	// pause
	document.write('<a href="pictures.htm?i='+image+'&s='+size+'"><img src="/nav/pause.png" border="0" title="Pause"></a>');
}
//
document.write(' ');
//
if (image < 0)					// next
{
	// we are showing the index images, so let user go to first image
	document.write('<a href="pictures.htm?i=0&s='+size+'"><img src="/nav/next');
}
else if (imagenext < images.length)
{
	// there is still another image to show
	document.write('<a href="pictures.htm?i='+imagenext+'&s='+size+'"><img src="/nav/next');
}
else
{
	document.write('<a><img src="/nav/nextd');
}
document.write('.png" border="0" title="Next"></a>');
//
if (image >= 0)					// image count
{
	// gap between button groups
	document.write('<a><img src="/nav/space.png" border="0"></a>');

	document.write(''+imagenext+' of '+images.length+'');
}
//
document.write('</p>')
//////////////////////////////////////////////////////////////////////////////////////

// display a specific image?
if ((image >= 0) && (image < images.length))
{
	// let see if there is a directory label. we will start at the image
	// being displayed and back up until we find the first one in the directory.
	// if we find the first one, then display the directory label if there is one.
	dirlabelidx = image;
	while (dirlabelidx >= 0)
	{
		// if at first image in directory and no directory label,
		// then nothing to display
		if ((images[dirlabelidx][8] == "$$") || (images[dirlabelidx][8] == "$$$"))
		{
			break;
		}
		
		// if we found a directory label, then use it
		if (images[dirlabelidx][8] != "$")
		{
			document.write('<p style="margin-top: 3; margin-bottom: ');
			document.write('6">');
			document.write(''+images[dirlabelidx][8]+'');
			document.write('</p>');
			break;
		}
		dirlabelidx--;
	}

	// display the title (one line at a time w/3 pts above and 6 pts below)
	if (images[image][6] != "")
	{
		document.write('<p style="margin-top: 3; margin-bottom: ');
		lines = images[image][6].split("[]");
		for (i = 1; i < lines.length; i++)
		{
			document.write('0">');
			document.write(''+lines[i - 1]+'');
			document.write('</p><p style="margin-top: 0; margin-bottom: ');
		}
		document.write('6">');
		document.write(''+lines[i - 1]+'</p>');
	}
	
	// if we don't have the large image, then just use the thumbnail
	document.write('<p style="margin-top: 0; margin-bottom: 0">');
	if (images[image][3] == "")
	{
		document.write('<a>');
		document.write('<img src="'+images[image][0]+'"');
		document.write(' border="0"');
		document.write(' width="'+images[image][1]+'px"');
		document.write(' height="'+images[image][2]+'px"');
		document.write('></a>');
	}
	else
	{
		// include link to large image
		if (images[image][7] == "$")
		{
			document.write('<a href="'+images[image][3]+'" onClick="true">');
		}
		else
		{
			document.write('<a href="'+images[image][7]+'" onClick="true">');
		}
	
		// display large image based on currently selected display size.
		tmpwidth = images[image][4];
		tmpheight = images[image][5];
		switch (size)
		{
			default:
				size = 0;
				// fall through
			case 0:
			case "0":
				tmpwidth = (tmpwidth * 2) / 5;
				tmpheight = (tmpheight * 2) / 5;
				break;
				
			case 1:
			case "1":
				tmpwidth = tmpwidth / 2;
				tmpheight = tmpheight / 2;
				break;
				
			case 2:
			case "2":
				tmpwidth = (tmpwidth * 7) / 8;
				tmpheight = (tmpheight * 7) / 8;
				break;
		}
		document.write('<img src="'+images[image][3]+'"');
		document.write(' border="0"');
		//document.write(' title="'+images[image][6]+'"');
		document.write(' width="'+tmpwidth+'px"');
		document.write(' height="'+tmpheight+'px"');
		document.write('>');
	
		document.write('</a>');
	}
	document.write('</p>');
}
else
{
	// create table of thumbnails
	document.write('<p style="margin-top: 0; margin-bottom: 0">');
	curimage = 0;
	while (curimage < images.length)
	{
		// if this image has a directory label, then it is the first image in a 'new'
		// directory. so end the paragraph, display the label, start a new paragraph.
		if ((images[curimage][8] != "$") && (images[curimage][8] != "$$$"))
		{
			document.write('</p>');		// end paragraph (images or not)
			if (curimage != 0)			// if not the 1st set, then insert a blank line
			{
				document.write('<p style="margin-top: 0; margin-bottom: 0">&nbsp;</p>');
			}
			if (images[curimage][8] != "$$")
			{
				document.write('<a>'+images[curimage][8]+'</a>');
			}
			else
			{
				document.write('<a>...</a>');
			}
			document.write('<p style="margin-top: 0; margin-bottom: 0">');
		}
		
		// include link to large image (if there is one)
		document.write('<a');
		// include link to large image
		if (images[curimage][7] != "$")
		{
			document.write(' href="'+images[curimage][7]+'"');
		}
		else if (images[curimage][3] != "")
		{
			//document.write(' href="'+images[curimage][3]+'" onClick="true"');
			document.write(' href="pictures.htm?i='+curimage+'&s='+size+'"');
		}
		document.write('>');
		
		// display thumbnail based on the size of the actual image.
		// also include the title for the 'tool tip' (one line at a time)
		lines = images[curimage][6].split("[]");
		document.write('<img src="'+images[curimage][0]+'"');
		document.write(' border="0"');
		document.write(' title="');
		for (i = 1; i < lines.length; i++)
		{
			document.write(''+lines[i - 1]+'\n');
		}
		document.write(''+lines[i - 1]+'"');
		document.write(' width="'+images[curimage][1]+'px"');
		document.write(' height="'+images[curimage][2]+'px"');
		document.write('>');
		
		document.write('</a> ');
		curimage++;
	}
	document.write('</p>');
}

// clear the table formating
document.write('<br style="clear: left" />');

// display info about getting back after clicking on a thumbnail
document.write('<p style="margin-top: 0; margin-bottom: 0"><small>NOTE: after clicking an image, click your browsers\' <strong>Back</strong> button to get back to this page</small></p>');