var baseIcon = new GIcon;
baseIcon.shadow = "./images/point.gif";
baseIcon.iconSize = new GSize(28,26);
baseIcon.iconAnchor = new GPoint(14,13);
baseIcon.shadowSize = new GSize(28,26);
iconName = ['a','b','c','d','e','f'];

var map;

function load() {
  if (GBrowserIsCompatible()) {
	map = new GMap2(document.getElementById("map"));
	var lon_a = '135.51035';	var lat_a = '34.71293';
	var lon_c = '135.5105';	var lat_c = '34.70761';
	var lon_z = '135.5105';	var lat_z = '34.711729';
		var build = new GLatLng( lat_a, lon_a);
		var center = new GLatLng( lat_c, lon_c);
		var zoomCenter = new GLatLng( lat_z, lon_z);
	map.setCenter(zoomCenter, 17);
	var aura = new GMarker(build);
	map.addOverlay(aura);
	map.addControl(new GSmallZoomControl());
	GEvent.addListener(aura, "click", function(){
		map.setZoom(17);
		map.panTo(zoomCenter);
		document.getElementById("msg").innerHTML = '<img src="images/photo0.jpg" />';
	});
//	GEvent.addListener(map, "click", moveCenter);

	var request = GXmlHttp.create();
	request.open("GET","point.xml",true);
	request.onreadystatechange = function(){
		if(request.readyState == 4){
			var res = request.responseXML;
			
			var xmlDoc = res.documentElement
			var markers = xmlDoc.getElementsByTagName("marker");
			for(var i=0; i < markers.length; i++){
				var lon_p = parseFloat(markers[i].getAttribute("lon"));
				var lat_p = parseFloat(markers[i].getAttribute("lat"));
				var my	  = parseFloat(markers[i].getAttribute("my"));
				var point = new GLatLng(lat_p, lon_p);
				var marker = createIcon(map,point,i);
				map.addOverlay(marker);
			}

		}
	}
	request.send('');

  }

}

function createIcon(map, point, index){

	var icon = new GIcon(baseIcon);
	icon.image = "./images/point_"+ iconName[index] + ".gif";
	var marker = new GMarker(point,{icon:icon});
	index = index+1;
	GEvent.addListener(marker, "click", function(){
		map.setZoom(18);
		map.panTo(point);
		document.getElementById("msg").innerHTML = '<img src="images/photo'+index+'.jpg" />';
	});
//	GEvent.addListener(marker, "click", moveCenterPoint);
	return marker;

}

function moveCenter(overlay, point){
		map.setZoom(17);
		map.panTo(point);
//		document.getElementById("msg").innerHTML = point;
}

function movePoint(key,lat, lon){

	var point = new GLatLng( lat, lon);
	map.setZoom(18);
	map.panTo(point);
	document.getElementById("msg").innerHTML = '<img src="images/photo'+key+'.jpg" />';

}