function initCarousel() {
  var buttons = $$("#carouselButtons li");


  var counter = 0;
  var max = buttons.length;
  var interval = setInterval(function () {
	  counter = (counter + 1) % max;
	  showPane(counter);
  }, 3500);

  buttons.each(function (li, i) {
	  li.observe('click', function () { 
		  clearTimeout(interval);
		  showPane(i); 
		})
  });

  showPane(0);
}


function showPane(index) {
  var panes = $$("#carouselPanes li");
  panes.each(function (pane, i) {
	  pane[i == index ? "appear" : "fade"]({ duration: 0.5 });
  });
	var buttons = $$("#carouselButtons li");
	buttons.each(function (button, i) {
		if (i == index) {
			button.addClassName("active")
		} else {
			button.removeClassName("active")
		}
	});
}

Event.observe(document, "dom:loaded", initCarousel);