Ext.namespace('TwentyFour.Scripts.Weather');

TwentyFour.Scripts.Weather.TwentyFourAnotherVerticalLayout = Ext.extend(Ext.layout.ContainerLayout, {

    regionManager : new TwentyFour.Scripts.Weather.RegionManager(),

    renderItem : function(c)
    {   
        TwentyFour.Scripts.Weather.TwentyFourAnotherVerticalLayout.superclass.renderItem.apply(this, arguments);
    
        // Set initial activeItem
        if (this.activeItem == null && c.selected)
        {
            this.regionManager.renderRegion(c.regionCode, c.regionMap, this.regionChangeHandler, this.location, this.navContainerId);
            this.activeItem = c;
        }
            
        c.header.on("click",this.onClick,this);
        c.header.on("mouseover",this.onMouseOver,c);
        c.header.on("mouseout",this.onMouseOut,c);
        
        if (c.verticalItemCls && c.verticalItemCls.length > 0)
            c.header.addClass(c.verticalItemCls);
    },
    
    onClick : function(response,e){   
        
        var newItem = this.container.items.get(e.parentNode.id);
        if (newItem == null)
            newItem = this.container.items.get(e.parentNode.parentNode.id);

        if (newItem != null && this.activeItem.id != newItem.id)
        {
            if (this.activeItem != null)
            {
                this.activeItem.selected = false;
                this.activeItem.header.replaceClass('hd-vertical2-select','hd-vertical2');
                this.activeItem.header.removeClass('hd-vertical-highlight');
            }
        
            newItem.selected = true;
            newItem.header.replaceClass('hd-vertical2','hd-vertical2-select');
            this.activeItem = newItem;
            this.regionManager.renderRegion(newItem.regionCode, newItem.regionMap, this.regionChangeHandler, this.location, this.navContainerId);
        }
    },
    
    onMouseOver : function(response,e){
        if (!this.selected)
            this.header.addClass('hd-vertical-highlight');
    },
    
    onMouseOut : function(response,e){
        if (!this.selected)
            this.header.removeClass('hd-vertical-highlight');
    }
});

Ext.Container.LAYOUTS['twentyfour_another_vertical_layout'] = TwentyFour.Scripts.Weather.TwentyFourAnotherVerticalLayout;