﻿Ext.namespace("TwentyFour.Scripts.Weather");

function updateHistoricalClimateReport(firstCall, location) {   

    var monthIndex;
    if (firstCall) 
    {
        // Get the current month
        var dt = new Date();
        monthIndex = parseInt(dt.format('n') - 1);  // Subtract 1 to get array index
    }
    else
    {
        var selMonth = $('selHistoricalClimateMonth').dom;
        monthIndex = parseInt(selMonth.options[selMonth.selectedIndex].value);
    }
            
    var _historicalClimateManager = new TwentyFour.Scripts.Weather.HistoricalClimateManager();
    _historicalClimateManager.showGrid(_cityId, monthIndex, location);
}

function updateHistoricalClimateHeading(monthIndex)
{
    var selMonth = $('selHistoricalClimateMonth').dom;
    selMonth.selectedIndex = monthIndex;    
    $('spnHistoricalClimateMonth').dom.innerHTML = Date.monthNames[monthIndex] + "&nbsp;Data";
}

TwentyFour.Scripts.Weather.HistoricalClimateManager = function()
{
    var _renderToLocation;
    var _monthIndex;
    var _cityId;
    
    function historicalClimateCallBack(response)
    {   
        var panel = $(_renderToLocation);
        
        if (response.error === null && response.value != null)
        {
            var data = response.value;
            
            var historicalClimateTemplate = new Ext.XTemplate(
                '<table cellpadding="0" cellspacing="1" border="0" class="forecastTable">\
                    <tr><td class="forecastHeading" colspan="4">History</td></tr>\
                    <tr><td class="forecastSubHeading"><span id="spnHistoricalClimateMonth">&nbsp;</span></td>\
                    <td colspan="3" class="forecastSubHeading" style="padding:0px;">Choose another month&nbsp;\
                    <select class="ddlists" id="selHistoricalClimateMonth">\
                        <option value="0">January</option>\
                        <option value="1">February</option>\
                        <option value="2">March</option>\
                        <option value="3">April</option>\
                        <option value="4">May</option>\
                        <option value="5">June</option>\
                        <option value="6">July</option>\
                        <option value="7">August</option>\
                        <option value="8">September</option>\
                        <option value="9">October</option>\
                        <option value="10">November</option>\
                        <option value="11">December</option>\
                    </select>&nbsp;<button class="btns" id="btnUpdateHistoricalReport" onclick="updateHistoricalClimateReport(false,\'' + _renderToLocation + '\');">SUBMIT QUERY</button>\
                    </td></tr>\
                    <tr><td colspan="4" class="forecastSubHeading">Averages</td></tr>\
                    <tr>\
                        <td class="forecastHeading">Average High Temperature</td>\
                        <td class="forecastDataItem">{AvgHighTemperature}&#176;C</td>\
                        <td class="forecastHeading">Average Morning Relative Humidity</td>\
                        <td class="forecastDataItem">{AvgMorningRelativeHumidity}&nbsp;</td>\
                    </tr>\
                    <tr>\
                        <td class="forecastHeading">Average Low Temperature</td>\
                        <td class="forecastDataItem">{AvgLowTemperature}&#176;C</td>\
                        <td class="forecastHeading">Average Afternoon Relative Humidity</td>\
                        <td class="forecastDataItem">{AvgAfternoonRelativeHumidity}&nbsp;</td>\
                    </tr>\
                    <tr>\
                        <td class="forecastHeading">Mean Temperature</td>\
                        <td class="forecastDataItem">{MeanTemperature}&#176;C</td>\
                        <td class="forecastHeading">Typical Sky Cover</td>\
                        <td class="forecastDataItem">{TypicalSkyCover}&nbsp;</td>\
                    </tr>\
                    <tr>\
                        <td class="forecastHeading">Average Wind Speed</td>\
                        <td class="forecastDataItem">{AvgWindSpeed} km/h</td>\
                        <td class="forecastHeading">Average Dew Point</td>\
                        <td class="forecastDataItem">{AvgDewpoint}&nbsp;</td>\
                    </tr>\
                    <tr>\
                        <td class="forecastHeading">Average Wind Direction</td>\
                        <td class="forecastDataItem">{AvgWindDirection}&nbsp;</td>\
                        <td class="forecastHeading">&nbsp;</td>\
                        <td class="forecastDataItem">&nbsp;</td>\
                    </tr>\
                    <tr><td colspan="4" class="forecastSubHeading">Daily Counts</td></tr>\
                    <tr>\
                        <td class="forecastHeading">Days with Precipitation</td>\
                        <td class="forecastDataItem">{NumPrecipDays}&nbsp;</td>\
                        <td class="forecastHeading">Days with Snow</td>\
                        <td class="forecastDataItem">{NumSnowDays}&nbsp;</td>\
                    </tr>\
                    <tr>\
                        <td class="forecastHeading">Days with Thunderstorms</td>\
                        <td class="forecastDataItem">{NumThunderstormDays}&nbsp;</td>\
                        <td class="forecastHeading">Days with Lows below Freezing</td>\
                        <td class="forecastDataItem">{NumFreezingDays}&nbsp;</td>\
                    </tr>\
                    <tr>\
                        <td class="forecastHeading">Days with Fog</td>\
                        <td class="forecastDataItem">{NumFoggyDays}&nbsp;</td>\
                        <td class="forecastHeading">Days above 32.2&#176;C (90&#176;F)</td>\
                        <td class="forecastDataItem">{NumDaysAbove90F}&nbsp;</td>\
                    </tr>\
                    <tr><td class="forecastSubHeading" colspan="4">Records</td></tr>\
                    <tr>\
                        <td class="forecastHeading">Record High</td>\
                        <td class="forecastDataItem">{RecordHighTemperature}&#176;C</td>\
                        <td class="forecastHeading">Record 24 Hour Snowfall</td>\
                        <td class="forecastDataItem">{RecordOneDaySnowfall}&nbsp;</td>\
                    </tr>\
                    <tr>\
                        <td class="forecastHeading">Record Low</td>\
                        <td class="forecastDataItem">{RecordLowTemperature}&#176;C</td>\
                        <td class="forecastHeading">Record Monthly Snowfall</td>\
                        <td class="forecastDataItem">{RecordMonthlySnowfall}&nbsp;</td>\
                    </tr>\
                    <tr>\
                        <td class="forecastHeading">Record Wind Speed</td>\
                        <td class="forecastDataItem">{RecordWindSpeed} km/h</td>\
                        <td class="forecastHeading">Record 24-hour Rainfall</td>\
                        <td class="forecastDataItem">{RecordOneDayRainfall}&nbsp;</td>\
                    </tr>\
                    <tr>\
                        <td class="forecastHeading">Record Monthly Snowfall</td>\
                        <td class="forecastDataItem">{RecordMonthlySnowfall}&nbsp;</td>\
                        <td class="forecastHeading">Record Minimum Monthly Precipitation</td>\
                        <td class="forecastDataItem">{RecordMinMonthlyPrecipitation}&nbsp;</td>\
                    </tr>\
                </table>'
            );
            historicalClimateTemplate.overwrite(panel, data);
            updateHistoricalClimateHeading(_monthIndex);
        }
        else
            panel.update('No Historical Data is available for this area. Please select another city and try again.');
    }

    return {
        
        showGrid : function(cityId, monthIndex, renderLocation){    
            _renderToLocation = renderLocation;
            _monthIndex = monthIndex;
            _cityId = cityId;
            $(_renderToLocation).update('<img src="Images/loading.gif"/>&nbsp;loading...');
            TwentyFour.Weather.Web.Ajax.GetHistoricalClimateReport(cityId, monthIndex, historicalClimateCallBack);
        }
    };
};

