/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *                                                                                 *
 *    JavaScript Color Picker.                                                     *
 *    Creates a clickable table with colors that are pickable by mouse.            *
 *                                                                                 *
 *    Developed by Juergen Edelbluth, AppGenie Development Technologies Inc.       *
 *    First built: April 07, 2006                                                  *
 *                                                                                 *
 *                                                                                 *
 *    This is a JavaScript Class, please keep that in mind!                        *
 *                                                                                 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

// var adtColorPickerID = 0;
 
function adtColorPicker(picker_width, field_height, number_of_cols, number_of_colors, class_name) {
    // Variables
    this.pWidth = picker_width;
    this.fHeight = field_height;
    this.cNum = number_of_cols;
    this.colors = number_of_colors * 2;
    this.target = "";
    this.cName = class_name;
    this.drag = false;
    this.offsetX = 0;
    this.offsetY = 0;
    this.coordX = 0;
    this.coordY = 0;
    this.mposX = 0;
    this.mposY = 0;
    this.previewField = "";
    // Functions
    this.generatePicker = _generatePicker;
    this.pushColor = _pushColor;
	this.dec2hex = _dec2hex;
	this.hex2dec = _hex2dec;
	this.preview = _preview
	this.resetForm = _resetForm;
	this.validate = _validate;
	this.dynamicPreview = _dynamicPreview;
	this.close = _close;
	this.pick = _pick;
	this.startMoving = _startMoving;
	this.stopMoving = _stopMoving;
	this.dragDiv = _dragDiv;
}

function _dragDiv(e) {
    /*
    if (true) {
        var tempX = 0;
        var tempY = 0;
        var IE = document.all?true:false;
        if (IE) {
            tempX = e.clientX + document.body.scrollLeft;
            tempY = e.clientY + document.body.scrollTop;
        }
        else {
            tempX = e.pageX;
            tempY = e.pageY;
        }  
        if (tempX < 0) tempX = 0;
        if (tempY < 0) tempY = 0;
        this.mposX = tempX;
        this.mposY = tempY;
        // alert(this.mposX);
    }
    */
    // alert('darg');
    if (this.drag) {
        if (!e) {
            var e = window.event;
        }
        var targetElement = e.target?e.target:e.srcElement;
        if ((targetElement == document.getElementById('adtColorPickerMover')) || (targetElement == document.getElementById('adtColorPicker'))) {
            var codx = (this.coordX + e.clientX - this.offsetX);
            var cody = (this.coordY + e.clientY - this.offsetY);
            /*
            if (codx == 0) {
                codx = this.mposX;
            }
            if (cody == 0) {
                cody = this.mposY;
            }
            */
            document.getElementById('adtColorPicker').style.left = codx + 'px';
            document.getElementById('adtColorPicker').style.top = cody + 'px';
        }
        return false;
    }
}

function _startMoving(e) {    
    if (!e) {
        var e = window.event;
    }
    
    var targetElement = e.target?e.target:e.srcElement;
    if ((targetElement == document.getElementById('adtColorPickerMover')) || (targetElement == document.getElementById('adtColorPickerMover'))) {
        this.offsetX = e.clientX;
        this.offsetY = e.clientY;
        if (!document.getElementById('adtColorPicker').style.left) {
           document.getElementById('adtColorPicker').style.left='0px';
        }
        if (!document.getElementById('adtColorPicker').style.top) {
           document.getElementById('adtColorPicker').style.top='0px';
        }
        this.coordX = parseInt(document.getElementById('adtColorPicker').style.left);
        this.coordY = parseInt(document.getElementById('adtColorPicker').style.top);
        // this.coordX = this.mposX;
        // this.coordY = this.mposY;
        this.drag = true;
    }
}

function _stopMoving(e) {
    this.drag = false;
}

function _dec2hex(d) {
    var hexChars = "0123456789abcdef";
    var base = d % 16;
    var rest = (d - base) / 16;
    var hex = new String("" + hexChars.charAt(rest) + hexChars.charAt(base) + "");
    if (hex == "f") {
        alert("Mathematics Bug: " + d + ":" + hex);
    }
    return hex;
}

function _hex2dec(multiplicator, single) {
    var hexChars = "0123456789abcdef";
    var base = (hexChars.indexOf(multiplicator.toLowerCase()) * 16);
    var rest = (hexChars.indexOf(single.toLowerCase()));
    return (base + rest);
}

