var MySlideshow = new slideshow();

var browser = "Null";

if (document.all)
{
  browser = "IE";
}
else if (document.layers)
{
  browser = "OldNetscape";
}
else if (document.getElementById)
{
  browser = "NewNetscape";
}

// alert(browser);

function getObjectById( id )
{
  obj = null;

  if( browser != "Null" )
  {
    if( browser == "IE" )
    {
      obj = document.all( id );
    }
    else if( browser == "OldNetscape" )
    {
      obj = document.layers( id );
    }
    else
    {
      obj = document.getElementById( id );
    }
  }

  return obj;
}

// Utility functions...
function swapButton( id )
{
  var tmpSrc = getObjectById( id ).src;

  if( tmpSrc.indexOf( "_over" ) > 0 )
  {
    // Remove the "_over"...
    getObjectById( id ).src = "./slideshow/" + id + ".gif";
  }
  else
  {
    // Add the "_over"...
    getObjectById( id ).src = "./slideshow/" + id + "_over.gif"
  }
}

function setButton( id, newSrc )
{
  var tmpSrc = getObjectById( id ).src;

  if( tmpSrc )
  {
    getObjectById( id ).src = newSrc;
  }
}

// Slideshow object...
function slideshow()
{
  // Members...
  this.title = "My Slideshow";
  this.slides = new Array();
  this.slideIndex = 0;
  this.slideCount = 1;
  this.playing = false;
  this.speed = 6000;

  // Methods...
  this.render = renderSlideshow;
  this.addSlide = slAddSlide;
  this.next = slNext;
  this.showNext = slShowNext;
  this.prev = slPrev;
  this.reset = slFirst;
  this.last = slLast;
  this.play = slStart;
  this.stop = slStop;
  this.pause = slPause;
  this.setSpeed = slSetSpeed;

  // Construction...
  this.slides.push( new slide( "Welcome", "./slideshow/welcome.gif", "Welcome to My Slideshow" ) );
}

function slSetSpeed( spd )
{
  // Set the speed...
  this.speed = spd;

  

  // Update the GUI...
  switch( spd )
  {
    case 2000:
      // Set the image...
      setButton( 'speedbar_fast', './slideshow/speedbar_fast_sel.gif' );
      setButton( 'speedbar_med', './slideshow/speedbar_med.gif' );
      setButton( 'speedbar_slow', './slideshow/speedbar_slow.gif' );
      setButton( 'speedbar_tr', './slideshow/speedbar_tr_fast.gif' );

      break;
    case 4000:
      // Set the image...
      setButton( 'speedbar_fast', './slideshow/speedbar_fast.gif' );
      setButton( 'speedbar_med', './slideshow/speedbar_med_sel.gif' );
      setButton( 'speedbar_slow', './slideshow/speedbar_slow.gif' );
      setButton( 'speedbar_tr', './slideshow/speedbar_tr_med.gif' );

      break;
    default:
      // Set the image...
      setButton( 'speedbar_fast', './slideshow/speedbar_fast.gif' );
      setButton( 'speedbar_med', './slideshow/speedbar_med.gif' );
      setButton( 'speedbar_slow', './slideshow/speedbar_slow_sel.gif' );
      setButton( 'speedbar_tr', './slideshow/speedbar_tr_slow.gif' );

      break;
  }
}

function slShowNext()
{
  if( this.playing )
  {
    // Display the next slide...
    this.next();

    // Set a timeout function...
    window.setTimeout( 'MySlideshow.showNext();', this.speed );
  }
  else
  {
    window.clearTimeout();
  }
}

function slStart()
{
  // Set a timeout function...
  window.setTimeout( 'MySlideshow.showNext();', this.speed );
  this.playing = true;

  getObjectById( "upperDisplayRight" ).innerHTML = "Playing";
}

function slPause()
{
  // Clear the timeout...
  window.clearTimeout();
  this.playing = false;
}

function slStop()
{
  // Clear the timeout...
  window.clearTimeout();

  // And reset the slideshow...
  this.reset();

  this.playing = false;

  getObjectById( "upperDisplayRight" ).innerHTML = "Stopped";
}

