function CountryToggleControl() {}
CountryToggleControl.prototype = new GControl();

CountryToggleControl.prototype.initialize = function(map)
{
    var container = createElement("div");
    var outerBorderDiv = createElement("div");
    var innerBorderDiv = createElement("div");

    outerBorderDiv.title = "Toggle country list";
    outerBorderDiv.appendChild(innerBorderDiv);
    container.appendChild(outerBorderDiv);
    innerBorderDiv.appendChild(document.createTextNode("Countries"));

    this.setButtonStyle_(outerBorderDiv, innerBorderDiv, false);
    var setButtonStyle_ = this.setButtonStyle_;
    GEvent.addDomListener(innerBorderDiv, "click", function()
    {
        var center = map.getCenter();
        var country = document.getElementById(countryId);
        var mapDiv = document.getElementById(mapId);
        if (country.style.display == 'block')
        {
            country.style.display = 'none';
            mapDiv.className = mapBigClass;
            setButtonStyle_(outerBorderDiv, innerBorderDiv, false);
        }
        else
        {
            country.style.display = 'block';
            mapDiv.className = mapSmallClass;
            setButtonStyle_(outerBorderDiv, innerBorderDiv, true);
        }
        map.checkResize();
        map.panTo(center);
    });

    map.getContainer().appendChild(container);
    return container;
}

// By default, the control will appear in the top left corner of the map with 7 pixels of padding.
CountryToggleControl.prototype.getDefaultPosition = function()
{
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// Sets the proper CSS for the given button element.
CountryToggleControl.prototype.setButtonStyle_ = function(outer, inner, pushed)
{
    outer.style.border = "1px solid black";
    outer.style.backgroundColor = "white";
    outer.style.textAlign = "center";
    outer.style.width = "5.5em";
    outer.style.cursor = "pointer";
    outer.style.right = "12em";

    inner.style.borderStyle = "solid";
    inner.style.borderWidth = "1px";
    inner.style.fontSize = "12px";

    if (pushed)
    {
        inner.style.borderColor = "rgb(176, 176, 176) white white rgb(176, 176, 176)";
        inner.style.fontWeight = "bold";
    }
    else
    {
        inner.style.borderColor = "white rgb(176, 176, 176) rgb(176, 176, 176) white";
        inner.style.fontWeight = "normal";
    }
}

var iconData =
{
  "red": {width: 25, height: 25},
  "red_shadow": {width: 40, height: 40},
  "yellow": {width: 22, height: 22},
  "yellow_shadow": {width: 37, height: 37},
  "green": {width: 19, height: 19},
  "green_shadow": {width: 34, height: 34},
  "light_blue": {width: 16, height: 16},
  "light_blue_shadow": {width: 31, height: 31},
  "pink": {width: 13, height: 13},
  "pink_shadow": {width: 28, height: 28},
  "purple": {width: 10, height: 10},
  "purple_shadow": {width: 25, height: 25},
  "dark_blue": {width: 7, height: 7},
  "dark_blue_shadow": {width: 22, height: 22}
};

var map;
var mgr;
var icons = {};

function createMarker(point, icon, name, info, tbody, add)
{
    var html = infoCreator(name, info);
    var open = function()
    {
        marker.openInfoWindowHtml(html);
    }

    if (add)
    {
        $(tbody).append('<tr><td><a href="">' + name + '</a></td><td>' + info + '</td></tr>');
        $(tbody.lastChild).find('td a').each(function()
        {
            this.onclick = function() {open(); return false;};
        });
    }

    var marker = new GMarker(point, {title: name, icon: icon});
    GEvent.addListener(marker, "click", open);
    return marker;
}

function getIcon(images, scale)
{
    var icon = null;
    if (images)
    {
        var iconKey = images[0] + '_' + scale;
        if (icons[iconKey])
        {
            icon = icons[iconKey];
        }
        else
        {
            icon = new GIcon();
            icon.image = ctx + "/images/maps/" + images[0] + "_" + scale + ".png";
            var size = iconData[images[0]];
            var sizeX = size.width * scale;
            var sizeY = size.height * scale;
            icon.iconSize = new GSize(sizeX, sizeY);
            icon.iconAnchor = new GPoint(sizeX >> 1, sizeY >> 1);
            icon.infoWindowAnchor = new GPoint(sizeX >> 1, sizeY >> 1);
            icon.shadow = ctx + "/images/maps/" + images[0] + "_shadow_" + scale + ".png";
            icon.shadowSize = new GSize(sizeX + 15, sizeY + 15);
            icons[iconKey] = icon;
        }
    }
    return icon;
}

function loadMap()
{
    if (GBrowserIsCompatible())
    {
        map = new GMap2(document.getElementById(mapId));

        var minZoom = 17;
        var maxZoom = 0;
        for (var i in layers)
        {
            var layer = layers[i];
            minZoom = Math.min(layer["zoom"][0], minZoom);
            maxZoom = Math.max(layer["zoom"][1], maxZoom);
        }
        var mapTypes = map.getMapTypes();
        for (var i in mapTypes)
        {
            var mapType = mapTypes[i];
            mapType.getMinimumResolution = function() {return minZoom;}
            mapType.getMaximumResolution = function() {return maxZoom;}
        }

        map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 50)));
        map.addControl(new GMapTypeControl());
        map.addControl(new GOverviewMapControl());
        map.addControl(new CountryToggleControl());
        map.setCenter(new GLatLng(2.1088986592431382, -3.515625), 1);
        map.enableScrollWheelZoom();
        map.getContainer().style.overflow = "hidden";
        
        // prevent page scroll while zooming map with scroll wheel
        function wheelevent(e)
        {
            if (!e)
                e = window.event;
            if (e.preventDefault)
                e.preventDefault();
            e.returnValue = false;
        }
        GEvent.addDomListener(map.getContainer(), "DOMMouseScroll", wheelevent);
        map.getContainer().onmousewheel = wheelevent; 

        mgr = new GMarkerManager(map);
        var tbody = document.getElementById(tbodyId);
        tbody.removeChild(tbody.firstChild);
        for (var i in layers)
        {
            for (var k = layer["zoom"][0]; k <= layer["zoom"][1]; k++)
            {
                var layer = layers[i];
                var markers = [];
                var addToList = k == layer["zoom"][0];
                for (var j in layer["places"])
                {
                    var place = layer["places"][j];
                    var icon = getIcon(place["icon"], k);
                    var pos = new GLatLng(place["pos"][0], place["pos"][1]);
                    var marker = createMarker(pos, icon, place["name"], place["info"], tbody, addToList);
                    markers.push(marker);
                }
                mgr.addMarkers(markers, k, k);
            }
        }
        mgr.refresh();

        for (var i = 0; i < keys.length-1; i++)
        {
            var size = keys[i];
            var size2 = keys[i+1];
            setTextNode(sizePrefix+i, ""+size+" - "+size2);
        }
        document.getElementById(keyId).style.visibility = 'visible';
        
        // turn on the table sorting
        $("#"+tableId).tablesorter();
        $("#"+tableId).trigger('sorton', [[[1,1]]]);
    }
}

function unloadMap()
{
    GUnload();
}

addEvent(window, 'load', loadMap, false);
addEvent(window, 'unload', unloadMap, false);