window.addEvent('domready', function(){
	
	var gsteps = 255;
	var gwidth = 0;
	
	$$('div.milkbox').each(function(el,i){
		 size = el.getSize();
		 gwidth += size.size.x + 20;
	});
	
	// subtract container width	
	var gsize = $("gscontainer").getSize();
	gwidth -= gsize.size.x;
		
	var gel = $('gsinner');
	var updateGSlider = function(left){
		left *= gwidth/gsteps;
		gel.style.left=-left+"px";
	};
	
	updateGSlider(0);
	
	var myslider;
	$$('div.gslider').each(function(el, i){
		//el.setStyle('width',gsize.x);
		myslider = new Slider(el, el.getElement('.knob'), {
			steps: gsteps,  // Steps from 0 to 255
			wheel: true, // Using the mousewheel is possible too
			onChange: function(value){
				// Based on the Slider values set the new position
				updateGSlider( value);
			}
		}).set(0);
	});

	$('mleft').addEvent("mousedown", function(event){
//event.preventDefault();
		//myslider.step = Math.min(myslider.max ,myslider.step-20);
		if(myslider.step-20 < 0)
			{myslider.step = 0;}
		else
			{myslider.step = myslider.step-20;}
		myslider.checkStep();
		position = myslider.toPosition(myslider.step);
		
		myslider.knob.setStyle('left', position);
		});

	$('mright').addEvent("mousedown", function(event){
//event.preventDefault();
		//myslider.step = Math.min(myslider.max ,myslider.step+20);
		if(myslider.step+20 > myslider.max-(myslider.half*2))
			{
				myslider.step = myslider.max-(myslider.half*2)-2 ;
			}
		else
			{
				myslider.step = myslider.step +20;
				//console.log(myslider.max + " - " + myslider.half + " - " + myslider.step);
			}
		myslider.checkStep();
		position = myslider.toPosition(myslider.step);
		myslider.knob.setStyle('left', position);
	});
	
});