//# name of active field
var activefield = false;
//# ready ?
var chooser_ready = false;

//### display chooser
function open_color_chooser(field, e) {
    
    if (!chooser_ready) return false;
    
    //# get position
    if(typeof(e.pageX) == 'number') {
        xpos = e.pageX;
        ypos = e.pageY;
    } else if (typeof(e.clientX) == 'number') {
        xpos = e.clientX + document.documentElement.scrollLeft;
        ypos = e.clientY + document.documentElement.scrollTop;
    }
    //# set position
    document.getElementById('color_chooser').style.top = ypos + 'px';
    document.getElementById('color_chooser').style.left = xpos + 'px';
    
    //# display
    document.getElementById('color_chooser').style.display = '';
    activefield = field.id.substr(11);
    
    //# set preview
    try {
        color = validate_color(document.getElementsByName(activefield)[0].value);
        document.getElementById('preview_old').style.backgroundColor = (color) ? color : 'transparent';
        document.getElementById('preview_new').style.backgroundColor = 'transparent';
        document.getElementById('colorhex').value = color;
    } catch (e) {
        // do nothing
    }
}

//### close chooser
function close_color_chooser() {
    document.getElementById('color_chooser').style.display = 'none';
    activefield = false;
}

//### set color
function set_color(color) {
    document.getElementById('prev_field_'+activefield).style.backgroundColor = color;
    document.getElementsByName(activefield)[0].value = color;
}

//### use color
function use_color() {
    color = document.getElementById('colorhex').value;
    set_color(color);
    close_color_chooser();
}

//### transparent
function select_none() {
    set_color('transparent');
    close_color_chooser();
}

//### preview
function preview_color() {
    color = validate_color(this.style.backgroundColor);
    try {
        document.getElementById('preview_new').style.backgroundColor = color;
        document.getElementById('colorhex').value = color;
    } catch (e) {
        // do nothing
    }
}

//### color changed within textfield
function change_color(field) {
    pre = document.getElementById('prev_field_'+field.name);
    color = validate_color(field.value);
    if (pre) {
        try {
            pre.style.backgroundColor = (color) ? color : 'transparent';
        } catch (e) {
            pre.style.backgroundColor = 'transparent';
        }
    }
}

//### check color
function validate_color(farbe) {
    treffer_rgb = farbe.match(/rgb\(([0-9]+), ?([0-9]+), ?([0-9]+)\)/i);
    treffer_hex = farbe.match(/(?:^| ?)(#[0-9a-f]{3,6})(?:$| ?)/i);
    
    //# rgb
    if (treffer_rgb) {
        for (var i = 1; i < 4; i++) {
            treffer_rgb[i] = parseInt(treffer_rgb[i]).toString(16);
            if (treffer_rgb[i].length < 2) {
                treffer_rgb[i] = '0' + treffer_rgb[i];
            }
        }
        farbe = '#' + (treffer_rgb[1] + treffer_rgb[2] + treffer_rgb[3]);
        
    //# hex
    } else if (treffer_hex) {
        farbe = treffer_hex[1];
        
    //# text
    } else {
       farbe = '';
    }
    return (farbe) ? farbe.toLowerCase() : '';
}

//### reset form
function preload() {
    document.styleform.reset();
    inp = document.styleform.getElementsByTagName('input');
    for (var i = 0; i < inp.length; i++) {
        if (inp[i] && inp[i].value != '') {
            change_color(inp[i]);
        }
    }
}