gistfile1.js

<div id="slideshow">
  <img id="home_main" style="margin-bottom: 0px;" src="{{skin url='images/media/slideshow/slide1.jpg'}}" />
</div>
<h1><a href="{{store url="design-build"}}">We can help you design and build your next coffee bar!</a></h1>

<script type="text/javascript">
var images = new Array();
images[0] = '{{skin url='images/media/slideshow/slide1.jpg'}}';
images[1] = '{{skin url='images/media/slideshow/slide2.jpg'}}';
images[2] = '{{skin url='images/media/slideshow/slide3.jpg'}}';
 
var index = 0;
var timer_id;

function makeSlides() {
  var box;
  for(var index=0 ; index < images.length ; index++) {
    box = new Element('div', {id: 'box'+index, class: 'slideshow-box', onmouseover: "$(this).addClassName('active')", onmouseout: "$(this).removeClassName('active')", onclick: "changeSlide(" + index + ")"});
    $('slideshow').insert(box);
  }
}

function pushSlide() {
}

function changeSlide(num) {
  clearTimeout(timer_id);
  oldIndex = index;
  new Effect.Opacity('home_main', {from: 1.0, to: 0.0, duration: 0.5, queue: {position: 'front', scope: 'slideshow'}, afterFinish: function() { $('home_main').src=images[num]; $('box' + oldIndex).removeClassName('current'); $('box' + num).addClassName('current');}});
  new Effect.Opacity('home_main', {from: 0.0, to: 1.0, duration: 0.5, queue: {position: 'end', scope: 'slideshow'}});

  index = num;
  if(index < images.length - 1)
    timer_id=setTimeout('changeSlide(' + (index+1) +')', 10000);
  else
    timer_id=setTimeout('changeSlide(0)', 10000);
}

makeSlides();
timer_id=setTimeout('changeSlide(1)', 10000);
</script>