// Global variable that is shared between a couple of the functions.

var curPic = 0;
// The number of links either side of the current image to show.
var imageOffset = 7;

// The maximum number of image links to show at once ( the current image + imageOffset
// images to either side)
var maxViewable = (imageOffset * 2) + 1;

// Builds a navigation bar along the lines of:
// <<...[-4][-3][-2][-1][0][1][2][3][4]...>> 
//
// Where [0] is the current position.
//
// Each number except for the current image showing is shown as a hyperlink to that photo 
// and the hyperlink is activated by a handler function 'showSlide' with the index of the
// image as a parameter.
// The current image is indicated by a bold number.
// 
// Those images beyond either end of this window will be indicated by ellipses.
// 
// The rules for the start point are:
//     If the current picture index is less than the offset the start index is 0
//     If the current index is greater than the total number of slides less the viewport
//     then the start index is the total - the viewport.
//     Otherwise it is the current index less the offset.
//
// The rules for the end point are:
//     Set the end point to be the current index plus the offset
//     If the end point is greater than the total the end point is the total.
//     If the difference between the start and end points is less than the viewport
//     then add the viewport to the start point.
	

function showNav(myImages)
{
	var total = myImages.length;
	var imageStart = 0;
	var imageEnd = total;
	var navContent =  '';
	var ellipses = '';

	// Work out where to draw the window of direct image links.
	if(total > maxViewable)
	{
	   imageStart = curPic - imageOffset;
	   
		if(imageStart < 0)
		{
			imageStart = 0;
		}
		if(imageStart > (total - maxViewable))
		{
			imageStart = total - maxViewable;
		}

	   imageEnd = curPic + imageOffset;
		
		if(imageEnd-imageStart < maxViewable)
		{
			imageEnd = imageStart + maxViewable;
		}
		if(imageEnd > total)
		{
			imageEnd = total;		   
		}
	}
	var prevSlide = ((curPic) % (total + 2));
	if(curPic == 0)
	prevSlide = total;
	
	
	if(imageStart > 0)
	{
	    navContent += '<span class="navArrow" title="Click or use the left arrow to move to slide ' + prevSlide + '"><a href="javascript:changeSlide(-1, pictures)"><!--&nbsp;&#171;&nbsp;<b>... <\/b>--><\/a><\/span>'
	}
	else
	{
	    navContent += '<span class="navArrow" title="Click or use the left arrow key to move to slide ' + prevSlide + '"><a href="javascript:changeSlide(-1, pictures)"><!--&nbsp;&#171;&nbsp;--><\/a><\/span>'
	}
	
	// Now draw all our links.
	for(i = imageStart; i < imageEnd; i++)
	{
	   var padding = '' + (i+1);
	   if(i < maxViewable)
		{
		   padding = ' ' + (i + 1) + ' ';
		}
		if(i == curPic)
		{
			navContent += '<span class="current" title="The current slide"><b>&nbsp;' + padding  + '&nbsp;<\/b><\/span>';
		}
		else
		{
		   navContent += '<span class="slideLink" title="Click to move directly to slide  ' + (i + 1) + '."><a href="javascript:showSlide(pictures, ' + i + ')">&nbsp;' + padding  + '&nbsp;<\/a><\/span>'
		}
	}
	// Now add the end ellipses if required.
	if(total > maxViewable)
	{
		if(curPic < (total - imageOffset - 1) )
		{
			ellipses += "<b> ...<\/b>";
		}
	}
	var nextSlide = ((curPic + 2) % (total + 2));
	if(nextSlide > total)
	  nextSlide = 1;
	navContent += '<span class="slideLink" title="Click or use the right arrow key to move to slide ' + nextSlide + '"><a href="javascript:changeSlide(1, pictures)">';
	navContent += ellipses;
	navContent += '<!--&nbsp; &#187; &nbsp;--><\/a><\/span>';
	
	return navContent;
}


// This is the handler function for the hyperlinks created by the showNav function.
function showSlide(myImages, number)
{
	if(document.images)
	{
		document.getElementById("PictureBox").innerHTML="<img src='" + (prefix+myImages[number].src) + "' class='bordered' alt='' \/>";
	}
	if (document.getElementById)
	{ 
	   curPic = number;
      document.getElementById("picRange").innerHTML= "<p>Image " + (curPic + 1) + " of " + myImages.length + "</p>";
      document.getElementById("CaptionBox").innerHTML= myImages[number].caption;
	   document.getElementById("navigation").innerHTML= showNav(myImages);
	}
}

/*
Called by the onload handler
Parameters:
   myImages: An array of paths to images to be displayed
   captions: An array of paragraphs of text to be displayed.
*/
function startSlide(myImages)
{
	if(document.images)
	{
		document.getElementById("PictureBox").innerHTML="<img class='bordered' src='" + (prefix+myImages[curPic].src) + "' alt='' \/>";
	}
	if(document.getElementById)
	{ 
      document.getElementById("picRange").innerHTML= "<p>Image " + (curPic + 1) + " of " + myImages.length +"</p>";
      document.getElementById("CaptionBox").innerHTML= myImages[curPic].caption;
	   document.getElementById("navigation").innerHTML= showNav(myImages);
   }
}


/*
Called when the user clicks on the next or previous links.
Parameters:
   direction: has values +/-1 for next and previous respectfully.
   myImages: An array of paths to images to be displayed
*/
function changeSlide(direction, myImages)
{
	var total = myImages.length-1;
	
	if(document.images)
	{
		curPic += direction;
		if(curPic > total)
		{
			curPic = 0;
		}
		if(curPic < 0)
		{
			curPic = total;
		}
		document.getElementById("PictureBox").innerHTML="<img class='bordered' src='" + (prefix+myImages[curPic].src) + "' alt='' \/>";
		
		if (document.getElementById)
		{ 
          document.getElementById("picRange").innerHTML= "<p>Image " + (curPic + 1) + " of " + myImages.length +"</p>";
	       document.getElementById("CaptionBox").innerHTML= myImages[curPic].caption;
	       document.getElementById("navigation").innerHTML= showNav(myImages);
	   }
	}
}

/*
  handles left (37) and right (39) arrow keys.
*/
function checkKeyPressed(evt)
{
  evt = (evt) ? evt : (window.event) ? event : null;
  if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :
                   ((evt.keyCode) ? evt.keyCode :
                   ((evt.which) ? evt.which : 0));

    // The right Arrow
    if (charCode == 39) 
    {
       changeSlide(1, pictures);
       return false;  
    }
    // The left arrow
    if(charCode == 37)
    {
       changeSlide(-1, pictures);
       return false;  
    }
  }
}

/*
  This little lot is needed to allow both Internet explorer and
  Firefox to handle the arrow keys. The page moves in IE if onkeypress
  is used, similarly for Firefox if onkeydown is used. Opera moves the
  page whatever and however it is set up.
*/
if (navigator.appName.indexOf("Microsoft")!=-1) 
{
   document.onkeydown = checkKeyPressed;
}
else if(navigator.appName.indexOf("Netscape")!=-1)
{   
   document.onkeypress = checkKeyPressed;
}
// End of file