/**
 * (c) 2007 Sid Stamm
 */

var bod;

function makeColorWidget() {
    bod = document.body;
    //first, create the div
    var dv = document.createElement("div");
    dv.setAttribute("style",
                     "position:absolute; top:50%;right:50%;padding:10px;;display:block;background:#ffa;border:1px solid black;width:120px;height:110px;color:black;font-size:10px;");

    dv.innerHTML = "\
Additive colors in Hex numbers 0 to f.\
<form id='colorfrm'>\
<b>Red:</b> <input type='text' name='red' value='3' size=2/><br/>\
<b>Green:</b> <input type='text' name='green' value='3' size=2/><br/>\
<b>Blue:</b> <input type='text' name='blue' value='7' size=2/><br/>\
<input type='button' value='set background' onClick='void applyColor(this.form);'/>\
</form>\
";

    //append to body.
    bod.appendChild(dv);
}

/** Extract color values and apply */
function applyColor(frm) {
    //make sure body global is set.
    if( !bod ) return;

    var clr = "#" + frm.red.value + frm.green.value + frm.blue.value;
    bod.style.background = clr;
}