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

TwentyFour.Scripts.Weather.Forecast15DayExpandedManager = function()
{
    var _renderToLocation;

     function forecast15DayExpandedCallBack(response)
     {   
        var panel = $(_renderToLocation);
        
        if (response.error === null && response.value != null)
        {
            var data = response.value;
            
            var forecast15DayExpandedTemplate = new Ext.XTemplate(
            '<table cellpadding="0" cellspacing="1" border="0" class="forecastTable">\
                <tr><td class="forecastHeading" colspan="11">15 Day Expanded Forecast</td></tr>\
                <tr>\
                    <td class="forecastHeading">Day</td>\
                    <td class="forecastHeading" colspan="2">&nbsp;</td>\
                    <td class="forecastHeading">High Temp</td>\
                    <td class="forecastHeading">Low Temp</td>\
                    <td class="forecastHeading">Wind/Dir</td>\
                    <td class="forecastHeading">Humidity</td>\
                    <td class="forecastHeading">Comfort Level</td>\
                    <td class="forecastHeading">UV Index</td>\
                    <td class="forecastHeading">24hr. Precip. Total</td>\
                    <td class="forecastHeading">Chance of Precip.</td>\
                </tr>\
                <tpl for="Forecasts">\
                    <tr class="forecast48HourDataItem">\
                        <td class="forecastDataLabel">{FormattedDate}</td>\
                        <td class="forecastDataItem"><img src="Images/Icons/Forecasts/{Icon}.gif" /></td>\
                        <td class="forecastDataItem" class="left">{Description}&nbsp;</td>\
                        <td class="forecastDataItem">{HighTemp}°C</td>\
                        <td class="forecastDataItem">{LowTemp}°C</td>\
                        <td class="forecastDataItem">{WindSpeed}km/h {WindDirectionAbreviated}</td>\
                        <td class="forecastDataItem">{Humidity}%</td>\
                        <td class="forecastDataItem">{Comfort}°C</td>\
                        <td class="forecastDataItem">{UV}&nbsp;</td>\
                        <td class="forecastDataItem">{PrecipitationDescriptor}&nbsp;</td>\
                        <td class="forecastDataItem">{PrecipitationProbability}%</td>\
                    </tr>\
                </tpl>\
            </table>'
            );
            
            forecast15DayExpandedTemplate.overwrite(panel, data);
        }
        else
            panel.update('No 15 Day Expanded Forecast is available for this area. Please select another city and try again.');
    }
      
    return {
        showGrid : function(cityId, renderLocation){
            _renderToLocation = renderLocation;
            $(_renderToLocation).update('<img src="Images/loading.gif"/>&nbsp;loading...');
            TwentyFour.Weather.Web.Ajax.GetForecast15DayExpanded(cityId,forecast15DayExpandedCallBack);
        }
    };
};