$(document).ready(function(){
	var map = new GMap2($("#map").get(0));
	var manila = new GLatLng(14.567634332576944,120.9759521484375);
	map.setCenter(manila, 8);
	var mapControl = new GMapTypeControl();
	map.addControl(mapControl);
	var zoomPanControl = new GLargeMapControl();
	map.addControl(zoomPanControl);
	
	var quan = 15;
	var markers = [];
	var point = [];
	//puerto princesa, palawan
	point[0] = new GLatLng(9.939092995832691,118.81027221679688);
	
	//bacolor, pampanga
	point[1] = new GLatLng(15.0283594395083,120.62507629394531);
	
	//daraga, albay
	point[2] = new GLatLng(13.165998,123.700803);
	//legazpi city, albay
	point[3] = new GLatLng(13.111580118251636,123.74794006347656);
	//malilipot, albay
	point[4] = new GLatLng(13.292074651728981,123.72390747070312);
	//camalig, albay
	point[5] = new GLatLng(13.142675,123.665199);
	//bacacay, albay
	point[6] = new GLatLng(13.280046,123.880463);
	//nasugbu, batangas
	point[7] =new GLatLng(14.118597,120.664902);
	//san nicolas, batangas
	point[8] =  new GLatLng(14.10994,120.679321);
	//Lumban, Laguna
	point[9] =  new GLatLng(14.295658,121.457634);
	//tagaytay city, cavite
	point[10] =  new GLatLng(14.111272,120.964966);
	//alcantara, romblon
	point[11] =  new GLatLng(12.294385,122.056732);
	//san jose, romblon
	point[12] =  new GLatLng(12.046036,121.940002);
	//malay, aklan
	point[13] =  new GLatLng(11.900275,121.959057);
	//manila, metro manila
	point[14] =  new GLatLng(14.576938,120.982132);
	
	for (var i = 0; i < quan; i++) {
		markers[i] = new GMarker(point[i]);
		map.addOverlay(markers[i]);
	}
	
	$(markers).each(function(i,marker){
		/*$("<li />")
			.html("Point "+i)
			.click(function(){
				displayPoint(marker, i);
			})
			.appendTo("#list");*/
			$("#point-"+i).click(function(){
					displayPoint(marker, i, quan);
				});
				//.appendTo("#list");
		
		GEvent.addListener(marker, "click", function(){
			displayPoint(marker, i, quan);
		});
	});
	
	$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
	
	function displayPoint(marker, index, quan){
		$("#message").hide();
		
		for (var i = 0; i < quan; i++) {
			$("#content-"+i).hide();
			
		}
		
		var moveEnd = GEvent.addListener(map, "moveend", function(){
			var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng());
			$("#message")
				.fadeIn()
				.css({ top:markerOffset.y, left:markerOffset.x });
			$("#content-"+index).show();
			GEvent.removeListener(moveEnd);
		});
		
		map.panTo(marker.getLatLng());
	}
});