/*
script vrij te gebruiken op http://clagnut.com/sandbox/imagefades/
*/
/*The initImage function makes the photo completely tranpsarent by using the setOpacity function to set its opacity to zero. The photo can then be made visible and faded in using the fadeIn function:*/

function initImage() {
  imageId = 'hoofdfoto';
  image = document.getElementById(imageId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(imageId,60); //startopacity, 0 geeft een te wit flikkerbeeld
}

/*The setOpacity function is passed an object and an opacity value. It then sets the opacity of the supplied object using four proprietary ways. It also prevents a flicker in Firefox caused when opacity is set to 100%, by setting the value to 99.999% instead.*/

function setOpacity(obj, opacity) {
  opacity = (opacity == 100)?99.999:opacity;
  
  // IE/Win
  obj.style.filter = "alpha(opacity:"+opacity+")";
  
  // Safari<1.2, Konqueror
  obj.style.KHTMLOpacity = opacity/100;
  
  // Older Mozilla and Firefox
  obj.style.MozOpacity = opacity/100;
  
  // Safari 1.2, newer Firefox and Mozilla, CSS3
  obj.style.opacity = opacity/100;
}

/*The fadeIn function uses a Timeout to call itself every 100ms with an object Id and an opacity. The opacity is specified as a percentage and increased 5% at a time. The loop stops once the opacity reaches 100%:*/

function fadeIn(objId,opacity) {
  if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity <= 100) {
      setOpacity(obj, opacity);
      opacity += 5;
      window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 10);//10 = miliseconden, 100 is te flikkerig
    }
  }
}