Ext.namespace('TwentyFour.Scripts.Weather');

TwentyFour.Scripts.Weather.TwentyFourVerticalLayout = Ext.extend(Ext.layout.ContainerLayout, {

    forecastManager : new TwentyFour.Scripts.Weather.ForecastManager(),
    contentLocation : null,

    renderItem : function(c)
    {   
        TwentyFour.Scripts.Weather.TwentyFourVerticalLayout.superclass.renderItem.apply(this, arguments);
    
        // Set initial activeItem
        if (this.activeItem == null && c.selected)
        {
            this.forecastManager.renderForecast(c.forecast, this.contentLocation)
            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-vertical-select','hd-vertical');
                this.activeItem.header.removeClass('hd-vertical-highlight');
            }
        
            newItem.selected = true;
            newItem.header.replaceClass('hd-vertical','hd-vertical-select');
            this.activeItem = newItem;
        }
        this.forecastManager.renderForecast(this.activeItem.forecast, this.contentLocation);
    },
    
    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_vertical_layout'] = TwentyFour.Scripts.Weather.TwentyFourVerticalLayout;



