var jsfade = {
  config : function() {
    /* general configuration */
    interval =         2000;       // interval between images (in msec)
    fadespeed =        1000;       // fade speed (in msec)
    
    /* image configuration */
    images = new Array();
    images['keukens'] = new Array(   // 1 array for each id
      'http://www.pronkergo.nl/images/home/keukens01.jpg',
      'http://www.pronkergo.nl/images/home/keukens02.jpg',
      'http://www.pronkergo.nl/images/home/keukens03.jpg',
      'http://www.pronkergo.nl/images/home/keukens04.jpg'                  // last item does NOT end with a comma
    );
    images['sanitair'] = new Array(   // 1 array for each id
      'http://www.pronkergo.nl/images/home/sanitair01.jpg',
      'http://www.pronkergo.nl/images/home/sanitair02.jpg',
      'http://www.pronkergo.nl/images/home/sanitair03.jpg',
      'http://www.pronkergo.nl/images/home/sanitair04.jpg',
      'http://www.pronkergo.nl/images/home/sanitair05.jpg',
      'http://www.pronkergo.nl/images/home/sanitair06.jpg'                  // last item does NOT end with a comma
    );
    images['meubilair'] = new Array(   // 1 array for each id
      'http://www.pronkergo.nl/images/home/meubilair01.jpg',
      'http://www.pronkergo.nl/images/home/meubilair02.jpg',
      'http://www.pronkergo.nl/images/home/meubilair03.jpg',
      'http://www.pronkergo.nl/images/home/meubilair04.jpg'                  // last item does NOT end with a comma
    );
    images['tilliften'] = new Array(   // 1 array for each id
      'http://www.pronkergo.nl/images/home/tilliften01.jpg',
      'http://www.pronkergo.nl/images/home/tilliften02.jpg',
      'http://www.pronkergo.nl/images/home/tilliften03.jpg'                  // last item does NOT end with a comma
    );
  },

  init : function(id) {
    /* create helper elements to allow fading */
    var back = id + '_back';
    var front = id + '_front';
    document.getElementById(id).innerHTML += '<span style="width: 0; height: 0; margin: 0; padding: 0; border: 0" id="'+back+'"></span><span style="width: 0; height: 0; margin: 0; padding: 0; border: 0" id="'+front+'"></span>';

    /* remove style of helpers */
    document.getElementById(back).style.width = document.getElementById(id).offsetWidth+'px';
    document.getElementById(front).style.width = document.getElementById(back).style.width;
    document.getElementById(back).style.height = document.getElementById(id).offsetHeight+'px';
    document.getElementById(front).style.height = document.getElementById(back).style.height;
    document.getElementById(back).style.left = jsfade.getposx(id)+'px';
    document.getElementById(front).style.left = document.getElementById(back).style.left;
    document.getElementById(back).style.top = jsfade.getposy(id)+'px';
    document.getElementById(front).style.top = document.getElementById(back).style.top;
    document.getElementById(back).style.position = 'absolute';
    document.getElementById(front).style.position = 'absolute';
    document.getElementById(back).style.zIndex = '-101';
    document.getElementById(front).style.zIndex = '-100';

    /* shuffle images */
    images[id].sort( function() { return 0.5 - Math.random() } );

    /* insert first background */
    document.getElementById(front).style.backgroundImage = "url('"+images[id][0]+"')";
  
    /* start timer */
    window.setTimeout('jsfade.change(\''+id+'\')',interval);
  },

  change : function(id) {
    /* copy previous image to back helper */
    var back = id + '_back';
    var front = id + '_front';
    document.getElementById(back).style.backgroundImage = document.getElementById(front).style.backgroundImage;
    
    /* shuffle images */
    images[id].sort( function() { return 0.5 - Math.random() } );

    /* fadeout to 0-level */
    jsfade.fade (0,front);
    
    /* insert new image */
    var i = 0;
    while (i < images[id].length && document.getElementById(back).style.backgroundImage == document.getElementById(front).style.backgroundImage) {
      document.getElementById(front).style.backgroundImage = "url('"+images[id][i]+"')";
      i++;
    }

    /* fadein */
    window.setTimeout('jsfade.fade('+10+',\''+front+'\');',Math.floor(fadespeed*1/10));
    window.setTimeout('jsfade.fade('+20+',\''+front+'\');',Math.floor(fadespeed*2/10));
    window.setTimeout('jsfade.fade('+30+',\''+front+'\');',Math.floor(fadespeed*3/10));
    window.setTimeout('jsfade.fade('+40+',\''+front+'\');',Math.floor(fadespeed*4/10));
    window.setTimeout('jsfade.fade('+50+',\''+front+'\');',Math.floor(fadespeed*5/10));
    window.setTimeout('jsfade.fade('+60+',\''+front+'\');',Math.floor(fadespeed*6/10));
    window.setTimeout('jsfade.fade('+70+',\''+front+'\');',Math.floor(fadespeed*7/10));
    window.setTimeout('jsfade.fade('+80+',\''+front+'\');',Math.floor(fadespeed*8/10));
    window.setTimeout('jsfade.fade('+90+',\''+front+'\');',Math.floor(fadespeed*9/10));
    window.setTimeout('jsfade.fade('+100+',\''+front+'\');',fadespeed);

    /* restart timer */
    window.setTimeout('jsfade.change(\''+id+'\')',interval+fadespeed);
  },
  
  fade : function(opacity, id) {
    /* fade image */
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100); 
    object.MozOpacity = (opacity / 100); 
    object.KhtmlOpacity = (opacity / 100); 
    object.filter = "alpha(opacity=" + opacity + ")"; 
  },

  getposx : function(id) {
    /* get X position of element */
    var returnvalue = 0;
    var elem = document.getElementById(id);
    while (elem != null) {
      returnvalue += elem.offsetLeft;
      elem = elem.offsetParent;
    }
    return returnvalue;
  },

  getposy : function(id) {
    /* get Y position of element */
    var returnvalue = 0;
    var elem = document.getElementById(id);
    while (elem != null) {
      returnvalue += elem.offsetTop;
      elem = elem.offsetParent;
    }
    return returnvalue;
  }
}
/* configure */
jsfade.config();