var ColourPicker = Class.create();
ColourPicker.prototype = {
    colourArray: new Array(),
    element: null,
    trigger: null,
    tableShown: false,

    initialize: function(element, trigger) {
        this.colourArray = new Array();
        this.element = $(element);
        this.trigger = $(trigger);

        this.trigger.onclick = this.toggleTable.bindAsEventListener(this);
        
        // Initialise the color array
        this.initColourArray();
        this.buildTable();

    },
    initColourArray: function() {
        var colourMap = new Array('00', '33', '66', '99', 'AA', 'CC', 'EE', 'FF');
        for (i = 0; i < colourMap.length; i++) {
            this.colourArray.push(colourMap[i] + colourMap[i] + colourMap[i]);
        }

        // Blue
        for (i = 1; i < colourMap.length; i++) {
            if (i != 0 && i != 4 && i != 6) {
                this.colourArray.push(colourMap[0] + colourMap[0] + colourMap[i]);
            }
        }
        for (i = 1; i < colourMap.length; i++) {
            if (i != 2 && i != 4 && i != 6 && i != 7) {
                this.colourArray.push(colourMap[i] + colourMap[i] + colourMap[7]);
            }
        }

        // Green
        for (i = 1; i < colourMap.length; i++) {
            if (i != 0 && i != 4 && i != 6) {
                this.colourArray.push(colourMap[0] + colourMap[i] + colourMap[0]);
            }
        }
        for (i = 1; i < colourMap.length; i++) {
            if (i != 2 && i != 4 && i != 6 && i != 7) {
                this.colourArray.push(colourMap[i] + colourMap[7] + colourMap[i]);
            }
        }

        // Red
        for (i = 1; i < colourMap.length; i++) {
            if (i != 0 && i != 4 && i != 6) {
                this.colourArray.push(colourMap[i] + colourMap[0] + colourMap[0]);
            }
        }
        for (i = 1; i < colourMap.length; i++) {
            if (i != 2 && i != 4 && i != 6 && i != 7) {
                this.colourArray.push(colourMap[7] + colourMap[i] + colourMap[i]);
            }
        }

        // Yellow
        for (i = 1; i < colourMap.length; i++) {
            if (i != 0 && i != 4 && i != 6) {
                this.colourArray.push(colourMap[i] + colourMap[i] + colourMap[0]);
            }
        }
        for (i = 1; i < colourMap.length; i++) {
            if (i != 2 && i != 4 && i != 6 && i != 7) {
                this.colourArray.push(colourMap[7] + colourMap[7] + colourMap[i]);
            }
        }

        // Cyan
        for (i = 1; i < colourMap.length; i++) {
            if (i != 0 && i != 4 && i != 6) {
                this.colourArray.push(colourMap[0] + colourMap[i] + colourMap[i]);
            }
        }
        for (i = 1; i < colourMap.length; i++) {
            if (i != 2 && i != 4 && i != 6 && i != 7) {
                this.colourArray.push(colourMap[i] + colourMap[7] + colourMap[7]);
            }
        }

        // Magenta
        for (i = 1; i < colourMap.length; i++) {
            if (i != 0 && i != 4 && i != 6) {
                this.colourArray.push(colourMap[i] + colourMap[0] + colourMap[i]);
            }
        }
        for (i = 1; i < colourMap.length; i++) {
            if (i != 2 && i != 4 && i != 6 && i != 7) {
                this.colourArray.push(colourMap[7] + colourMap[i] + colourMap[i]);
            }
        }
    },
    buildTable: function() {
        if (!this.tableShown) {



            var left = this.trigger.cumulativeOffset()[0];
            var top = parseInt(this.trigger.cumulativeOffset()[1]) - 15;

            // alert(left + " " + top);

            html = "<div id=\"" + this.trigger.id + "_div\" class=\"colPicker\" style=\"position:absolute; top:" + top + "px; left:" + left + "px; display: none;\"><table id=\"" + this.trigger.id + "ColourPicker\" class=\"colorPicker\">"
            for (i = 0; i < this.colourArray.length; i++) {
                if (i % 8 == 0) {
                    html += "<tr height=\"15px\">";
                }
                html += "<td width=\"15px\" style=\"background-color: #" + this.colourArray[i] + ";\" title=\"#" + this.colourArray[i] + "\" onClick=\"$('" + this.element.id + "').value = '#" + this.colourArray[i] + "'; $('" + this.trigger.id + "_div').style.display = 'none';\">";
                if (i % 8 == 7) {
                    html += "</tr>";
                }
            }
            html += "</table></div>";
            new Insertion.After(this.trigger, html);
        }
    },
    toggleTable: function(sender) {
        var arr = $$(".colPicker");
        arr.each(function(item) {

            //alert(item.identify());

            //checkClick(Event.element(sender).id);

            if (item.identify().indexOf(Event.element(sender).id) > -1) {
            //alert("yes " + item.style.display);
            //item.style.display = 'block';
            item.style.display = (item.style.display == 'block' ? 'none' : 'block');
            } else {
            item.style.display = 'none';
            }

            /*paramHash.set('pagenum_' + counter, $F("contentsDDL_" + item));
            paramHash.set('text_' + counter, $F("contentsTXT_" + item));
            counter++;*/
        });

        /*var obj = $(Event.element(sender).id + 'ColourPicker');
        obj.style.display = (obj.style.display == 'block' ? 'none' : 'block');*/
    }
}