var map;
var httpObj;
var pointObj = new Object();
var tabObj = new Object();
var currentArea;
debug = false;

window.onload = function() {
	
	// デバッグ情報の表示（TRUEで表示）
	var debug = false;
	
	// エリアのセンター登録139.70161199569702 緯度：35.658656146994446
	pointAll = new GLatLng(35.658656146994446, 139.7123622894287);			// 全域
	pointShibuya = new GLatLng(35.65806337339874, 139.7018051147461);		// 渋谷駅
	pointEbisu = new GLatLng(35.646799839105064, 139.71006631851196);		// 恵比寿駅
	pointAoyama = new GLatLng(35.67291625588, 139.72412109375);				// 青山駅
	pointHiroo = new GLatLng(35.652484112208924, 139.72218990325928);		// 広尾駅
	pointDaikanyama = new GLatLng(35.64824710039226, 139.70307111740112);	// 代官山駅

	// マップインスタンスを作成
	map = new GMap2(document.getElementById("gmap"));
	map.setCenter(pointShibuya, 15);
	
	// マップの種類
	map.setMapType(G_NORMAL_MAP);
	
	// カスタムアイコンの登録
	icon = new GIcon();
	icon.image = "/image/landmark.png";
	icon.shadow = "/img/star_shadow.png";
	icon.iconSize = new GSize(20, 20);
	icon.shadowSize = new GSize(30, 20);
	icon.iconAnchor = new GPoint(10, 10);
	
	// コントロールインスタンスを作成
//	ctrlObj = new GSmallMapControl();
//	map.addControl(ctrlObj);
	
	// 経度、緯度取得イベント
//	GEvent.addListener(map, "move", function(){
//		var x = (map.getCenter()).lng();
//		var y = (map.getCenter()).lat();
//		document.getElementById("point").innerHTML = "経度："+x+" 緯度："+y; 
//	});
	
	// ズームレベル取得イベント
//	GEvent.addListener(map, "zoomend", function(){
//		var zm = map.getZoom();
//		document.getElementById("zoom").innerHTML = "倍率："+zm; 
//	});

	// デバッグ情報書き出し
	if (debug) {
		var mt = map.getCurrentMapType();
		var txt = "";
		for ( i in mt ) {
			txt += ( i + " = " + mt[i] ) + "<hr />\n";
		}
		document.getElementById("info").innerHTML = txt;
	}
	
	// 店舗情報を表示
	searchShop();
	
}
function searchShop() {
	// マーカーデータを読み込み
	var msec = (new Date()).getTime();
	currentArea = "";
	httpObj = GXmlHttp.create();
	httpObj.open("get", "/shopmarker.xml?cache="+msec);
	httpObj.onreadystatechange = function(){
		if ((httpObj.readyState == 4) && (httpObj.status == 200)) {
			var xmlData = httpObj.responseXML;
			var pointData = xmlData.getElementsByTagName("point");
			for (var i=0; i<pointData.length; i++) {
				addMarker(pointData[i]);	// マーカー表示
				addShopList(pointData[i]);	// 店舗リスト表示
			}
		}
	}
	httpObj.send(null);
}
function addMarker(point) {
	// マーカー登録
	var id = point.getElementsByTagName("id")[0].firstChild.nodeValue;
	var mx = point.getElementsByTagName("x")[0].firstChild.nodeValue;
	var my = point.getElementsByTagName("y")[0].firstChild.nodeValue;
	var type = point.getElementsByTagName("type")[0].firstChild.nodeValue;
	var gyoshu = point.getElementsByTagName("gyoshu")[0].firstChild.nodeValue;
	var name = point.getElementsByTagName("name")[0].firstChild.nodeValue;
	var tel = point.getElementsByTagName("tel")[0].firstChild.nodeValue;
	var url = point.getElementsByTagName("url")[0].firstChild.nodeValue;
	var access = point.getElementsByTagName("access")[0].firstChild.nodeValue;
	var gpObj = new GLatLng(my, mx);
	var marker = new GMarker(gpObj);
	var infohtml = "";
	infohtml += "<p style=\"margin-bottom:2px;\">【 " + name + " 】</p>";
	if (type == "店舗") {
		infohtml += "<p style=\"margin-bottom:2px;\">" + gyoshu + "</p>";
		infohtml += "<p style=\"margin-bottom:2px;\">" + tel + "</p>";
		infohtml += "<p style=\"margin-bottom:2px;\"><a href=\"" + url + "\" target=\"_blank\">" + url + "</a></p>";
	}
	var tab = [
			new GInfoWindowTab(type, infohtml),
			new GInfoWindowTab("交通アクセス", "<div style=\"width:200px;\">"+access+"</div>")
		];
	tabObj[id] = tab;
	// イベントリスナ登録
	GEvent.addListener(marker, "click", function(){
		getMarkerInfo(id);
	});
	map.addOverlay(marker);
	pointObj[id] = marker;
}
function getMarkerInfo(id) {
	map.setZoom(16);
	pointObj[id].openInfoWindowTabsHtml(tabObj[id]);
}
function addShopList(point) {
	var id = point.getElementsByTagName("id")[0].firstChild.nodeValue;
	var name = point.getElementsByTagName("name")[0].firstChild.nodeValue;
	var access = point.getElementsByTagName("access")[0].firstChild.nodeValue;
	var area = point.getElementsByTagName("area")[0].firstChild.nodeValue;
	var type = point.getElementsByTagName("type")[0].firstChild.nodeValue;
	var tag = "";
	if ( currentArea != area ) {
		currentArea = area;
		tag += "<h4>" + currentArea + "</h4>";
	}
	tag += "<p><a onclick=\"getMarkerInfo("+ id + ");\">" + name + "</a></p>\n";
	if (type == "店舗") {
		document.getElementById("shoplist").innerHTML += tag;
	} else if (type == "目印")  {
		document.getElementById("landmarklist").innerHTML += tag;
	}
}
function moveArea(area) {
	document.getElementById("shoplist").innerHTML = "";
	document.getElementById("landmarklist").innerHTML = "";
	map.clearOverlays();
	map.setCenter(area, 16);
	searchShop();
}