/**
 * file ColumnMenu.js with ColumnMenu class
 * @author Janusz Rygał
 * @date 04.02.2009 
 */

/**
 * @class ColoumnMenu
 * ColumnMenu class
 */
Ext.ux.ColumnMenu = function(config) {

    Ext.ux.ColumnMenu.superclass.constructor.call(this, config);

};

Ext.extend( Ext.ux.ColumnMenu , Ext.menu.Menu , {



    render: function() {

        if (this.el) {

            return;

        }

        var el = this.el = this.createEl();



        if (!this.keyNav) {

            this.keyNav = new Ext.menu.MenuNav( this );

        }

        

        if ( this.plain ) {

            el.addClass("x-menu-plain");

        }

        

        if ( this.cls ) {

            el.addClass( this.cls );

        }



        this.focusEl = el.createChild({

            cls: "x-menu-focus",

            href: "#",

            onclick: "return false;",

            tabIndex:"-1",

            tag: "a"

        });

        

        var column = null;

        var ul;

        var columnWidth = this.columnWidth || 148;

        var spacerWidth = this.spacerWidth || 5;



        this.items.each(function(item) {



            if (column === null || column.getHeight() >= this.maxHeight) {

                if (column !== null) {

                    el.createChild({

                        cls: "x-menu-column x-menu-spacer",

                        style: "width: " + columnWidth + "px; float: left; padding: 0;",

                        tag: "div",

                        cn : [{

                            html:' ',

                            style: "width: " + spacerWidth + "px; float: left; padding: 0;",

                            tag: "div"

                        }]

                    });

                }



                column = el.createChild({

                    cls: "x-menu-column",

                    style: "width: " + columnWidth + "px; float: left; padding: 0;",

                    tag: "div"

                });



                ul = column.createChild({

                    cls: "x-menu-list",

                    tag: "ul"

                });

                ul.on("click", this.onClick, this);

                ul.on("mouseover", this.onMouseOver, this);

                ul.on("mouseout", this.onMouseOut, this);     



            }



            var li = document.createElement("li");

            li.className = "x-menu-list-item";

            ul.dom.appendChild(li);

            item.render(li, this);



        }, this);



    }

});

Ext.reg('columnmenu', Ext.ux.ColumnMenu);