window.addEvent('domready', function(){
    
    /******************************************************
    the scrolling carousel functionality
    ******************************************************/

	// create the scroll effect object
	var scroll = new Fx.Scroll('carousel-inner', {
		wait: false,
		duration: 500,
		offset: {'x': 0, 'y': 0},
		transition: Fx.Transitions.Quad.easeOut
	});
	
	var inner = $('carousel-inner');
	inner.setStyle('overflow', 'hidden');
	
	// get a list of all carousel items
	var carouselItems = $$('#carousel-content li');
	
	// define how many carousel items are in each set
	var itemsPerSet = 3;
	
	// set the currently displayed set of items
	var currItem = 1;
	
	// set the max that currItem can be
	var currItemMax = carouselItems.length-itemsPerSet;

	// tell the next button what to do
	var nextBtn = $('carousel-next');
	nextBtn.addEvent('click', function(e){
		e = new Event(e).stop();
		// if it's not the last item set, scroll it!
		if(currItem < currItemMax) {
			currItem = currItem+itemsPerSet;
			scroll.toElement(carouselItems[currItem-1]);
		}
	});
	
	// tell the prev button what to do
	var prevBtn = $('carousel-previous');
	prevBtn.addEvent('click', function(e){
		e = new Event(e).stop();
		// if it's not the first item set, scroll it!
		if(currItem > 1) {
			currItem = currItem-itemsPerSet;
			scroll.toElement(carouselItems[currItem-1]);
		}
	});
});