window.onload= inter;

var imgs = new Array()
imgs[0] = "images/start01.jpg"  
imgs[1] = "images/start02.jpg"
imgs[2] = "images/start03.jpg"

var i = 1;
var depth = 0;
var out;
var fi;

function slide ()
{
  fadeout();
}

function inter()
{               
  document.getElementById("slideshow").style.backgroundImage = 'url(' + imgs[0] + ')'; //Zet het eerste plaatje neer

  setInterval("slide()", 4000); //Een loop opzetten om  zo de plaatjes te laten vervangen
}       

function fadeout()
{
  //de fade-out wordt hier aangeroepen in een interval
  out = setInterval( "faout()", 50);
}

function faout()
{
  //De ddorzichtigheid van het plaatje aanpassen
  document.getElementById("slideshow").style.opacity = 1 - 0.05 * depth;
  document.getElementById("slideshow").style.filter = 'alpha(opacity=' + (100 - 5 * depth) + ')';
  
  //Als de diepte 20 is geworden dan wordt er weer ingefade
  if (depth == 20)
  {
     clearInterval(out);    
     document.getElementById("slideshow").style.backgroundImage = 'url(' + imgs[i % 3] + ')';
     i++;
     fadein();
  }
  
  depth++;
}

function fadein()
{
   fi = setInterval( "fa_in()", 50);
}

function fa_in()
{
  //Ook weer de doorzichtigheid aanpassen, maar nu de andere kant op. Hij wordt dus weer zichtbaar
  document.getElementById("slideshow").style.opacity = 1 - 0.05 * depth;
  document.getElementById("slideshow").style.filter = 'alpha(opacity=' + (100 - 5 * depth) + ')';
  
  if (depth == 0)
  {
     clearInterval(fi);
  }
  
  depth--;
}