Colors = function(params)
// objectId - объект цвет которого надо изменить
// inputTextId - id inputа со строковым представлением цвета 
{
    this._object = document.getElementById(params.objectId);
    this._objectId = params.objectId;
    this.inputText = document.getElementById(params.inputTextId);
    this.inputTextId = params.inputTextId;
    this.titleText = document.getElementById(params.titleTextId);
    this.titleTextId = params.titleTextId;
    this.metallic = document.getElementById(params.metallicId);
    this.metallicId = params.metallicId;


    this.metallicState = params.metallicState;

    this.styleColor = params.styleColor;
    this._containerId = params.containerId;
    //eval('this.oldColor = Colors.rgb2hex(this._object.style.'+params.styleColor+')');
    //this.inputText.value = this.oldColor;

    Colors.list[Colors.list.length] = 'allcolorselements' + this.inputTextId;

    this.pallete = params.pallete;

    this.rows = params.rows;
    this.cols = params.cols;
    this.width = params.width;
    this.border = params.border;
    this.allwidth = this.cols * (this.width + this.border * 2) + this.border * 2;
    this.allheight = 80;
    this.show();
}

Colors.list = new Array();

Colors.prototype.show = function() {
    var bttn = '<span id="allcolorselementsselect' + this.inputTextId + '" onclick="e = event||window.event; e.cancelBubble = true; document.getElementById(\'allcolorselements' + this.inputTextId + '\').style.display=\'block\'; document.getElementById(\'allcolorselementslink' + this.inputTextId + '\').focus();" style="cursor: pointer;"><span style="text-decoration: underline;"><img src="../images/design/add.png" border="0" width="16" height="16" class="iePNG"></span></span>';

    var table = '<input id="setc' + this.inputTextId + '" type="hidden" value="0" />';
    table += '<input id="oldColor' + this.inputTextId + '" type="hidden" value="#' + this.oldColor + '" />';    
    table += '<div id="allcolorselements' + this.inputTextId + '" style="width: ' + this.allwidth + 'px; cursor: pointer; display: none; position: absolute; top:20px; z-index:1000; background-color:#bbb;">';
    table += '<iframe style="position:absolute; width:' + this.allwidth + 'px; height:' + this.allheight + 'px;left:0;border:none;z-index:-1; _filter:mask();"></iframe>';
    table += '<a id="allcolorselementslink' + this.inputTextId + '" style="margin:1px;display:block;" href="#" onclick="document.getElementById(\'allcolorselements' + this.inputTextId + '\').style.display=\'none\'; if (document.getElementById(\'setc' + this.inputTextId + '\').value!=\'1\') Colors.changecolor(document.getElementById(\'oldColor' + this.inputTextId + '\').value, \'' + this._objectId + '\', \'' + this.inputTextId + '\', \'' + this.styleColor + '\'); document.getElementById(\'setc' + this.inputTextId + '\').value=\'0\'; return false;">';

    for (var i = 1, c = 0; i <= this.rows; i++) {
        //table += '<tr height="20">';
        for (var j = 1; j <= this.cols; j++) {
            table += '<div style="background-color:#000000; margin:' + this.border + 'px; float:left; width:' + this.width + 'px; height:' + this.width + 'px;" onmouseover="this.style.backgroundColor=\'#ffff00\';" onmouseout="this.style.backgroundColor=\'#000000\';">';
            table += '<div style="cursor:pointer; background-color:' + this.pallete[c].color + '; margin:' + this.border + 'px; height:' + (this.width - 2 * this.border) + 'px;" onmousedown="document.getElementById(\'setc' + this.inputTextId + '\').value=\'1\'; document.getElementById(\'oldColor' + this.inputTextId + '\').value=this.style.backgroundColor;" onmousemove="Colors.changecolor(this.style.backgroundColor, \'' + this._objectId + '\', \'' + this.inputTextId + '\', \'' + this.styleColor + '\', \'' + this.titleTextId + '\', \'' + this.pallete[c].title + '\');"></div>';
            table += '</div>';
            c++;
        }
        table += '<div style="clear:both;"></div>';
    }
    table += '</a>';

    if (this.metallicState == "on") var checked_val = "checked";
    else var checked_val = "";

    document.getElementById(this.metallicId).value = this.metallicState;

    table += '<div align="center" style="padding-top: 5px; padding-bottom: 5px; cursor: default;"><input type="checkbox" ' + checked_val + ' id="metallic_id" onclick="if (this.checked) document.getElementById(\'' + this.metallicId + '\').value=\'on\'; else document.getElementById(\'' + this.metallicId + '\').value=\'\'; e = event||window.event; e.cancelBubble = true;" />Металлик</div>';
    table += '</div>';

    var container = document.getElementById(this._containerId);
    container.innerHTML = table;

    document.writeln(bttn);
}


// Преобразование из формата rgb(0,0,0) в hex
Colors.rgb2hex = function(rgb) {

    if (!rgb) {
        return '';
    }
    if (rgb.substring(0, 1) == "#") {
        return rgb.substring(1);
    }
    else {
        var s, i, h = '', x = '0123456789abcdef';
        var c = rgb.substring(4);
        c = c.substring(0, c.length - 1);


        if (c) {
            s = c.split(',');
            for (i = 0; i < 3; i++) {
                n = parseInt(s[i]);
                h += x.charAt(n >> 4) + x.charAt(n & 15);
            }
            return h;
        }
    }
}

Colors.changecolor = function(thiscolor, _object, inputText, styleColor) {
    eval('document.getElementById(_object).style.' + styleColor + ' = thiscolor');
    document.getElementById(inputText).value = Colors.rgb2hex(thiscolor);
    if (arguments.length >= 5) {
        document.getElementById(arguments[4]).value = arguments[5];
    }
}

Colors.setup = function(params) {
    function param_default(pname, def) { if (typeof params[pname] == "undefined") { params[pname] = def; } };
    param_default("rows", 2);
    param_default("cols", 8);
    param_default("width", 22);
    param_default("border", 1);
    param_default("styleColor", "color");
    param_default("inputTextId", null);
    param_default("titleTextId", null);
    param_default("objectId", null);
    param_default("metallicId", null);
    param_default("metallicState", null);
    param_default("containerId", null);
    param_default("pallete", new Array(
	{ title: 'Белый', color: '#ffffff' }, { title: 'Серебряный', color: '#c0c0c0' }, { title: 'Серый', color: '#808080' }, { title: 'Бежевый', color: '#f5f5dc' }, { title: 'Жёлтый', color: '#ffff00' }, { title: 'Золотой', color: '#ffd700' }, { title: 'Оранжевый', color: '#ff8000' }, { title: 'Зелёный', color: '#008000' },
        { title: 'Розовый', color: '#ffcbdb' }, { title: 'Красный', color: '#ff0000' }, { title: 'Коричневый', color: '#a52a2a' }, { title: 'Голубой', color: '#00bfff' }, { title: 'Синий', color: '#0000ff' }, { title: 'Фиолетовый', color: '#8000ff' }, { title: 'Пурпурный', color: '#c5007f' }, { title: 'Чёрный', color: '#000000' }
    ));

    var col = new Colors(params);
    return col;
}