var slideIndex = 0; // which slide are we viewing?
var fadeTimer = 500; // time, in seconds, it takes to swap images
var swapTimer = 3; // time, in seconds, between image swaps
 
var jsSlideShow = {
  addEvent: function(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
      elm.addEventListener(evType, fn, useCapture);
      return true;
    } else if (elm.attachEvent) {
      var r = elm.attachEvent('on' + evType, fn);
      return r;
    } else {
     elm['on' + evType] = fn;
    }
  },

  initSwap: function() {
    // CAREFUL! we ASSUME there's a page element with id 'fadeBox' to 
    // contain the effected images
    var fadeBox = document.getElementById('fadeBox');
    // 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 = "images/collection/" + slides[i]; // should show this image
        slide.style.position = 'absolute'; // important so images stay on top of each other
        slide.style.left = '0';
        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) { 
            jsSlideShow.fade(i,1); // fade it in!
            setTimeout(jsSlideShow.doSwap, swapTimer*1000); // start the swap timer!
        }
        // repeat for each slide
    }
  },
 
  doSwap: function() {
    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
    jsSlideShow.fade(s1,0); // fade the old slide out!
    jsSlideShow.fade(s2,1); // fade the new slide in!
    setTimeout(jsSlideShow.doSwap, swapTimer*1000); // do it again in swapTimer seconds!
  },
 
  fade: function(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("jsSlideShow.fade("+whoid+","+dir+")", parseInt(fadeTimer/10,10));
    }
  },
  
  destroy: function() {
  }
}
 
jsSlideShow.addEvent(window, 'load', jsSlideShow.initSwap);
jsSlideShow.addEvent(window, 'unload', jsSlideShow.destroy);