function slFirst()
{
  this.slideIndex = 1;

  this.slides[ this.slideIndex ].render();
  getObjectById( "upperDisplayLeft" ).innerHTML += " (slide " + this.slideIndex + " of " + (this.slides.length - 1) + ")";
}

function slLast()
{
  this.slideIndex = this.slides.length - 1;

  this.slides[ this.slideIndex ].render();
  getObjectById( "upperDisplayLeft" ).innerHTML += " (slide " + this.slideIndex + " of " + (this.slides.length - 1) + ")";
}

function slNext()
{
  this.slideIndex++;

  // Check for array bounds...
  if( this.slideIndex > this.slides.length - 1 )
  {
    this.slideIndex = 1;
  }

  this.slides[ this.slideIndex ].render();
  getObjectById( "upperDisplayLeft" ).innerHTML += " (slide " + this.slideIndex + " of " + (this.slides.length - 1) + ")";
}

function slPrev()
{
  this.slideIndex--;

  // Check for array bounds...
  if( this.slideIndex < 1 )
  {
    this.slideIndex = this.slides.length - 1;
  }

  this.slides[ this.slideIndex ].render();
  getObjectById( "upperDisplayLeft" ).innerHTML += " (slide " + this.slideIndex + " of " + (this.slides.length - 1) + ")";
}

function slAddSlide( ttl, img, desc )
{
  this.slides.push( new slide( ttl, img, desc ) );
  this.slideCount++;
}

