$(document).ready(function() {
  	
  	var map = new GMap2(document.getElementById("map_canvas"));
  	
 	if ($("body").attr("id") == "home") {
  		
  		map.setCenter(new GLatLng(22.30, 114.08), 11);
	   	var tier = 1;

  		var data_url = "map-data-" + tier;
  		
  	} else if ($("body").attr("id") == "region") {
  		
  		var region_name = $(".region_name").text();
  		var region_lat = $('.region_lat').text();
  		var region_lon = $('.region_lon').text();
   		
   		map.setCenter(new GLatLng(region_lat, region_lon), 10);
   		
   		if ($(".page_number").text() != "") {
	   	
	   		var page_number = $(".page_number").text();
	   		
	   	} else {
	   	
	   		var page_number = 1;
	   	
	   	}
   		
		var data_url = "region-map-data-" + region_name + "-" + page_number;
		var extra_data_url = "extra-region-map-data-" + region_name + "-" + page_number;
   		
  	} else if ($("body").attr("id") == "office") {
  		
		var office_id = $(".office_id").text();
		var data_url = "office-map-data-" + office_id;
  	
	}
  	
	GDownloadUrl(data_url, function(xml_data, responseCode) {
  		
  		var xml = GXml.parse(xml_data);
  		var markers = xml.documentElement.getElementsByTagName("marker");
  		
  		data = new Array();
  		for (var i = 0; i < markers.length; i++) {
  		
  			data[i] = new Array();
    		data[i]['lat'] = parseFloat($(markers[i]).children("lat").text());
    		data[i]['lng'] = parseFloat($(markers[i]).children("lon").text());
    		data[i]['html'] = $(markers[i]).children("office").text();
    		
    		if ($("body").attr("id") == "office") {
    		
    			map.setCenter(new GLatLng(data[i]['lat'], data[i]['lng']), 15);
    			
    		}

			var office_num = i + 1;
			var customIcon = new GIcon(G_DEFAULT_ICON);
			
			if ($("body").attr("id") == "region") {
	   			
				customIcon.image = "../images/graphics/map-markers/marker-" + office_num + ".png";
			
			} else if ($("body").attr("id") == "office") {
			
				customIcon.image = "../images/graphics/map-markers/marker-default.png";
			
			} else {
				
				customIcon.image = "images/graphics/map-markers/marker-default.png";
				
			}
    		
    		markerOptions = { icon:customIcon };
    		data[i]['marker'] = new GMarker(new GLatLng(data[i]['lat'], data[i]['lng']), markerOptions);
    		
    		data[i]['marker'].bindInfoWindowHtml(data[i]['html']);
    		
    		$("#office-" + office_num).click(function() {
     	
    	 		var marker_num = $(this).children("h2").children(".office_number").text() - 1;
    	 		//alert(marker_num);
     		 	GEvent.trigger(data[marker_num]['marker'], "click");
     		 	
    		});

    		map.addOverlay(data[i]['marker']);
  		
  		}
  			
	});
	
	if ($("body").attr("id") == "region") {
	
		GDownloadUrl(extra_data_url, function(xml_data, responseCode) {
  		
  			var xml = GXml.parse(xml_data);
  			var markers = xml.documentElement.getElementsByTagName("marker");
  		
  			extra_data = new Array();
  			for (var i = 0; i < markers.length; i++) {
  		
  				extra_data[i] = new Array();
    			extra_data[i]['lat'] = parseFloat($(markers[i]).children("lat").text());
    			extra_data[i]['lng'] = parseFloat($(markers[i]).children("lon").text());
    			extra_data[i]['html'] = $(markers[i]).children("office").text();

				var customIcon = new GIcon(G_DEFAULT_ICON);
				customIcon.image = "../images/graphics/map-markers/marker_extra.png";
    		
    			markerOptions = { icon:customIcon };
    			extra_data[i]['marker'] = new GMarker(new GLatLng(extra_data[i]['lat'], extra_data[i]['lng']), markerOptions);
    		
	    		extra_data[i]['marker'].bindInfoWindowHtml(extra_data[i]['html']);

    			map.addOverlay(extra_data[i]['marker']);
  		
  			}
  			
		});
		
	}
	
	var customUI = map.getDefaultUI();
   	//customUI.controls.smallzoomcontrol3d = true;
   	customUI.controls.largemapcontrol3d = true;
	customUI.controls.maptypecontrol = false;
	customUI.zoom.scrollwheel = false;
	customUI.controls.menumaptypecontrol = false;
   	map.setUI(customUI);
  	
  	var browser=navigator.appName;
  	if (browser != "Microsoft Internet Explorer") {
  	 	
	   	$("#map_handle").toggle(function() {
  	
  			$(this).css("background-position", "left top");
  			$("#map_canvas").css({height: "500px"});
  			map.checkResize();
  		
  		},
  		function() {
  	
  			$(this).css("background-position", "left -19px");
  			$("#map_canvas").css({height: "300px"});
  			map.checkResize();
  		
  		});
  		
  	}
  	
});