window.addEvent('domready', function(){
	var numberElements = $$('#rollStripe li').length;
	var widthElement = $$('#rollStripe li')[0].offsetWidth;
	$('rollStripe').setStyle('width', 2*numberElements*widthElement);
	$$('#rollStripe li').clone().injectInside('rollStripe');
	var ml=0;
	var morph = new Fx.Morph('rollStripe', { 'duration': 500 });
	
	
	var fxNext = function(e) {
		if (ml <= -widthElement*numberElements) {$('rollStripe').setStyle('margin-left', 0); ml=0;};
		ml=ml-widthElement;
		morph.start({marginLeft: ml});
	}
	
	var adEv = function(e){fxNext(e);periodical = fxNext.periodical(1000); }
	
	$('next').addEvent('mousedown', adEv);
	
	$('next').addEvent('mouseup', function(e) {	
		$clear(periodical);		
	});
	$('next').addEvent('click', function(e) {
		$('next-s').setStyle('display', 'block');
		setTimeout(resNext, 500);
	});
	var fxPrev = function(e) {
		if (ml >= 0) {ml = -widthElement*numberElements;$('rollStripe').setStyle('margin-left', ml)}
		ml=ml+widthElement;
		morph.start({marginLeft: ml});
	}
			
	$('previous').addEvent('mousedown', function(e) {		
		fxPrev(e);
		periodical = fxPrev.periodical(1000);
	});
	$('previous').addEvent('mouseup', function(e) {	
		$clear(periodical);
	});
	$('previous').addEvent('click', function(e) {
		$('previous-s').setStyle('display', 'block');
		setTimeout(resPrev, 500);
	});
	
	function resNext() {$('next-s').setStyle('display', 'none');}
	function resPrev() {$('previous-s').setStyle('display', 'none');}
	
});