Ext.ux.SmilesMenu = function (config) {
	Ext.ux.SmilesMenu.superclass.constructor.call(this, config);
  this.plain = true;
  var ci = new Ext.ux.SmilesItem(config);
  this.add(ci);
  
  //this.palette = ci.palette;
  this.relayEvents(ci, ["select"]);
}

Ext.extend(Ext.ux.SmilesMenu, Ext.menu.Menu, {
});





Ext.ux.SmilesItem = function(config){
    Ext.ux.SmilesItem.superclass.constructor.call(this, new Ext.SmilesPalette(config), config);
    
    this.palette = this.component;
    this.relayEvents(this.palette, ["select"]);
    if(this.selectHandler){
        this.on('select', this.selectHandler, this.scope);
    }
};
Ext.extend(Ext.ux.SmilesItem, Ext.menu.Adapter);











Ext.SmilesPalette = function(config){
    Ext.SmilesPalette.superclass.constructor.call(this, config);
    this.addEvents({
        
        select: true
    });

    if(this.handler){
        this.on("select", this.handler, this.scope, true);
    }
};
Ext.extend(Ext.SmilesPalette, Ext.Component, {
    
    itemCls : "x-smile-palette",
    
    value : null,
    clickEvent:'click',
        ctype: "Ext.SmilesPalette",

    
    allowReselect : false,

    
    colors : [
        "000000", "993300", "333300", "003300", "003366", "000080", "333399", "333333",
        "800000", "FF6600", "808000", "008000", "008080", "0000FF", "666699", "808080",
        "FF0000", "FF9900", "99CC00", "339966", "33CCCC", "3366FF", "800080", "969696",
        "FF00FF", "FFCC00", "FFFF00", "00FF00", "00FFFF", "00CCFF", "993366", "C0C0C0",
        "FF99CC", "FFCC99", "FFFF99", "CCFFCC", "CCFFFF", "99CCFF", "CC99FF", "FFFFFF"
    ],
    	
    smiles: [
    	"angel","ban", "bigeyes", "censored", "clap", "doctor", "fight", "verybigeyes", "help", "weep", "wink", "insane", "laught", "love", "ninja", "sad", "smile", 
    	"smile2", "smile3", "sleep", "super", "tease", "think"
    ],

    onRender : function(container, position){
        var t = new Ext.MasterTemplate(
            '<tpl><a href="#" class="smile-{0}" hidefocus="on"><em><img src="/pages/channel/smiles/gal1/{0}.gif" unselectable="on"></em></a></tpl>'
        );
        var c = this.smiles;
        for(var i = 0, len = c.length; i < len; i++){
            t.add([c[i]]);
        }
        var el = document.createElement("div");
        el.className = this.itemCls;
        t.overwrite(el);
        container.dom.insertBefore(el, position);
        this.el = Ext.get(el);
        this.el.on(this.clickEvent, this.handleClick,  this, {delegate: "a"});
        if(this.clickEvent != 'click'){
            this.el.on('click', Ext.emptyFn,  this, {delegate: "a", preventDefault:true});
        }
    },

    afterRender : function(){
      Ext.SmilesPalette.superclass.afterRender.call(this);
      if(this.value){
          var s = this.value;
          this.value = null;
          this.select(s);
      }
    },

    handleClick : function(e, t){
      e.preventDefault();
      if(!this.disabled){
          var c = t.className.match(/(?:^|\s)smile-(.*)(?:\s|$)/)[1];
          this.select(c);
      }
    },

    
    select : function(color){
      if(color != this.value || this.allowReselect){
      	 this.fireEvent("select", this, color);
      }
    }
});