var map;

function InitMap()
{
    // Skapa hörn
    var divTop = document.createElement('DIV');
    divTop.id = 'mapBorderTop';
    var divBottom = document.createElement('DIV');
    divBottom.id = 'mapBorderBottom';
    if($('mapContainer'))
    {
        $('mapContainer').appendChild(divTop);
        $('mapContainer').appendChild(divBottom);
    }
    if (GBrowserIsCompatible()) {
        // variabel för HTML
        var side_bar_html = "";

        // === Create an associative array of GIcons() ===
        var gicons = [];
        gicons["yellow"] = new GIcon(G_DEFAULT_ICON, "images/gmap/marker.gif");
        gicons["yellow"].shadow  = "";

        // array som innehåller kopior av markörer som används av side_bar_html
        // eftersom closure trick inte fungerer här
        var gmarkers = [];
        var i = 0;
        
        // Skapa markörer och event window
        function createMarker(id, point,label,html,icontype,  lat, lng) {
            
            var marker = new GMarker(point,gicons[icontype]);
            GEvent.addListener(marker, 'click', function(){ 
                map.panTo(new GLatLng( lat,lng));
                $('infoWindowData').innerHTML = "<h2>" + label + "</h2>" + html;
                $('infoWindow').appear({ duration: 0});
            });
            return marker;
        }

        // Fånga klick och öppna info fönster
        function myclick(i) {
            GEvent.trigger(gmarkers[i], "click");
        }
                
        // Skapa karta
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GOverviewMapControl());
        map.setCenter(new GLatLng( 57.781798,14.158510), 6);
        
        // Läs in XML
        var request = GXmlHttp.create();
        /* TODO: ersätt med request open med rätt aspx sida      */  
        // Web        
        // request.open("GET", "http://rojos.pskommunikation.se/js/gmap/data.xml", true);
        // Local
        //request.open("GET", "/js/gmap/data.xml", true);
        request.open("GET", "gmapData.aspx", true);

        request.onreadystatechange = function() {
            if (request.readyState == 4) {
                var xmlDoc = GXml.parse(request.responseText);
                // obtain the array of markers and loop through it
                var markers = xmlDoc.documentElement.getElementsByTagName("Placemark");

                //alert (xmlDoc.documentElement.childNodes[0].attributes.getNamedItem("id").nodeValue);
                var icontype = "yellow";

                x=xmlDoc.getElementsByTagName("Placemark")[1].attributes;
                
                for (var i = 0; i < markers.length; i++) {
                
                    var id =xmlDoc.getElementsByTagName("Placemark")[i].attributes.getNamedItem("id").nodeValue;
                    var label = GXml.value(markers[i].getElementsByTagName("name")[0]);
                    var html = GXml.value(markers[i].getElementsByTagName("description")[0]);

                    // Dela upp koordinater och skapa Pointer
                    var coordinates = GXml.value(markers[i].getElementsByTagName("Point")[0]);
                    var splitResult = coordinates.split(",")
                    var lat = parseFloat(splitResult[0]);
                    var lng = parseFloat(splitResult[1]);
                    var point = new GLatLng(lat,lng);

                    // Skapa markör
                    var marker = createMarker(id, point,label,html,icontype, lat, lng);
                    map.addOverlay(marker);

                                
                }
                // Rendera html
                //document.getElementById("mapList").innerHTML += side_bar_html;
            }
        }
        request.send(null);
    }
    else {
        alert("Sorry, the Google Maps API is not compatible with this browser");
    }
}