//<script>

// List with faders
// Each fader has a list of images
var PictureFaders = [];

function AddPictureFader (path,pauze,speed) {
  // pauze: how long is each image displayed (including fade time) (seconds)
  // speed: how long does a fade take (seconds)

  var i = PictureFaders.length;
  PictureFaders[i] = new PictureFader(i,path,pauze,speed);
  return PictureFaders[i];
}

function PictureFader (id,path,pauze,speed) { // constructor
  this.AddPicture = PictureFader_AddPicture;
  this.Draw       = PictureFader_Draw;
  this.Play       = PictureFader_Play;
  this.Stop       = PictureFader_Stop;
  this.Forward    = PictureFader_Forward;
  this.Rewind     = PictureFader_Rewind;
  this.Schedule   = PictureFader_Schedule;
  this.Showpic    = PictureFader_Showpic;
  this.TogglePauze = PictureFader_TogglePauze;

  // init
  this.fader    = new crossfader();
  this.timeout  = null;
  this.pictures = [];
  this.showing  = -1;
  this.playing  = false;
  this.path     = path;
  this.id       = id;
  this.pauze    = pauze;
  this.speed    = speed;
  this.v        = "PictureFaders[" + id + "]";

  return this;
}

function PictureFader_AddPicture (file,comment) {
  var img = new Image();
  img.src = this.path + "/" + file;
  img.alt = comment.replace(/"/g,"&quot;");
  var n = this.pictures.length;
  this.pictures[n] = img;
}

function PictureFader_Forward (slow) {
  this.showing++;
  if (this.showing >= this.pictures.length) {
    this.showing = 0;
    }
  this.Showpic(this.showing,slow);
  if (this.playing) this.Schedule();
}

function PictureFader_Rewind () {
  this.showing--;
  if (this.showing < 0) {
    this.showing = this.pictures.length - 1;
    }
  this.Showpic(this.showing,true);
  // Reset schedule
  if (this.playing) this.Schedule();
}

function PictureFader_Showpic (n,slow) {
  var img = document.getElementById("PictureFaderImg" + this.id);
  this.fader.crossfade(img,  // Img object
    this.pictures[n].src,    // new src
    this.speed,              // duration
    this.pictures[n].alt     // new alt
    );
  if (slow) slow = (500 * this.speed);
  else      slow = 1;
  self.clearTimeout(this.labelclock);
  this.labelclock = self.setTimeout("document.getElementById('PictureFaderTitle" + this.id + "').innerHTML = \"" +
                  this.pictures[n].alt + "\";",slow);
}

function PictureFader_Play () {
  if (this.pictures.length > 1) {
    this.playing = true;
    this.Schedule( (1000 * this.pauze) - (1000 * this.speed) );
    }
}

function PictureFader_Stop () {
  this.playing = false;
  clearTimeout(this.timeout);
}

function PictureFader_Schedule (p) {
  if (!p || p == 0) p = (1000 * this.pauze);
  if (this.timeout) {
    clearTimeout(this.timeout);
    }
  if (this.playing) {
    this.timeout = self.setTimeout(this.v + ".Forward(true);" + this.v + ".Schedule();",p);
    }
}

function PictureFader_TogglePauze (img) {
  if (this.playing) {
    this.Stop();
    if (img) {
      img.src = "/pics/play_up.gif";
      img.onmouseover = Function("this.src='/pics/play_over.gif';");
      img.onmouseout  = Function("this.src='/pics/play_up.gif';");
      }
    }
  else {
    this.Play();
    // Meteen spelen:
    this.Forward();
    if (img) {
      img.src = "/pics/pauze_up.gif";
      img.onmouseover = Function("this.src='/pics/pauze_over.gif';");
      img.onmouseout  = Function("this.src='/pics/pauze_up.gif';");
      }
    }
}

function PictureFader_Draw () {
  // Met image 0
  document.write(
    '<div style="padding-left:20px;">' +
    '<table cellpadding=0 cellspacing=0 border=0><tr>' +
    '<td colspan=2');
  if (this.pictures.length > 1) {
    document.write(' style="cursor:pointer;" onClick="' + this.v + '.Forward();return false;"');
    }
  document.write('><img id="PictureFaderImg' + 
    this.id + '" src="' + this.pictures[0].src +
    '" alt="' + this.pictures[0].alt + '" border="0" ' +
    'style="filter:alpha(opacity=100);background-color:white;"></td></tr><tr>' +
    '<td><span id="PictureFaderTitle' + this.id + '">' + this.pictures[0].alt + '</span>&nbsp;</td>' +
    '<td align=right>');
  if (this.pictures.length > 1) {
    document.write('<a href="#Rewind" onclick="' + this.v + '.Rewind();return false;">' +
    '<img src="/pics/back_up.gif" width="16" height="16" vspace=2 alt="Rewind" ' +
    'border="0" onmouseover="this.src=\'/pics/back_over.gif\';" onmouseout="this.src=\'/pics/back_up.gif\';"></a>' +

    '<a href="#Pauze-Play">' +
    '<img src="/pics/pauze_up.gif" width="16" height="16" vspace=2 alt="Pauze / Play"  ' +
    'onclick="' + this.v + '.TogglePauze(this);return false;" id="ImgFaderPauzeButton' + this.id + '" ' +
    'border="0" onmouseover="this.src=\'/pics/pauze_over.gif\';" onmouseout="this.src=\'/pics/pauze_up.gif\';"></a>' +

    '<a href="#Forward" onclick="' + this.v + '.Forward();return false;">' +
    '<img src="/pics/forward_up.gif" width="16" height="16" vspace=2 alt="Forward" ' +
    'border="0" onmouseover="this.src=\'/pics/forward_over.gif\';" onmouseout="this.src=\'/pics/forward_up.gif\';"></a>' +
    '');
    }
  else {
    document.write('&nbsp;');
    this.Stop();
    }
  document.write('</td></tr></table></div>');
  this.showing = 0;
  //this.Forward();
}