//GoogleMaps Interactive Map v. 1.0
//Created by Alexandre Nobajas
//Edinburgh 11th of May 2008
//This code has been designed so when somebody clicks on the map a marker can be created with the desired information

//Define Variables
var centerLatitude = 18.000345;
var centerLongitude = -76.829612;
var startZoom = 12;
var map;
var maptype = G_HYBRID_MAP;

//Announce the closing of the alert message
function changeBodyClass(from, to) {
     document.body.className = document.body.className.replace(from, to);
     return false;
}

//Map Functions and customisation of the layout
function init() {
    map = new GMap2(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GScaleControl());
    map.addControl(new GMapTypeControl());
    map.addControl(new GOverviewMapControl());
    map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
    map.setMapType(maptype);
    map.addMapType(G_PHYSICAL_MAP);
    map.enableScrollWheelZoom();

    //Markers Retrieval
    retrieveMarkers()


    //Close the loading alert after the map is loaded
	changeBodyClass('loading', 'standby');
}

window.onload = init;


// Function to create, define and customise marker
function createMarker(latlng, html, iconImage) {
    if(iconImage) {
        var icon = new GIcon();
        icon.image = iconImage;
        icon.iconSize = new GSize(25, 25);
        icon.iconAnchor = new GPoint(14, 14);
        icon.infoWindowAnchor = new GPoint(13, 13);
        var marker = new GMarker(latlng,icon);
    } else {
        var marker = new GMarker(latlng);
    }
    GEvent.addListener(marker, 'click', function() {
        var markerHTML = html;
        marker.openInfoWindowHtml(markerHTML);
    });
    return marker;
}

//Function to retrieve the markers from retrieveMarkers.php
function retrieveMarkers() {
    var request = GXmlHttp.create();

    //Explain the request where to retrieve data from.
    request.open('GET', 'retrieveMarkers.php', true);

    //Explain the request what to do when the state changes.
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
              var xmlDoc = request.responseXML;

              var markers = xmlDoc.documentElement.getElementsByTagName("marker");
              for (var i = 0; i < markers.length; i++) {
                   var lng = markers[i].getAttribute("lng");
                   var lat = markers[i].getAttribute("lat");

                   //Check for lng and lat so Internet Explorer does not give an error back on parseFloat of a null value
                   if(lng && lat) {
                      var latlng = new GLatLng(parseFloat(lat),parseFloat(lng));

		      //Define how the info will be shown when the icon is clicked
                      var html = '<div><b>Nickname:</b> '
                            + markers[i].getAttribute("nickname")
                            + '</div><div><b>Neighbourhood:</b> '
                            + markers[i].getAttribute("neighbourhood")
                            + '</div><div><b>Date:</b> '
                            + markers[i].getAttribute("tevent")
                            + '</div><div><b>Description of the Event/Issue:</b> '
                            + markers[i].getAttribute("desevent")
                            + '</div>';

                      var iconImage =  markers[i].getAttribute("icon");
                      var marker = createMarker(latlng, html, iconImage);
                      map.addOverlay(marker);
                   }
              } //for
        } //if
    } //function

    request.send(null);

}