window.addEvent('domready', function() {

	//make it change position after 5 seconds
	var repeat = function() {
		var position = parseInt(carousel.getStyle('left'));
		next_item(position);
	};
	var thetimer = repeat.periodical(5000);
	showDescription(0);

	// Let's define some variables first
	var wrapper = $('brand'); // The outer wrapper
	var carousel = $('carousel'); // The inner wrapper
	var items = $$('#carousel li'); // The different elements, this is an array
	var item_width = 220; // 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: 500});

	// The function to browse forward
	function next_item(pos){
		if(pos == -max_margin + 660){
			animation.start('left', 0);
			showDescription(0);
		} else {
			var newposition = pos - item_width;
			animation.start('left', newposition);
			showDescription(newposition);
		}
		$clear(thetimer);
		thetimer = repeat.periodical(5000);
	}

	// The function to browse backward
	function previous_item(pos){
		if(pos == 0){
			animation.start('left', -max_margin + 660);
			showDescription(-max_margin);
		} else {
			var newposition = pos + item_width;
			animation.start('left', newposition);
			showDescription(newposition);
		}
		$clear(thetimer);
		thetimer = repeat.periodical(5000);
	}

	// Set up the 'next' and 'previous' buttons
	  if($('next') == null){
	  }
	  else{
		$('next').addEvent('click', function(){
			var position = parseInt(carousel.getStyle('left'));
			next_item(position);
	
		  });
	  }

     if($('previous') == null){
     }
     else{   
		$('previous').addEvent('click', function(){
			var position = parseInt(carousel.getStyle('left'));
			previous_item(position);
	
		  });
	  }


	function showDescription(position){
		var currImage = (position/300*-1)+1;
		//$('alttext').innerHTML = $('img' + (currImage)).alt;
	}

});