Event.observe('slideLeft', 'click', slide.bind(this, 1));
Event.observe('slideRight', 'click', slide.bind(this, 0));

var iActiveBox = iStartBox;
var bProgress = false;
var oShuttle  = $('shuttle');
var oTimeout = null

document.observe("dom:loaded", function() {
  oTimeout = setTimeout("slide(0)", 5000);
});

function slide(bLeft, e) {
  if(!bProgress) {
    bProgress = true;
    if(bLeft) { //left
      new Effect.Move(oShuttle, { x: iBoxWidth, y: 0, mode: 'relative', afterFinish: function() {
        if(iActiveBox < 0) {
          iActiveBox = iBoxCount;
          oShuttle.style.left = (iBoxWidth * (iStartBox - iBoxCount)) + 'px';
        }
        clearTimeout(oTimeout);
        oTimeout = setTimeout("slide(0)", 5000);
        bProgress = false;
        }});
      iActiveBox--;
    } else { //right
      new Effect.Move(oShuttle, { x: -iBoxWidth, y: 0, mode: 'relative', afterFinish: function() {
        if(iActiveBox > iBoxCount) {
          iActiveBox = 0;
          oShuttle.style.left = (iBoxWidth * iStartBox) + 'px';
        }
        clearTimeout(oTimeout);
        oTimeout = setTimeout("slide(0)", 5000);
        bProgress = false;
        }});
      iActiveBox++;
    }
  }
}