﻿Ext.namespace("TwentyFour.Scripts.Weather");

TwentyFour.Scripts.Weather.Forecast7DayExpandedManager = function()
{
    var _renderToLocation;

     function forecast7DayExpandedCallBack(response)
     {   
        var panel = $e(_renderToLocation);
        
        if (response.error === null && response.value != null)
        {
            var data = response.value;
            
            var forecast7DayExpandedTemplate = new Ext.XTemplate(
            '<table cellpadding="0" cellspacing="1" border="0" class="forecastTable">\
                <tr><td class="forecastHeading" colspan="11">7 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>\
                        <td class="forecastDataLabel">{ShortWeekDay}</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">{Rainfall}&nbsp;</td>\
                        <td class="forecastDataItem">{PrecipitationProbability}%</td>\
                    </tr>\
                </tpl>\
            </table>'
            );
            
            forecast7DayExpandedTemplate.overwrite(panel, data);
        }
         else
            panel.update('No 7 Day Extended 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.GetForecast7DayExpanded(cityId, forecast7DayExpandedCallBack);
        }
    };
};
