?/*
  By Hangring
  #2008.02.01#
  ---
  use list:
  > node.lib.js
  > events.lib.js
  > css.lib.js
  > browser.lib.js
  ---
  拾色面板
  ---
  包含樣式：
  <link rel="stylesheet" href="css/colorpanel2.lib.css" type="text/css" />
*/

function ColorPanel2 () {
    this.container = null;

    this.selectedColor = '#000000';

    this.css = {
        colorpanel:'colorpanel2',
        colorpanel_ie5:'colorpanel2-ie5',
        over:'over',
        out:'out'
    };
};

ColorPanel2.prototype.customColor = [
    '#000000', '#993300', '#333300',
    '#003300', '#003366', '#000080',
    '#333399', '#333333',
    '#800000', '#FF6600', '#FF6600',
    '#808080', '#008080', '#0000FF',
    '#666699', '#808080',
    '#FF0000', '#FF9900', '#99CC00',
    '#339966', '#33CCCC', '#3366FF',
    '#800080', '#999999',
    '#FF00FF', '#FFCC00', '#FFFF00',
    '#00FF00', '#00FFFF', '#00CCFF',
    '#993366', '#C0C0C0',
    '#FF99CC', '#FFCC99', '#FFFF99',
    '#CCFFCC', '#CCFFFF', '#99CCFF',
    '#CC99FF', '#FFFFFF'
];

ColorPanel2.prototype.Init = function () {
};

ColorPanel2.prototype.Create = function () {
    var self = this;
    var container = this.container = oNode.CreateNode('div');
    CSS.AddClass(container, this.css.colorpanel, Browser.IsIE5 ? this.css.colorpanel_ie5 : '');

    var ul = oNode.CreateNode('ul');
    oNode.AddNode(ul, container);

    var custom = this.customColor;
    for (var i = 0, len = custom.length; i < len ; i++) {
        var li = oNode.CreateNode('li');
        oNode.AddNode(li, ul);

        var a = oNode.CreateNode('a');
        oNode.AddNode(a, li);
        CSS.AddClass(a, this.css.out);
        a.href = '#';
        a.color = custom[i];
        a.style.background = custom[i];
        a.innerHTML = '\x20';

        Events.AttachEvent(a, 'click', function (e, th) {
            th = th || this;
            self._Change(th.color);
            Events.CancelEvent(e);
        });
        Events.AttachEvent(a, 'mouseover', function (e, th) {
            th = th || this;
            CSS.ReplaceClass(th, self.css.out, self.css.over);
        });
        Events.AttachEvent(a, 'mouseout', function (e, th) {
            th = th || this;
            CSS.ReplaceClass(th, self.css.over, self.css.out);
        });
    }
    var clear = oNode.CreateNode('div');
    oNode.AddNode(clear, container);
    clear.style.clear = 'both';

    return container;
};

ColorPanel2.prototype.Update = function () {
};

ColorPanel2.prototype._Change = function (color /* :String */) {
    this.selectedColor = color;
    this.Change(color);
};

ColorPanel2.prototype.Change = function (color /* :String */) {
    alert(color);
};