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

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

     function forecast48HourCallBack(response)
     {   
        var panel = $e(_renderToLocation);
               
        if (response.error === null & response.value != null)
        {
            var data = response.value;
            var forecast48HourTemplate = new Ext.XTemplate(
            '<table cellpadding="0" cellspacing="1" border="0" class="forecastTable">\
                <tr><td class="forecastHeading" colspan="5">48 Hour Forecast</td></tr>\
                <tpl for="forecast24Hour">\
                    <tr>\
                        <td class="forecastHeading">&nbsp;</td>\
                        <td colspan="{\DayColSpan1}" class="forecastHeading">{\DayName1}</td>\
                        <tpl if="DayColSpan2 &gt; 0">\
                            <td colspan="{\DayColSpan2}" class="forecastHeading">{\DayName2}</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel" rowspan="2" style="width:20%">&nbsp;</td>\
                        <tpl for="Forecast">\
                            <td class="forecastSubHeading" style="width:20%">{DaySegment}</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <tpl for="Forecast">\
                           <td class="forecastDataItem"><img src="Images/Icons/Forecasts/{Icon}.gif" /><br />{Description}</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">Temperature</td>\
                        <tpl for="Forecast">\
                            <td class="forecastDataItem">{Temperature}&#176;C</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">Wind Direction</td>\
                        <tpl for="Forecast">\
                            <td class="forecastDataItem">{WindSpeed}&nbsp;km/h&nbsp;{WindDirectionAbreviated}</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">Humidity</td>\
                        <tpl for="Forecast">\
                            <td class="forecastDataItem">{Humidity}%</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">Dew Point</td>\
                        <tpl for="Forecast">\
                            <td class="forecastDataItem">{DewPoint}&#176;C</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">Comfort Level</td>\
                        <tpl for="Forecast">\
                            <td class="forecastDataItem">{Comfort}&#176;C</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">Visibility</td>\
                        <tpl for="Forecast">\
                            <td class="forecastDataItem">{Visibility}&nbsp;km</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">6hr. Precip. Total</td>\
                        <tpl for="Forecast">\
                            <td class="forecastDataItem">{Precipitation}&nbsp;</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel" style="height:30px;vertical-align:top;">Chance of Precip.</td>\
                        <tpl for="Forecast">\
                            <td class="forecastDataItem" style="vertical-align:top;border-bottom:0px;">{PrecipitationProbability}%</td>\
                        </tpl>\
                    </tr>\
                </tpl>\
            </table>'
            );
            
            
            forecast48HourTemplate.overwrite(panel, data);
         }
         else
            panel.update('No 48 Hour Forecast is available for this area. Please select another city and try again.');
    }
    return {
        
        showGrid : function(cityId, renderLocation){ 
            _renderToLocation = renderLocation;
            $e(_renderToLocation).update('<img src="Images/loading.gif"/>&nbsp;loading...');
            TwentyFour.Weather.Web.Ajax.GetForeCast48Hour(cityId, forecast48HourCallBack);
        }
    };
};