// Slide Show Engine____________________________________________________________
// Credits: 
//   This code is an amalgamation of various parts taken from:
//
//   slideshow.js,v 1.16 2003/10/14 12:39:00
//   Copyright 2000-2003 Patrick Fitzgerald
//   http://slideshow.barelyfitz.com
//   used under the GNU General Public License as published by the Free Software Foundation
//   http://www.barelyfitz.com/webapps/apps/slideshow/index.php/all
//
//   PushButton SlideShow with Captions and Cross-Fade
//   Copyright 2003 by CodeLifter.com
//   Author: etLux
//   http://www.codelifter.com/main/javascript/slideshow4.html
//
//   Picture Window, version 3.5.0.6, generated slideshow output
//   This is a gorgeous photo-editing program by the way...
//   Digital Light & Color
//   http://www.dl-c.com
//
//   Weird stuff from me, use at your own peril -Ron Fischler
//
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  // Slide constructor,            eg: s = new slide();
  // constuct a slide object, for insertion into a slide show...
  function slide(src, thumbnail, title, caption, credits, link, linkAttr, pause) 
  {
    this.src       = src;         // eg: s.src       = "slide_1.jpg" - required
    this.thumbnail = thumbnail;   // eg: s.thumbnail = "thumbnail_1.jpg" - not required, if missing a thumbnail of size ss.height will be made from src
    this.title     = title;       // eg: s.title     = "Robinson Creek Canyon" - not required
    this.caption   = caption;     // eg: s.caption   = "The rail line would pass down (or below) this canyon." - not required
    this.credits   = credits;     // eg: s.credits   = "Photographs taken by Ron Fischler and Bob Patrie"
    this.link      = link;        // eg: s.link      = "infoOnHSRA.html"
    this.linkAttr  = linkAttr;    // parameters to be added to the opening of an infocard popup window
    this.pause     = pause;       // a slideshow can be paused automatically when this slide is hit in the show

    this.crossfade = true;        // =true when a crossfade should be done when this slide is presented, false when this slide should render immediately
    
    // Create an image object, and a thumbnail object for the slide...
    if (document.images) 
    {
      this.image   = new Image();
      // this.thumbnailImage = new Image();
    }
    
    // Flag: tells when load() has already been called
    this.loaded    = false;       // =false when the image has yet to be loaded for the slide, =true after it has been loaded
    this.thumbnailLoaded = false; // =false when a thumbnail is yet to be loaded, =true after it has been loaded

    // Method: loads the image and possible thumbnail for the slide...
    this.load = function(loadImageNow, slideshowDir, thumbnailDir) 
    {      
      // loadImageNow -> =true if the image is to be loaded now, =false if only a thumbnail is to be found and loaded for the time being
      // slideshowDir -> folder containing images for slides, left empty if this.src already contains the path to the image file
      // thumbnailDir -> folder containing images for slides, left empty if this.thumbnail already contains the path to a thumbnail file
            
      var src = "";
      var parsedSrc = this.src.split("/");
      
      var thumbnail = "";
      
      // determine path to image...
      if (slideshowDir != "" && this.src.substring(0,1) != "/" && this.src.substring(0,2) != "./")  // slides are in slideshowDir folder
      {
          src = slideshowDir + "/" + this.src;
      }
      else
      {
          src = this.src;        
      }
      
      // determine path to thumbnail...
      if (thumbnailDir != "" && this.thumbnail && this.thumbnail.substring(0,1) != "/" && this.thumbnail.substring(0,2) != "./")  // thumbnail has its own name, but is located in thumbnailDir folder
      {           
          thumbnail = thumbnailDir + "/" + this.thumbnail;
      }
      else
      if (this.thumbnail)  // thumbnail has its own name, and its full path was specified as part of the name
      {
          thumbnail = this.thumbnail;
      }
      else
      if (thumbnailDir != "")  // thumbnail has the same file name as the slide, but is in a thumbnailDir folder
      {
          thumbnail = thumbnailDir + "/" + parsedSrc[parsedSrc.length - 1];
      }
      
      if (!document.images)  // if image objects don't exist, then error return 
          return;
      
      if (loadImageNow == false && thumbnail != "")  // load only a thumbnail if available on this call to load()
      {
          this.thumbnail = thumbnail;
          // this.thumbnailImage.src = thumbnail;
          this.thumbnailLoaded = true;
      }
      else  // loadImageNow == true, load both the image and a thumbnail if available
      if (!this.loaded) 
      {
          this.image.src = src;  // load the image now
          
          if (thumbnail != "")  // if a thumbnail exists to be loaded, then load it now
          {
              this.thumbnail = thumbnail;
              // this.thumbnailImage.src = thumbnail;
              this.thumbnailLoaded = true;
          }
          
          this.loaded    = true;
      }
    } // End of this.load()
  } // End of slide() constructor
  
  
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  // Slide show constructor, eg: ss = new slideShow();
  function slideShow( slideShowName ) 
  {
    this.name              = slideShowName;
    this.title             = "Slideshow Title";
    this.prefetch          = -1;            // Number of images to pre-fetch: -1= preload all images, 0= load each image as it is used, n= pre-fetch n images ahead of the current image.
    this.image;                             // IMAGE element on HTML page
    this.image2;                            // IMAGE element on HTML page, used for doing image crossfading in Firefox via layer zIndex manipulation
    this.image2_zIndex     = -1;            // zIndex of image2, initial ordering is behind that of image
    
    this.textId            = "captionBox";  // location of where the title and caption will be written in markup
    
    this.copyrightId       = "copyrightBox";  // copyright information should go here
    this.copyright         = "";              // text-string giving copyright information for slideshow, optional
    
    this.creditsId         = "creditsBox";  // location of where the credits will be written in markup
    this.credits           = "";            // text-string giving default credits for slidshow, optional
    
    this.pictureBoxWidth   = 0;             // pictureBox width in pixels
    this.pictureBoxHeight  = 0;             // pictureBox height in pixels
    
    this.SlideShowSpeed    = 10000;         // time/slide in msec
    
    this.slideshowDir      = "";            // folder containing images in the slide show, optional method of specifying location
    
    this.thumbnailHeight   = 64;            // height of thumbnails can be set by user
    this.makeThumbnails    = false;         // provided thumbnails will be used if false, created by SSE if true
    this.thumbnailDir      = "";            // folder containing thumbnails of the images in the slideshow, not required
    
    this.linkCtrl;                          // link to an html page
    this.linkCtrlOn;                        // gif to use as a control when this.link exists
    this.linkCtrlOff;                       // gif to use as a control when this.link does not exist
    
    this.imageAnchor       = "";
    this.imageAnchor2      = "";            // needed for cross fading
    this.captionHead       = "<span style='font-weight: bold;'>"; 
    this.captionTail       = "</span>";                           
        
    this.pauseButton;                       // pause button on viewer page, I want to be able to change it when the slide show has been paused
    
    this.crossfadeStepSize = 0.1;           // crossfade step size, dimensionless, opacity ranges from 0 to 1, so 0.1 represents a 10% step size
    this.crossfadeDuration = 1000;          // crossfade duration in msecs, note: using blendTrans() in IE requires duration to be in seconds
    
    this.popupMsgId        = "";            // place in markup to draw a popup message
    this.popupMsg          = "";            // the message or markup that will be written in object with id=popupMsgId
    this.popupMsgDuration  = 4000;          // lifespan in msecs for a popup message
    this.popupMsgStyle     = "position: absolute; left: 32px; top: 32px; width: 600px; text-align: center; background-color: #FFFFFF; border: 2px solid gray; padding: 8px 8px 8px 8px; z-index: 9; ";
    this.popupMsgStyle    += "font-family: Trebuchet MS, Trebuchet, Verdana, Arial, Helvetica, Sans-serif; font-size: 28px; font-weight: bold; line-height: 110%; ";
    
    this.indexId           = "";            // place in markup to draw the thumbnail index
    this.indexRunning      = false;
    this.indexStart        = 0;
    this.indexLength       = 24;            // maximum number of thumbnails to show at any one time
    this.indexRowLength    = 3;
    
    // CSS strings for use in the index disply: H is for Head, C is for Content, T is for tail
    this.indexDisplay      = "position: absolute; left: 32px; top: 32px; width: 930px; text-align: center; background-color: #FFFFFF; border: #666666 solid 3px; padding: 0 8 0 8; ";
    this.indexHead         = "font-family: Trebuchet MS, Trebuchet, Verdana, Arial, Helvetica, Sans-serif; font-size: 20px; font-weight: bold; ";
    this.indexContent      = "font-family: Trebuchet MS, Trebuchet, Verdana, Arial, Helvetica, Sans-serif; font-size: 11pt; font-weight: bold; line-height: 16pt; padding: 0px 0px 0px 8px; ";
    this.indexTail         = "font-family: Trebuchet MS, Trebuchet, Verdana, Arial, Helvetica, Sans-serif; font-size: 10pt; line-height: 12pt; font-style: italic; font-weight: bold; background-color: #FFFFFF; ";
    this.indexCaptionHead  = "font-family: Trebuchet MS, Trebuchet, Verdana, Arial, Helvetica, Sans-serif; font-size: 11px; font-weight: bold; line-height: 110%; ";
    
    // transparency for implementing opacity in various browsers
    this.msgOpacity        = 0.6;           // opcity level to use in layer used to display messages to the user
    
    // Private variables (messing with these vars outside the engine is not recommended)...
    this.slides            = new Array();
    this.jss               = -1;            // current slide being viewed, set to minus before slide show begins running
    this.tss               = 0;             // timeout id for moving on to the next slide
    this.showHot           = false;         // slide show loaded, and ready to go
    this.jumpToSlideNumber = -1;            // slide to jump to next, to be set by external index page
    this.statusWindow;
    this.runningUpdate     = false;         // we are running this.update()
    this.timeoutUpdate     = 0;             // we are waiting on an image to load, before updating display objects
    this.paused            = false;         // true when we pause the slide show
    this.last_jss          = 0;             // last valid jss number, I am saving it, in case we have to go back as part of error recovery
    this.controlOp         = "";            // what was the operation that got us to the present slide, from the last one?
    this.alertMessageWindow= null;
    this.indexWindow       = null;
    this.indexWindowIsOpen = false;
    
    this.isIE              = false;         // we will answer this question a bit later
    this.isOpera           = navigator.userAgent.indexOf("Opera");  // Please don't spoof me
    this.hotlinkWindow;
    this.slideshowPausedByHotlink = false;
    this.slideshowPausedBySlide   = false;
    
    this.crossfadeStep     = 0.0;           // current crossfade opacity during a crossfade, ranges from 0 to 1
    this.crossfadeClock    = null;          // used when crossfading to the next slide 

    
    // Public methods
    this.addSlide = function(slide) 
    {
      // Adding a slide to the slideshow:
      // ss.addSlide(new slide("1_slide.jpg", "", "Robinson Creek Canyon", "The rail line would pass down (or below) this canyon.", ""));
  
      var i = this.slides.length;
  
      // Prefetch the slide image now if requested, and the corresponding thumbnail if there is one 
      slide.load((this.prefetch == -1) ? true : false, this.slideshowDir, this.thumbnailDir);

      this.slides[i] = slide;
    } // End of this.addSlide()
    
    
    this.control = function(how)
    {
      if (this.showHot)
      {
        // Make sure the slideshow has been initialized correctly
        if (! this.image) 
           return;

        if (this.runningUpdate)
        {
            // if (!this.alertMessageWindow)
            //      this.alertMessageWindow = this.alertMessage("<strong><FONT COLOR='#68101f'><p>Currently loading slide #" + (this.jss+1) + "...</p>", 300, 50, 300, 300, 5000);
            //    
            // this.alertMessageWindow.focus();
           
            this.popupMsgHandler("<div style='" + this.popupMsgStyle + this.opacityString() + "'>Working on fetching the next slide...</div>", 0, 4000);
           
            return;
        }

        if (this.tss)
        {
           window.clearTimeout(this.tss);
           this.tss = 0;
        }
    
        var tmp_jss = this.jss;               // necessary if control code is not given in the list, eq. to doing a refresh
        var len     = this.slides.length;     // number of slides in slide show
    
        if (how == "H") tmp_jss = 0;             // go Home (first slide)
        if (how == "F") tmp_jss = this.jss + 1;  // go Forward (next slide)
        if (how == "B") tmp_jss = this.jss - 1;  // go Backward (previous slide)
        if (how == "L") tmp_jss = len - 1;       // go to the last slide
      
        if (tmp_jss > len-1 || tmp_jss < 0) 
            tmp_jss = 0;
        
        this.controlOp = how;                 // need to know if we are going backwards or forwards, to fully support image crossfade 
        this.last_jss = this.jss;             // save the last slide position, to fully support image crossfade 
        this.jss  = tmp_jss;                  // change current slide pointer now
        
        var slide = this.slides[ this.jss ];  // present slide in slide show
        
        // Load the slide image if necessary...
        slide.load(true, this.slideshowDir, this.thumbnailDir);
        
        this.update();
      } // End of this.showHot
      
      // Do we need to pre-fetch images?
      if (this.prefetch > 0) 
      {
        var next, prev, count;

        // Pre-fetch the next slide image(s)
        next = this.jss;
        prev = this.jss;
        count = 0;
        
        do 
        {
          // Get the next and previous slide number
          // Loop past the ends of the slideshow if necessary
          if (++next >= this.slides.length) next = 0;
          if (--prev < 0) prev = this.slides.length - 1;

          // Preload some more slide images...
          this.slides[next].load(true, this.slideshowDir, this.thumbnailDir);
          this.slides[prev].load(true, this.slideshowDir, this.thumbnailDir);

          // Keep going until we have fetched
          // the designated number of slides

        } while (++count < this.prefetch);
      } // End of prefetch code
    } // End of this.control
    
    
    this.crossfade = function()
    { // bring image2, which is presently transparent, to the front and then crank up its opacity...      
      if ( this.controlOp == "" ||  // this.jss == 0 ||
          (this.controlOp == "F" && this.slides[ this.jss      ].crossfade == false) || 
          (this.controlOp == "B" && this.slides[ this.last_jss ].crossfade == false))
      {
          document.getElementById(this.imageAnchor2).style.zIndex = 1;
          this.crossfadeStep = 0.99;  // no crossfade, so just crank it all the way up in one step
      }
      else     
      if (this.crossfadeClock == null)
      {
          document.getElementById(this.imageAnchor2).style.zIndex = 1;
              
          this.crossfadeStep = this.crossfadeStepSize;
              
          //start the crossfade timer...
	  this.crossfadeClock = setInterval(this.name + ".crossfade()", this.crossfadeDuration * this.crossfadeStepSize);
      }
      else  // we are finished cranking up the opacity...
      if (this.crossfadeStep > 1.0 - this.crossfadeStepSize)
      {
          this.crossfadeStep = 0.99;
              
          //clear the crossfade timer...
          window.clearInterval(this.crossfadeClock);
	  this.crossfadeClock = null;
      }
      else  // continue increasing the opacity...
      {
          this.crossfadeStep += this.crossfadeStepSize;
      }
      
      this.image2.style.opacity = this.crossfadeStep;
    } // end of this.crossfade()
    
    
    this.crossfade2 = function()
    { // do the inverse of the crossfade function, 
      // which is to drop the opacity of image2 down to zero, and then send it to the back...
      if ( this.controlOp == "" ||  // this.jss == 0 ||
          (this.controlOp == "F" && this.slides[ this.jss      ].crossfade == false) || 
          (this.controlOp == "B" && this.slides[ this.last_jss ].crossfade == false))
      {
          this.crossfadeStep = 0.0;  // no crossfade, so just crank it all the way down in one step
      }
      else     
      if (this.crossfadeClock == null)
      {
          this.crossfadeStep = 1 - this.crossfadeStepSize;
              
          //start the crossfade timer...
	  this.crossfadeClock = setInterval(this.name + ".crossfade2()", this.crossfadeDuration * this.crossfadeStepSize);
      }
      else
      if (this.crossfadeStep < this.crossfadeStepSize)
      {
          this.crossfadeStep = 0.0;
              
          //clear the crossfade timer...
          window.clearInterval(this.crossfadeClock);
	  this.crossfadeClock = null;
      }
      else
      {
          this.crossfadeStep -= this.crossfadeStepSize;
      }
      
      this.image2.style.opacity = this.crossfadeStep;
      
      // fadeout of this image is finished, now send to the back...
      if (this.crossfadeClock == null)
          document.getElementById(this.imageAnchor2).style.zIndex = -1;
    } // end of this.crossfade()
    
    
    this.update = function()
    {
      this.runningUpdate = true;
    
      var len   = this.slides.length;       // number of slides in slide show
      var slide = this.slides[ this.jss ];  // present slide in slide show
    
      if (! (slide.image.complete))
      {
        this.timeoutUpdate = setTimeout(this.name + ".update()", 1000);
        return;
      }
      
      if (this.alertMessageWindow)
      {
          this.alertMessageWindow.close();
          this.alertMessageWindow = null;
      }
    
      this.timeoutUpdate = 0;
            
      // This is for running slideshow in an IE browser, and supporting IE's special crossfading filter...
      var dofilter = false;
      if (document.all && this.isOpera == -1)
      {             
          this.isIE = true;
              
          // The idea here is that if we are going backwards, as a result of hitting the 
          // slideshow's back button, we want to crossfade if the last slide specifies
          // crossfading, not the next slide!
          if ((this.controlOp == "F" && this.slides[ this.jss      ].crossfade == true) || 
              (this.controlOp == "B" && this.slides[ this.last_jss ].crossfade == true))
              dofilter = true;
          
          // make sure if present, that the second pictureBox is out of the way, since we won't
          // be using it in an IE browser to do crossfading...
          if (this.image2)
              document.getElementById(this.imageAnchor2).style.zIndex = -1;
      }
    
      // Set specific rendering box size if requeseted...
        if (this.pictureBoxWidth)
        {
	   if (this.image)
               this.image.style.width   = this.pictureBoxWidth  + "px";
       
           if (this.image2)
               this.image2.style.width  = this.pictureBoxWidth  + "px";
        }
        
        if (this.pictureBoxHeight)            
        {
	   if (this.image)
               this.image.style.height  = this.pictureBoxHeight + "px";
       
           if (this.image2)
               this.image2.style.height = this.pictureBoxHeight + "px";
        }
        
        // if running IE browser, we can run blendtrans() transform for a crossfade effect...
        if (dofilter)
        {
          // this.image.style.filter = "blendTrans(duration=1)";  // duration for blendTrans is specified in seconds
          this.image.style.filter = "blendTrans(duration=" + this.crossfadeDuration/1000 + ")";
          this.image.filters[0].Apply();
        }
        
        // Update the image...
        if (this.isIE == true)  // if runing slideshow in an IE browser, render image now...
        {
            this.image.src  = slide.image.src;
        }
        else  // else assume running Firefox...
        {
          // if we have not finished zooming opacity on the last image,
          // we better finish right now...
          if (this.crossfadeClock != null)
          {
              window.clearInterval(this.crossfadeClock);
	      this.crossfadeClock = null;       
          }
                
          // we are going to swap the layers containing image and image2...
          this.image2_zIndex *= -1;  
          
          // load our next image into the layer that put on top...
          if (this.image2_zIndex < 0)  
          {    
              this.image.style.opacity  = 1.0;
              this.image.src  = slide.image.src;
              this.crossfade2();
          }
          else
          {
              this.image2.style.opacity = 0.0;
              this.image2.src = slide.image.src;
              this.crossfade();
          }
        }
        
        if (dofilter)  // if running IE browser and the IE crossfading filter is called for...
            this.image.filters.blendTrans.Play();
        
        // courtesy var...
        var imageNum = this.jss + 1;
        
        if (document.getElementById) 
        {
          // set caption for slide in markup
          if (slide.caption)
          //  document.getElementById(this.textId).innerHTML = this.captionHead + "#" + imageNum + " of " + len + " - " + slide.caption + this.captionTail;
              document.getElementById(this.textId).innerHTML = this.captionHead + slide.caption + this.captionTail;
          else
              document.getElementById(this.textId).innerHTML = this.captionHead + "#" + imageNum + " of " + len + this.captionTail;
      
          // set copyright information for slideshow in markup
          if (this.copyright && this.copyright != "" && document.getElementById(this.copyrightId))  // copyright information for slideshow
          {
              document.getElementById(this.copyrightId).innerHTML = this.copyright;
          }
          
          // set credits for slide or slideshow in markup
          if (slide.credits && slide.credits != "" && document.getElementById(this.creditsId))  // credits specified for individual slide
              document.getElementById(this.creditsId).innerHTML = slide.credits;
          else
          if ( this.credits &&  this.credits != "" && document.getElementById(this.creditsId))  // credits specified generally for slideshow
          {
              document.getElementById(this.creditsId).innerHTML = this.credits;
          }
        }
        
        if (slide.link && this.linkCtrl)
            this.linkCtrl.src = this.linkCtrlOn;   // eg: "hotlink.gif";
        else
            this.linkCtrl.src = this.linkCtrlOff;  // eg: "noHotlink.gif";
    
        if (slide.pause && !this.paused)
        {
           this.pause(0, 0, true);  // pause the slideshow if not paused already
           this.slideshowPausedBySlide = true;
        }
        
        if (!slide.pause && this.slideshowPausedBySlide)
        {
           this.restartSlideshow();
        }
    
        if (this.paused == false)
            this.tss = setTimeout(this.name + ".next()", this.SlideShowSpeed);
        
        this.runningUpdate = false;
    } // End of this.update()
    
    
    this.jumpToSlide = function()
    {
      window.clearTimeout(this.tss);
      
      if ((this.indexWindowIsOpen == true) && (this.indexWindow && this.indexWindow.open && !this.indexWindow.closed))  // I cannot seem to figure this out
      { 
          setTimeout(this.name + ".jumpToSlide()", 500);
      }
      else 
      if (this.jumpToSlideNumber >= 0)  // The index window is now closed...
      {
          this.indexWindowIsOpen = false;    
              
          this.jss = this.jumpToSlideNumber;
          this.jumpToSlideNumber = -1;
        
          this.control('R');
      }
      else
      {
          this.control('R');  // So, if I am here it is because the user killed the index window without selecting an image to jump to, so go to next image
      }
    } // End of this.jumpToSlide()
    
    
    // Display an alert message in a popup window of size (xSize, ySize) at location (x, y).
    // Window will self close in timeoutValue msec...
    this.alertMessage = function(msg, xSize, ySize, x, y, timeoutValue)
    {
      this.alertWindow = window.open("", "Alert", "height=" + ySize + ", width=" + xSize + ", titlebar=0, menubar=no, status=no, left=" + x + ", top=" + y + ", screenX=" + x + ", screenY=" + y);
      
      this.alertWindow.document.write("<html><head><title>Alert - " + this.name + "</title><meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'></head>");
      this.alertWindow.document.write("<body bgcolor='#999999'><center><div style='margin: 0; padding: 0;'>");
      this.alertWindow.document.write(msg);
      this.alertWindow.document.write("</div></body></html>");
      
      if (timeoutValue > 0)
         this.alertWindow.setTimeout('self.close()', timeoutValue);
      
      return this.alertWindow;
    } // End of this.alertMessage()
    
    
    // Method used to start up index window for slide show
    // This code was inspired by Picture Window slide show output...
    this.startIndexWindow = function(how) 
    {
      var i, j;
      var caption      = "";
      var bgColor      = "black";
      var indexMarkup  = "";
      
      // set first slide # to be shown in the index pane...
      if (!how && isNaN(how))  // if how was not specified, then refresh is default
      {
          how = 'R';
          this.popupMsgHandler("<div style='" + this.popupMsgStyle + this.opacityString() + "'>Index View is being created...</div>", 0, 4000);
          this.indexStart = Math.floor(this.jss / this.indexLength) * this.indexLength;
      }
      else
      if (isFinite(how))
      {
          this.indexStart = Math.floor(how / this.indexLength) * this.indexLength;
      }
      else
      if (how == 'H')
          this.indexStart = 0;
      else
      if (how == "B")
          this.indexStart -= this.indexLength;
      else
      if (how == "F")
          this.indexStart += this.indexLength;
      else
      if (how == "L")
          this.indexStart = Math.floor(this.slides.length / this.indexLength) * this.indexLength; 
      else
      if (how == 'R')
      {
          this.popupMsgHandler("<div style='" + this.popupMsgStyle + this.opacityString() + "'>Index View is being refreshed<br> to current image...</div>", 0, 4000);
          this.indexStart = Math.floor(this.jss / this.indexLength) * this.indexLength;
      }
      
      // range checking...
      if (this.indexStart < 0)
      {
          this.indexStart = 0;
          this.popupMsgHandler("<div style='" + this.popupMsgStyle + this.opacityString() + "'>We are on the first index page...</div>" , 0, 4000);
      }
      else
      if (this.indexStart > Math.floor((this.slides.length-1) / this.indexLength) * this.indexLength)
      {
          this.indexStart = Math.floor((this.slides.length-1) / this.indexLength) * this.indexLength;          
          this.popupMsgHandler("<div style='" + this.popupMsgStyle + this.opacityString() + "'>We are on the last index page...</div>" , 0, 4000);
      }
      
      indexMarkup  = "<span style='" + this.indexDisplay + this.opacityString(0.9) + "z-index: 3;'>";
      indexMarkup += "<span onclick='" + this.name + ".selectImage(" + this.jss + ");' style='cursor:pointer; cursor: hand; position: absolute; top: -1px; right: 2px; border: 1px solid grey; color: grey; font-size: 12px; font-weight: bold; line-height: 90%;' title='Return to the slide show without changing current position'>X</span>";
      indexMarkup += "<center><span style='" + this.indexContent + "'>";
      indexMarkup += "Click on a thumbnail to jump to that image in the slide show viewer...<br>";
      
      indexMarkup += "<table><tr>";
      
      for (i=this.indexStart, j=this.indexStart + 1, k=0; i<this.indexStart + this.indexLength && i<this.slides.length; i++, j++, k++)
      {      
        if (k == this.indexRowLength)  // open a new row
        {
            indexMarkup += "</tr><tr>";
            k = 0;  // reset k
        }
              
        if (this.jss == i)
        {
            bgColor   = "red";
            titleHead = "Currently loaded image in Slide Show, ";
        }
        else
        {
            bgColor   = "black";
            titleHead = "";
        }
              
        if (this.slides[i].caption)
            caption = "<span style='" + this.indexCaptionHead + "'>" + this.slides[i].caption + "</span>";
        else
            caption = "<span style='" + this.indexCaptionHead + "'>" + "slide #" + j + " of " + this.slides.length + "</span>";
      
        indexMarkup += "<td>";  // open a new cell in the current row
    
        // this.indexWindow.document.writeln("");
        indexMarkup += "<div align='center' style='margin: 0px;'><table border='0' cellspacing='0' cellpadding='4' width='300'><tr>";
        
        if (this.slides[i].thumbnailLoaded == true && this.makeThumbnails == false)  // if the thumbnail exists, and we are allowed to use it...   
            indexMarkup += "<td align='center' width='100' bgcolor='" + bgColor + "'><a href='#'><img name='thumbnail_" + i + "' src='" + this.slides[i].thumbnail + "' title='" + titleHead + "slide #" + (i+1)                                       + "' border = '1' onClick='" + this.name + ".selectImage(" + i + ");'></a></td>";
        else
            indexMarkup += "<td align='center' width='100' bgcolor='" + bgColor + "'><a href='#'><img name='thumbnail_" + i + "' src='" + this.slides[i].src       + "' title='" + titleHead + "slide #" + (i+1) + "' height='" + this.thumbnailHeight + "' border = '1' onClick='" + this.name + ".selectImage(" + i + ");'></a></td>";
        
        if (this.slides[i].link)
        {
            indexMarkup += "<td>";
            indexMarkup += "<table><tr><td class='indexContent indexHLT'><span style='color: " + bgColor + ";'>" + caption + "</span></td></tr>";
            indexMarkup += "<tr><td><img src='hotlink.gif' name='indexPageHotlinkControl" + i + "' class='imgTrans' border='0' width='254' height='22' onMouseOver=\"turnOn('indexPageHotlinkControl" + i + "');\" onMouseOut=\"turnOff('indexPageHotlinkControl" + i + "');\" onClick='" + this.name + ".hotlink(index=" + i + ");'></td></tr></table>";
            indexMarkup += "</td></tr></table></div></p>";
        }
        else
        {
            // Firefox: text-align over-rules the table align attribute, Opera: it does not!
            indexMarkup += "<td align='left' class='indexContent indexHLT' style='color: " + bgColor + ";'>" + caption + "</td>";
            indexMarkup += "</tr></table></div>";
        }
        
        indexMarkup += "</td>";  // close the cell we have been working on in the current row
      }
      
      indexMarkup += "</tr></table>";  // close last row in the index display
      
      // indexMarkup += "<table><tr>";
      // indexMarkup += "  <td style='padding: 8 0 0 0;'>";
      // indexMarkup += "    <a class='Controls' href='#' onMouseOver=\"turnOn('" + this.name + "_index_buttonFirst');\"  onMouseOut=\"turnOff('" + this.name + "_index_buttonFirst');\" onClick=\"" + this.name + ".startIndexWindow('H');\"> <img name='" + this.name + "_index_buttonFirst' class='imgTrans' src='first.gif' border='0' width='22' height='22' align='middle' alt='Go to the first index page'                 title='Go to the first index page'></a>";
      //                   
      // indexMarkup += "    <a class='Controls' href='#' onMouseOver=\"turnOn('" + this.name + "_index_buttonPrev'); \"  onMouseOut=\"turnOff('" + this.name + "_index_buttonPrev'); \" onClick=\"" + this.name + ".startIndexWindow('B');\"> <img name='" + this.name + "_index_buttonPrev'  class='imgTrans' src='prev.gif'  border='0' width='22' height='22' align='middle' alt='Go to the previous index page'              title='Go to the previous index page'></a>";
      //                   
      // indexMarkup += "    <a class='Controls' href='#' onMouseOver=\"turnOn('" + this.name + "_index_buttonIndex');\"  onMouseOut=\"turnOff('" + this.name + "_index_buttonIndex');\" onClick=\"" + this.name + ".startIndexWindow('R');\"> <img name='" + this.name + "_index_buttonIndex' class='imgTrans' src='index.gif' border='0' width='22' height='22' align='middle' alt='Return to the opening index page'           title='Return to the opening index page'></a>";
      //                   
      // indexMarkup += "    <a class='Controls' href='#' onMouseOver=\"turnOn('" + this.name + "_index_buttonNext'); \"  onMouseOut=\"turnOff('" + this.name + "_index_buttonNext'); \" onClick=\"" + this.name + ".startIndexWindow('F');\"> <img name='" + this.name + "_index_buttonNext'  class='imgTrans' src='next.gif'  border='0' width='22' height='22' align='middle' alt='Go to the next index page'                  title='Go to the next index page'></a>";
      // 
      // indexMarkup += "    <a class='Controls' href='#' onMouseOver=\"turnOn('" + this.name + "_index_buttonLast'); \"  onMouseOut=\"turnOff('" + this.name + "_index_buttonLast'); \" onClick=\"" + this.name + ".startIndexWindow('L');\"> <img name='" + this.name + "_index_buttonLast'  class='imgTrans' src='last.gif'  border='0' width='22' height='22' align='middle' alt='Go to the last index page'                  title='Go to the last index page'></a>";
      // indexMarkup += "  </td>";
      // indexMarkup += "</tr></table>";
      
      indexMarkup += "<br>";
      indexMarkup += "<div style='text-align: center;'>";
      indexMarkup += "<input type='button' style='font-weight: bold;' value='<' title='Go to the previous index page' onClick=\"" + this.name + ".startIndexWindow('B');\">";
      
      j = Math.floor(this.slides.length / this.indexLength);
      if (this.slides.length % this.indexLength)
          j++;
      
      for (i=1; i<=j; i++)
      {
           indexPageFirstSlide = (i-1)*this.indexLength+1;
           
           if (i<j)
               indexPageLastSlide = i * this.indexLength;    
           else  // i==j
               indexPageLastSlide = this.slides.length; 
              
           if (indexPageFirstSlide>this.indexStart && indexPageFirstSlide<this.indexStart+this.indexLength)
           {
               buttonStyle = "border-style: inset; background-color: yellow; font-weight: bold;";
               title       = "Current index page, slides: #" + indexPageFirstSlide + " to #" + indexPageLastSlide;
           }
           else
           {
               buttonStyle = "";
               title       = "Index page, slides: #" + indexPageFirstSlide + " to #" + indexPageLastSlide;
           }
       
           if (this.jss+1>=indexPageFirstSlide && this.jss+1<=indexPageLastSlide)
               buttonStyle += "color: red;";
                   
           indexMarkup += "<input type='button' style='" + buttonStyle + "' value='" + i + "' title='" + title + "' onClick='" + this.name + ".startIndexWindow(" + ((i-1)*this.indexLength) + ");'>";
      }
      
      indexMarkup += "<input type='button' style='font-weight: bold;' value='>' title='Go to the nex index page' onClick=\"" + this.name + ".startIndexWindow('F');\">";
      indexMarkup += "</div>";
      
      // if (this.indexStart > this.indexLength * 4)  // make a shift down button
      // {
      //     var jumpDown = this.indexLength * 3;
      //     var proposedStart  = this.indexStart - jumpDown;
      //     indexMarkup += "<input type='button' value='<< 3 pages' title='Go back 3 pages in thumbnail index' onClick='" + this.name + ".startIndexWindow(" + proposedStart + ");'>";
      // }        
      
      indexMarkup += "<input type='button' style='margin-top: 4px;' value='Close index display' title='Return to the slide show without changing current position' onClick='" + this.name + ".selectImage(" + this.jss + ");'>";
      // indexMarkup += "<input type='button' value='Refresh this page' title='Reload this particular index page' onClick='" + this.name + ".startIndexWindow(" + this.indexStart + ");'>";
      
      // if (this.indexStart < this.slides.length - this.indexLength * 4)  // make a shift up button
      // {
      //     var jumpUp  = this.indexLength * 3;
      //     var proposedStart = this.indexStart + jumpUp;
      //     indexMarkup += "<input type='button' value='>> 3 pages' title='Advance 3 pages in thumbnail index' onClick='" + this.name + ".startIndexWindow(" + proposedStart + ");'>";
      // }
      
      indexMarkup += "  <br>";
      
      indexMarkup += "<div style='" + this.indexTail + "'>";
      indexMarkup += "  <br>";
      
      if (this.copyright && this.copyright != "")
          indexMarkup += this.copyright;
      
      indexMarkup += "  <br>";
      
      if (this.credits && this.credits != "")
          indexMarkup += this.credits;            
  
      indexMarkup += "  <br>";
  
      if (this.title && this.title != "")
          indexMarkup += this.title;
      
      indexMarkup += "</div>";
      indexMarkup += "</center></body></html>";
      
      window.clearTimeout(this.tss);  // stop the slideshow from running while the index display is active
      
      if (this.indexId != "" && document.getElementById(this.indexId))
      {
          document.getElementById(this.indexId).innerHTML = indexMarkup; 
      }

      this.indexRunning = true;
    } // End of this.startIndexWindow()
    
    
    this.clearIndexWindow = function()
    {
      if (this.indexId != "" && document.getElementById(this.indexId))
      {
          document.getElementById(this.indexId).innerHTML = ""; 
      }

      this.indexRunning = false;
    }
    
    
    this.selectImage = function(slideNum)
    {
      if (isNaN(slideNum))
          slideNum = 0;
      else
      if (slideNum < 0)
          slideNum = 0;
      else
      if (slideNum >= this.slides.length)
          slideNum  = this.slides.length - 1;
      
      this.jss = slideNum;
      this.control('R');
      
      this.clearIndexWindow();
      this.popupMsgHandler("<div style='" + this.popupMsgStyle + this.opacityString() + "'>Loading Slide #" + (this.jss+1) + "...</div>", 0, 4000);
    }
    
    
    // Go to first slide...
    this.first = function() 
    {
      this.control('H');
    }
    
    
    // Decrement to the last slide...
    this.previous = function() 
    {
      this.control('B');
    }
    
    
    // Method used to pause a running slide show:
    // A status message is displayed and so it requires x,y points to draw msg
    // at the specified location. If x or y is <0, no msg is drawn...
    this.pause = function(x, y, suppressPauseAlert)
    {
      if (this.tss != 0)
      {
        window.clearTimeout(this.tss);
        this.tss = 0;
      }
      
      if (this.paused)  // restart the slide show...
      {
          this.paused = false;
          
          if (this.pauseButton)
              this.pauseButton.src = "pause.gif";
          
          this.tss = setTimeout(this.name + ".next()", this.SlideShowSpeed);
      }
      else              // pause the slide show...
      {
          this.paused = true;
      
          if (this.pauseButton)
          {
              this.pauseButton.src = "paused.gif";
          }
            
          if (!suppressPauseAlert)
          {
              // this.alertMessage("<strong><p><span style='font-family: sans-serif; font-size: 12px; color: #68101f;'>Slide Show has been Paused.<br>Click the Pause Button again to resume automatic advance.<br></span>", 300, 50, x, y, 3000);              
              this.popupMsgHandler("<div style='" + this.popupMsgStyle + this.opacityString() + "'>Slide Show has been Paused.<br><br>Please click the Pause Button again<br> to resume automatic advance.<br></div>", 0, 4000);
          }
      }
    } // End of this.pause()
    
    
    // Increment to the next slide...
    this.next = function() 
    {
      this.control('F');
    }
    
    
    // Go to the last slide...
    this.last = function() 
    {
      this.control('L');
    }    
    
    
    // Return caption of current slide...
    this.getCaption = function() 
    {
      return(this.slides[ this.jss ].caption);
    }
    
    
    this.restartSlideshow = function()
    {
      if (this.slideshowPausedByHotlink)
      {
         if (this.hotlinkWindow && this.hotlinkWindow.closed)
         {
            this.slideshowPausedByHotlink = false;
            
            if (this.paused)
                this.pause();  // toggle slide show back on
         }
         else
         {
            window.setTimeout(this.name + ".restartSlideshow()", 100);  // check again later
         }
      }
      else 
      if (this.slideshowPausedBySlide)
      {
          this.slideshowPausedBySlide = false;
            
          if (this.paused)
              this.pause();  // toggle slide show back on
      }
    } // this.restartSlideshow()
    
    
    // This function provides the slide show with the ability to raise another
    // window for a given slide. x,y is the position to draw error message on the screen, should the link fail to exist...
    this.hotlink = function(index)
    {
      // This method jumps to the slide's link.
      // var hotlinkWindow;
      var slide;
      
      if (index == -1)
          slide = this.slides[ this.jss ];
      else
          slide = this.slides[ index ];
      
      // If this slide does not have a link, do nothing
      if (!slide.link) 
         return;

      if (this.hotlinkWindow && this.hotlinkWindow.open && !this.hotlinkWindow.closed)
      {
          this.hotlinkWindow.close();
      }

      // If window attributes are specified,
      // use them to open the new window
      if (slide.linkAttr) 
      {
        this.hotlinkWindow = window.open(slide.link, "infoCard", slide.linkAttr + ", titlebar=no, menubar=no, status=no, resizable=yes, scrollbars=yes");
      } 
      else 
      {
        this.hotlinkWindow = window.open(slide.link, "infoCard",                    "titlebar=no, menubar=no, status=no, resizable=yes, scrollbars=yes");
      }
      
      // Pop the window to the front
      if (this.hotlinkWindow && this.hotlinkWindow.focus) 
          this.hotlinkWindow.focus();
          
      // Pause slide show so that it does not go on to the next slide while viewing hotlink...
      if (this.paused == false)  // pause the slideshow if it is not paused already
      {
          this.pause(0, 0, true);
          
          this.slideshowPausedByHotlink = true;
          this.restartSlideshow();  // restart after hotlink window dies
      }
    } // End of this.hotlink()
    
    
    this.hotlinkAvailable = function()
    {
      if (this.slides && this.slides[ this.jss ] && this.slides[ this.jss ] . link)
      {
         return true;
      }
      else
      {
         return false;
      }
    } // End of this.hotlinkAvailable()
    
    
    // The following two functions were shamelessly taken from slideshow.js
    this.savePosition = function(cookiename) 
    {
      // Saves the position of the slideshow in a cookie,
      // so when you return to this page, the position in the slideshow
      // won't be lost. 
      
      // Called from <body> tag using onunload()
      // example: onunload="Slide_Show.savePosition('Slide_Show_position');"
  
      if (!cookiename) 
      {
          cookiename = this.name + '_slideshowPosition';
      }
  
      document.cookie = cookiename + '=' + this.jss;
    } // End of this.savePosition()


    this.restorePosition = function(cookiename) 
    {
      // If you previously called this.savePosition(),
      // return the slideshow to the last slide viewed.
    
      // Get cookie code by Shelley Powers
      
      // Called from <body> tag using onunload()
      
      var tmp_jss = 0;
    
      if (!cookiename) 
      {
          cookiename = this.name + '_slideshowPosition';
      }
    
      var search = cookiename + "=";
    
      if (document.cookie.length > 0) 
      {
          offset = document.cookie.indexOf(search);
          
          // if cookie exists
          if (offset != -1) 
          { 
            offset += search.length;
            // set index of beginning of value
            end = document.cookie.indexOf(";", offset);   
            
            // set index of end of cookie value
            if (end == -1) 
                end = document.cookie.length;
                
            tmp_jss = parseInt(unescape(document.cookie.substring(offset, end)));
            
            // some error checking on the return value
            if (tmp_jss >= 0 && tmp_jss < this.slides.length)
            {
                if (this.popupMsgId != "" && document.getElementById(this.popupMsgId))
                {
                    this.popupMsg = 
                    "<span style='" + this.popupMsgStyle + this.opacityString() + "'>Resuming this slide show<br> at its last recorded position:<br> slide #" + (tmp_jss + 1) + " of " + this.slides.length + "...";
                    
                    setTimeout(this.name + ".raisePopupMsg()", 1000); 
                }
                
                this.jss = tmp_jss;  // make it so
            }
        }
      }
    } // End of this.restorePosition()
    
    
    // create a popup message
    this.raisePopupMsg = function()
    {
      if (this.popupMsgId != "" && document.getElementById(this.popupMsgId))
      {
          document.getElementById(this.popupMsgId).innerHTML = this.popupMsg;
          setTimeout(this.name + ".clearPopupMsg()", this.popupMsgDuration); 
      }
    }
    
    
    // Kill any popup message, if there is one
    this.clearPopupMsg = function()
    {
      if (this.popupMsgId != "" && document.getElementById(this.popupMsgId))
      {
              // The reason I don't just write an empty string to innerHTML, is because that doesn't work in Opera.
              // The reason I don't just set the opacity to 0, is because that doesn't work in Opera either.
              document.getElementById(this.popupMsgId).innerHTML = "<span style='" + this.popupMsgStyle + this.opacityString(0.001) + "'>&nbsp;</span>";
      }
    }
    
    
    this.popupMsgHandler = function(theMsg, delayTime, lifeTime)
    {
      this.popupMsg         = theMsg;
      
      if (!delayTime > 0)
           delayTime = 0;
              
      if (lifeTime > 0)
          this.popupMsgDuration = lifeTime;
      
      if (delayTime == 0)
      {
          this.raisePopupMsg();    
      }
      else
      if (this.popupMsgId != "" && document.getElementById(this.popupMsgId))
          setTimeout(this.name + ".raisePopupMsg()", delayTime); 
    }
    
    
    this.opacityString = function(optionalOpacityValue)
    {
       var opacity = this.msgOpacity;
       
       if (optionalOpacityValue)
           opacity = optionalOpacityValue;
            
       // range check, opacity in [0, 1]
       if (opacity < 0.0)
           opacity = 0.0
       else
       if (opacity > 1.0)
           opacity = 1.0
            
       return "filter:alpha(opacity=" + (opacity * 100) + "); -moz-opacity:" + opacity + "; -khtml-opacity:" + opacity + "; opacity:" + opacity + "; "       
    }
    
    
    // Set up rollover behavior for the buttons in the index window...
    Rollover(this.name + "_index_buttonFirst",    "firstOn.gif",   "first.gif");
    Rollover(this.name + "_index_buttonPrev",     "prevOn.gif",    "prev.gif");
    Rollover(this.name + "_index_buttonPause",    "pauseOn.gif",   "pause.gif");
    Rollover(this.name + "_index_buttonNext",     "nextOn.gif",    "next.gif");
    Rollover(this.name + "_index_buttonLast",     "lastOn.gif",    "last.gif");
    Rollover(this.name + "_index_buttonHelp",     "helpOn.gif",    "help.gif");
    Rollover(this.name + "_index_buttonIndex",    "indexOn.gif",   "index.gif");
    Rollover(this.name + "_index_hotlinkControl", "hotlinkOn.gif", "hotlink.gif");
  } // End of slideshow() constructor
