var slides = new Array('biefstuk','varkenshaas','vleesa','brood','visa','visb','visc','aardbei','ijsflensje','brulee','asoep','salade','carpaccio','tsoep','uiensoep','appelgebak','saladezalm','schnitzel','keukenhulp');
var slideIndex = 0; // which slide are we viewing?
//var fadeTimer = 0.25; // time, in seconds, it takes to swap images
var swapTimer = 5; // time, in seconds, between image swaps

function initSwap() {
          // CAREFUL! we ASSUME there's a page element with id 'fadeBox' to
          // contain the effected images
          var fadeBox = document.getElementById('logo');
          // set up the actual images
          for(var i=0;i<slides.length;i++) {
              // hooray for the DOM
              var slide = document.createElement('img'); // a new image
              slide.src = 'img/'+slides[i]+'766.jpg'; // should show this image
              slide.style.position = 'absolute'; // important so images stay on top of each other
              slide.style.opacity = '0'; // init to transparent (CSS2)
              slide.style.filter = 'alpha(opacity:0)'; // init to transparent (MSIE)
              fadeBox.appendChild(slide); // put the image in the box
              slides[i] = slide; // reassign to same array for convenience
              // if it's the first image, let's show it now to avoid waiting
              if(i==0) {
                  fade(i,1); // fade it in!
                  setTimeout(doSwap,swapTimer*1000); // start the swap timer!
              }
              // repeat for each slide
          }
      }

      function doSwap() {
          var s1 = slideIndex; // where *are* we?
          var s2 = s1+1==slides.length?0:s1+1; // either the next or the first
          // we just wrapped to the beginning if we hit the end of the array, so...
          slideIndex = s2; // update slide index
          fade(s1,0); // fade the old slide out!
          fade(s2,1); // fade the new slide in!
          setTimeout(doSwap,swapTimer*1000); // do it again in swapTimer seconds!
      }

      function fade(whoid,dir) {
          var slide = slides[whoid]; // get the slide element at index whoid
          var completed; // so we know when the fade is done
          var opac = parseFloat(slide.style.opacity,10); // get a reference value
          // increment if fading in, decrement if fading out
          if(dir > 0) {
              opac += 1; // more opaque
              if(opac >= 1) {
                  // fade is at max! fade done!
                  completed = true;
              }
          } else {
              opac -= 1; // less opaque
              if(opac <= 0) {
                  // fade is at min! fade done!
                  completed = true;
              }
          }
          slide.style.opacity = opac; // set opacity (CSS2)
          slide.style.filter = 'alpha(opacity:'+(opac*100)+')'; // set opacity (MSIE)
          if(!completed) {
              // as long as the fade is not complete, keep doing this in 1/10 increments within fadeTimer seconds
              //setTimeout("fade("+whoid+","+dir+")", parseInt(fadeTimer/10,10));
              // as long as the fade is not complete, keep doing this in 1/50 increments within fadeTimer seconds
              setTimeout("fade("+whoid+","+dir+")", 1);
          }
      }
       
      // start it up when the page loads!
      // ideally you want to place this in an onload appender or manager - if you use
      // a lot of JS you may end up overriding your onload
      onload = initSwap;