<script type="text/javascript">
 
function load(){
 
    //<![CDATA[
    if (GBrowserIsCompatible()) {
 
    var map = new GMap2(document.getElementById("map"));
    //map.addControl(new GSmallMapControl());
    map.enableScrollWheelZoom();
 
    // Set up the copyright information
    var myCopyright = new GCopyrightCollection("Custom Layer");
    myCopyright.addCopyright(new GCopyright(1,new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)), 0,'©2008 LPA'));
 
    // Create the tile layer overlay and  		
		var tilelayers = [new GTileLayer(myCopyright , 1, 15)];
		tilelayers[0].getTileUrl = CustomGetTileUrl;
		var custommap = new GMapType(tilelayers, new GMercatorProjection(17), "Custom Layer", {errorMessage:"No data available"});
		map.addMapType(custommap);
		map.setMapType(custommap);
 
 
	  map.setCenter(new GLatLng(35.460669951495305, 10.546875), 1);
    addCustomIcon("country.xml", 10);
 
 
    GEvent.addListener(map, "zoomend", function(oldLevel, newLevel) {
 
    	  if(newLevel==12){
	         map.setZoom(15);
	         map.setCenter(new GLatLng(1.290506, 103.850663));
    	  }
 
    	  if(oldLevel ==1){
          map.setZoom(10);
 
        }
 
        if(oldLevel == 15){
           map.setZoom(11);
        }
        if(newLevel == 15){    
            map.clearOverlays();                        
        }
 
        if(newLevel == 11){
            map.clearOverlays();
            map.setCenter(new GLatLng(1.33746396806039, 103.82080078125), 11);
        }
        if(newLevel <= 10){
            map.clearOverlays();  
            map.setCenter(new GLatLng(1.371443, 103.833160), 10);      
        }
 
    });
 
    GEvent.addListener(map, "clearoverlays", function() {
 
            var zoomLevel = map.getZoom();
 
            if(zoomLevel == 15){
 
                //project location display  
 
                var request = GXmlHttp.create();
                request.open("GET", "position.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 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 label = markers[i].getAttribute("label");
 
                                                    		var url= "../project/"+markers[i].getAttribute("loc")+"/";
 
                                                		    map.addOverlay(createMarker(point, i, url));  
                                                    }
                                                }
                }
                request.send(null);  
                //end of display   
            }
 
            if(zoomLevel == 11){
 
               addCustomIcon("district.xml", 15); 
 
 
            }
 
    });
 
    function addCustomIcon(xmlfile, zoomlevel){
 
                // district overlay display
            	  var circleIcon = new GIcon(G_DEFAULT_ICON);
            	  //var zoom = map.getZoom();
            	  var size = 10;
 
            	  circleIcon.image = "icon10.png";   
                circleIcon.iconSize = new GSize(size,size);
            	  circleIcon.shadow = "transparent10.png";
            	  circleIcon.shadowSize = new GSize(size,size);
            	  circleIcon.iconAnchor = new GPoint(size/2, size/2);
 
            	  var markerOptions = { icon:circleIcon };		
 
            		// for customized marker
            		var req = GXmlHttp.create();
            		req.open("GET", xmlfile, true);
            		req.onreadystatechange = function() {
            		if (req.readyState == 4) {
            		  var xmlDoc = GXml.parse(req.responseText);
            		  // obtain the array of markers and loop through it
            		  var zones = xmlDoc.documentElement.getElementsByTagName("zone");
 
            		  for (var i = 0; i < zones.length; i++) {
            			// obtain the attribues of each marker
            			var lat = parseFloat(zones[i].getAttribute("lat"));
            			var lng = parseFloat(zones[i].getAttribute("lng"));
            			var point = new GLatLng(lat,lng);
            			var marker = new GMarker(point, markerOptions);
            			map.addOverlay(marker);
 
            		    GEvent.addListener(marker, "click", function(latlng) {
            			       if(latlng)
            	                 map.setCenter(latlng, zoomlevel);
                        });
 
            		  }
 
            		}
            		}
            		req.send(null);	         
                //end of display    
 
 
 
    }
 
 
 
 
 
}
}
 
//----------------------------other functions ----------------------------------   
	function createMarker(point, i, url) {
 
    	  var blueIcon = new GIcon(G_DEFAULT_ICON);
    	  var size = 20;
 
    	  blueIcon.image = "icon15_"+i+".png";   
        blueIcon.iconSize = new GSize(size,size);
    	  blueIcon.shadow = "transparent10.png";
    	  blueIcon.shadowSize = new GSize(size,size);
    	  blueIcon.iconAnchor = new GPoint(size/2, size/2);
 
    	  var markerOptions = { icon:blueIcon };
 
        var marker = new GMarker(point, markerOptions);
        marker.value = i;
 
 
    		GEvent.addListener(marker, "click", function(latlng) {
 
 
    			 var target = "floatwindow";
 
    /*
    			var pixel = map.fromLatLngToContainerPixel(latlng);        					         					
          document.getElementById(target).style.top = pixel.y;
          document.getElementById(target).style.left = pixel.x;
    */                  
    		  document.getElementById(target).innerHTML = ' Fetching data...';
 
    		  if (window.XMLHttpRequest) {
    			req = new XMLHttpRequest();
    		  } else if (window.ActiveXObject) {
    			req = new ActiveXObject("Microsoft.XMLHTTP");
    		  }
    		  if (req != undefined) {
    			req.onreadystatechange = function() {
    								    if (req.readyState == 4) { // only if req is "loaded"
    									if (req.status == 200) { // only if "OK"
 
    									  var str = req.responseText;
    									  var result = str.replace(/src=\"/gi, "src=\""+url);
 
    									  document.getElementById(target).innerHTML = result;
    									} else {
    									  document.getElementById(target).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
    									}
    								  }};
 
    			req.open("GET", url+"index.html", true);
    			req.send("");
    		  }
 
          document.getElementById("cross").style.zIndex = 5; 
          document.getElementById("floatwindow").style.zIndex = 4;
          });   
 
       return marker;   
  }
 
	function CustomGetTileUrl(a,b) {
 
    	var z = b; 
      var f = "/sg"+b+"/"+"Tile_"+a.x+"_"+a.y+"_"+z+".jpg";	
 
	return f;
  }
 
	function toggleBack(){
      document.getElementById("cross").style.zIndex = 1;
      document.getElementById("floatwindow").style.zIndex = 2;
  }