colorPicker = new ColorPicker() ;

function ColorPicker() {

    this.node = document.getElementById("colorpicker_slot") ;
    this.initialized = false ;
    this.active = false ;

   /**
    * display
    *
    * Wird aufgerufen, um den Colorpicker zu starten
    */
    this.display = function(callingElement) {
        if(this.active) return ;

        if(!this.initialized) this.init(callingElement) ;

//        this.node.setAttribute('class','colorpicker_visible') ;
        this.node.style.display = "block" ;
        this.target = $(callingElement.previousSibling) ;
        console.log(this.target);
        this.target.oldBgColor = this.target.style.backgroundColor ;
        callingElement.appendChild(this.node) ;

        this.active = true ;
    }

   /**
    * hide
    *
    * Versteckt den colorpicker
    */
    this.hide = function() {
//        this.node.setAttribute('class','colorpicker_hidden') ;
        this.node.style.display = "none" ;
    }

   /**
    * init
    *
    * Initialisiert den Colorpicker:
    * 1) Anhängen von diversen Funktionen an den colorpicker_slot
    * 2) Erzeugen der Farbtabelle im slot
    **/
    this.init = function() {
        this.node = document.getElementById("colorpicker_slot") ;

        this.createColorTable() ;

        this.initialized = true ;
    }

   /**
    * myHover
    */
    this.myHover = function(td) {

        var color = td.getAttribute('bgcolor') ;
        var invcolor = td.getAttribute('invcolor') ;

        td.setAttribute('bgcolor', invcolor) ;
        td.oldBgColor = color ;

        this.target.value = color ;
        this.target.style.backgroundColor = color ;
        this.target.style.color = invcolor ;
    }

   /**
    * myMouseOut
    */
    this.myMouseOut = function(td) {
        td.setAttribute('bgcolor', td.oldBgColor) ;
    }


   /**
    * myOnClick
    */
    this.myOnClick = function(td) {
        this.setColor(td) ;
        colorPicker.hide() ;
    }

   /**
    * setColor
    */
    this.setColor = function(td) {
        this.target.style.backgroundColor = this.target.oldBgColor ;
        this.target.style.color = "black" ;

        myNewsUpdateUrl() ;
        
        colorPicker.active = false ;
    }

   /**
    * colorPicker-Tabelle erstellen
    */
    this.createColorTable = function() {
        
        var html = '' ;

//        var table = document.createElement("table") ;
//        table.setAttribute("cellpadding", 0) ;
//        table.setAttribute("cellspacing", 0) ;

        html += '<table id="colorpicker_table" cellpadding="0" cellspacing="0">' ;

        for (i = 0; i < 12 ; i++) {

//            var tr = document.createElement("tr") ;
//            table.appendChild(tr) ;
            html += '<tr>' ;

            for (j = 0 ; j < 18 ; j++) {
/*                var td = document.createElement("td") ;
                td.myDiv = this.node ;
                td.setAttribute('bgcolor',colors[i*18+j]) ;
                td.invertedColor = colors[216-(i*18+j)] ;
                td.setAttribute('class','colorpicker_td') ;
                td.setAttribute('width','7px') ;
                td.setAttribute('height','10px') ;
                td.setAttribute('onmouseover','colorPicker.myHover(this)') ;
                td.setAttribute('onmouseout','colorPicker.myMouseOut(this)') ;
                td.setAttribute('onclick','colorPicker.myOnClick(this)') ;
                tr.appendChild(td) ;
*/                
                html += '<td bgcolor="' + colors[i*18+j] + '" ' ;
                html += 'invcolor="' + colors[215-(i*18+j)] + '" ' ;
                html += 'class="colorpicker_td" ' ;
                html += 'width="7px" ' ;
                html += 'height="10px" ' ;
                html += 'onmouseover = "colorPicker.myHover(this)" ' ;
                html += 'onmouseout = "colorPicker.myMouseOut(this)" ' ;
                html += 'onclick = "colorPicker.myOnClick(this)" ' ;
                html += '></td>' ;
            }
            
//            this.node.appendChild(table) ;
            html += '</tr>' ;
        }
        html += '</table>' ;
        this.node.innerHTML = html ;
    }


    var colors = new Array("#000000","#000033","#000066","#000099","#0000CC","#0000FF","#330000","#330033","#330066","#330099","#3300CC",
        "#3300FF","#660000","#660033","#660066","#660099","#6600CC","#6600FF","#990000","#990033","#990066","#990099",
        "#9900CC","#9900FF","#CC0000","#CC0033","#CC0066","#CC0099","#CC00CC","#CC00FF","#FF0000","#FF0033","#FF0066",
        "#FF0099","#FF00CC","#FF00FF","#003300","#003333","#003366","#003399","#0033CC","#0033FF","#333300","#333333",
        "#333366","#333399","#3333CC","#3333FF","#663300","#663333","#663366","#663399","#6633CC","#6633FF","#993300",
        "#993333","#993366","#993399","#9933CC","#9933FF","#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF",
        "#FF3300","#FF3333","#FF3366","#FF3399","#FF33CC","#FF33FF","#006600","#006633","#006666","#006699","#0066CC",
        "#0066FF","#336600","#336633","#336666","#336699","#3366CC","#3366FF","#666600","#666633","#666666","#666699",
        "#6666CC","#6666FF","#996600","#996633","#996666","#996699","#9966CC","#9966FF","#CC6600","#CC6633","#CC6666",
        "#CC6699","#CC66CC","#CC66FF","#FF6600","#FF6633","#FF6666","#FF6699","#FF66CC","#FF66FF","#009900","#009933",
        "#009966","#009999","#0099CC","#0099FF","#339900","#339933","#339966","#339999","#3399CC","#3399FF","#669900",
        "#669933","#669966","#669999","#6699CC","#6699FF","#999900","#999933","#999966","#999999","#9999CC","#9999FF",
        "#CC9900","#CC9933","#CC9966","#CC9999","#CC99CC","#CC99FF","#FF9900","#FF9933","#FF9966","#FF9999","#FF99CC",
        "#FF99FF","#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF","#33CC00","#33CC33","#33CC66","#33CC99",
        "#33CCCC","#33CCFF","#66CC00","#66CC33","#66CC66","#66CC99","#66CCCC","#66CCFF","#99CC00","#99CC33","#99CC66",
        "#99CC99","#99CCCC","#99CCFF","#CCCC00","#CCCC33","#CCCC66","#CCCC99","#CCCCCC","#CCCCFF","#FFCC00","#FFCC33",
        "#FFCC66","#FFCC99","#FFCCCC","#FFCCFF","#00FF00","#00FF33","#00FF66","#00FF99","#00FFCC","#00FFFF","#33FF00",
        "#33FF33","#33FF66","#33FF99","#33FFCC","#33FFFF","#66FF00","#66FF33","#66FF66","#66FF99","#66FFCC","#66FFFF",
        "#99FF00","#99FF33","#99FF66","#99FF99","#99FFCC","#99FFFF","#CCFF00","#CCFF33","#CCFF66","#CCFF99","#CCFFCC",
        "#CCFFFF","#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF");

}