﻿Ext.namespace("TwentyFour.Scripts.Weather");

TwentyFour.Scripts.Weather.TideReportExtendedManager = function()
{
    var _renderToLocation;

     function tideReportExtendedCallBack(response)
     {   
        var panel = $(_renderToLocation);
        
        if (response.error === null && response.value != null)
        {
            var data = response.value;
            var tideReportExtendedTemplate = new Ext.XTemplate(
            '<table cellpadding="4" cellspacing="1" border="0" class="forecastTable">\
                <tr><td colspan="6" class="forecastHeading">Tide Tables</td></tr>\
                <tr>\
                    <td class="forecastHeading" colspan="2">&nbsp;</td>\
                    <td class="forecastHeading" colspan="2">High Tide</td>\
                    <td class="forecastHeading" colspan="2">Low Tide</td>\
                </tr>\
                <tr>\
                    <td class="forecastHeading" colspan="2">&nbsp;</td>\
                    <td class="forecastSubHeading">Time</td>\
                    <td class="forecastSubHeading">Height</td>\
                    <td class="forecastSubHeading">Time</td>\
                    <td class="forecastSubHeading">Height</td>\
                </tr>\
                <tpl for="FirstDayForecast">\
                    <tr>\
                        <td class="forecastHeading" rowspan="6">\
                            {DateFormatted}\
                        </td>\
                        <td class="forecastDataLabel">Tide Set One</td>\
                        <tpl for="FirstTideSetHigh">\
                            <td class="forecastDataItem">{Time}&nbsp;</td>\
                           <tpl if="Height == \'\'">\
                                <td class="forecastDataItem">&nbsp;</td>\
                            </tpl>\
                            <tpl if="Height != \'\'">\
                                <td class="forecastDataItem">{Height}m</td>\
                            </tpl>\
                        </tpl>\
                        <tpl for="FirstTideSetLow">\
                            <td class="forecastDataItem">{Time}&nbsp;</td>\
                           <tpl if="Height == \'\'">\
                                <td class="forecastDataItem">&nbsp;</td>\
                            </tpl>\
                            <tpl if="Height != \'\'">\
                                <td class="forecastDataItem">{Height}m</td>\
                            </tpl>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">Tide Set Two</td>\
                        <tpl for="SecondTideSetHigh">\
                            <td class="forecastDataItem">{Time}&nbsp;</td>\
                           <tpl if="Height == \'\'">\
                                <td class="forecastDataItem">&nbsp;</td>\
                            </tpl>\
                            <tpl if="Height != \'\'">\
                                <td class="forecastDataItem">{Height}m</td>\
                            </tpl>\
                        </tpl>\
                        <tpl for="SecondTideSetLow">\
                            <td class="forecastDataItem">{Time}&nbsp;</td>\
                           <tpl if="Height == \'\'">\
                                <td class="forecastDataItem">&nbsp;</td>\
                            </tpl>\
                            <tpl if="Height != \'\'">\
                                <td class="forecastDataItem">{Height}m</td>\
                            </tpl>\
                        </tpl>\
                    </tr>\
                </tpl>\
                <tpl for="AstronomyForecast">\
                    <tr><td class="forecastHeading" colspan="5">Astronomy Information</td></tr>\
                    <tr>\
                        <td class="forecastDataLabel">&nbsp;</td>\
                        <td class="forecastSubHeading">&nbsp;</td>\
                        <td class="forecastSubHeading">Moonphase</td>\
                        <td class="forecastSubHeading">Rise</td>\
                        <td class="forecastSubHeading">Set</td>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">Moon</td>\
                        <td class="forecastDataItem"><img src="Images/Icons/Moon/{IconName}.gif"></td>\
                        <td class="forecastDataItem">{MoonPhaseDescription}</td>\
                        <td class="forecastDataItem">{Moonrise}</td>\
                        <td class="forecastDataItem">{Moonset}</td>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">Sun</td>\
                        <td class="forecastDataItem">&nbsp;</td>\
                        <td class="forecastDataItem">&nbsp;</td>\
                        <td class="forecastDataItem">{Sunrise}</td>\
                        <td class="forecastDataItem">{Sunset}</td>\
                    </tr>\
                </tpl>\
                <tr>\
                    <td class="forecastHeading" colspan="2">&nbsp;</td>\
                    <td class="forecastHeading" colspan="2">High Tide</td>\
                    <td class="forecastHeading" colspan="2">Low Tide</td>\
                </tr>\
                <tr>\
                    <td class="forecastHeading" colspan="2">&nbsp;</td>\
                    <td class="forecastSubHeading">Time</td>\
                    <td class="forecastSubHeading">Height</td>\
                    <td class="forecastSubHeading">Time</td>\
                    <td class="forecastSubHeading">Height</td>\
                </tr>\
                <tpl for="OtherDayForecasts">\
                    <tr>\
                        <td class="forecastHeading" rowspan="2">\
                            {DateFormatted}\
                        </td>\
                        <td class="forecastDataLabel">Tide Set One</td>\
                        <tpl for="FirstTideSetHigh">\
                            <td class="forecastDataItem">{Time}&nbsp;</td>\
                           <tpl if="Height == \'\'">\
                                <td class="forecastDataItem">&nbsp;</td>\
                            </tpl>\
                            <tpl if="Height != \'\'">\
                                <td class="forecastDataItem">{Height}m</td>\
                            </tpl>\
                        </tpl>\
                        <tpl for="FirstTideSetLow">\
                            <td class="forecastDataItem">{Time}&nbsp;</td>\
                           <tpl if="Height == \'\'">\
                                <td class="forecastDataItem">&nbsp;</td>\
                            </tpl>\
                            <tpl if="Height != \'\'">\
                                <td class="forecastDataItem">{Height}m</td>\
                            </tpl>\
                        </tpl>\
                    </tr>\
                    <tr>\
                        <td class="forecastDataLabel">Tide Set Two</td>\
                        <tpl for="SecondTideSetHigh">\
                            <td class="forecastDataItem">{Time}&nbsp;</td>\
                           <tpl if="Height == \'\'">\
                                <td class="forecastDataItem">&nbsp;</td>\
                            </tpl>\
                            <tpl if="Height != \'\'">\
                                <td class="forecastDataItem">{Height}m</td>\
                            </tpl>\
                        </tpl>\
                        <tpl for="SecondTideSetLow">\
                            <td class="forecastDataItem">{Time}&nbsp;</td>\
                           <tpl if="Height == \'\'">\
                                <td class="forecastDataItem">&nbsp;</td>\
                            </tpl>\
                            <tpl if="Height != \'\'">\
                                <td class="forecastDataItem">{Height}m</td>\
                            </tpl>\
                        </tpl>\
                    </tr>\
                </tpl>\
            </table>'                
            );
            
            tideReportExtendedTemplate.overwrite(panel, data);
         }
         else
            panel.update('No Extended Tide Data is available for this area.'); 
    }
    return {
        
        showGrid : function(cityId, renderLocation){ 
            _renderToLocation = renderLocation;
            $(_renderToLocation).update('<img src="Images/loading.gif"/>&nbsp;loading...');
            TwentyFour.Weather.Web.Ajax.Get30DayTideForecast(cityId, tideReportExtendedCallBack);
        }
    };
};