//<![CDATA[

    if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventually be placed in the side_bar
      var side_bar_html = "";           
      side_bar_html += '<p><select id="country_select" onChange="myclick(this)">';
      side_bar_html += '<option selected> - Select a country - </option>'
      
    
      // arrays to hold copies of the markers used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];
      var globalindx = 0;
			 
			/**
      * A function to create the marker and set up the event window
      **/
      function createMarker(point,name,infoTabs, incomelevel,starred) {
      	
					if (incomelevel == 4) color = "green";
					if (incomelevel == 3) color = "blue";
					if (incomelevel == 2 ) color = "yellow";
					if (incomelevel == 1 ) color = "red";
					if (incomelevel == 0 ) color = "gray";
							
					var icon = new GIcon();
					icon.image = "/images/mm_20_"+color+starred+".png";
					icon.shadow = "/images/mm_20_shadow.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); 
					     
        var marker = new GMarker(point, icon );
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowTabsHtml( infoTabs );
        });
        // save the info we need to use later for the side_bar
        gmarkers[globalindx] = marker;
        // add a line to the side_bar html
        side_bar_html += '<option value="'+globalindx+'">' + name + '</option>';
        globalindx++;
        return marker;
      }

      // This function picks up the click and opens the corresponding info window
      function myclick( opt ) {
      	var kk = opt.selectedIndex - 1; 
        if (kk > -1) {
          GEvent.trigger(gmarkers[kk],"click");
        }
      }

                        
      // create the map
      var map = new GMap2(document.getElementById("map"));
      
       // ====== Restricting the range of Zoom Levels =====
      // Get the list of map types      
      var mt = map.getMapTypes();
      // Overwrite the getMinimumResolution() and getMaximumResolution() methods
      for (var indx=0; indx<mt.length; indx++) {
        mt[indx].getMinimumResolution = function() {return 2;}
        mt[indx].getMaximumResolution = function() {return 5;}
      }
      
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( glatitude,glongitude), gzoom);
      //  ======== Add a map overview ==========
      map.addControl(new GOverviewMapControl(new GSize(150,150)));

	function wb_renderFooter ( content, header, footer ) {
		if ( content) content = header + content + footer;
		return content;
	}

      //  ======== A function to adjust the positioning of the overview ========
      function positionOverview(x,y) {
        /**var omap=document.getElementById("map_overview");
        omap.style.right = x+"px";
        omap.style.bottom = y+"px";
        
        // == restyling ==
        omap.firstChild.style.border = "1px solid gray";

        omap.firstChild.firstChild.style.left="4px";
        omap.firstChild.firstChild.style.top="4px";
        omap.firstChild.firstChild.style.width="190px";
        omap.firstChild.firstChild.style.height="190px";*/
      }

      //  ======== Cause the overview to be positioned AFTER IE sets its initial position ======== 
      // setTimeout("positionOverview(0,0)",1);
      //map.setMapType ( G_HYBRID_MAP );


      // Read the data from the dynamic XML source
      var request = GXmlHttp.create();
      request.open("GET", "datasource/index.php", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {                  
        
          var jsonResp = eval('(' + request.responseText + ')');
          var countries = jsonResp.countries;
          
          for (var i = 0; i < countries.length; i++) {
            var one = countries[i];
            var point = new GLatLng( one.lat, one.lng );            
              var tab0 = wb_renderFooter ( one.intro, one.header, one.intro_footer ); 
              var tab1 = wb_renderFooter ( one.projects, one.header, one.projects_footer ); 
            	var tab2 = wb_renderFooter ( one.news, one.header, one.news_footer ); 
              var tab3 = wb_renderFooter ( one.snapshot, one.header, one.data_footer ); 
	      var tab4 = wb_renderFooter ( one.pics, one.header, one.pics_footer ); 
            var label = one.name;
            var incomelevel = one.incomelevel;
            
            var starred="";
            if ( tab1 ) starred = "-star";
            
            	var infoTabs = []; var indx = 0;
            
              if ( tab0 ) {
	            	infoTabs[indx] = new GInfoWindowTab("Overview",tab0);
	            	indx++;	            	
            	}
            
            	if ( tab3 ) {
	            	infoTabs[indx] = new GInfoWindowTab("Data",tab3);
	            	indx++;	            	
            	}
              							
							if ( tab2 ) {
	            	infoTabs[indx] = new GInfoWindowTab("News",tab2);
	            	indx++;
            	}

	            if ( tab1 ) {
	            	infoTabs[indx] = new GInfoWindowTab("Projects",tab1);
	            	indx++;	            	
            	}
            	
            	if ( tab4 ) {
	            	infoTabs[indx] = new GInfoWindowTab("Visit Us",tab4);
	            	indx++;	            	
            	}
            	
                        	
            // create the marker
            var marker = createMarker(point,label, infoTabs, incomelevel, starred);
            map.addOverlay(marker);
          }
          
          // put the assembled side_bar_html contents into the side_bar div
          side_bar_html +="</select>";
          document.getElementById("side_bar").innerHTML = side_bar_html;
          // End of reception          
          
          window.setTimeout ( 'clearWBPreview()', 1000);          
          
        }
                
      }
      request.send(null);      

    } else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }                                                          
        
        
    function clearWBPreview() {
       document.getElementById("map").style.visibility = "visible";    
       document.getElementById("inset").style.visibility = "visible";               
       document.getElementById("preloader").style.visibility = "hidden"; 
       document.body.style.backgroundColor = "white";
    }  
    //]]>