function renderSlideshow()
{
  var outpt = "<table><tr><td id=\"title\" class=\"sl_t\">" + this.title + "</td></tr>";
  outpt += "<tr><td id=\"upperDisplayLeft\" width=\"50%\" class=\"sl_ul\"></td>";
  outpt += "<td id=\"upperDisplayRight\" width=\"50%\" class=\"sl_ur\"></td></tr>";
  outpt += "<tr><td colspan=\"2\" id=\"mainDisplay\"><img id=\"mainImage\" src=\"./slideshow/welcome.gif\"></td></tr>";
  outpt += "<tr><td colspan=\"2\" id=\"lowerDisplay\" class=\"sl_l\"></td></tr>";
  outpt += "<tr><td colspan=\"2\" align=\"center\" id=\"toolbar\"><!-- Toolbar -->";
  outpt += "<table width=\"150\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">";
  outpt += "<tr><td class=\"sltb_l\" width=\"6\"><img src=\"./slideshow/spacer.gif\" width=\"6\" height=\"10\">";
  outpt += "</td><td class=\"sltb_c\" width=\"138\"><table width=\"138\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">";
  outpt += "<tr><td width=\"18\" class=\"sltb_d\"><a href=\"javascript:MySlideshow.reset();\" title=\"Reset to the first slide\" ";
  outpt += "onMouseOver=\"swapButton( 'begin' );\" onMouseOut=\"swapButton( 'begin' );\">";
  outpt += "<img src=\"./slideshow/begin.gif\" id=\"begin\" border=\"0\"></a></td><td width=\"18\" class=\"sltb_d\">";
  outpt += "<a href=\"javascript:MySlideshow.prev();\" title=\"Previous slide\" onMouseOver=\"swapButton( 'prev' );\"";
  outpt += " onMouseOut=\"swapButton( 'prev' );\"><img src=\"./slideshow/prev.gif\" id=\"prev\" border=\"0\"></a>";
  outpt += "</td><td class=\"sltb_d\" width=\"6\"><img src=\"./slideshow/spacer.gif\" width=\"6\" height=\"10\"></td>";
  outpt += "<td width=\"18\" class=\"sltb_d\"><a href=\"javascript:MySlideshow.stop();\" title=\"Stop the slide show\" onMouseOver=\"swapButton( 'stop' );\"";
  outpt += " onMouseOut=\"swapButton( 'stop' );\"><img src=\"./slideshow/stop.gif\" id=\"stop\" border=\"0\"></a>";
  outpt += "</td><td width=\"18\" class=\"sltb_d\"><a href=\"javascript:MySlideshow.pause();\" title=\"Pause the slide show\" onMouseOver=\"swapButton( 'pause' );\"";
  outpt += " onMouseOut=\"swapButton( 'pause' );\"><img src=\"./slideshow/pause.gif\" id=\"pause\" border=\"0\"></a></td>";
  outpt += "<td width=\"18\" class=\"sltb_d\"><a href=\"javascript:MySlideshow.play();\" title=\"Play the slide show\" onMouseOver=\"swapButton( 'play' );\"";
  outpt += " onMouseOut=\"swapButton( 'play' );\"><img src=\"./slideshow/play.gif\" id=\"play\" border=\"0\"></a></td>";
  outpt += "<td class=\"sltb_d\" width=\"6\"><img src=\"./slideshow/spacer.gif\" width=\"6\" height=\"10\"></td>";
  outpt += "<td width=\"18\" class=\"sltb_d\"><a href=\"javascript:MySlideshow.next();\" title=\"Next slide\" onMouseOver=\"swapButton( 'next' );\"";
  outpt += " onMouseOut=\"swapButton( 'next' );\"><img src=\"./slideshow/next.gif\" id=\"next\" border=\"0\"></a></td>";
  outpt += "<td width=\"18\" class=\"sltb_d\"><a href=\"javascript:MySlideshow.last();\" title=\"Skip to the last slide\" onMouseOver=\"swapButton( 'end' );\"";
  outpt += " onMouseOut=\"swapButton( 'end' );\"><img src=\"./slideshow/end.gif\" id=\"end\" border=\"0\"></a></td>";
  
  outpt += "</tr></table><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"126\"><tr>";
  outpt += "<td colspan=\"2\"><img id=\"speedbar_tl\" src=\"./slideshow/speedbar_tl.gif\" width=\"84\" height=\"13\" border=\"0\" alt=\"\"></td>";
  outpt += "<td><img id=\"speedbar_tr\" src=\"./slideshow/speedbar_tr_slow.gif\" width=\"42\" height=\"13\" border=\"0\" alt=\"\"></a></td></tr>"
  outpt += "<tr><td><a href=\"javascript:MySlideshow.setSpeed( 6000 );\" onMouseOver=\"swapButton( 'speedbar_slow' );\"  onMouseOut=\"swapButton( 'speedbar_slow' );\">";
  outpt += "<img id=\"speedbar_slow\" src=\"./slideshow/speedbar_slow_sel.gif\" width=\"42\" height=\"15\" border=\"0\" title=\"Set slideshow speed to slow\"></a></td>";
  outpt += "<td><a href=\"javascript:MySlideshow.setSpeed( 4000 );\" onMouseOver=\"swapButton( 'speedbar_med' );\" onMouseOut=\"swapButton( 'speedbar_med' );\">";
  outpt += "<img id=\"speedbar_med\" src=\"./slideshow/speedbar_med.gif\" width=\"42\" height=\"15\" border=\"0\" title=\"Set slideshow speed to medium\"></a></td>";
  outpt += "<td><a href=\"javascript:MySlideshow.setSpeed( 2000 );\" onMouseOver=\"swapButton( 'speedbar_fast' );\" onMouseOut=\"swapButton( 'speedbar_fast' );\">";
  outpt += "<img id=\"speedbar_fast\" src=\"./slideshow/speedbar_fast.gif\" width=\"42\" height=\"15\" border=\"0\" alt=\"\"></a></td>";
  outpt += "<td><img src=\"spacer.gif\" width=\"1\" height=\"15\" border=\"0\" alt=\"\"></td></tr></table>";


  outpt += "</td><td class=\"sltb_r\" width=\"6\"><img src=\"./slideshow/spacer.gif\" width=\"6\" height=\"10\">";
  outpt += "</td></tr></table></td></tr></table>";

  document.write( outpt );

}

// Slide object...
function slide( ttl, img, desc )
{
  this.title = ttl;
  this.image = img;
  this.description = desc;

  this.render = slideRender;
}

function slideRender()
{
  getObjectById( "mainImage" ).src = this.image;
  getObjectById( "upperDisplayLeft" ).innerHTML = this.title;
  getObjectById( "lowerDisplay" ).innerHTML = this.description;
}