Ext.layout.FlatMenuLayout = Ext.extend(Ext.layout.MenuLayout, {
	currentColumn:null,
	columns:null,
    renderItem : function(c, position, target){
		if (!this.columnTpl) {
			this.columnTpl = Ext.layout.FlatMenuLayout.prototype.columnTpl = 
				new Ext.XTemplate('<li style="float:left" id="{columnId}" class="flatmenu-column"></li>')
		}
        if (!this.itemTpl) {
            this.itemTpl = Ext.layout.FlatMenuLayout.prototype.itemTpl = new Ext.XTemplate(
                '<li id="{itemId}" style="{margin}" class="flatmenu {itemCls}">',
                    '<tpl if="needsIcon">',
                    '</tpl>',
                '</li>'
            );
        }
        if(c && !c.rendered){
			if (c.startCol || this.currentColumn==null) {
				if(this.columns === null)	{
					this.columns = [];
				}
				var li = this.columnTpl.append(target,{columnId: this.id + '-flatmenu-col-' + this.columns.length},true)
				this.currentColumn = new Ext.Element(document.createElement('UL'))
				li.appendChild(this.currentColumn)
				this.columns.push(this.currentColumn)
			}
            var a = this.getItemArgs(c);

			var el = this.itemTpl.append(this.currentColumn, a, true)
            c.positionEl = el
            c.positionEl.menuItemId = c.itemId || c.id;
            c.render(el);
        }
    },
    doAutoSize : function(){
        var ct = this.container, w = ct.width;
        if(ct.floating){
            if(w){
                ct.setWidth(w);
            }else {
				//calculate the width for ie
				var width = 0
				for (var i =0; i< this.columns.length; i++) {
					width += this.columns[i].getWidth()+ 2
				}
				ct.setWidth(width)
            }
        }
    }
});
Ext.Container.LAYOUTS['flatmenu'] = Ext.layout.FlatMenuLayout;