//----------------------------------------------------------------------
// To create an object of this class:
//
//   var obj = new BlendSlides( idImgTop,           // ID of the <img> tag on top
//                              idImgBottom,        // ID of the <img> tab at bottom
//                              imagePath,          // Path to the folder of images
//                                                  // Don't append / at the end!
//                              arraySlides,        // Array of file name of images
//                                                  // Don't add / at the beginning!
//                              msEffectLapse,      // milliseconds desired for transition of "blending" effect
//                              msSlideInterval );  // Lapse, in milliseconds, in loading next slide
//
//   Note:
//     1) idImgTop, idImgBottom, imagePath, arraySlides are required;
//     2) msEffectLapse is defaulted to 3000 if not provided;
//     3) msSlideInterval is defaulted to 5000 if not provided;
//     4) <img> tags id'ed by idImgTop and idImgBottom must be stacked
//        one on top of another using CSS;
//
//----------------------------------------------------------------------
// Method provided:
//   restart(): Load next slide in 1 second
//   pause(): Pause (by preventing next slide from being loaded)
//
//----------------------------------------------------------------------
// Usage:
//   Write your own routine to handle o.restart() and o.pause().
//
//----------------------------------------------------------------------
// Internal method provided:
//   run(): Set time-out and load image's src into either object id'ed
//          by idImgTop or idImgBottom.
//
//----------------------------------------------------------------------
// Revision History:
//   9/7/2009: [Will] Created. Unlike SlideShow.js, setTimeout() is 
//             handled internally (much cleaner).
//----------------------------------------------------------------------


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

function BlendSlides( idImgTop, idImgBottom, imagePath, arraySlides, msEffectLapse, msSlideInterval )
{
  var duration = ( msEffectLapse )? msEffectLapse : 3000;

  Spry.Effect.Cluster.call( this, { duration: msEffectLapse } );

  var fadeOut = new Spry.Effect.Fade( idImgTop, { duration: msEffectLapse, from: "100%", to: "0%", toggle: true } );
  var fadeIn = new Spry.Effect.Fade( idImgBottom, { duration: msEffectLapse, from: "0%", to: "100%", toggle: true } );

  this.addParallelEffect( fadeOut );
  this.addParallelEffect( fadeIn );

  // Private...
  this.idImgTop = idImgTop;
  this.idImgBottom = idImgBottom;
  this.imagePath = imagePath;
  this.arraySlides = arraySlides;
  this.slideInterval = ( msSlideInterval )? msSlideInterval : 5000;

  // Used by instance of this class...
  this.idLoadImg = idImgTop;
  this.currSlideIndex = 0;
  this.loadNext = false;

  // Handle internally as much as possible...
  var moi = this;
  document.getElementById(idImgTop).onload = function() { moi.start(); };
  document.getElementById(idImgBottom).onload = function() { moi.start(); };
}

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

BlendSlides.prototype = new Spry.Effect.Cluster();
BlendSlides.prototype.constructor = BlendSlides;

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

BlendSlides.prototype.run = function()
{
  if ( this.loadNext && !this.isRunning && this.imagePath != "" && this.arraySlides.length ) {
    this.currSlideIndex++;

    if ( this.currSlideIndex == this.arraySlides.length )
      this.currSlideIndex = 0;

    this.idLoadImg = ( this.idLoadImg == this.idImgTop )? this.idImgBottom : this.idImgTop;

    if ( document.getElementById(this.idLoadImg) ) {
      var moi = this;
      this.timer = window.setTimeout( function(){ moi.run(); }, this.slideInterval );
      document.getElementById(this.idLoadImg).src = this.imagePath + "/" + this.arraySlides[this.currSlideIndex];
    }
  }
}

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

BlendSlides.prototype.restart = function()
{
  this.loadNext = true;
  
  var moi = this;
  this.timer = window.setTimeout( function(){ moi.run(); }, 1000 );
}

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

BlendSlides.prototype.pause = function()
{
  this.loadNext = false;
}

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