var lokasi = 0, layanan = 1, map = null, markers = [], markerClusterer = null;
var letteredIcon, pic_type, _provinsi,_alamat, _tbl;

function mapsLoaded() {
	if (GBrowserIsCompatible()) {
		map = new google.maps.Map2(document.getElementById("map_canvas"));
		
      //var om = new OverlayMessage(document.getElementById("map_canvas"));      
      //om.Set('<b>Loading...<\/b>');

		map.addControl(new GLargeMapControl());
		GDownloadUrl( myUrl+'home/DataGMap/'+layanan+'/'+$('#DDLKota').val(), function(data) {
		_tbl = "";
		var xml = GXml.parse(data);
		markers = xml.documentElement.getElementsByTagName("marker");
		for (var i = 0; i < markers.length; i++) {
			if(i==0) {
				var lat_pro = parseFloat(markers[i].getAttribute("lat_pro"));
				var lng_pro = parseFloat(markers[i].getAttribute("lng_pro"));
				if ( $('#DDLKota').val() == 0 ) {
					map.setCenter( new google.maps.LatLng(-4.714398,121.274412), 4);
				} else {
					map.setCenter( new google.maps.LatLng( lat_pro, lng_pro ), 9 );
				}
			};
			pic_type =	markers[i].getAttribute("gambar");
			_alamat   = markers[i].getAttribute("alamat");
			_provinsi = markers[i].getAttribute("provinsi");
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
			                parseFloat(markers[i].getAttribute("lng")));
			var marker = createMarker(point, i);
			map.addOverlay(marker);
			if(i<=30) {
				_tbl = _tbl + "<tr>";
				_tbl = _tbl + "<td>" + _provinsi + "</td>";
				_tbl = _tbl + "<td>" + _alamat + "</td>";
				_tbl = _tbl + "</tr>";
			}
		}
		$('#map_detail').html(_tbl);
		});
	}
}

function loadMaps() {
	google.load("maps", "2", {"callback" : mapsLoaded});
}

function reloadpeta(xlayanan, xlokasi) {
	if (GBrowserIsCompatible()) {
		map.clearOverlays();
		GDownloadUrl( myUrl+'home/DataGMap/'+xlayanan+'/'+xlokasi, function(data) {
			_tbl = "";
			var xml = GXml.parse(data);
			markers = xml.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++) {
				if(i==0) {
					var lat_pro = parseFloat(markers[i].getAttribute("lat_pro"));
					var lng_pro = parseFloat(markers[i].getAttribute("lng_pro"));
					if ( $('#DDLKota').val() == 0 ) {
						map.setCenter( new google.maps.LatLng(-4.714398,121.274412), 4);
					} else {
						map.setCenter( new google.maps.LatLng( lat_pro, lng_pro ), 9 );
					}
				};
				pic_type =	markers[i].getAttribute("gambar");
				_alamat  = markers[i].getAttribute("alamat");
				_provinsi = markers[i].getAttribute("provinsi");
				var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
				             parseFloat(markers[i].getAttribute("lng")));
				var marker = createMarker(point, i);
				map.addOverlay(marker);
				if(i<=30) {
					_tbl = _tbl + "<tr>";
					_tbl = _tbl + "<td>" + _provinsi + "</td>";
					_tbl = _tbl + "<td>" + _alamat + "</td>";
					_tbl = _tbl + "</tr>";
				}
			}
			$('#map_detail').html(_tbl);
		});
	}
}
  
function createMarker(point, index) {
	var icon = new GIcon(G_DEFAULT_ICON);
	icon.iconSize = new GSize(24, 24);
	icon.shadowSize = new GSize(37, 34);
	icon.iconAnchor = new GPoint(9, 34);
	icon.infoWindowAnchor = new GPoint(9, 1);

	letteredIcon = new GIcon(icon);
	letteredIcon.image = myHost + "assets/icon_test/" + pic_type;
	markerOptions = { icon:letteredIcon };
	var marker = new GMarker(point, markerOptions);
   var html = "<b>" + _alamat + "</b> <br/>" + _provinsi;
   GEvent.addListener(marker, 'click', function() {
     marker.openInfoWindowHtml(html);
   });
	return marker;
}

/*
function refreshMap() {
	if (markerClusterer != null) {
		markerClusterer.clearMarkers();
	}
	var zoom = parseInt(document.getElementById("zoom").value, 10);
	var size = parseInt(document.getElementById("size").value, 10);
	var style = document.getElementById("style").value;
	zoom = zoom == -1 ? null : zoom;
	size = size == -1 ? null : size;
	style = style == "-1" ? null: parseInt(style, 10);
	markerClusterer = new MarkerClusterer(map, markers, {maxZoom: zoom, gridSize: size, styles: styles[style]});
}
*/

function initLoader() {
	/*
		http://muamalat-bank.com/
		Key GMAP API: ABQIAAAAR2J_htYIb6hTzJ1U_hA0PRSXTNkC8fxfbMRFVNtsyAyhT-RhSRTIW1KBCH4WEuLX-OjarpTdtr7PFA
		http://muamalatbank.com/
		Key GMAP API: ABQIAAAAmHiixkPhu-t-5j0uQp-EFRTRlFdahTJniGrNZrw4V5IgE3xCixRVX_AQw-4tBaLEe6sl1zsbjG6hpw
	*/
	var script = document.createElement("script");
	script.src = "http://www.google.com/jsapi?key=ABQIAAAAmHiixkPhu-t-5j0uQp-EFRTRlFdahTJniGrNZrw4V5IgE3xCixRVX_AQw-4tBaLEe6sl1zsbjG6hpw&callback=loadMaps";
	script.type = "text/javascript";
	document.getElementsByTagName("head")[0].appendChild(script);
}