Event.observe(window, 'load', function() {

/* --- mouse over hover states for carousel buttons --- */

  Event.observe('prev-arrow', 'mouseover', function(event) {
    var element = Event.element(event);
    carouselNavMouseOver(element);
  });
  Event.observe('next-arrow', 'mouseover', function(event) {
    var element = Event.element(event);
    carouselNavMouseOver(element);
  });

  Event.observe('prev-arrow', 'mouseout', function(event) {
    var element = Event.element(event);
    carouselNavMouseOut(element);
  });
  Event.observe('next-arrow', 'mouseout', function(event) {
    var element = Event.element(event);
    carouselNavMouseOut(element);
  });

/* --- carousel image clicks --- */

  for (var i = 1; i < carouselItemCount + 1; i++)
  {
    Event.observe(carouselItemPrefix + i, 'click', function(event) {
      var clickedItem = Event.element(event);
      displayLargeImage(clickedItem);
    });
  }

});