// End of Slide Show Engine


// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// Capture mouse position for positioning popup status window___________________
// Credits:
//     I lifted this code from:
//     http://www.breakingpar.com/bkp/home.nsf/Doc?OpenNavigator&U=87256B14007C5C6A87256B4B0005BFA6
//     Breaking Par Consulting Inc
//

  if (document.layers) 
  { // Netscape
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = captureMousePosition;
  } 
  else if (document.all) 
  { // Internet Explorer
    document.onmousemove = captureMousePosition;
  } 
  else if (document.getElementById) 
  { // Netcsape 6
    document.onmousemove = captureMousePosition;
  }
  
  xMousePos    = 0; // Horizontal position of the mouse on the screen
  yMousePos    = 0; // Vertical position of the mouse on the screen
  xMousePosMax = 0; // Width of the page
  yMousePosMax = 0; // Height of the page

  function captureMousePosition(e) 
  {
    if (document.layers) 
    {
        xMousePos    = e.pageX;
        yMousePos    = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    } 
    else if (document.all) 
    {
        xMousePos    = window.event.x+document.body.scrollLeft;
        yMousePos    = window.event.y+document.body.scrollTop;
        xMousePosMax = document.body.clientWidth+document.body.scrollLeft;
        yMousePosMax = document.body.clientHeight+document.body.scrollTop;
    } 
    else if (document.getElementById) 
    {
        xMousePos    = e.pageX;
        yMousePos    = e.pageY;
        xMousePosMax = window.innerWidth+window.pageXOffset;
        yMousePosMax = window.innerHeight+window.pageYOffset;
    }
  }
