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

	var step = 1;
	var duration = 1;
	var repetition = 5;

	
	var originalwidth = parseInt($('inner').getStyle('width').replace("px", ""))
	$('inner').setStyle('width',$('inner').getStyle('width'));
	

	var content = $('inner').innerHTML;
	for (var x=1; x<=repetition; x++) {
		$('inner').innerHTML += content;
	}   
	
	$('inner').setStyle('width',originalwidth*repetition*2+'px')
	var newwidth = parseInt($('inner').getStyle('width').replace("px", ""))

	
	$('outer').setStyle('overflow','hidden');
	var direction = 'left';
	
	$('inner').setStyle('position','absolute');
	
	var maxwidth = parseInt($('outer').getStyle('width').replace("px", ""));;
	$('inner').setStyle('left', "0px");
	
	// 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('mouseover', function() {
			$clear(timer);
		})
		
		element.addEvent('mouseout', function() {
			timer = scroll.periodical(duration); 		
		})
		
	})
	
	var timer = scroll.periodical(duration);
	

});