<?xml version="1.0"?>
<?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	xmlns:html="http://www.w3.org/1999/xhtml"
	oninput="cal()" onchange="cal()">
<hbox>
	<label value="顯示色彩一："/>
	<textbox id="s1r" type="number" size="2" maxlength="3" max="255" min="0" value="0"/>
	<textbox id="s1g" type="number" size="2" maxlength="3" max="255" min="0" value="0"/>
	<textbox id="s1b" type="number" size="2" maxlength="3" max="255" min="0" value="0"/>
</hbox>
<hbox>
	<label value="顯示色彩二："/>
	<textbox id="s2r" type="number" size="2" maxlength="3" max="255" min="0" value="0"/>
	<textbox id="s2g" type="number" size="2" maxlength="3" max="255" min="0" value="0"/>
	<textbox id="s2b" type="number" size="2" maxlength="3" max="255" min="0" value="0"/>
</hbox>
<spacer height="10"/>
<hbox>
	<label value="背景色彩一："/>
	<textbox id="b1r" type="number" size="2" maxlength="3" max="255" min="0" value="0"/>
	<textbox id="b1g" type="number" size="2" maxlength="3" max="255" min="0" value="0"/>
	<textbox id="b1b" type="number" size="2" maxlength="3" max="255" min="0" value="0"/>
</hbox>
<hbox>
	<label value="背景色彩二："/>
	<textbox id="b2r" type="number" size="2" maxlength="3" max="255" min="0" value="0"/>
	<textbox id="b2g" type="number" size="2" maxlength="3" max="255" min="0" value="0"/>
	<textbox id="b2b" type="number" size="2" maxlength="3" max="255" min="0" value="0"/>
</hbox>
<hbox>
	<label value="原色彩："/>
	<textbox id="o" value="0" size="25"/>
</hbox>
<script type="application/x-javascript">
<![CDATA[
var textboxes = document.getElementsByTagName("textbox");
for (var i = 0; i < textboxes.length; i++)
	if (textboxes[i].id != "o") eval("var " + textboxes[i].id + "=" + textboxes[i].value);
var o = document.getElementById("o");

function update(){
	for(var i = 0; i < textboxes.length; i++)
		if(textboxes[i].id != "o") eval(textboxes[i].id + "=" + textboxes[i].value);
}

function cal(){
	update();

	var deltabr = Math.abs(b1r - b2r);
	var deltabg = Math.abs(b1g - b2g);
	var deltabb = Math.abs(b1b - b2b);
	var deltab = Math.max(deltabr , deltabg, deltabb);

	var s2rBox = document.getElementById("s2r");
	var s2gBox = document.getElementById("s2g");
	var s2bBox = document.getElementById("s2b");

	s2rBox.disabled = deltab != deltabr;
	s2gBox.disabled = deltab == deltabr || deltab != deltabg;
	s2bBox.disabled = deltab == deltabr || deltab == deltabg;

	if(!s2rBox.disabled)
		var deltas = Math.abs(s1r - s2r);
	else if(!s2gBox.disabled)
		var deltas = Math.abs(s1g - s2g);
	else
		var deltas = Math.abs(s1b - s2b);

	var ap = 100 - deltas / deltab * 100;

	var  r = parseInt( (s1r * 100 - b1r * (100 - ap)) / ap );
	var  g = parseInt( (s1g * 100 - b1g * (100 - ap)) / ap );
	var  b = parseInt( (s1b * 100 - b1b * (100 - ap)) / ap );
	var a = parseInt(255 * ap / 100);

	ap = parseInt(ap);

	o.setAttribute("value", r + ", " + g + ", " + b + ", "+ a + " (" + ap + "%)");
}
]]>
</script>

</window>