var state = 'recent'
var add_marker = 0
var map
var marker = [];

var basePin = new GIcon();
basePin.shadow = "pin_shadow.png";
basePin.iconSize = new GSize(12,20);
basePin.shadowSize = new GSize(22,20);
basePin.iconAnchor = new GPoint(6,20);
basePin.infoWindowAnchor = new GPoint(5,1);

var redPin = new GIcon(basePin);    redPin.image = "pin_red.png";
var yellowPin = new GIcon(basePin); yellowPin.image = "pin_yellow.png";
    
// arrays to hold copies of the markers and html used by the sidebar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];
var ii = 0;
var sidebar_html="";

function createPin(id, point, html, label) {
    var m = new GMarker(point, redPin);
    m.id = id
    m.bubbletext = html
    GEvent.addListener(m, "click", function() {
        m.openInfoWindowHtml(html)
    });
    map.addOverlay(m)

    // save the info we need to use later for the sidebar
    gmarkers[ii] = m;
    htmls[ii] = html;
    sidebar_html += '<a href="javascript:myclick(' + ii + ')">'  + label + '</a><br>';
    ii++;
    return m;
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
	gmarkers[i].openInfoWindowHtml(htmls[i]);
}

GSize.fromLatLngXml = function(s) {
    return new GSize(s.getAttribute('lng'), s.getAttribute('lat'));
}
GPoint.fromLatLngXml = function(c) {
    return new GPoint(c.getAttribute('lng'), c.getAttribute('lat'));
}

function revert() {
    map.centerAndZoom(new GPoint(37.81271,48.00371),4);
    return false;
}



function onLoad() {

    if (GBrowserIsCompatible()) {
        // do nothing
    } else {
        document.getElementById('browserwontwork').className= '';
    }

    map = new GMap(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    map.setCenter(new GLatLng(48.00371,37.81271),13);
    map.setMapType(G_SATELLITE_MAP); 

    GEvent.addListener(map, 'click', function(overlay, point) {
        if (state!='adding') return false
        if (overlay) return false
        else if (point) {
            var s= 100000
            var str = "long. = " + Math.round(point.x*s)/s + "; lat. = " + Math.round(point.y*s)/s
            document.getElementById('show_where').innerHTML = str
            document.getElementById("lng").value = point.x;
            document.getElementById("lat").value = point.y;
        	var yellowPin = new GIcon(basePin); 
        	yellowPin.image = "pin_yellow.png"
            if (add_marker) map.removeOverlay(add_marker)
            add_marker = new GMarker(point, yellowPin)
            map.addOverlay(add_marker)
        }
    });

      // Read the data from cafe_all.xml
      var request = GXmlHttp.create();
      request.open("GET", "cafe_all.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            // create the marker
	    marker[i] = createPin(i,new GPoint(lng,lat),html,label);
          }
          // put the assembled sidebar_html contents into the sidebar div
          document.getElementById("sidebar").innerHTML = sidebar_html;

        }
      }
      request.send(null);        


}
window.onload = onLoad;
window.onunload = GUnload;