function runCarousel() {
	hCarousel = new UI.Carousel("filmstrip");
}

Event.observe(window, "load", runCarousel);

// highlight the proper tab at the end of the slide
document.observe('carousel:scroll:ended', function(event) {
	var slideIndex = Math.round(hCarousel.currentIndex());
	if(slideIndex == 0) {
			$('btn-1').addClassName('active');
			stopPlayer();
	} else if(slideIndex == 1) {
			$('btn-2').addClassName('active');
			stopPlayer();
	} else if(slideIndex == 2) {
			$('btn-3').addClassName('active');
			stopPlayer();
	} else if(slideIndex == 3) {
			$('btn-4').addClassName('active');
			stopPlayer();
	} else if(slideIndex == 4) {
			$('btn-5').addClassName('active');
			stopPlayer();
	} else if(slideIndex == 5) {
			$('btn-6').addClassName('active');
			stopPlayer();
	}
	
	//starts the carousel timer
	timeCarousel(maxElements);
});

// remove the highlight at the start
document.observe('carousel:scroll:started', function(event) {
	// Decide which tab to make active based on which slide is currently being displayed (currentIndex)
	var slideIndex = Math.round(hCarousel.currentIndex());
	if(slideIndex == 0) {
			$('btn-1').removeClassName('active');
			stopPlayer();
	} else if(slideIndex == 1) {
			$('btn-2').removeClassName('active');
			stopPlayer();
	} else if(slideIndex == 2) {
			$('btn-3').removeClassName('active');
			stopPlayer();
	} else if(slideIndex == 3) {
			$('btn-4').removeClassName('active');
			stopPlayer();
	} else if(slideIndex == 4) {
			$('btn-5').removeClassName('active');
			stopPlayer();
	} else if(slideIndex == 5) {
			$('btn-6').removeClassName('active');
			stopPlayer();
	}
});


// event that shows/hides the carousel's previous/next buttons
Event.observe(window, 'load', function(){
        $$('#filmstrip').each(function(el){
              el.onmouseover  = function(){ this.addClassName('show-buttons'); }
              el.onmouseout  = function(){  this.removeClassName('show-buttons');  }
        });
		//starts the timer
		timeCarousel(maxElements);
    });

//activate relevant listeners
listenToCarousel($('filmstrip'));