// automatic image crossfader with pause on mouseover  
// written By B Ueffing (ontoerekeningsvatbaar gmail com), 
// please copy, modify (let me know!!), distribute etc.
//                                                     
// it's designed to throw whatever content you put in the contentArray 
// into a containerdiv using the innerHTML property. 
// If you want to display anything other then images you have to tweak 
// the function assembleContent a bit.  
//
// -supports IE/Firefox/others (not tested)
// -does NOT support the opera browser
//
// **advantages: 
// -crossfades anything (at lease in Firefox)
// -elements can have diffent sizes
// -pauses on mouseover
// -preloads images
// -possibility to define hyperlinks 
//  
// **disadvantages:
// -absolute placement - might cause some problems with positioning
// -innerHTML is not part of the DOM specifications, 
//  but it won't disappear in the short term. 

var steps = 10;               // number of steps from 100% opacity to 0%
var fadeTime = 500;           // fade time in ms
var displayTime = 5000;       // time to display individual items in ms

var contentClass = 'links_iconen';    // OPTIONAL: define css classname for container div
var target = '_blank'         // OPTIONAL: setup hyperlink target

var contentArray = new Array();
contentArray[0] = assembleContent(
  'logo_yesicoon.gif',   // imagename
  '#',   // OPTIONAL hyperlink
  'terug naar de beginpagina'                            // OPTIONAL image title text
  );
contentArray[1] = assembleContent(
  'logo_memberofnapo.gif',
  'http://www.napoweb.nl',
  'bezoek de website van de Nederlandse Au Pair organisatie'
   );

  //var newImg = new Array();
function assembleContent(imageUrl,link,title,text){
  //optional image preload, uncomment to use it (usually not needed here)
  //newImg[imageUrl] = new Image();
  //newImg[imageUrl].src = imageUrl;
  var content = '';
  if (link) {
    content += '<a href="' + link + '" ';
    if (target) {
      content += 'target="' + target + '" ';
    }
    content += '>';
  }
  content += '<img src="' + imageUrl + '" ';
  if (title) {
    content += 'title="' + title + '" ';
  }
  content += ' \/>';
  if (link) {
    content += '<\/a>';
  }
  return content;
}
  
var inactiveID = 0;
var contentIndex = 0;

function rotatieStart() {
  // creates the first item and writes it to 'flikker_hierin'
  var flikker_hierin = document.getElementById('flikker_hierin');
  var divToShow = flikker_hierin.appendChild(document.createElement('div'));
  divToShow.id = 'div_0';
  divToShow.style.opacity=0.99;
  divToShow.style.filter = 'alpha(opacity=100)';
  divToShow.style.position='absolute';
  divToShow.style.zIndex='1';  //making sure that this item is still clickable when starting to fade
  if (contentClass) { 
    divToShow.className = contentClass 
  }
  var divToShowContent = contentArray[contentIndex];
  divToShow.innerHTML = divToShowContent;   
  inactiveID++;
  contentIndex++;
  roteerContent();
  document.getElementById('flikker_hierin').removeChild(document.getElementById('altlogos'));
}

function roteerContent() {
  // creates a new item. this item is hidden till fade is executed
  var len = contentArray.length;
  if(contentIndex >= len) { 
    contentIndex = 0; 
  }
  var flikker_hierin = document.getElementById('flikker_hierin');
  var divToShow = flikker_hierin.appendChild(document.createElement('div'));
  divToShow.style.display = 'none';
  divToShow.id = 'div_' + inactiveID;
  divToShow.style.opacity=0;
  divToShow.style.filter = 'alpha(opacity=0)';
  divToShow.style.position='absolute';
  divToShow.style.zIndex='0';  //putting it behind so the fading item is still clickable when this one fades in
  if (contentClass) { 
    divToShow.className = contentClass 
  }
  var divToShowContent = contentArray[contentIndex];
  divToShow.innerHTML = divToShowContent; 
  contentIndex++;
  timerID = setTimeout("fade()", displayTime);
 }

function fade() {
  //fading 2 seperate divs so it looks like a crossfade
  divToShow = document.getElementById('div_' + inactiveID);
  divToShow.style.display = 'block';
  divToHide = document.getElementById('div_' + (inactiveID -1));
  divToHide.style.opacity=parseFloat(divToHide.style.opacity)-(0.99/steps); 
  divToShow.style.opacity=parseFloat(divToShow.style.opacity)+(0.99/steps);
  if (divToHide.filters) { // stupid IE proprietary method
    divToHide.filters.alpha.opacity-=(100/steps);
    divToShow.filters.alpha.opacity+=(100/steps);
  }
  //resize when content differs in size, experimental
  /*var nodeWidth = ((divToShow.offsetWidth - divToHide.offsetWidth)*(divToShow.style.opacity/1)) + divToHide.offsetWidth;
  var nodeHeight = ((divToShow.offsetHeight - divToHide.offsetHeight)*(divToShow.style.opacity/1)) + divToHide.offsetHeight;
	for (var itemi=0; itemi < divToHide.childNodes.length; itemi++) {
		var item = divToHide.childNodes[itemi];
		if (item.nodeName == "IMG") {
      item.width = nodeWidth;
      item.height = nodeHeight;
		}
	}*/

  if(divToHide.style.opacity == 0 || (divToHide.filters && divToHide.filters.alpha.opacity == 0)) {
    document.getElementById('flikker_hierin').removeChild(divToHide);
    divToShow.style.zIndex = '1'; // putting it in front of the item that will fade in later so it is still clickable during fade out
    inactiveID++;
    roteerContent();  
  }
  else { timerID = setTimeout("fade()",fadeTime/steps); }
}

function pauseer(){
  if (timerID != null) {
     clearTimeout(timerID);
     timerID = null;
  }
}

function herstart() {
  timerID = setTimeout("fade()",2000); // time till resume after mouseout in ms
}