window.addEvent('load', function(event){
	var wrapper = $('CarouselWrapper'); // The outer wrapper
	var carousel = $('CarouselContent'); // The inner wrapper
	var items = $$('#CarouselContent li'); // The different elements, this is an array
	var item_width = 566; // The full width of a single item (incl. borders, padding, etc ... if there is any)
	var max_margin = items.length * item_width - item_width;

	var animation = new Fx.Tween(carousel, {duration: 500});

	$('next').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('margin-left'));
		next_item(position);
	});
	$('previous').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('margin-left'));
		previous_item(position);
	});

	function next_item(pos){
		if(pos == -max_margin){
			animation.start('margin-left', 0);
		} else {
			var newposition = pos - item_width;
			animation.start('margin-left', newposition);
		}
	}

	function previous_item(pos){
		if(pos == 0){
			animation.start('margin-left', -max_margin);
		} else {
			var newposition = pos + item_width;
			animation.start('margin-left', newposition);
		}
	}
});