// End of Capture mouse position code
  

// - - - - - - - - - - - - - - - - - - - -

// Value Check code_____________________________________________________________
// Credits:
//    Taken from FormCheck.js
//    For some interesting reading, check out:
//    http://edg.utah.gov/developer_advisory/form_validation/validation.pdf
//

  var defaultEmptyOK = false;

  function isEmpty(s)
  {   
      return ((s == null) || (s.length == 0))
  }
  
  function isDigit (c)
  {   
      return ((c >= "0") && (c <= "9"))
  }

  function isInteger (s)
  {   var i;
  
      if (isEmpty(s)) 
         if (isInteger.arguments.length == 1) return defaultEmptyOK;
         else return (isInteger.arguments[1] == true);
  
      // Search through string's characters one by one
      // until we find a non-numeric character.
      // When we do, return false; if we don't, return true.
  
      for (i = 0; i < s.length; i++)
      {   
          // Check that current character is number.
          var c = s.charAt(i);
  
          if (!isDigit(c)) return false;
      }
  
      // All characters are numbers.
      return true;
  }
// End of Value Check code


// - - - - - - - - - - - - - - - - - - - -

// Useful functions external to SSE_____________________________________________
  function getSlideShowSpeed(ss)
  {  
    document.myForm.SlideDwellTime.value = ss.SlideShowSpeed / 1000;
  }
  
  
  function setSlideShowSpeed(ss)
  {   
    if (document.myForm.SlideDwellTime.value == "xyzzy")
    {
       ss.SlideShowSpeed = 1000;  // run at maximum rate
    }
    else
    if (isInteger(document.myForm.SlideDwellTime.value))
    {
       ss.SlideShowSpeed = document.myForm.SlideDwellTime.value * 1000;
    }
    else
    {
       ss.SlideShowSpeed = 10000;
    }
    
    ss.control('R');
  }  
  
  // The following function was taken from:
  // http://www.codeproject.com/jscript/opacity.asp, written by John John
  function lightup(imageobject, opacityDesired)
  {
    if (navigator.appName.indexOf("Netscape") != -1 && parseInt(navigator.appVersion) >= 5)
    {
       imageobject.style.MozOpacity = opacityDesired/100;
    }
    else if (navigator.appName.indexOf("Microsoft")!= -1 && parseInt(navigator.appVersion) >= 4)
    {
       imageobject.style.filter = "Alpha(Opacity=" + opacityDesired + ")";
    }
  }
  
  
