/*
 * JavaScript Slide Show - Don LeClaire - Nov 6, 2006
 *
 * Include this file, along with 'prototype-1.4.0.js' in your page.
 * Add photos, thumbnails, and cutlines by calling the addPhoto() function.
 * Include 'onLoad="loadPhotos()"' in the body tag of the page.
 * Include '<div id="photo"></div>' where you want your photo to appear.
 * Include '<div id="thumbnails"></div>' where you want you thumbnails to appear.
 * Over-ride 'THUMBNAILS_PER_ROW' to set the maximum number of thumbnails per row.
 * Over-ride 'PHOTO_DIR' to set the base directory of the photos and thumbnails.
 */

/*
 * An array of all the photos
 */
var photoList = new Array();

/*
 * Set the number of thumbnails per row
 */
var THUMBNAILS_PER_ROW = 5;

/*
 * Set the base directory of the photos & thumbnails
 */
var PHOTO_DIR = "/Photos/";

/*
 * Photo class - Holds the properties of a single photo
 */
function Photo( photofile, thumbfile, cutline ) 
{
   this.photofile = photofile;
   this.thumbfile = thumbfile;
   this.cutline   = cutline;
}

/*
 * Adds a photo to the array of photos.
 */
function addPhoto( photofile, thumbfile, cutlinee ) 
{
   photoList[ photoList.length ] = new Photo( photofile, thumbfile, cutlinee );
}

/*
 * Shows a specific photo
 */
function showPhoto( index )
{
   var photoDiv = $( 'photo' );
   photoDiv.innerHTML = "<img src=\"" + PHOTO_DIR + photoList[index].photofile + "\"><p>" +
                        "<b><font face=\"arial\">" + photoList[index].cutline + "</font></b>";
}

/*
 * Initializes the photos when the page loads
 */
function loadPhotos()
{
   var SPACER = "&nbsp;";
   var numberOfRows = Math.floor( photoList.length / THUMBNAILS_PER_ROW );
   
   var thumbsHtml = "<table cellspacing=\"0\" cellpadding=\"5\">";

   for ( var row = 0; row <= numberOfRows; row++ )
   {
      thumbsHtml += "<tr>";
      
      for ( var col = 0; col < THUMBNAILS_PER_ROW; col++ )
      {
         var index = ( row * THUMBNAILS_PER_ROW ) + col;
         
         if ( index < photoList.length )
         {
            thumbsHtml += "<td valign=\"top\"><a href=\"#\"  onClick=\"showPhoto(" + index + ")\">" +
                          "<img border=\"0\" src=\"" + PHOTO_DIR + photoList[index].thumbfile + "\"></a></td>";
         }
         else // no more photos
         {
            thumbsHtml += "<td>&nbsp;</td>";
         }
      }

      thumbsHtml += "</tr>";
   }
   
   thumbsHtml += "</table>";

   var thumbnailsDiv = $( 'thumbnails' );
   thumbnailsDiv.innerHTML = thumbsHtml;
   showPhoto( 0 );
}