/////////////////////////////////////////
/* SLIDER-Tool created by webdrache.ch */
/////////////////////////////////////////

// Assoziatives Array = literales Objekt in JavaScript
hexadezimal = { 0:"0", 1:"1", 2:"2", 3:"3", 4:"4", 5:"5", 6:"6", 7:"7", 8:"8", 9:"9", 10:"A", 11:"B", 12:"C", 13:"D", 14:"E", 15:"F" }
						
Event.observe(window, "load", function() {
	// Die Value-Werte nach jedem Refresh wieder auf Null setzen! 				
	/*$("frgb_r").value = 0;
	$("frgb_g").value = 0;
	$("frgb_b").value = 0;*/
	// SLIDER EXAMPLE (IE ab Version 5.5)
    new Control.Slider('slider_handle_r','slider_track_r', { axis:'horizontal', range:$R(0,255), values:$R(0,255), sliderValue:rgb_r(), onSlide:function(v){ $('slider_posi_r').innerHTML=v; $("frgb_r").value = v; update_rgb(v); }, onChange:function(v){ $('slider_posi_r').innerHTML=v; $("frgb_r").value = v; update_rgb(v); } }); 
    new Control.Slider('slider_handle_g','slider_track_g', { axis:'horizontal', range:$R(0,255), values:$R(0,255), sliderValue:rgb_g(), onSlide:function(v){ $('slider_posi_g').innerHTML=v; $("frgb_g").value = v; update_rgb(v); }, onChange:function(v){ $('slider_posi_g').innerHTML=v; $("frgb_g").value = v; update_rgb(v); } }); 
    new Control.Slider('slider_handle_b','slider_track_b', { axis:'horizontal', range:$R(0,255), values:$R(0,255), sliderValue:rgb_b(), onSlide:function(v){ $('slider_posi_b').innerHTML=v; $("frgb_b").value = v; update_rgb(v); }, onChange:function(v){ $('slider_posi_b').innerHTML=v; $("frgb_b").value = v; update_rgb(v); } }); 
});

// Die Value-Werte nach jedem Refresh wieder updaten! 				
function rgb_r() {
	var vr = $("frgb_r").value;
	$("slider_track_r").style.backgroundColor = "rgb(" + vr +",0,0)";
	return vr;
}
function rgb_g() {
	var vg = $("frgb_g").value;
	$("slider_track_g").style.backgroundColor = "rgb(0," + vg +",0)";
	return vg;
}
function rgb_b() {
	var vb = $("frgb_b").value;
	$("slider_track_b").style.backgroundColor = "rgb(0,0," + vb +")";
	return vb;
}

function update_rgb() {
    // Rotwert
	var cr = $("frgb_r").value;
	// Gruenwert
    var cg = $("frgb_g").value;
	// Blauwert
    var cb = $("frgb_b").value;
				
	hexcode_r = function() {
		erstestelle_r = parseInt(cr/16);
		zweitestelle_r = cr-(erstestelle_r*16);
		code_r = hexadezimal[erstestelle_r]+hexadezimal[zweitestelle_r];
		return code_r;
	}
				
	function hexcode_g() {
		erstestelle_g = parseInt(cg/16);
		zweitestelle_g = cg-(erstestelle_g*16);
		code_g = hexadezimal[erstestelle_g]+hexadezimal[zweitestelle_g];
		return code_g;
	}
			
	function hexcode_b() {
		erstestelle_b = parseInt(cb/16);
		zweitestelle_b = cb-(erstestelle_b*16);
		code_b = hexadezimal[erstestelle_b]+hexadezimal[zweitestelle_b];
		return code_b;
	}
				 
	// background-color: rgb(0,0,0); Nur den RGB-Code fuer das Farben-Styling verwenden! 
	$("slider_track_r").style.backgroundColor = "rgb(" + cr +",0,0)";
	//$("hexacode_r").innerHTML = hexcode_r();
	$("slider_track_g").style.backgroundColor = "rgb(0," + cg +",0)";
	//$("hexacode_g").innerHTML = hexcode_g();
	$("slider_track_b").style.backgroundColor = "rgb(0,0," + cb +")";
	//$("hexacode_b").innerHTML = hexcode_b();
	
	$("background").style.backgroundColor = "rgb(" + cr +","+ cg +","+ cb +")";
	$("farbwert").value = "#" + hexcode_r() + hexcode_g() + hexcode_b();
	//$("hexawert").innerHTML = "#" + hexcode_r() + hexcode_g() + hexcode_b();
}

///////////////////////////////////////
/* Ende SLIDER-Tool */
///////////////////////////////////////