Ext.namespace('Trakkware', 'Trakkware.CascadeMenu');
Trakkware.CascadeMenu = function(config) {
    Ext.apply(this, config, {
        maxMenuItems: 6
    });
    this.mainMenuEl = Ext.get(config.mainMenuEl);
    this.subMenuEl = Ext.get(config.subMenuEl);

    // render main menu
    // this.renderMainMenu(region, country);
    var region = '';
    this.renderMainMenu(region);
};
Ext.extend(Trakkware.CascadeMenu, Ext.util.Observable, {
    renderMainMenu: function(active, activeSubmenu) {
        this.subMenuEl.setHeight(0);
        var items = [];
        var stopRenderSub = false;
        var selectedId = -1;
        for (var i in this.menuData) {
            if (typeof (this.menuData[i]) !== 'object')
                continue;
            var name = this.menuData[i].menu;
            var isActive = (active == name);
            if (isActive) {
                selectedId = i;
                if (this.menuData[i].html) {
                    this.subMenuEl.update(this.menuData[i].html);
                    stopRenderSub = true;
                }
                if (!stopRenderSub) {
                    this.renderSubMenu(this.menuData[i].items, activeSubmenu)
                }
            }
            items.push({
                tag: 'li',
                html: name,
                cls: (isActive ? 'active' : ''),
                ix: i
            });
        }

        var domEl = Ext.DomHelper.overwrite(this.mainMenuEl, { tag: 'ul', children: items }, true);
        domEl.select('li').on('click', this.mainMenuClick, this);
        if (selectedId != -1) {
            this.mainMenuEl.child('li[ix=' + selectedId + ']').addClass('active');
            this.subMenuEl.setHeight('auto');
        }
    },
    mainMenuClick: function(e, dom) {
        this.subMenuEl.setHeight('auto');

        var el = Ext.fly(dom);
        el.parent().select('li').removeClass('active');
        var activeItem = this.menuData[el.getAttributeNS('', 'ix')];
        el.addClass('active');
        if (activeItem.html !== undefined) {
            this.subMenuEl.update(activeItem.html);
            return;
        } else {
            this.renderSubMenu(activeItem.items);
        }
    },
    renderSubMenu: function(subMenuData, active) {
        var count = 0;
        var col = [];
        var items = [];
        this.activeSubMenuData = subMenuData;
        for (var i in subMenuData) {
            if (typeof (subMenuData[i]) !== 'object')
                continue;
            var name = subMenuData[i].menu;
            var mapid = subMenuData[i].id;
            var isActive = (active == name);
            if (isActive && subMenuData[i].html !== undefined) {
                this.infoEl.update(subMenuData[i].html);
            }
            items.push({
                tag: 'li',
                html: name,
                cls: (isActive ? 'active' : ''),
                ix: i,
                id: mapid
            });
            count++;
            if (count >= this.maxMenuItems) {
                col.push({ tag: 'ul', children: items });
                count = 0;
                items = [];
            }
        }
        var themapapp = this.mapapp;
        var thefooterapp = this;
        col.push({ tag: 'ul', children: items });
        var domEl = Ext.DomHelper.overwrite(this.subMenuEl, col, true);
        Ext.get(document.body).select('li').on('click', function() { thefooterapp.subMenuEl.select('li').removeClass('active'); var me = Ext.get(this.id); me.addClass('active'); themapapp.markerClicked(this.id); });
    },
    subMenuClick: function(e, dom) {
        var el = Ext.fly(dom);
        el.parent().select('li').removeClass('active');
        el.addClass('active');
    }
});