Ext.menu.FlatItem = function(config){
    Ext.menu.FlatItem.superclass.constructor.call(this, config);
};
Ext.extend(Ext.menu.FlatItem, Ext.menu.BaseItem, {
    itemCls : 'x-menu-item',
    canActivate : true,
    showDelay: 200,
    hideDelay: 200,
    ctype: 'Ext.menu.FlatItem',
    onRender : function(container, position){
        if (!this.itemTpl) {
            this.itemTpl = Ext.menu.FlatItem.prototype.itemTpl = new Ext.XTemplate(
                '<h1 class="flatmenu-header"><a id="{id}" class="flatmenu-no-icon {cls}" hidefocus="true" unselectable="on" href="{href}"',
                    '<tpl if="hrefTarget">',
                        ' target="{hrefTarget}"',
                    '</tpl>',
                     '<span class="x-menu-item-text">{text}</span>',
                 '</a></h1>'
             );
            this.iconItemTpl = Ext.menu.FlatItem.prototype.iconItemTpl = new Ext.XTemplate(
                '<h1 class="flatmenu-header"><a id="{id}" class="{cls}" hidefocus="true" unselectable="on" href="{href}"',
                    '<tpl if="hrefTarget">',
                        ' target="{hrefTarget}"',
                    '</tpl>',
                     '<img src="{icon}" class="x-menu-item-icon {iconCls}"/>',
                     '<span class="x-menu-item-text">{text}</span>',
                 '</a></h1>'
             );
        }
        var a = this.getTemplateArgs();
		var tpl = this.itemTpl
		if (this.iconCls) tpl = this.iconItemTpl
        this.el = position ? tpl.insertBefore(position, a, true) : tpl.append(container, a, true);
        this.iconEl = this.el.child('img.x-menu-item-icon');
        this.textEl = this.el.child('.x-menu-item-text');
		//Render this.menu items
		if (this.menu) {
			var ul = new Ext.Element(document.createElement('UL'))
			ul.addClass('flatmenu-children')
			for(var i =0; i < this.menu.length; i++) {
				var config = this.menu[i]
				if (typeof config == 'undefined') continue;
			   if(!config.isXType){
					if(!config.xtype && Ext.isBoolean(config.checked)){
						var item = new Ext.menu.CheckItem(config)
					}
					else {
						var item = Ext.create(config,'menuitem');
					}
				this.renderItem(item,false,ul)
			   }
			}
			container.addClass('flatmenu-container')
			container.appendChild(ul)
		}


        //Ext.menu.FlatItem.superclass.onRender.call(this, container, position);
    },
    getItemArgs: function(c) {
        var isMenuItem = c instanceof Ext.menu.Item;
        return {
            isMenuItem: isMenuItem,
            needsIcon: !isMenuItem && (c.icon || c.iconCls),
            icon: c.icon || Ext.BLANK_IMAGE_URL,
            iconCls: 'x-menu-item-icon ' + (c.iconCls || ''),
            itemId: 'x-menu-el-' + c.id,
            itemCls: 'x-menu-list-item ' + (this.extraCls || '')
        };
    },
    renderItem : function(c, position, target){
        if (!this.childTpl) {
            this.childTpl = Ext.menu.FlatItem.prototype.childTpl = new Ext.XTemplate(
                '<li id="{itemId}" class="flatmenu {itemCls}">',
                    '<tpl if="needsIcon">',
                        '<img src="{icon}" class="{iconCls}"/>',
                    '</tpl>',
                '</li>'
            );
        }

        if(c && !c.rendered){
            if(Ext.isNumber(position)){
                position = target.dom.childNodes[position];
            }
            var a = this.getItemArgs(c);
            c.render(c.positionEl = position ?
                this.childTpl.insertBefore(position, a, true) :
                this.childTpl.append(target, a, true));

            c.positionEl.menuItemId = c.itemId || c.id;
			c.parentMenu = this.ownerCt

            if (!a.isMenuItem && a.needsIcon) {
                c.positionEl.addClass('x-menu-list-item-indent');
            }
        }else if(c && !this.isValidParent(c, target)){
            if(Ext.isNumber(position)){
                position = target.dom.childNodes[position];
            }
            target.dom.insertBefore(c.getActionEl().dom, position || null);
        }
    },
    getTemplateArgs: function() {
        return {
            id: this.id,
            cls: this.itemCls + (this.cls ?  ' ' + this.cls : ''),
            href: this.href || '#',
            hrefTarget: this.hrefTarget,
            icon: this.icon || Ext.BLANK_IMAGE_URL,
            iconCls: this.iconCls || '',
            text: this.itemText||this.text||'&#160;'
        };
    },
    setText : function(text){
        this.text = text||'&#160;';
        if(this.rendered){
            this.textEl.update(this.text);
            this.parentMenu.layout.doAutoSize();
        }
    },
    setIconClass : function(cls){
        var oldCls = this.iconCls;
        this.iconCls = cls;
        if(this.rendered){
            this.iconEl.replaceClass(oldCls, this.iconCls);
        }
    },
    beforeDestroy: function(){
        if (this.menu && this.rendered && this.menu.destory){
            this.menu.destroy();
        }
        Ext.menu.FlatItem.superclass.beforeDestroy.call(this);
    },
    handleClick : function(e){
        if(!this.href){ // if no link defined, stop the event automatically
            e.stopEvent();
        }
        Ext.menu.FlatItem.superclass.handleClick.apply(this, arguments);
    },
    activate : function(autoExpand){
		return false;
        if(Ext.menu.FlatItem.superclass.activate.apply(this, arguments)){
            this.focus();
            if(autoExpand){
                this.expandMenu();
            }
        }
        return true;
    },
    shouldDeactivate : function(e){
        return true;
    },
    deactivate : function(){
        Ext.menu.FlatItem.superclass.deactivate.apply(this, arguments);
        this.hideMenu();
    },
    expandMenu : function(autoActivate){
    },
    deferExpand : function(autoActivate){
    },
    hideMenu : function(){
    },
    deferHide : function(){
    }
});
Ext.reg('flatmenuitem', Ext.menu.FlatItem);