/*
 * David's JavaScript Slideshow.
 *
 */
 
var gNumSlides         	= 0;	// InitSlideSlow sets this, based on number of divs
var kNumSlidesPerTray	= 6;
var kSlideInterval		= 2000; // was 5000, but that seemed too slow

var gNumSlideTrays		= 1;	// this will be updated.

var gTrayVisible		= 0;	// initially hidden
var gFaderVisible		= 1;	
var gSlideChosen		= 1;    // initialize
var gSlidePause			= 1;	// slide show initially paused
var gSlideLoop			= 0;	// don't loop the show
var gSlideTray      	= 0;

/***********************************************************************
 InitSlideShow
 
 this function is called whenever the web page is reloaded.
***********************************************************************/
function InitSlideShow()
{
	// count how many slides there are
	gNumSlides = 0;
	
	while ( document.getElementById("caption" + (gNumSlides + 1) ) != null )
	{
		gNumSlides++;
	}
	
	gNumSlideTrays =  Math.ceil( gNumSlides / kNumSlidesPerTray );

	
	// show or hide the slide tray
	if ( gTrayVisible == 1 )
		ShowSlideTray();
	else
		HideSlideTray();

	// ensure that correct thumbs are displayed.
	DoSlideTray( gSlideTray );
	
	// display correct slide
	ChangePic( gSlideChosen );

	// if slideshow not paused, set interval for next slide
	if ( gSlidePause == 0 ) 
	{
	   setInterval('RollPics()', kSlideInterval);  // specify interval for next slide
	}	       
}

/***********************************************************************
 DoChangeTrayButton
 
 Switches to the slide tray that is "counter" places ahead of the
 current tray.
 
 N.B., slide trays are numbered from 0.
***********************************************************************/
function DoChangeTrayButton( counter )
{
	var		finalSlideTray = gNumSlideTrays - 1;
	
//	finalSlideTray =  Math.ceil( (gNumSlides / kNumSlidesPerTray) - 1 );

/* debug */
//console.log("finalSlideTray a = %f\n", finalSlideTray);

	// Move up the specified number of trays
	gSlideTray += counter;
   
	// If we're beyond the final slide tray, move back to zero
	if ( gSlideTray > finalSlideTray )
		gSlideTray = 0;
	else if ( gSlideTray < 0 )
		gSlideTray = finalSlideTray;
   
   DoSlideTray( gSlideTray );
}

/***********************************************************************
 DoSlideTray
 
 This function changes the thumbnails to match the specified tray.
***********************************************************************/
function DoSlideTray( whichTray )
{
	var		slideIndex	= kNumSlidesPerTray * whichTray;
	var		theDiv;
	var		imgDiv;
	var		i;
	var		captionText;
	
	// Update our global tray index.
	gSlideTray = whichTray;


	// Work through each of the six slide positions, setting their contents.
	// We simply use the full-size image, scaled for the slide tray.


	for (i=1; i <= 6; i++)
	{
		// slide tray position 1
		slideIndex++;
	
		theDiv = document.getElementById( "slide" + i );
		if ( slideIndex > gNumSlides )
		{
			theDiv.style.display = "none";
		}
		else
		{
			window.document["thumb" + i].src = "resources/gallery/slide" + slideIndex + ".jpg";
			theDiv.style.display = "block";

			// assign a title to the image (thumbnail), so that a help tag appears with 
			// this. We use the ".innerHTML" property, to get all text that lies
			// within the caption div.
			captionText = document.getElementById( "caption" + slideIndex ).innerHTML;
			
			// Assign the caption text to the image title
			window.document["thumb" + i].title = captionText;
		}
	}
	
	// Ensure that slides are correctly highlighted.
	OutlineSlideTrayChoice( gSlideChosen );
	
	// We should also hide the left or right slide-tray buttons if we're
	// the first or the last slide tray, respectively. This makes it
	// clearer for the user where we are in the sequence of trays.
	theDiv = document.getElementById("prevTray");
	if ( gSlideTray == 0 )
	{
		// set the visilibity tag, NOT the "display" tag - if we set
		// the visibility, then we don't lose the space taken up by
		// the div.
		theDiv.style.visibility="hidden";
	}
	else
	{
		theDiv.style.visibility="visible";
	}

	theDiv = document.getElementById("nextTray");
	if ( gSlideTray == (gNumSlideTrays - 1) )
	{
		theDiv.style.visibility="hidden";
	}
	else
	{
		theDiv.style.visibility="visible";
	}
}

