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

	var step = 1;
	var duration = 1;
	var direction = 'left';
	var total_width = 0
	
	$$('#inner a').each(function(element){
		total_width++;
	});
	
	$('outer').setStyle('overflow','hidden');
	$('inner').setStyle('position','absolute');	
	$('inner').setStyle('left', '0px');
	$('inner').setStyle('width', (total_width*134));
	
	
	var maxwidth = $('outer').getStyle('width').toInt();
		
	// Set the direction left
	$('left').addEvent('mouseover', function() {
		direction = 'left';
	})
	
	// Set direction as right
	$('right').addEvent('mouseover', function() {
		direction = 'right';	
	})
	
	// The actual scrolling function
	var scroll = function() {
		
		var left = parseInt($('inner').getStyle('left').replace("px", ""));
		var width = parseInt($('inner').getStyle('width').replace("px", ""));
		
		if(direction == 'left') {		
			newleft = left - step + "px";
		} else {
			newleft = left + step + "px";
		}
		
	
		if(direction == 'left' && left < 0 - width) {
			newleft = maxwidth + "px";
			//direction = 'right';
		};		
		
		if(direction == 'right' && left > maxwidth) {
			newleft = 0 - width + "px";		
			//direction = 'left';
		};		
		
		$('inner').setStyle('left',newleft);		
	}
	 	
	// Stop on mosueover
	$$('#inner a').each(function(element) {
		element.addEvent('mouseenter', function() {
			$clear(timer);
		})
		
		element.addEvent('mouseleave', function() {
			timer = scroll.periodical(duration); 		
		})
		
	})
	
	var timer = scroll.periodical(duration);
	

});