var emap;
var geocoder;
var dataAry;

function load(){
	if(GBrowserIsCompatible()){
		emap = new GMap2(document.getElementById("map03"));
		geocoder = new GClientGeocoder();
		
		// 東京都庁
		emap.setCenter(new GLatLng(35.6894875, 139.6917064), 11);
		
		emap.addControl(new GSmallMapControl());
		emap.addControl(new GOverviewMapControl(new GSize(80,80)));
		
		var ajax = new Ajax.Request("map/ajax.php",
		{"method": "get",
			onSuccess: function(request) {
				//alert("読込成功");
			},
			onComplete: function(request) {
				//alert("読込完了");
				
				var i;
				var xmlData = request.responseXML;
				dataAry = xmlArray(xmlData);
				
				for(i = 0; i < dataAry.length; i++){
					var mapPoint = new GLatLng(dataAry[i]["y"], dataAry[i]["x"]);
					setMarker(mapPoint);
				}
			},
			onFailure: function(request) {
				alert("読込失敗");
			},
			onException: function(request) {
				alert("読込エラーが発生しました");
			}
		});
		
		GEvent.addListener(emap, "click", dispInfoWindow);
	}else{
		alert("ご利用のブラウザではGoogle Mapsはご利用出来ません");
	}
}

// responseXMLで受け取ったデータを2次元配列化
function xmlArray(xmlData){
	var items = xmlData.getElementsByTagName("item");
	var numbers = xmlData.getElementsByTagName("no");
	var pointxs = xmlData.getElementsByTagName("pointx");
	var pointys = xmlData.getElementsByTagName("pointy");
	var nicknames = xmlData.getElementsByTagName("nickname");
	var images = xmlData.getElementsByTagName("image");
	var comments = xmlData.getElementsByTagName("comment");
	var dates = xmlData.getElementsByTagName("date");
	var dataAryWk;
	var i;
	
	dataAryWk = new Array(items.length);
	for(i = 0; i < items.length; i++){
		dataAryWk[i] = new Array(7);
		dataAryWk[i]["no"] = numbers[i].childNodes[0].nodeValue;
		dataAryWk[i]["x"] = pointxs[i].childNodes[0].nodeValue;
		dataAryWk[i]["y"] = pointys[i].childNodes[0].nodeValue;
		dataAryWk[i]["name"] = nicknames[i].childNodes[0].nodeValue;
		dataAryWk[i]["image"] = images[i].childNodes[0].nodeValue;
		dataAryWk[i]["comment"] = comments[i].childNodes[0].nodeValue;
		dataAryWk[i]["date"] = dates[i].childNodes[0].nodeValue;
	}
	
	return dataAryWk;
}

// マーカ追加
function setMarker(point){
	var markerObj;
	
	// カスタムマーカーオブジェクト作成
	markerObj = makeCustomMarkerObj();
	var marker = new GMarker(point, markerObj);
	emap.addOverlay(marker);
}

// 情報ウィンドウ表示
function dispInfoWindow(overlay){
	if(!overlay || overlay == "undefined"){
		return;
	}
	
	var infowindow = emap.getInfoWindow();
	if(infowindow == overlay){
		return;
	}
	
	var mPoint = overlay.getPoint();
	var x = mPoint.lng();
	var y = mPoint.lat();
	var idx;
	var info;
	
	for(idx = 0; idx < dataAry.length; idx++){
		if(dataAry[idx]["x"] == x && dataAry[idx]["y"] == y){
			break;
		}
	}
	
	if(idx >= dataAry.length){
		alert("該当座標なし");
		return;
	}
	
	info = makeInfoWindow(idx);
	overlay.openInfoWindowHtml(info);
}

// 表示情報作成
function makeInfoWindow(idx){
	var str;
	var comment;
	
	comment = dataAry[idx]["comment"].replace(/\r\n/g, "<br />");
	comment = dataAry[idx]["comment"].replace(/(\n|\r)/g, "<br />");
	str  = '<div style="min-width: 200px;">';
	str += '<div style="width: 48px; height: 48px; background-color: #ffffff; float: left; margin-right: 5px; position: relative;">';
	str += '<p style="position:absolute; top:50%; margin-top:-20px;"><img src="' + dataAry[idx]["image"] + '" alt="画像" /></p>';
	str += '</div>';
	str += '<div style="color: #000000; font-size: 12px; line-height: 13px; margin-bottom: 2px;">No.' + dataAry[idx]["no"] + '</div>';
	str += '<div style="color: #000000; font-size: 14px; line-height: 15px; font-weight: bold;">' + dataAry[idx]["name"] + '</div>';
	str += '<div style="border-top: 1px dotted #48b28e; color: #888888; font-size: 11px; margin-top: 3px;">' + dataAry[idx]["date"] + '</div>';
	str += '<div style="clear: both; color: #333333; font-size: 12px;">' + comment + '</div>';
	str += '</div>';
	
	return str;
}