/**
  * You may use this code for free on any web page provided that 
  * these comment lines and the following credit remain in the code.
  * "Multimedia Rollovers" from http://www.javascript-fx.com
  */
  //Uncomment the next line for random transition rollover each time the page is loaded
  //document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=1, transition='+Math.floor(Math.random()*23)+') }</STYLE>');
  
  //Uncomment the next line for a specific transition rollover (transition=0 to 23)
  //document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=1,transition=2) }</STYLE>');
  
  //Uncomment the next line for fading rollovers
  document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=1) }</STYLE>');
  
  var  onImages = new Array();
  var offImages = new Array();
  
  function Rollover(imgName, imgSrcOn, imgSrcOff)
  {
  	 onImages[imgName]     = new Image();
  	 onImages[imgName].src = imgSrcOn;
  	
  	offImages[imgName]     = new Image();
  	offImages[imgName].src = imgSrcOff;
  }
  
  
  function turnOn(imgName) 
  { 
  	if(document.images[imgName].filters != null)
  		if(document.images[imgName].filters[0].status != 0)
  			document.images[imgName].filters[0].stop();
  			
  	document.images[imgName].src    =  onImages[imgName].src;
  } 
  
  
  function turnOff(imgName) 
  { 
  	if(document.images[imgName].filters != null)
  		document.images[imgName].filters[0].apply();
  		
  	document.images[imgName].src    = offImages[imgName].src;
  	
  	if(document.images[imgName].filters != null)
  		document.images[imgName].filters[0].play();
  } 

  
  // rollover definitions for buttons used in the slide show engine...
  Rollover("buttonFirst",          "firstOn.gif",   "first.gif");
  Rollover("buttonPrev",           "prevOn.gif",    "prev.gif");
  Rollover("buttonPause",          "pauseOn.gif",   "pause.gif");
  Rollover("buttonNext",           "nextOn.gif",    "next.gif");
  Rollover("buttonLast",           "lastOn.gif",    "last.gif");
  Rollover("buttonHelp",           "helpOn.gif",    "help.gif");
  Rollover("buttonIndex",          "indexOn.gif",   "index.gif");
  Rollover("hotlinkControl",       "hotlinkOn.gif", "hotlink.gif");