var startSlideshow =  function() {
  var count = 4;
  var delay = 2000;
  var idx = 1;
  var el = $('slideshow');
  var img = el.down('img');
  var imgs = { 1: img };

  if(!el) return;

  function swapEl(el) { 
    el.style['zIndex'] = 501;
    img.style['zIndex'] = 500;

    el.appear({ afterFinish: function() { 
	  img.style['zIndex'] = 400;
	  img.style['display'] = "none";
	  img = el; 
	}
      }); 

  }
  function swapEv(ev) { swapEl(ev.element()); }

  function slide() {
    if(++idx > count) idx = 1;
    
    if(imgs[idx]) {
      swapEl(imgs[idx]);
    } else {
      imgs[idx] = new Image();
      imgs[idx].className = "swapin";
      $(imgs[idx]).observe('load', swapEv);
      el.appendChild(imgs[idx]);
      imgs[idx].src = "images/slideshow/" + idx + ".jpg";
      imgs[idx]['style']['width'] = img.clientWidth + "px";
      imgs[idx]['style']['height'] = img.clientHeight + "px";
      imgs[idx]['style']['display'] = "none"; 
    }
  }

  setInterval(slide, delay);
}

$(document).observe('dom:loaded', startSlideshow);