var PhotoSliderSettings = {
  targetdiv: 'photoslider', // ID of target DIV
  doublemode: false, // Show each image twice so it rolls from one image to the other
  //pics: 64,  // 64 pics
  interval: 4800, // milliseconds // Zolang blijft image staan na overgang
  duration: 2200, // milliseconds // Zolang duurt overgang
  //timeout: null,
  nextpic: 0,
  loader1: new Image(),
  loader2: new Image(),
  startfix: 0,
  random: true, // First pic is random, not fixed
  enabled: true // On / off
};

function PhotoSlider (photos) {
  var target = $(PhotoSliderSettings.targetdiv);
  if (target) {
    /*
    var debug = "";
    for (var array in photos) { debug += (array + ",") }
    $('images').update("KsPhotoSlider here: " + photos);
    */
    
    var extra = "";
    if (PhotoSliderSettings.doublemode) {
      extra =
      '<div id="PhotoSliderExtraElement" onclick="PhotoSlide1()">' +
        '<img id="PhotoSliderExtraElement1" class="" style="position:absolute;" alt="" />' +
        '<img id="PhotoSliderExtraElement2" class="" style="position:absolute;" alt="" />' +
      '</div>';
      }    
    target.insert(
      extra +
      '<div id="PhotoSliderElement">' +
        '<img id="PhotoSliderElement1" class="" style="position:absolute;" alt="" />' +
        '<img id="PhotoSliderElement2" class="" style="position:absolute;" alt="" />' +
      '</div>' +
      '<br clear="both"/>'
      );
    
    PhotoSliderSettings.pics = photos.length;
    PhotoSliderSettings.url = photos; // PhotoSliderSettings.url[0][1]
    }
  //Event.observe(window, "load", function() { KsPhotoSlide1(); });   
  PhotoSlide1();
}

  // <div id="background" onselect="return false" onselectstart="return false" ondragstart="return false"><img id="background_img1" class="background" alt="" /><img id="background_img2" class="background" alt="" /></div>
  
function PhotoSlide1 () {
  //$('background').update('');
  if (PhotoSliderSettings.nextpic == 0) {
    // Init
    $('PhotoSliderElement1').hide();
    if (PhotoSliderSettings.doublemode) $('PhotoSliderExtraElement1').hide();
    if (PhotoSliderSettings.random) {
      PhotoSliderSettings.nextpic = Math.floor(Math.random() * PhotoSliderSettings.pics);
      }
    else {
      // startpic op basis van clock. Dan gaat de slideshow verder bij 
      // hetzelfde image ook als je navigeert
      var oneruntime = (PhotoSliderSettings.interval + PhotoSliderSettings.duration);
      var showtime = (PhotoSliderSettings.pics * oneruntime);
      var currentTime = new Date();
      var it = Math.floor(currentTime.getTime() / showtime); // aantal iteraties
      var x = (it * showtime);
      
      //PhotoSliderSettings.nextpic = Math.ceil((currentTime - x) / (PhotoSliderSettings.interval + PhotoSliderSettings.duration));// (showtime * PhotoSliderSettings.pics);
      var rest = currentTime - x;
      PhotoSliderSettings.nextpic = Math.floor((rest / showtime) * PhotoSliderSettings.pics);
      PhotoSliderSettings.startfix = rest - (PhotoSliderSettings.nextpic * oneruntime);
      //$('feedback1').update(currentTime.getTime() + " / " + showtime + " = " + it + ". (" + x + "," + rest + ", " + PhotoSliderSettings.startfix + ")");
      }
    }
  if (PhotoSliderSettings.nextpic == PhotoSliderSettings.pics) { // last, restart first
    PhotoSliderSettings.nextpic = 1;
    }
  else {
    PhotoSliderSettings.nextpic++; // Next pic
    }
  
  if (PhotoSliderSettings.phase == 1) {
    PhotoSlide2();
    $('PhotoSliderElement2').hide();
    if (PhotoSliderSettings.doublemode) $('PhotoSliderExtraElement2').hide();
    }
  PhotoSliderSettings.phase = 1;
  if (PhotoSliderSettings.timeout1) self.clearTimeout(PhotoSliderSettings.timeout1);
  if (PhotoSliderSettings.timeout2) self.clearTimeout(PhotoSliderSettings.timeout2);
  if (PhotoSliderSettings.timeout3) self.clearTimeout(PhotoSliderSettings.timeout3);
  
  //$('feedback2').update(PhotoSliderSettings.nextpic);
  //$('id_of_element').fade({ duration: 3.0 });
  //$('id_of_element').appear({ duration: 3.0 });
  $('PhotoSliderElement2').src = PhotoSliderSettings.url[PhotoSliderSettings.nextpic - 1][0];
  $('PhotoSliderElement2').appear({ duration: (PhotoSliderSettings.duration / 1000) });
  var small = PhotoSliderSettings.nextpic;
  if (small >= PhotoSliderSettings.pics) small = 0;
  if (PhotoSliderSettings.doublemode)  {
    $('PhotoSliderExtraElement2').src = PhotoSliderSettings.url[small][1]; // Small is one ahead
    $('PhotoSliderExtraElement2').appear({ duration: (PhotoSliderSettings.duration / 1000) });
    }
  PhotoSliderSettings.timeout1 = self.setTimeout("PhotoSlide2()", PhotoSliderSettings.duration); // next run
  // preload next:
  if (PhotoSliderSettings.nextpic < PhotoSliderSettings.pics) {
    PhotoSliderSettings.loader1.src = PhotoSliderSettings.url[PhotoSliderSettings.nextpic][0]; // "/backgrounds/pic (" + (PhotoSliderSettings.nextpic + 1) + ").jpg";
    small++;
    if (small >= PhotoSliderSettings.pics) small = 0;
    if (PhotoSliderSettings.doublemode)  {
      PhotoSliderSettings.loader2.src = PhotoSliderSettings.url[small][1]; // "/backgrounds/pic (" + (PhotoSliderSettings.nextpic + 1) + ").jpg";
      }
    }
}
  
function PhotoSlide2 () {
  PhotoSliderSettings.phase = 2;
  if (PhotoSliderSettings.timeout1) self.clearTimeout(PhotoSliderSettings.timeout1);
  if (PhotoSliderSettings.timeout2) self.clearTimeout(PhotoSliderSettings.timeout2);
  if (PhotoSliderSettings.timeout3) self.clearTimeout(PhotoSliderSettings.timeout3);
  if (!PhotoSliderSettings.enabled) return false;
  $('PhotoSliderElement1').show();
  $('PhotoSliderElement1').src = $('PhotoSliderElement2').src;
  if (PhotoSliderSettings.doublemode)  {
    $('PhotoSliderExtraElement1').show();
    $('PhotoSliderExtraElement1').src = $('PhotoSliderExtraElement2').src;
    }
  var time = PhotoSliderSettings.interval;
  if (PhotoSliderSettings.startfix > 0) {
    time -= PhotoSliderSettings.startfix;
    if (time < 2) time = 2;
    PhotoSliderSettings.startfix = 0;
    }
  PhotoSliderSettings.timeout3 = self.setTimeout("$('PhotoSliderElement2').hide();", Math.floor(time / 2)); 
  if (PhotoSliderSettings.doublemode) PhotoSliderSettings.timeout2 = self.setTimeout("$('PhotoSliderExtraElement2').hide();", Math.floor(time / 2)); 
  PhotoSliderSettings.timeout1 = self.setTimeout("PhotoSlide1()", time); // next run
}