//<![CDATA[
    if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventualkly be placed in the side_bar
      var side_bar_html = "";           
      side_bar_html += '<span class="left" style="margin-left:0.5em;"><strong>Country:</strong></span><span><select style="width:135px;" id="country_select" onChange="mclick(this)">';
      side_bar_html += '<option selected> - Select a country - </option>'
    
      // arrays to hold copies of the markers used by the side_bar
      var gmarkers = [];
      var i = 0;
      var icon = new GIcon();
			icon.image = "/external/images/blue.png";
			icon.shadow = "/external/images/gmaps.png";
			icon.iconSize = new GSize(13, 22);
			icon.shadowSize = new GSize(22, 20);
			icon.iconAnchor = new GPoint(6, 20);
			icon.infoWindowAnchor = new GPoint(5, 1);

      // A function to create the marker and set up the event window
      function createMarker(point,name,html,color) {
        icon.image = "/external/images/"+ color + ".png";
        var marker = new GMarker(point,{icon:icon, title:name}); 
        marker.title = "test";
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml('<div style="width: 220px">' + html + '</div>');
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        // add a line to the side_bar html
        side_bar_html += '<option value="'+i+'">' + name + '</option>';
        i++;
        return marker;
      }
      
      // A function to create a tabbed marker and set up the event window
      // This version accepts a variable number of tabs, passed in the arrays htmls[] and labels[]
      function createTabbedMarker(point,name,htmls,labels,color) {
        icon.image = "/external/images/"+ color + ".png";
        var marker = new GMarker(point, {icon:icon, title:name});
        GEvent.addListener(marker, "click", function() {
          // adjust the width so that the info window is large enough for this many tabs
          //if (htmls.length > 1) {
          //  htmls[0] = '<div style="width:'+htmls.length*100+'px">' + htmls[0] + '</div>';
          //}
          var tabs = [];
          for (var ii=0; ii<htmls.length; ii++) {
            if(htmls[ii]!=''){
              htmls[ii] = '<div style="width: 300px">' + htmls[ii] + '</div>';
              tabs.push(new GInfoWindowTab(labels[ii],htmls[ii]));
                             }
          }
          marker.openInfoWindowTabsHtml(tabs);
        });
        
        gmarkers[i] = marker;
        // add a line to the side_bar html
        side_bar_html += '<option value="'+i+'">' + name + '</option>';
        
        //side_bar_html += '<li><a href="javascript:mclick(' + i + ')">' + name + '</a></li>';
        i++;
        return marker;
      }
      


      // This function picks up the click and opens the corresponding info window
      function mclick(i) {
        //GEvent.trigger(gmarkers[i], "click");
        var kk = i.selectedIndex - 1; 
        if ((kk > -1) && (i.options[kk+1].text!="------")) {
          GEvent.trigger(gmarkers[kk],"click");
        }
        else{
          //recenterMap();
        }
        
      }
      
      function recenterMap() {
        map.setCenter(new GLatLng(27.0,12.0), 2);
      }


      // Create the map
      var map = new GMap2(document.getElementById("map"));
      var mapt = map.getMapTypes();
      for (var indx=0; indx<mapt.length; indx++) {
        mapt[indx].getMinimumResolution = function() {return 1;}
        mapt[indx].getMaximumResolution = function() {return 5;}
      }
      map.addControl(new GLargeMapControl());
      //map.addControl(new GOverviewMapControl ());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(27,18), 2);
      
      // Add Overlay
      //var kml = new GGeoXml("http://www.imf.org/external/ks5101/map/test/data/fad4.zip");
      //map.addOverlay(kml)
      
      //var kml1 = new GGeoXml("http://www.imf.org/external/ks5101/map/test/data/russia.zip");
      //map.addOverlay(kml1)
      

      // Read the data from xml
      var request = GXmlHttp.create();
      request.open("GET", "data/countries.xml", 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("marker");
          
          for (var j = 0; j < markers.length; j++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[j].getAttribute("lat"));
            var lng = parseFloat(markers[j].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var label = markers[j].getAttribute("label");
            var tab1 = markers[j].getAttribute("tab1");
            var tab2 = markers[j].getAttribute("tab2");
            var tab3 = markers[j].getAttribute("tab3");
            var description = GXml.value(markers[j].getElementsByTagName("description")[0]);
            var color = GXml.value(markers[j].getElementsByTagName("color")[0]);
            var tab1_content = GXml.value(markers[j].getElementsByTagName("tab1_content")[0]);
            var tab2_content = GXml.value(markers[j].getElementsByTagName("tab2_content")[0]);
            var tab3_content = GXml.value(markers[j].getElementsByTagName("tab3_content")[0]);
            var html1 = "<b>" + label + "</b><br />" + description;
            
            // create the marker
            //var marker = createMarker(point,label,html1,color);
            if(label!="------"){
             var marker = createTabbedMarker(point,label,[html1,tab2_content,tab3_content],[tab1,tab2,tab3],color);
             }
            else{
             side_bar_html += '<option value="'+i+'">' + label + '</option>';
             i++;
                }
              
            map.addOverlay(marker);
          }
          // put the assembled side_bar_html contents into the side_bar div
        side_bar_html +='</select>&nbsp;&nbsp;<img src="/external/images/green3.jpg" alt="green legend" class="arrow" style="vertical-align:middle;"> <a href="/external/np/exr/facts/howlend.htm" class="colorlink" target="_new" title="Stand-By Arrangements">SBA</a>&nbsp;&nbsp;<img src="/external/images/green4.jpg" alt="green legend" class="arrow" style="vertical-align:middle;"> <a href="/external/np/exr/facts/howlend.htm" class="colorlink" target="_new" title="Stand-By Arrangements">SBA (Precautionary)</a>&nbsp;&nbsp;<img src="/external/images/blue.jpg" alt="blue legend" class="arrow" style="vertical-align:middle;" />&nbsp;<a href="/external/np/exr/facts/prgf.htm" class="colorlink" target="_new" title="Poverty Reduction and Growth Facility">PRGF</a>&nbsp;&nbsp;<img src="/external/images/yellow.jpg" alt="orange legend" class="arrow" style="vertical-align:middle;" />&nbsp;<a href="/external/np/exr/facts/esf.htm" class="colorlink" target="_new" title="Exogenous Shocks Facility">ESF</a>&nbsp;&nbsp;<img src="/external/images/purple.jpg" alt="purple legend" class="arrow" style="vertical-align:middle;" />&nbsp;<a href="/external/np/exr/facts/howlend.htm" class="colorlink" target="_new" title="Flexible Credit Line">FCL</a>&nbsp;&nbsp;<img src="/external/images/yellow1.jpg" alt="yellow legend" class="arrow" style="vertical-align:middle;" />&nbsp;<a href="#" class="colorlink" title="Subject to Board Approval">Pending Approval</a></span><div class="clear"></div>';
          document.getElementById("side_bar").innerHTML = side_bar_html;
        }
      }
      request.send(null);
    }

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