tom.colorSelect = tom.Class.create();
tom.extend(tom.colorSelect.prototype,{
    initialize:function(id,callback){
        this.ColorHex=new Array('00','33','66','99','CC','FF');
        this.SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF');
        this.current=null;
        this.tmpColor = null;
        this._parent = (typeof(id)=="object")?id:document.getElementById(id);
        this.createUI();
        this.addOperate();
        this.callback = callback;
    },
    createUI:function()
    {
        var colorTable=''
        for (i=0;i<2;i++)
        {
          for (j=0;j<6;j++)
           {
            colorTable=colorTable+'<tr height=12>'
            colorTable=colorTable+'<td width=11 style="background-color:#000000">'
            
            if (i==0){
            colorTable=colorTable+'<td width=11 style="background-color:#'+this.ColorHex[j]+this.ColorHex[j]+this.ColorHex[j]+'">'} 
            else{
            colorTable=colorTable+'<td width=11 style="background-color:#'+this.SpColorHex[j]+'">'} 

            
            colorTable=colorTable+'<td width=11 style="background-color:#000000">'
            for (k=0;k<3;k++)
             {
               for (l=0;l<6;l++)
               {
                colorTable=colorTable+'<td width=11 style="background-color:#'+this.ColorHex[k+i*3]+this.ColorHex[l]+this.ColorHex[j]+'">'
               }
             }
          }
        }
        colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'
                   +'<tr height=30><td colspan=21 bgcolor=#cccccc>'
                   +'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'
                   +'<tr><td width="3"><td><input type="text" id="'+this._parent.id+'DisColor" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'
                   +'<td width="3"><td><input type="text" id="'+this._parent.id+'HexColor" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"> <a href="javascript:void(0)" id="'+this._parent.id+'empty">透明</a></td></tr></table></td></table>'
                   +'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" style="cursor:hand;" id="'+this._parent.id+'_color">'
                   +colorTable+'</table>';
        this._parent.innerHTML = colorTable;          
    },
    addOperate:function()
    {
        var tds = document.getElementById(this._parent.id+'_color').getElementsByTagName("td");
        var _self = this;
        for(i=0;i<tds.length;i++)
        {
            tds[i].onmouseover=function(e)
            {
                var e=e||event;
                var tag=e.target||e.srcElement;
                if(!document.all)
                {
                    _self.tmpColor=eval(tag.style.backgroundColor.replace("rgb","new Array"));
                    for(i=0;i<3;i++)
                    {
                        _self.tmpColor[i]=parseInt(_self.tmpColor[i]).toString(16);
                        _self.tmpColor[i]=(_self.tmpColor[i].length<2)?"0"+_self.tmpColor[i]:_self.tmpColor[i];
                    }
                    _self.tmpColor = "#"+_self.tmpColor.join("");
                }
                else
                {
                    _self.tmpColor=tag.style.backgroundColor;
                }
                document.getElementById(_self._parent.id+"DisColor").style.backgroundColor = _self.tmpColor;
                document.getElementById(_self._parent.id+"HexColor").value = _self.tmpColor;
                tag.style.backgroundColor = "white";
                
            }
            tds[i].onmouseout=function(e)
            {
                var e=e||event;
                var tag=e.target||e.srcElement;
                tag.style.backgroundColor = _self.tmpColor;
            }
            tds[i].onclick=function(e)
            {
                var e=e||event;
                var tag=e.target||e.srcElement;
                _self.callback(document.getElementById(_self._parent.id+"HexColor").value);
            }
            document.getElementById(this._parent.id+"empty").onclick=function(e)
            {
                _self.callback('');
            }
        }
    }
})