var f = window;
f.onchange = function () {
	var rgb = f.getRgb();
	var out = document.getElementById("color-picker-out");	
	out.firstChild.data = "#" + convert_to_hex(rgb.r) + convert_to_hex(rgb.g) + convert_to_hex(rgb.b);
};

// init code
var r = new Slider(document.getElementById("red-slider"), document.getElementById("red-slider-input"));
r.setMaximum(255);
var g = new Slider(document.getElementById("green-slider"), document.getElementById("green-slider-input"));
g.setMaximum(255);
var b = new Slider(document.getElementById("blue-slider"), document.getElementById("blue-slider-input"));
b.setMaximum(255);

var ri = document.getElementById("red-input");
ri.onchange = function () {
	r.setValue(parseInt(this.value));
};

var gi = document.getElementById("green-input");
gi.onchange = function () {
	g.setValue(parseInt(this.value));
};

var bi = document.getElementById("blue-input");
bi.onchange = function () {
	b.setValue(parseInt(this.value));
};

r.onchange = g.onchange = b.onchange = function () {
	var cr = document.getElementById("color-result");
	cr.style.backgroundColor = "rgb(" + r.getValue() + "," + 
								g.getValue() + "," + 
								b.getValue() + ")";
	ri.value = r.getValue();
	gi.value = g.getValue();
	bi.value = b.getValue();
	
	if (typeof window.onchange == "function")
		window.onchange();
};

r.setValue(128);
g.setValue(128);
b.setValue(128);

// end init

function setRgb(nRed, nGreen, nBlue) {
	r.setValue(nRed);
	g.setValue(nGreen);
	b.setValue(nBlue);
}

function getRgb() {
	return {
		r:	r.getValue(),
		g:	g.getValue(),
		b:	b.getValue()
	};
}

function fixSize() {
	r.recalculate();
	g.recalculate();
	b.recalculate();
}

window.onresize = fixSize;
fixSize();