// Copyright 2007 Ryo Ueda. ALL Rights Reserved.
// URI:http://w3g.jp/script/color
function changeBgcolor() {
if (document.getElementById('bcctl').point.options[document.getElementById('bcctl').point.selectedIndex].value == "textcolor") {
var te = document.getElementById('te');
te.style.color = "#"
+ document.getElementById('bcctl').rvalA.options[document.getElementById('bcctl').rvalA.selectedIndex].value
+ document.getElementById('bcctl').rvalB.options[document.getElementById('bcctl').rvalB.selectedIndex].value
+ document.getElementById('bcctl').gvalA.options[document.getElementById('bcctl').gvalA.selectedIndex].value 
+ document.getElementById('bcctl').gvalB.options[document.getElementById('bcctl').gvalB.selectedIndex].value
+ document.getElementById('bcctl').bvalA.options[document.getElementById('bcctl').bvalA.selectedIndex].value
+ document.getElementById('bcctl').bvalB.options[document.getElementById('bcctl').bvalB.selectedIndex].value;
var r1 = document.getElementById('bcctl').rvalA.options[document.getElementById('bcctl').rvalA.selectedIndex].value;
var r2 = document.getElementById('bcctl').rvalB.options[document.getElementById('bcctl').rvalB.selectedIndex].value;
var g1 = document.getElementById('bcctl').gvalA.options[document.getElementById('bcctl').gvalA.selectedIndex].value;
var g2 = document.getElementById('bcctl').gvalB.options[document.getElementById('bcctl').gvalB.selectedIndex].value;
var b1 = document.getElementById('bcctl').bvalA.options[document.getElementById('bcctl').bvalA.selectedIndex].value;
var b2 = document.getElementById('bcctl').bvalB.options[document.getElementById('bcctl').bvalB.selectedIndex].value;
f16(r1,r2,g1,g2,b1,b2);
}
else {
var bg = document.getElementById('bg');
bg.style.backgroundColor = "#"
+ document.getElementById('bcctl').rvalA.options[document.getElementById('bcctl').rvalA.selectedIndex].value
+ document.getElementById('bcctl').rvalB.options[document.getElementById('bcctl').rvalB.selectedIndex].value
+ document.getElementById('bcctl').gvalA.options[document.getElementById('bcctl').gvalA.selectedIndex].value 
+ document.getElementById('bcctl').gvalB.options[document.getElementById('bcctl').gvalB.selectedIndex].value
+ document.getElementById('bcctl').bvalA.options[document.getElementById('bcctl').bvalA.selectedIndex].value
+ document.getElementById('bcctl').bvalB.options[document.getElementById('bcctl').bvalB.selectedIndex].value;
var r1 = document.getElementById('bcctl').rvalA.options[document.getElementById('bcctl').rvalA.selectedIndex].value;
var r2 = document.getElementById('bcctl').rvalB.options[document.getElementById('bcctl').rvalB.selectedIndex].value;
var g1 = document.getElementById('bcctl').gvalA.options[document.getElementById('bcctl').gvalA.selectedIndex].value;
var g2 = document.getElementById('bcctl').gvalB.options[document.getElementById('bcctl').gvalB.selectedIndex].value;
var b1 = document.getElementById('bcctl').bvalA.options[document.getElementById('bcctl').bvalA.selectedIndex].value;
var b2 = document.getElementById('bcctl').bvalB.options[document.getElementById('bcctl').bvalB.selectedIndex].value;
f16v2(r1,r2,g1,g2,b1,b2);
}
}
function f16(r1,r2,g1,g2,b1,b2)
{
var o16 = document.getElementById('o16');
o16.value = '#' + r1 + r2 + g1 + g2 + b1 + b2;
}
function f16v2(r1,r2,g1,g2,b1,b2)
{
var o16v2 = document.getElementById('o16v2');
o16v2.value = '#' + r1 + r2 + g1 + g2 + b1 + b2;
}
document.write("<div id=\"bg\" style=\"padding:20px 0; background:#f5f5f5; border:1px solid #999; margin:1em 30px;\">");
document.write("<form action=\"\" id=\"bcctl\" style=\"margin:0; text-align:center;\">");
document.write("<p style=\"font-size:2em; margin:0 0 20px 0; text-align:center;\" id=\"te\">コントラスト比較TEXT</p>");
document.write("<table style=\"margin:0 auto;\">");
document.write("<tbody>");
document.write("<tr>");
document.write("<th style=\"background:red;\" colspan=\"2\">R</th>");
document.write("<th style=\"background:green;\" colspan=\"2\">G</th>");
document.write("<th style=\"background:blue;\" colspan=\"2\">B</th>");
document.write("</tr>");
document.write("<tr style=\"text-align:center; background:#f5f5f5;\">");
document.write("<td>");
document.write("<select onchange=\"changeBgcolor()\" size=\"16\" name=\"rvalA\">");
document.write("<option value=\"F\" selected=\"selected\">F</option><option value=\"E\">E</option><option value=\"D\">D</option><option value=\"C\">C</option><option value=\"B\">B</option><option value=\"A\">A</option><option value=\"9\">9</option><option value=\"8\">8</option><option value=\"7\">7</option><option value=\"6\">6</option><option value=\"5\">5</option><option value=\"4\">4</option><option value=\"3\">3</option><option value=\"2\">2</option><option value=\"1\">1</option><option value=\"0\">0</option>");
document.write("</select>");
document.write("</td>");
document.write("<td>");
document.write("<select onchange=\"changeBgcolor()\" size=\"16\" name=\"rvalB\">");
document.write("<option value=\"F\" selected=\"selected\">F</option><option value=\"E\">E</option><option value=\"D\">D</option><option value=\"C\">C</option><option value=\"B\">B</option><option value=\"A\">A</option><option value=\"9\">9</option><option value=\"8\">8</option><option value=\"7\">7</option><option value=\"6\">6</option><option value=\"5\">5</option><option value=\"4\">4</option><option value=\"3\">3</option><option value=\"2\">2</option><option value=\"1\">1</option><option value=\"0\">0</option>");
document.write("</select>");
document.write("</td>");
document.write("<td>");
document.write("<select onchange=\"changeBgcolor()\" size=\"16\" name=\"gvalA\">");
document.write("<option value=\"F\" selected=\"selected\">F</option><option value=\"E\">E</option><option value=\"D\">D</option><option value=\"C\">C</option><option value=\"B\">B</option><option value=\"A\">A</option><option value=\"9\">9</option><option value=\"8\">8</option><option value=\"7\">7</option><option value=\"6\">6</option><option value=\"5\">5</option><option value=\"4\">4</option><option value=\"3\">3</option><option value=\"2\">2</option><option value=\"1\">1</option><option value=\"0\">0</option>");
document.write("</select>");
document.write("</td>");
document.write("<td>");
document.write("<select onchange=\"changeBgcolor()\" size=\"16\" name=\"gvalB\">");
document.write("<option value=\"F\" selected=\"selected\">F</option><option value=\"E\">E</option><option value=\"D\">D</option><option value=\"C\">C</option><option value=\"B\">B</option><option value=\"A\">A</option><option value=\"9\">9</option><option value=\"8\">8</option><option value=\"7\">7</option><option value=\"6\">6</option><option value=\"5\">5</option><option value=\"4\">4</option><option value=\"3\">3</option><option value=\"2\">2</option><option value=\"1\">1</option><option value=\"0\">0</option>");
document.write("</select>");
document.write("</td>");
document.write("<td>");
document.write("<select onchange=\"changeBgcolor()\" size=\"16\" name=\"bvalA\">");
document.write("<option value=\"F\" selected=\"selected\">F</option><option value=\"E\">E</option><option value=\"D\">D</option><option value=\"C\">C</option><option value=\"B\">B</option><option value=\"A\">A</option><option value=\"9\">9</option><option value=\"8\">8</option><option value=\"7\">7</option><option value=\"6\">6</option><option value=\"5\">5</option><option value=\"4\">4</option><option value=\"3\">3</option><option value=\"2\">2</option><option value=\"1\">1</option><option value=\"0\">0</option>");
document.write("</select>");
document.write("</td>");
document.write("<td>");
document.write("<select onchange=\"changeBgcolor()\" size=\"16\" name=\"bvalB\">");
document.write("<option value=\"F\" selected=\"selected\">F</option><option value=\"E\">E</option><option value=\"D\">D</option><option value=\"C\">C</option><option value=\"B\">B</option><option value=\"A\">A</option><option value=\"9\">9</option><option value=\"8\">8</option><option value=\"7\">7</option><option value=\"6\">6</option><option value=\"5\">5</option><option value=\"4\">4</option><option value=\"3\">3</option><option value=\"2\">2</option><option value=\"1\">1</option><option value=\"0\">0</option>");
document.write("</select>");
document.write("</td>");
document.write("</tr>");
document.write("<tr><td colspan=\"6\" style=\"background:#f5f5f5; text-align:center;\">現在の着色対象は<select name=\"point\"><option value=\"bgcolor\" selected=\"selected\">背景色</option><option value=\"textcolor\">文字色</option></select>です。</td></tr>");
document.write("<tr style=\"background:#f5f5f5; text-align:center;\">");
document.write("<td colspan=\"3\">背景色:<input type=\"text\" size=\"10\" onclick=\"this.focus();this.select()\" onkeypress=\"this.focus();this.select()\" id=\"o16v2\" value=\"\" /></td>");
document.write("<td colspan=\"3\">文字色:<input type=\"text\" size=\"10\" onclick=\"this.focus();this.select()\" onkeypress=\"this.focus();this.select()\" id=\"o16\" value=\"\" /></td>");
document.write("</tr>");
document.write("</tbody></table>");
document.write("</form></div>");