window.addEvent('domready', function() {
	
	// Let's define some variables first
	var carousel = $('carousel'); // The inner wrapper
	var items = $$('#carousel div'); // The different elements, this is an array
	var distance = 185; // The full distance of a single item (incl. borders, padding, etc ... if there is any)
	
	// Set up the animation
	var animation = new Fx.Tween(carousel, {duration: 700,link: 'cancel'});
	
	// The function to browse forward
	function item(pos){
		var newposition = 0 - (distance * pos);
		animation.start('top', newposition);
	}
	
	// Init buttons
	
	$('pic_1').addEvent('mouseover', function(){
		item(0);
	});
	
	$('pic_2').addEvent('mouseover', function(){
		item(1);
	});
	
	$('pic_3').addEvent('mouseover', function(){
		item(2);
	});
	
	$('pic_4').addEvent('mouseover', function(){
		item(3);
	});
	
	$('pic_5').addEvent('mouseover', function(){
		item(4);
	});
	
	$('pic_6').addEvent('mouseover', function(){
		item(5);
	});
	
	$('pic_1').addEvent('click', function(){
		item(0);
	});
	
	$('pic_2').addEvent('click', function(){
		item(1);
	});
	
	$('pic_3').addEvent('click', function(){
		item(2);
	});
	
	$('pic_4').addEvent('click', function(){
		item(3);
	});
	
	$('pic_5').addEvent('click', function(){
		item(4);
	});
	
	$('pic_6').addEvent('click', function(){
		item(5);
	});
	
});