﻿Ext.namespace("TwentyFour.Scripts.Weather");

TwentyFour.Scripts.Weather.FireReportManager = function()
{
    var _renderToLocation;

     function fireReportCallBack(response)
     {   
        var panel = $(_renderToLocation);
        
        if (response.error === null && response.value != null)
        {
            var data = response.value;
            var fireReportTemplate = new Ext.XTemplate(
            '<table cellpadding="0" cellspacing="1" border="0" class="forecastTable">\
                <tr><td class="forecastHeading" colspan="6">48-Hour Detailed</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="forecastSubHeading" rowspan="3" 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/Fire/Large/{IconName}.gif" /><br />{Description}</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <tpl for="Forecast">\
                            <td class="forecastDataItem">{LevelDescription}&nbsp;</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">Upper Soil Moisture</td>\
                        <tpl for="Forecast">\
                            <td class="forecastDataItem">{UpperSoilMoisture}&nbsp;</td>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">Deep Soil Moisture</td>\
                        <tpl for="Forecast">\
                            <td class="forecastDataItem">{LowerSoilMoisture}&nbsp;</td>\
                        </tpl>\
                    </tr>\
                </tpl>\
            </table>\
            <br />\
            <tpl for="extendedForecast">\
                <table cellpadding="0" cellspacing="1" border="0" class="forecastTable">\
                    <tr><td class="forecastHeading" colspan="6">7-Day Extended</td></tr>\
                    <tr>\
                        <td class="forecastHeading">Day</td>\
                        <td class="forecastHeading" colspan="2">&nbsp;</td>\
                        <td class="forecastHeading">Reason</td>\
                        <td class="forecastHeading">Upper Soil Moisture</td>\
                        <td class="forecastHeading">Deep Soil Moisture</td>\
                    </tr>\
                    <tpl for="Forecasts">\
                        <tr class="forecastExtendedDataItem">\
                            <td class="forecastDataLabel forecastExtendedItem">{ShortWeekDay}</td>\
                            <td class="forecastDataItem"><img src="Images/Icons/Fire/{IconName}.gif" /></td>\
                            <td class="forecastDataItem">{LevelDescription}&nbsp;</td>\
                            <td class="forecastDataItem">{DangerReason}&nbsp;</td>\
                            <td class="forecastDataItem">{UpperSoilMoisture}&nbsp;</td>\
                            <td class="forecastDataItem">{LowerSoilMoisture}&nbsp;</td>\
                        </tr>\
                    </tpl>\
                </table>\
            </tpl>'
            );
            
            fireReportTemplate.overwrite(panel, data);
         }
         else
            panel.update('No Fire Data 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.GetFireReport(cityId, fireReportCallBack);
        }
    };
};