// JavaScript Document
//<![CDATA[


		if (GBrowserIsCompatible()) {
      
      var mapLinks_html = "";
    
      var gmarkers = [];



var cols = new GIcon();
    cols.image = "images/mapCol.png";
	cols.shadow = "";
    cols.iconSize = new GSize(10, 10);
	cols.shadowSize = new GSize(0, 0);
    cols.iconAnchor = new GPoint(3, 5);
    cols.infoWindowAnchor = new GPoint(5, 0);
	
	var kiryu = new GIcon();
    kiryu.image = "images/mapKir.png";
    kiryu.shadow = "images/shadowKir.png";
    kiryu.iconSize = new GSize(25, 24);
    kiryu.shadowSize = new GSize(36, 24);
    kiryu.iconAnchor = new GPoint(12, 24);
    kiryu.infoWindowAnchor = new GPoint(12, 0);
	
	var zugdidi = new GIcon();
    zugdidi.image = "images/mapZug.png";
    zugdidi.shadow = "images/shadowZug.png";
    zugdidi.iconSize = new GSize(26, 17);
    zugdidi.shadowSize = new GSize(44, 17);
    zugdidi.iconAnchor = new GPoint(13, 17);
    zugdidi.infoWindowAnchor = new GPoint(13, 0);
	
	var bistrita = new GIcon();
    bistrita.image = "images/mapBis.png";
    bistrita.shadow = "images/shadowBis.png";
    bistrita.iconSize = new GSize(18, 24);
    bistrita.shadowSize = new GSize(31, 24);
    bistrita.iconAnchor = new GPoint(9, 24);
    bistrita.infoWindowAnchor = new GPoint(9, 0);
	
	var taichung = new GIcon();
    taichung.image = "images/mapTai.png";
    taichung.shadow = "images/shadowTai.png";
    taichung.iconSize = new GSize(23, 22);
    taichung.shadowSize = new GSize(34, 22);
    taichung.iconAnchor = new GPoint(11, 22);
    taichung.infoWindowAnchor = new GPoint(11, 0);
	
	var icons = [];
    icons[0] = cols;
	icons[1] = kiryu;
	icons[2] = zugdidi;
	icons[3] = bistrita;
	icons[4] = taichung;






      // A function to create the marker and set up the event window
      function createMarker(point,icontype,city,year,web) { 
      var marker = new GMarker(point,icons[icontype]);
      var testWeb = web;
      GEvent.addListener(marker, "click", function() {
          if(testWeb != ""){
			  marker.openInfoWindowHtml("<b>" + city + "</b><br>Sister city since " + year + "<br><a href='" + web + "' style='font-weight:normal' target='_blank'>Learn about this city</a>");
		  } else {
			  marker.openInfoWindowHtml("<b>" + city + "</b>");
		  }
        });
        // save the info we need to use later for the side_bar
        if(city != "Columbus, Georgia")
		{
			gmarkers.push(marker);
        	// add a line to the side_bar html
			mapLinks_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + city + '<\/a><br>';
		}
        return marker;
      }


      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }


      // create the map
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng( 32.463734,-84.986930), 1);


      // Read the data from example.xml
      GDownloadUrl("map.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        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 icontype = parseInt(markers[i].getAttribute("icontype"));
          var cityName = markers[i].getAttribute("city");
          var cityYear = markers[i].getAttribute("since");
          var webUrl = markers[i].getAttribute("web");
          // create the marker
          var marker = createMarker(point,icontype,cityName,cityYear,webUrl);
          map.addOverlay(marker);
        }
        // put the assembled side_bar_html contents into the side_bar div
        document.getElementById("side_bar").innerHTML = mapLinks_html;
      });
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }
	//]]>