function _close() {
    document.getElementById('adtColorPicker').style.display = "none";
}

function _pick(id, prvw) {
    this.target = id;
    this.previewField = prvw;
    document.getElementById('adtColorPickerValue').value = document.getElementById(id).value;
    if (document.getElementById('adtColorPickerValue').value.length > 0) {
        this.dynamicPreview();
    }
    // alert(this.mposX);
    document.getElementById('adtColorPicker').style.left = (this.mposX + 'px');
    document.getElementById('adtColorPicker').style.top = (this.mposY + 'px');
    document.getElementById('adtColorPicker').style.display = "block";
}

function _dynamicPreview() {
    if (document.getElementById('adtColorPickerValue').value.match(/^(#)[a-fA-F0-9]{6,6}$/)) {
        this.preview(document.getElementById('adtColorPickerValue').value);
        this.pushColor(document.getElementById('adtColorPickerValue').value);
    }
    else {
        document.getElementById('adtColorPickerPreview').innerHTML = "invalid";
        document.getElementById('adtColorPickerPreview').style.backgroundColor = "#ffffff";
        document.getElementById('adtColorPickerPreview').style.color = "#000000";
    }
}

function _preview(code) {
    var col = (((this.hex2dec(code.charAt(1), code.charAt(2)) + this.hex2dec(code.charAt(3), code.charAt(4)) + this.hex2dec(code.charAt(5), code.charAt(6))))>=384?'#000000':'#ffffff');
    document.getElementById('adtColorPickerPreview').innerHTML = code;
    document.getElementById('adtColorPickerPreview').style.backgroundColor = code;
    document.getElementById('adtColorPickerPreview').style.color = col;
}

function _resetForm() {
    with (document.getElementById('adtColorPickerPreview')) {
        innerHTML = "";
        style.backgroundColor = "#ffffff";
    }
    document.getElementById('adtColorPickerValue').value = "";
    document.getElementById('adtColorPickerValue').style.color = "#000000";
    document.getElementById('adtColorPickerValue').style.backgroundColor = "#ffffff";
    this.close();
}

function _validate() {
    // Validate Input
    if (document.getElementById('adtColorPickerValue').value.match(/^(#)[a-fA-F0-9]{6,6}$/)) {
        document.getElementById(this.target).value = document.getElementById('adtColorPickerValue').value;
        document.getElementById(this.previewField).style.backgroundColor = document.getElementById('adtColorPickerValue').value;
        this.close();
        return false;
    }
    else {
        alert('Your color value is invalid!');
        return false;
    }
}

function _pushColor(code) {
    document.getElementById('adtColorPickerValue').value = code;
    document.getElementById('adtColorPickerValue').style.backgroundColor = code;
    var col = (((this.hex2dec(code.charAt(1), code.charAt(2)) + this.hex2dec(code.charAt(3), code.charAt(4)) + this.hex2dec(code.charAt(5), code.charAt(6))))>=384?'#000000':'#ffffff');
    document.getElementById('adtColorPickerValue').style.color = col;
}

function _generatePicker() {
    var ma = ((Math.log(this.colors)/Math.log(3)));
    // alert(ma);
    var rgb_r = 0;
    var rgb_g = 0;
    var rgb_b = 0;
    var colorOffset = Math.round(255.0 / ma);
    // alert(colorOffset);
    // colorOffset = 5;
    var colorSets = new Array();
    colorSets.push(0);
    var iTup = colorOffset;
    while (iTup < 255) {
        colorSets.push(iTup);
        iTup += colorOffset;
    }
    if (iTup != 255) {
        colorSets.push(255);
    }
    var cColors = new Array();
    for (var i = 0; i < colorSets.length; i++) for (var j = 0; j < colorSets.length; j++) for (var k = 0; k < colorSets.length; k++) {
        cColors.push("#" + this.dec2hex(colorSets[k]) + this.dec2hex(colorSets[j]) + this.dec2hex(colorSets[i]));
    }
    if (cColors[(cColors.length-1)] != "#ffffff") cColors.push("#ffffff");
    var fieldWidth = this.pWidth / this.cNum;
    var out = "<form id=\"adtColorPickerForm\">";
    out += "<div id=\"adtColorPicker\" style=\"position:absolute;top:50px;left:200px;z-index:999;display:none;width:" + this.pWidth + "px;padding:0px;margin:0px;text-align:center;vertical-align:top;border:1px solid #000000;padding:0px;background-color:#ffffff;\">";
    out += "<div id=\"adtColorPickerMover\" style=\"text-align:left;padding:2px;margin:0px;display:block;background-color:#000000;color:#ffffff;font-family:Arial,helvetica,sans-serif;font-weight:bold;font-size:11px;\">Color Selector</div>";
    out += "<table style=\"border:0px;padding:0px;margin:0px;border-collapse:collapse;empty-cells:show;width:" + this.pWidth + "px;margin-bottom:10px;display:block;\">";
    out += "<tr style=\"padding:0px;margin:0px;\">";
    out += "<td style=\"padding:0px;margin:0px;\" colspan=\"" + this.cNum + "\">";
    out += "<input onkeyup=\"" + this.cName + ".dynamicPreview();\" type=\"text\" id=\"adtColorPickerValue\" name=\"adtColorPickerValue\" size=\"7\" maxlength=\"7\" style=\"vertical-align:bottom;\" /> <div id=\"adtColorPickerPreview\" style=\"font-weight:bold;width:100px;height:20px;vertical-align:middle;font-family:Arial,helvetica,sans-serif;background-color:#ffffff;font-size:10px;text-align:center;display:inline;\"></div>";
    out += "</td>";
    out += "</tr>";
    var runSet = 0;
    out += "<tr style=\"padding:0px;margin:0px;height:" + this.fHeight + "px;\">";
    // var colorSet = 255*255*255;
    for (var i = 0; i < cColors.length; i++) {
        if (runSet == this.cNum) {
            out += "</tr><tr style=\"padding:0px;margin:0px;height:" + this.fHeight + "px;\">";
            runSet = 0;
        }
        out += "<td onmouseover=\"" + this.cName + ".preview('" + cColors[i] + "');\" onclick=\""+ this.cName + ".pushColor('" + cColors[i] + "');\" style=\"padding:0px;margin:0px;cursor:crosshair;background-color:" + cColors[i] + ";width:" + fieldWidth + "px;height:" + this.fHeight + "px;border:1px solid #000000;\"></td>";
        runSet++;
    }
    if (runSet < this.cNum) {
        var divisor = this.cNum - runSet;
        var bOffset = Math.round(255.0 / divisor);
        var ot = bOffset;
        var greyColors = new Array();
        while (ot < 255) {
            greyColors.push("#" + this.dec2hex(ot) + this.dec2hex(ot) + this.dec2hex(ot));
            ot += bOffset;
        }
        if (greyColors.length != divisor) {
            if (greyColors < divisor) {
                while (greyColors.length < divisor) {
                    greyColors.push("#ffffff");
                }
            }
            else {
                while (greyColors.length > divisor) {
                    greyColors.pop();
                }
            }
        }
        for (var i = 0; i < greyColors.length; i++) {
            if (runSet == this.cNum) {
                out += "</tr><tr style=\"padding:0px;margin:0px;height:" + this.fHeight + "px;\">";
                runSet = 0;
            }
            out += "<td onmouseover=\"" + this.cName + ".preview('" + greyColors[i] + "');\" onclick=\""+ this.cName + ".pushColor('" + greyColors[i] + "');\" style=\"padding:0px;margin:0px;cursor:crosshair;background-color:" + greyColors[i] + ";width:" + fieldWidth + "px;height:" + this.fHeight + "px;border:1px solid #000000;\"></td>";
            runSet++;
        }
    }
    out += "<\/tr>";
    out += "<\/table>";
    out += "<input value=\"OK\" type=\"button\" name=\"adtColorPickerSubmitter\" onclick=\"" + this.cName + ".validate();\" /> <input value=\"Cancel\" type=\"reset\" name=\"adtColorPickerReset\" onclick=\"" + this.cName + ".resetForm();\" />";
    out += "<\/div>\n";
    out += "</form>\n";
    out += "<script type=\"text/javascript\"><!--\n\n";
    out += "    document.onmousedown = " + this.cName + ".startMoving;\n";
    out += "    document.onmouseup = " + this.cName + ".stopMoving;\n";
    out += "    document.onmousemove = " + this.cName + ".dragDiv;\n";
    out += "//--></script>\n\n";
    return out;
}