if (GBrowserIsCompatible()) {

var icon = new GIcon();
icon.image = "/images/icons/gd_marker.png";
icon.shadow = "/images/icons/gd_shadow_marker.png";
icon.iconSize = new GSize(18, 19);
icon.shadowSize = new GSize(28, 19);
icon.iconAnchor = new GPoint(9, 9);
icon.infoWindowAnchor = new GPoint(9, 9);

var customIcons = [];
customIcons["offices"] = icon;

var zoomin = "<a href=javascript:zoomIn();>Zoom in</a>";
var zoomout = "<a href=javascript:zoomOut();>Zoom out</a>";

      
      // this variable will collect the html which will eventually be placed in the side_bar
      var newhtml = "";
      var side_bar_html = "";
    
      // array to hold copies of the markers and html used by the side_bar
      var gmarkers = [];
      var i = 0;


      // A function to create the marker and set up the event window
      function createMarker(point,name,html,contacttel,contactfax,contactname,contactemail,regionname,regioniso,jobcount,regionalISO) {
        var marker = new GMarker(point, customIcons['offices']);
        GEvent.addListener(marker, "click", function() {
        newhtml = '<p>' + html + '<br /><b>Tel: </b>' + contacttel;
        if(contactfax != '') { 
        	newhtml = newhtml + '<br /><b>Fax: </b>' + contactfax;
        }
        if(contactname != '') {
        	newhtml = newhtml + '<br /><br />For inquiries, please contact ';
        	if (contactemail != '') {
        		newhtml = newhtml + '<a href="mailto:' + contactemail + '">' + contactname + '</a>';
        	} else {
        		newhtml = newhtml + contactname;
        	}
        }
        newhtml = newhtml + '<br /><span class="mapzoom">[ ' + zoomin + ' | ' + zoomout + ' ]</span></p><br />';
          marker.openInfoWindowHtml(newhtml);
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        // add a line to the side_bar html

				if (jobcount > '0')
				{
					if (jobcount == '1')
						{
							jobs = ' job';
						} else {
							jobs = ' jobs';
						}
					var jobCount = ' <span class="smalltext2">(' + jobcount + jobs + ' available - <a href="/node/careers/jobs" title="Job listings">View now!</a>)</span>';
				} else {
					jobCount = '';
				}

				// This outputs region names only once and groups all offices in that region under this header
        if (typeof regionalISO != 'undefined')
        	{
        		side_bar_html += '<br /><strong>' + regionname + jobCount + '</strong><br />';
        	}

        side_bar_html += '- <a href="#m" onClick="javascript:myclick(' + i + ')">' + name + '</a> <!--<span class="smalltext">(' + regionname + ')</span>--><br>';
       	
        i++;
        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.addControl(new GLargeMapControl3D());
      map.addControl(new GMapTypeControl());
      //map.addControl(new GScaleControl());
      //map.addControl(new GHierarchicalMapTypeControl());
      map.addMapType(G_PHYSICAL_MAP);
      map.addMapType(G_SATELLITE_3D_MAP);
			map.enableScrollWheelZoom();
			map.enableDoubleClickZoom();
			map.enableContinuousZoom();

//var ovSize=new GSize(200, 150)
//var ovMap=new GOverviewMapControl(ovSize);
//map.addControl(ovMap);
//var mini=ovMap.getOverviewMap();
//ovMap.hide();

///hide controls
map.hideControls();
GEvent.addListener(map, "mouseover", function(){
map.showControls();
});
GEvent.addListener(map, "mouseout", function(){
map.hideControls(); 
});

function zoomIn(){
	map.zoomIn();map.zoomIn();map.zoomIn();
}

function zoomOut(){
	map.zoomOut();map.zoomOut();map.zoomOut();
}

function fit(){
	bounds.extend(pointer.getPoint());
	var center = bounds.getCenter();
	map.closeInfoWindow();
	if(n>0){map.setZoom(map.getBoundsZoomLevel(bounds));}
	map.setCenter(center);
}

			//map.setCenter(new GLatLng( 30.8608, 2.9051), 2);
			map.setCenter(new GLatLng(0,0));
			var bounds = new GLatLngBounds();


// This is a data loading test for XML data

      // Read the data from example.xml
      var request = GXmlHttp.create();
      request.open("GET", "/offices.php", 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");
          var infowindow = xmlDoc.documentElement.getElementsByTagName("infowindow");

					var regionalISO = "";

          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 = GXml.value(markers[i].getElementsByTagName("infowindow")[0]);
            var label = markers[i].getAttribute("label");
            var contactname = infowindow[i].getAttribute("contactname");
            var contactemail = infowindow[i].getAttribute("contactemail");
            var contacttel = infowindow[i].getAttribute("contacttel");
            var contactfax = infowindow[i].getAttribute("contactfax");
						var regioniso = markers[i].getAttribute("regioniso");
						var regionname = markers[i].getAttribute("regionname");
						var jobcount = markers[i].getAttribute("jobcount");

						if (regionalISO != markers[i].getAttribute("regioniso"))
						{
							regionalISO = markers[i].getAttribute("regioniso");
							marker = createMarker(point,label,html,contacttel,contactfax,contactname,contactemail,regionname,regioniso,jobcount,regionalISO);
							//regionalISO = markers[i].getAttribute("regioniso");
						} else {
							marker = createMarker(point,label,html,contacttel,contactfax,contactname,contactemail,regionname,regioniso,jobcount);
						}

            // create the marker
            //var marker = createMarker(point,label,html,contacttel,contactfax,contactname,contactemail,regionname,regioniso,regionalISO);
            bounds.extend(point);
            map.addOverlay(marker);
          }

          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;
        }
			map.setZoom(map.getBoundsZoomLevel(bounds));
			map.setCenter(bounds.getCenter());
      }
      request.send(null);

    } else {
      alert("Sorry, the Google Maps API is not compatible with this browser. Please download a current version of Firefox, Internet Explorer or Opera.");
    }