function DoToggleSlideTray()
{
	if ( gTrayVisible == 1 )
		HideSlideTray();
	else
		ShowSlideTray();
}


function ShowSlideTray()
{
	var theDiv;
	
	// hide the current slide tray
	theDiv = document.getElementById( "slideTray" );
	
	theDiv.style.display = "block";
	
	// update eject button...
	theDiv = document.getElementById("ejectUp");
	theDiv.style.display = "none";
	
	theDiv = document.getElementById("ejectDn");
	theDiv.style.display = "block";
	
	// update global
	gTrayVisible = 1;
}

function HideSlideTray()
{
	var theDiv;
	
	// hide the current slide tray
	theDiv = document.getElementById( "slideTray" );
	theDiv.style.display = "none";
	
	// update eject button...
	theDiv = document.getElementById("ejectDn");
	theDiv.style.display = "none";
	
	theDiv = document.getElementById("ejectUp");
	theDiv.style.display = "block";
	
	// update global
	gTrayVisible = 0;
}


/***********************************************************************
 doChoosePic
 
 Choose an image from its thumbnail       
***********************************************************************/
function doChoosePic( slideChoice )
{
	HideSlideFader();

	ChangePic( slideChoice + kNumSlidesPerTray*gSlideTray );
   
	// reset the play button if the slideshow is currently running.
	PauseSlideShow();
}

/***********************************************************************

 Use this code to display a sequential slide show

***********************************************************************/
function ChangePic( slideChoice )
{
	// Ensure that the specified slide lies within range.
   if ( slideChoice > gNumSlides )
	   slideChoice = 1;
   else if ( slideChoice < 1 )
	   slideChoice = gNumSlides;

	// hide the current caption
	if ( gSlideChosen > 0 && gSlideChosen <= gNumSlides )
	{
		HideCaption( gSlideChosen );
	}
	
	ShowCaption( slideChoice );
	
	// Update slide image
	document.slideView.src="resources/gallery/slide" + slideChoice +".jpg";
   
	// code here to update the slide tray
	var curTray = Math.floor( (slideChoice - 1) / kNumSlidesPerTray );
	if ( gSlideTray != curTray ) DoSlideTray(  curTray );

	// Update the slide tray's frame
	OutlineSlideTrayChoice( slideChoice );

	// Record choice in our global variable.
	gSlideChosen = slideChoice;				// update global variable
	
}



function HideCaption( slideChoice )
{
	var curCaption;
	
	// hide the current caption
	curCaption = document.getElementById( "caption" + slideChoice );
	curCaption.style.display = "none";
}

function ShowCaption( slideChoice )
{
	var curCaption;
	
	// show the current caption
	curCaption = document.getElementById( "caption" + slideChoice );
	curCaption.style.display = "block";
}

function OutlineSlideTrayChoice( slideIndex )
{
	var		theDiv;
	var		i;
	var		curSlideIndex;
	
	
	for (i=1; i <= kNumSlidesPerTray; i++)
	{
		theDiv = document.getElementById( "slide" + i );

		curSlideIndex = i + kNumSlidesPerTray*gSlideTray;

		if ( curSlideIndex == slideIndex )
		{
			theDiv.style.background		= "#BBBBBB";
			theDiv.style.borderLeft		= "1px solid #888888";
			theDiv.style.borderTop		= "1px solid #888888";
			theDiv.style.borderRight	= "1px solid #CCCCCC";
			theDiv.style.borderBottom	= "1px solid #CCCCCC";
		}
		else
		{
			theDiv.style.background		= "#999999";
			theDiv.style.border			= "1px solid #999999";
		}
	}
}





// Increment the slide
function RollPics()
{
/* debug */
//console.log("RollPics()\n");


   if ( gSlidePause == 0 )     // if slide show not paused (safety check)
   {
		// If we're at the final slide, and we're not in loop mode, then we must have
		// reached the end of the show, so stop here
		if ( gSlideChosen == gNumSlides && gSlideLoop == 0 )
		{
			PauseSlideShow();
			ChangePic( 1 );
			ShowSlideFader();
		}
		else
		{
			ChangePic( gSlideChosen + 1 );
		}
   }
}

