var ANIMATIONS = [];

/* Start a slideshow animation with the supplied element IDs
 *
 * @param slides            Element IDs of each photo-containing div
 * @param displayLength     Length of time to display image in seconds
 * @param transitionLength  Length of time to transition image in seconds
 */
function start_slideshow(slides, displayLength, transitionLength) {
  var animation = [];
  // create animation object
  for (var i = 0, il = slides.length; i < il; i++) {
    var slide = slides[i];
    var nextSlide = slides[(i < (il - 1) ? i + 1 : 0)];
    
    // ensure current slide is displayed
    animation.push({
        id: slide,
        display: "block",
        opacity: 1.00,
        zIndex: 0,
        timeout: (displayLength * 1000)
    });
    
    // step up opacity on next slide
    for (var o = 1, ol = 20; o < ol; o++) {
      animation.push({
          id: nextSlide,
          display: "block",
          opacity: (o/ol),
          zIndex: 1,
          timeout: (transitionLength / ol * 1000)
      });
    }
    
    // hide current slide
    animation.push({
        id: slide,
        display: "none",
        opacity: 1.00,
        zIndex: 0,
        timeout: 0
    });
  }
  
  var length = ANIMATIONS.push(animation);
  animate((length - 1), 0);
}

function animate(animations_index, index) {
  var animation = ANIMATIONS[animations_index];
  
  if (index == animation.length) {
    index = 0;
  }
  
  if (index < animation.length) {
    var frame = animation[index];
    var e = document.getElementById(frame.id);
    if (e) {
      e.style.opacity = frame.opacity;
      e.style.filter = "alpha(opacity=" + (frame.opacity * 100) + ")";
      e.style.zIndex = frame.zIndex;
      e.style.display = frame.display;
    }
    var t = window.setTimeout("animate(" + animations_index + "," + (index + 1) + ")", frame.timeout);
  }
}