var map;
var markerarray = new Array();
var idarray = new Array();

function load(markerid) {
	var map = new google.maps.Map(document.getElementById("map_canvas"), {
		center: new google.maps.LatLng(27.9, 86.8),
        	zoom: 10,
        	mapTypeId: 'roadmap'
      	});

	

	var infoWindow = new google.maps.InfoWindow;

	var url = "markersXML.php?" + window.location.href.split("?")[1];
	url = url.split("#")[0];
	//url = url.replace("%20"," ");
	url = url.replace("_"," ");

	downloadUrl(url, function(data) {
        	var xml = data.responseXML;
        	var markers = xml.documentElement.getElementsByTagName("marker");
		var bounds = new google.maps.LatLngBounds();

	        for (var i = 0; i < markers.length; i++) {
          
			var id = "markerimg" + markers[i].getAttribute("placeid");
			var caption = markers[i].getAttribute("caption");
			var location = markers[i].getAttribute("location");
			var countryid = markers[i].getAttribute("countryid");
			var country = markers[i].getAttribute("country");
			var subject = markers[i].getAttribute("subjectname");
			var imagepath = markers[i].getAttribute("picturepath");
			var placeurl = markers[i].getAttribute("placeurl");
			var html = '<table><tr><td valign="top"><h3 class="countryinfobox"><a href="' + placeurl + '">' + caption + '</a></h3><br /><em>' + location + '</em><br /><b>' + country + '</b></td><td>&nbsp;</td><td valign="top"><img width="105" height="70" src="pictures/' + imagepath + '"/></td></tr></table>';
			var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));

	          	var marker = new google.maps.Marker({
        	    		map: map,
            			position: point,
				title: caption,
            		});

			markerarray[i] = marker;
			idarray[i] = id;

          		bindInfoWindow(id, marker, map, infoWindow, html);
			bounds.extend(point);
    			map.fitBounds(bounds);

			if(document.getElementById(id)){
				document.getElementById(id).innerHTML = '<img class="noborder" width="15" height="15" src="graphics/redmarker.gif" alt="marker" title="Show on map"/>';
			} 
        	}

		if (i == 1) {
			map.setZoom(8);
		}


		google.maps.event.addListenerOnce(map, 'idle', function(){
    			//only the first time the map is loaded	
			if(markerid){
				//alert(markerarray[5]);
				//google.maps.event.trigger(markerarray[5], 'click');
				//alert(idarray.length);
				for(var j=0; j<idarray.length; j++) {
					if(idarray[j]==markerid){
						//alert(markerid);
						google.maps.event.trigger(markerarray[j], 'click');
					}
				}
			}
		});
     });
	

}

function bindInfoWindow(id, marker, map, infoWindow, html) {  
	google.maps.event.addListener(marker, 'click', function() {
        	infoWindow.setContent(html);
        	infoWindow.open(map, marker);
     	});

	if(document.getElementById(id)){
		
		google.maps.event.addDomListener(document.getElementById(id),'click', function() {

			if(document.getElementById("map_canvas").style.display == "none") {
    				document.getElementById("map_canvas").style.display = "block";
				document.getElementById("hideshowtext").innerHTML = '<h4 class="mapvisible"><a href="javascript:HideShowMap();"><img class="noborder" width="10" height="10" src="graphics/arrow_white_up.gif" alt="hide map" /> Hide map</a></h4>';
				document.getElementById("mapnote").style.display = "block";
			}

			infoWindow.setContent(html);
   			infoWindow.open(map,marker);
			scroll(0,0);
  		});
	}
}

function downloadUrl(url, callback) {
	var request = window.ActiveXObject ?
		new ActiveXObject('Microsoft.XMLHTTP') :
		new XMLHttpRequest;

	request.onreadystatechange = function() {
		if (request.readyState == 4) {
          		request.onreadystatechange = doNothing;
          		callback(request, request.status);
        	}
      	};

	request.open('GET', url, true);
      	request.send(null);
}

function doNothing() {}