var mapManager;
var selectedMap;
var selectedCountry;

Ext.onReady(function() 
{  
    mapManager = new TwentyFour.Scripts.Weather.MapManager();
    updateMap('Africa','currentConditions');
    $(_ddlCountryId).on('change',populateCities);
    $(_btnGo).on('click',validateGo);
    populateBottomNavBar();
});

function populateCities(e,ddl)
{
    var ddlCountry = $(_ddlCountryId).dom;
    $(_ddlCityId).dom.options.length = 0;
    $(_ddlCityId).dom.options.add(new Option('loading...','-1'));
    TwentyFour.Weather.Web.Ajax.GetCities("Africa",ddl.options[ddl.selectedIndex].value, populateCitiesCallback);
}

function populateCitiesCallback(response)
{
    var ddl = $(_ddlCityId).dom;
    if (!response.error)
    {
        var data = response.value;
        if (data != null && data.length > 0)
        {
            ddl.options.length = 0; 
            for (var i=0; i<data.length; i++)
            {
                ddl.options.add(new Option(data[i].Text, data[i].Value));
            }
        }
    }
}

function populateBottomNavBar()
{
    TwentyFour.Weather.Web.Ajax.GetMaps(getMapsCallback);
}

function getMapsCallback(response)
{
    var data = response.value;

    var tpl = new Ext.XTemplate(
        '<ul>\
            <tpl for="Maps">\
                <tpl exec="++this.index"></tpl>\
                <tpl if="this.index == 1">\
			        <li id="currentMap" class="current"><a href="javascript:void(0);" onclick=\'return updateMap("Africa","{Second}", this);\'>{First}</a></li>\
                </tpl>\
                <tpl if="this.index &gt; 1">\
			            <li class="divider">|</li><li><a href="javascript:void(0);" onclick=\'return updateMap("Africa","{Second}", this);\'>{First}</a></li>\
			    </tpl>\
            </tpl>\
        </ul>',{index: 0,totalRecords : data.Maps.length});
        
    tpl.overwrite($('divBottomNav'), data);
}

function updateMap(region, map, relatedObj)
{
    if (relatedObj)
    {
        var current = getCurrentMap();
        current.removeClass("current");
        
        this.selectedMap = $(relatedObj.parentNode);
        this.selectedMap.addClass("current");
    }
    mapManager.displayMap('mapContainer',map,region,'divBottomNav');
    globalManager.updatePageForAjax(true, 'maps/' + region + '/' + map);
    return false;
}

function getCurrentMap()
{
    if (this.selectedMap == null)
        if ($("currentMap") != null)
            return $("currentMap");
        else
            return null;
    else
        return this.selectedMap;
}

function validateGo(e,button)
{
    var ddl = $(_ddlCityId).dom;
    if (ddl.options[ddl.selectedIndex].value == '-1')
    {
        e.stopEvent();
        alert('Please select a city/town');
    }
}