// JavaScript Document

function TimedNextPicture()
{
  var internalObject = null;
  function timoutFunc()
  {
    internalObject.nextPicture();
  }
  this.setVal = function(val)
  {
    internalObject = val;
  }
  this.causeTimeout = function(timeoutVal)
  {
    setTimeout(timoutFunc, timeoutVal);
  }
}


function IntervalDoFadeStep()
{
  var internalObject = null;
  function timoutFunc()
  {
    internalObject.doFadeStep();
  }
  this.setVal = function(val)
  {
    internalObject = val;
  }
  this.causeTimeout = function(timeoutVal)
  {
    return setInterval(timoutFunc, timeoutVal);
  } 
}


var slideshow = function(w,h) {
this.topDiv = null;
this.bottomDiv = null;
this.currentPicture = 0;
this.picture = [];
this.loadedImages = [];
this.fadeStep = -1;
this.timer = 0;
this.width = w;
this.height = h;
this.slideInterval = 5000;
this.zIndex = 1;
this.automatic = true;

this.setOpacity = function(div, percentage) {
   newValue = percentage / 100.0;
   div.style.opacity = newValue;
   div.style.filter = "alpha(opacity=" + percentage + ")";
};

this.switchLayers = function()
{
   z = this.topDiv.style.zIndex;
   this.topDiv.style.zIndex = this.bottomDiv.style.zIndex;
   this.bottomDiv.style.zIndex = z;
   
   div = this.topDiv;
   this.topDiv = this.bottomDiv;
   this.bottomDiv = div;
   
   this.setOpacity( this.bottomDiv, 100 );
};


this.doFadeStep = function()
{
   if ( this.fadeStep == 100 )
   {
      clearInterval(this.timer);
      this.switchLayers();
      
      this.setImage(this.bottomDiv,this.currentPicture+1);
      
      if ( this.automatic ) {
          helper = new TimedNextPicture();
          helper.causeTimeout(this.slideInterval);
          helper.setVal(this);
      }
      this.fadeStep = -1;
      return;
   }

   this.fadeStep += 1;
   this.setOpacity( this.topDiv, 100-this.fadeStep );
};

this.fadeToNext = function()
{
   this.fadeStep = 0;
   
   helper = new IntervalDoFadeStep();
   helper.setVal(this);
   this.timer = helper.causeTimeout(10);
};


this.setImage = function(div,imageIndex) 
{
    n = (imageIndex + this.picture.length) % this.picture.length;
    if (!this.loadedImages[n]) {
        var i=new Image();
        i.style.width = this.width;
        i.style.height = this.height;
        i.src = this.picture[n];
        this.loadedImages[n] = i;
    }
    if (div.childNodes.length==0) {
        div.appendChild(this.loadedImages[n]);
    } else {
        div.replaceChild(this.loadedImages[n],div.childNodes[0]);
    }
}

this.nextPicture = function()
{
   if ( this.fadeStep != -1 && ! this.automatic ) {
       return;
   }

   this.currentPicture = ( this.currentPicture + 1 ) % this.picture.length;
   this.fadeToNext();
};

this.previousPicture = function()
{
    if ( this.fadeStep != -1 && ! this.automatic ) {
        return;
    }

    this.setImage(this.bottomDiv,this.currentPicture-1);
    this.currentPicture = (this.currentPicture - 1 + this.picture.length) % this.picture.length;
    
    this.fadeToNext();    
};

this.initialize = function(divName)
{
   slideshowdiv = document.getElementById(divName);
   slideshowdiv.style.width = this.width;
   slideshowdiv.style.height = this.height;
   slideshowdiv.style.overflow = "hidden";
   
   position1 = "position:relative; left:0; top:0; width:" + this.width + "px; height:" + this.height + "px;";
   position2 = "position:relative; left:0; top:" + (-this.height) + "px; width:" + this.width + "px; height:" + this.height + "px;";
   
   layer1 = '<div id="layer1" style="' + position1 + 'z-index: ' + this.zIndex + '"></div>' ;
   layer2 = '<div id="layer2" style="' + position2 + 'z-index: ' + (this.zIndex+1) + '"></div>' ;
   
   slideshowdiv.innerHTML = ( layer1 + layer2 );

   this.bottomDiv = document.getElementById('layer1');
   this.topDiv = document.getElementById('layer2');

   this.currentPicture = 0;
   this.setImage(this.topDiv,0);

   if ( this.picture.length <= 1 ) return;   // only one picture

   this.setImage(this.bottomDiv,1);
    
   if ( this.automatic ) {
      helper = new TimedNextPicture();
      helper.causeTimeout(this.slideInterval);
      helper.setVal(this);
   } else {
      slideshowdiv.onclick=this.nextPicture;
   }
};
};