window.addEvent('domready', function(){
	var el = $(document.body).getElements('input.slidetext');
	color=new Array(1);
	for(a=0;a<el.length;a++){
		color[a] = Number(el[a].value);
	}
	
	var updateColor = function(i){
		if(!i){
			for(i=0;i<el.length;i++){
				el[i].set('value', color[i]);
			}
			return;
		}
		// Sets the color of the output text and its text to the current color
		//alert(el.length);
		el[i].set('value', color[i]);
	};
	//alert(el);
	
	$$('div.slider.advanced').each(function(el, i){
		var slider = new Slider(el, el.getElement('.knob'), {
			steps: el.getAttribute('steps'),  // Steps from 0 to 255
			wheel: true, // Using the mousewheel is possible too
			//this.step=$(el).getElements('input.slidetext')[0].value;
			onChange: function(){
				// Based on the Slider values set an RGB value in the color array
				color[i] = this.step;
				// and update the output to the new value
				updateColor(i);
			}
		}).set(color[i]);
	});
	
	// We call that function to initially set the color output
	updateColor();

});