window.addEvent('domready', function() { 
	
	// Let's define some variables first
	var wrapper = $('wrap'); // The outer wrapper
	var carousel = $('carousel'); // The inner wrapper
	var items = $$('#carousel li'); // The different elements, this is an array
	var CarouselBg = $('CarouselBg');
	var item_width = 1000; // The full width of a single item (incl. borders, padding, etc ... if there is any)
	var max_margin = items.length * item_width - item_width;

	// Set up the animation
	var animation = new Fx.Tween(carousel, {duration: 600});
	var CarBgAnim = new Fx.Tween('CarouselBg', {
		duration: 600,
		property: 'background-position',
		transition: Fx.Transitions.Quart.easeInOut
		});

	// The function to browse forward
	var active = 0;
	function change_position(pos, clicked){
		
		//Change class of clicked element
		if(active != clicked){
			$('Gallery-Thumb-' + clicked).className = 'active';
			$('Gallery-Thumb-' + active).className = 'inactive';
		}
		
		var newposition = -1 * (clicked * item_width);
		animation.start('left', newposition);
		
		if(newposition != 0 && active == 0){
			CarBgAnim.start('center 210px','center 255px');
			active = clicked;
		}else if(newposition == 0 && active != 0){
			CarBgAnim.start('center 255px','center 210px');
			active = 0;
		}
		
		active = clicked;
		
	}
	
	// Set up the icons
	$('change_position_0').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		change_position(position, 0);
	})
	
	$('change_position_1').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		change_position(position, 1);
	})
	
	$('change_position_2').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		change_position(position, 2);
	})
	
	$('change_position_3').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		change_position(position, 3);
	})
	
	$('change_position_4').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		change_position(position, 4);
	})
	
	$('change_position_5').addEvent('click', function(){
		var position = parseInt(carousel.getStyle('left'));
		change_position(position, 5);
	})
	
});