//******************** Globals
var giCurrentImage = 0;       // number to keep track of what image is currently displayed
var giNumImages = 5;          // The number of images to loop through on the page
var gsBaseFilename = "";      // The base filename for the images on the page

//******************** loadSlideShow function
// This preloads a given amount of images into memory

// Parameters:
// iNumImages = The number of images to load in the directory
// sBaseFilename = The base filename of the pic. Say you have 3 pics
//                 in the images directory of the page with the
//                 photos on it. (blue0.jpg, blue1.jpg, blue2.jpg)
//                 sBaseFilename would be "blue.jpg" in this case.

// Also note that all files have to be in the same format
// (jpg, gif, png, etc.)
function loadSlideShow(iNumImages, sBaseFilename)
{
   //window.alert('loadSlideShow function called');
   giNumImages = iNumImages;        // set globals
   gsBaseFilename = sBaseFilename;

   // If only 1 image, don't even bother animating
   // and disable controls
   if (giNumImages == 1)
   {
      disableButton("btnPrev");
      disableButton("btnControl");
      disableButton("btnNext");
      return;
   }

   // disable prev button from being pressed, but user can
   // click next button even if it's animating. if it is on the 2nd
   // image or later, previous can be clicked.

   // If the user clicks prev or next while the slideshow is playing
   // it should stop the slideshow.
   enableButton("btnPrev");
   enableButton("btnNext");

   giCurrentImage = 0;              // set to start of image
   aImgArray = new Array(iNumImages - 1);     // create an array with the amount of elements that was passed. starts at 0!
   for(i = 0; i < iNumImages; i++)     // load an image into memory for each image in the folder
   {
      aImgArray[i] = "images/" + gsBaseFilename.substring(0, gsBaseFilename.lastIndexOf(".")) + i.toString() + gsBaseFilename.substring(gsBaseFilename.lastIndexOf("."));
      //window.alert('Stored in for loop the following: ' + aImgArray[i]);
   }
   picTimeout = window.setTimeout("autoNextImage();", 3000);     // make it change the image every 5 secs
}

// ******************** autoNextImage function
// This function attempts to go to the next image, if at the end, it will go to the beginning
function autoNextImage()
{
   //window.alert('autoNextImage called');
   giCurrentImage++;
   if (giCurrentImage == giNumImages)
   {
      giCurrentImage = 0;
   }
   updateProgressDisplay();
   document.images[1].src = aImgArray[giCurrentImage].src = aImgArray[giCurrentImage];
   picTimeout = window.setTimeout("autoNextImage();", 3000);
}

// ***************************************** User Functions
// The idea of these functions are to limit the about of times the buttons are enabled and disabled.
// It's just a waste of resources to enable a button that is already enabled.
// ******************** nextImage function
// This function attempts to go to the next image, if it's the last, button gets disabled
function nextImage()
{
   //window.alert('nextImage called');
   stopSlideShow();
   giCurrentImage++;
   switch (giCurrentImage)
   {
      case giNumImages - 1:
         disableButton("btnNext");  // too far, no more next for you
         enableButton("btnPrev");   // DEBUG - logically would be needed if there are at least 2 images?
         break;
      case 1:
         enableButton("btnPrev");   // user can officially go back
         break;
   }
   updateProgressDisplay();
   document.images[1].src = aImgArray[giCurrentImage].src = aImgArray[giCurrentImage];
}

// ******************** prevImage function
// This function attempts to go to the previous image, if at the beginning, it will disable the button
function prevImage()
{
   //window.alert('prevImage called');
   stopSlideShow();
   giCurrentImage--;
   switch (giCurrentImage)
   {
      case 0:
         disableButton("btnPrev");   // too far, no more back for you
         enableButton("btnNext");   // DEBUG - logically, there will be at least two, so if hes at the first, 
                                    // Next should be able to be clicked on
         break;
      case giNumImages - 2:
         enableButton("btnNext");  // user can go next now, cause there will be one more there
         break;
   }
   updateProgressDisplay();
   document.images[1].src = aImgArray[giCurrentImage].src = aImgArray[giCurrentImage];
}

// *********************** stopSlideShow function
// This function will stop the timeout on the picture flipping.
function stopSlideShow()
{
   // clears the timeout
   window.clearTimeout(picTimeout);

   // set buttons accordingly, change stop to play
   document.getElementById("btnControl").childNodes[0].nodeValue = "Play";
   document.getElementById("btnControl").onclick = startSlideShow;

   // checks here for start and end and disables accordingly
   switch (giCurrentImage)
   {
      case 0:
         disableButton("btnPrev");  // DEBUG - getting wierd stuff when there is exactly 2 images
         enableButton("btnNext");   // Prev is already disabled and there will
         break;                     // always be at least 2 images in this page.
      case giNumImages - 1:
         disableButton("btnNext");  // DEBUG - getting wierd stuff when there is exactly 2 images
         enableButton("btnPrev");   // Next is already disabled, same logic as above
         break;
      default:
         enableButton("btnPrev");   // any other case should be safe to enable
         enableButton("btnNext");   // both buttons...it'll be in the middle
         break;
   }
}

// *********************** startSlideShow function
// this function actually starts the slideshow, after loaded
function startSlideShow()
{
   // set buttons accordingly, change play to stop
   document.getElementById("btnControl").childNodes[0].nodeValue = "Stop";
   document.getElementById("btnControl").onclick = stopSlideShow;

   // enable buttons, user can hit anything at anytime, animation will stop and button
   // checks will happen if it is on the first or last image for example.
   enableButton("btnPrev");
   enableButton("btnNext");
   enableButton("btnControl");
   autoNextImage();
}

// The only reason I have these functions are strictly for readibility.
// They will be called quite a bit.
// *********************** disableButton function
// This function will disable the specified button on the screen.
// The function will reference the button by id
function disableButton(sButtonId)
{
   var btnId = document.getElementById(sButtonId);
   btnId.disabled = true;
}

// *********************** enableButton function
// This function will disable the specified button on the screen.
// The function will reference the button by id
function enableButton(sButtonId)
{
   var btnId = document.getElementById(sButtonId);
   btnId.disabled = false;
}

// ************************ updateProgressDisplay
// This function will update the progress display on the
// screen, telling the user what pic he/she is on.
function updateProgressDisplay()
{
   document.getElementById("lblCurrImage").childNodes[0].nodeValue = (giCurrentImage + 1).toString();
}