// The user clicks the "Next" button
function DoNextButton()
{
	HideSlideFader();
	ChangePic( gSlideChosen + 1);
	PauseSlideShow();// reset the play button if the slideshow is currently running.
}

// User clicks the "Back" button
function DoBackButton()
{
	HideSlideFader();
	ChangePic( gSlideChosen - 1);
	PauseSlideShow();// reset the play button if the slideshow is currently running.
}

function DoFirstButton()
{
	HideSlideFader();
	ChangePic( 1 );
	PauseSlideShow();// reset the play button if the slideshow is currently running.
}


function DoLastButton()
{
	HideSlideFader();
	ChangePic( gNumSlides );
	PauseSlideShow();// reset the play button if the slideshow is currently running.
}


// This function starts or pauses the slideshow
function DoPlayButton()
{
	// If the fader is visible we'll need to hide it; we don't want to jump
	// to slide #2 right away, but if we try and reload the current slide we
	// get problems. Hence, we go back to InitSlideShow().
	if ( gFaderVisible )
	{
		HideSlideFader();

		gSlidePause = 0;
		ShowPauseButton();
		InitSlideShow();
	}
	else
	{
		PlaySlideShow();
	}
}

function DoPauseButton()
{
	PauseSlideShow();
}

// Function to pause the slide show
function PauseSlideShow()
{
	if ( gSlidePause == 0 )
	{
		gSlidePause = 1;
		clearInterval('RollPics()');
		ShowPlayButton();
	}
}

// function to start the slideshow
function PlaySlideShow()
{
	gSlidePause = 0;    				// turn off pause
	
	ChangePic(gSlideChosen + 1);        // immediately request the next slide.
	ShowPauseButton();
}

// function to toggle the slideshow on or off. Called by DoPlayButton()
function ToggleSlideShow()
{
   if ( gSlidePause == 0 ) // if slideshow not paused
   {
	   PauseSlideShow();
   }
   else                    // if slideshow paused, resume play
   {
	   PlaySlideShow();
   }
}


/*******************************************************************************
 ToggleSlideLoop
 
 Functions to toggle the "loop" mode on or off.
*******************************************************************************/
function ToggleSlideLoop()
{
	if ( gSlideLoop == 0 )
	{
		gSlideLoop = 1;
		ShowLoopDnButton();
	}
	else
	{
		gSlideLoop = 0;
		ShowLoopUpButton();
	}
}


function ShowLoopDnButton()
{
	var theDiv;
	
	theDiv = document.getElementById( "loopUp" );
	theDiv.style.display = "none";
	
	theDiv = document.getElementById( "loopDn" );
	theDiv.style.display = "block";
}

function ShowLoopUpButton()
{
	var theDiv;
	
	theDiv = document.getElementById( "loopDn" );
	theDiv.style.display = "none";
	
	theDiv = document.getElementById( "loopUp" );
	theDiv.style.display = "block";
}


function HideSlideFader()
{
	var theDiv;
	
	if ( gFaderVisible == 1 )
	{
		theDiv = document.getElementById( "slideFader" );
		theDiv.style.display = "none";
		gFaderVisible = 0;
	}
}


function ShowSlideFader()
{
	var theDiv;
	
	if ( gFaderVisible == 0 )
	{
		theDiv = document.getElementById( "slideFader" );
		theDiv.style.display = "block";
		gFaderVisible = 1;
	}
}










function ShowPlayButton()
{
	var theDiv;
	
	theDiv = document.getElementById( "pauseSlides" );
	theDiv.style.display = "none";
	
	theDiv = document.getElementById( "playSlides" );
	theDiv.style.display = "block";

}

function ShowPauseButton()
{
	var theDiv;
	var	kOpacity	= 50;
	
	// hide the current caption
	theDiv = document.getElementById( "playSlides" );
	theDiv.style.display = "none";
	
	theDiv = document.getElementById( "pauseSlides" );
	theDiv.style.display = "block";
}