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

//alert('check');
	
// ------------------------------------------------------------------------------------------ //
	
	var w = $('liste_items').getStyle('width').toInt() - $('liste_items_container').getStyle('width').toInt();

	var nbItems = Math.round(w / itemW);
	var scrollStep = itemW;
	
	knobW = $('myElement').getStyle('width').toInt() / nbItems;
	$('myKnob').setStyle('width',knobW);
	$('myKnob').setStyle('visibility', 'visible');
	
	var myHorizontalSlide = new Fx.Tween('liste_items', {property: 'left', link:'cancel'});
	var curStep = 0;
	
	var stepW = ($('myElement').getStyle('width').toInt() - knobW) / nbItems;
	
// ------------------------------------------------------------------------------------------ //
	
	// First Example
	var el = $('myElement');
	
	function moveItems(step) {
		var pos = -(scrollStep*step);
		myHorizontalSlide.start(pos);
			$('counter').set('text',(step+1)+"/" +(nbItems+1));
	}
	
	// Create the new slider instance
	var slider = new Slider(el, el.getElement('.knob'), {
		steps: nbItems,
		onChange: function(value){
			moveItems(value);
			curStep = value;
		}
	}).set(curStep);
	
// ------------------------------------------------------------------------------------------ //

	$('scroll_prev').addEvent('click', function(){
			if (curStep > 0) {
				curStep--;
				moveItems(curStep);
				$('myKnob').setStyle('left', curStep*stepW);
			};
	});
	$('scroll_next').addEvent('click', function(){
			if (curStep < nbItems) {
				curStep++;
				moveItems(curStep);
				$('myKnob').setStyle('left', curStep*stepW);
			};
	});
	


});