var marker = new Object();

function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("shimokita"));
	
	//ズームコントロールを付ける
    map.addControl(new GLargeMapControl());
	//マップタイプコントロールを付ける
    map.addControl(new GMapTypeControl());
	
	//マップオーバービューコントローラを付ける
	var miniMap=new GOverviewMapControl(new GSize(200,150));
	map.addControl(miniMap);
	
	//地図のセンターを下北に設定
	map.setCenter(new GLatLng(35.66155021371762, 139.667387008667), 17);
	
	//オリジナルアイコンの作成(白)
	var icon_w = new GIcon();
	icon_w.image = "imgs/icon_white.png";
	icon_w.iconSize = new GSize(40, 35);
	icon_w.iconAnchor = new GPoint(0, 17);
	icon_w.infoWindowAnchor = new GPoint(15, 1);
	
	//オリジナルアイコンの作成(黒)
	var icon_b = new GIcon();
	icon_b.image = "imgs/icon_black.png";
	icon_b.iconSize = new GSize(40, 35);
	icon_b.iconAnchor = new GPoint(0, 17);
	icon_b.infoWindowAnchor = new GPoint(15, 1);
	
	//店舗情報のXMLを取得
    var request = GXmlHttp.create();
    request.open("GET", "data.xml", true);
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
		var xmlDoc = request.responseXML;
		var markers = xmlDoc.documentElement.getElementsByTagName("shop");
		for (var i = 0; i < markers.length; i++) {
			marker[i] = addMarker(markers, i);
		}
      }
    }
    request.send(null);
	
	function addMarker(markers, i){
		//マウスオーバー用アイコン作成
		var name = new GIcon();
		name.image = "imgs/shop_name/"+(i+1)+".png";
		var name_size = markers[i].getElementsByTagName("name_size")[0].firstChild.nodeValue;
		name.iconSize = new GSize(name_size, 42);
		name.iconAnchor = new GPoint((name_size/2)-35, 57);

		// 座標
		var LtLng = new GLatLng (parseFloat(markers[i].getElementsByTagName("lng")[0].firstChild.nodeValue), parseFloat(markers[i].getElementsByTagName("lat")[0].firstChild.nodeValue));

		if(markers[i].getElementsByTagName("tv")[0].firstChild.nodeValue == 'black'){
			var marker = new GMarker(LtLng, icon_b);
		}else{
			var marker = new GMarker(LtLng, icon_w);
		}
		var marker02 = new GMarker(LtLng, name);
		var detail = "<table><tr><td width=\"110\" valign=\"top\"><img class=\"shop\" width=\"110\" height=\"73\" alt=\"\" src=\"imgs/shop/"+(i+1)+".jpg\"/></td>";
		detail += "<td width=\"258\" valign=\"top\"><span class=\"txt12-0 txt_ext\">"+(i+1)+"."+markers[i].getElementsByTagName("name")[0].firstChild.nodeValue+"</span>";
		detail += "<span class=\"txt10-0 txt_ext\"><br/>"+markers[i].getElementsByTagName("note")[0].firstChild.nodeValue+"<br/>営業時間　"+markers[i].getElementsByTagName("open")[0].firstChild.nodeValue;
		detail += "　定休日　"+markers[i].getElementsByTagName("off")[0].firstChild.nodeValue+"／"+markers[i].getElementsByTagName("address")[0].firstChild.nodeValue+"／"+markers[i].getElementsByTagName("tel")[0].firstChild.nodeValue;
		detail += "<br />"+markers[i].getElementsByTagName("tv_info")[0].firstChild.nodeValue;
		if(markers[i].getElementsByTagName("url")[0].firstChild.nodeValue != 'NO'){
			detail += "<br /><a href=\""+markers[i].getElementsByTagName("url")[0].firstChild.nodeValue+"\">"+markers[i].getElementsByTagName("url")[0].firstChild.nodeValue+"</a>";
		}
		detail += "</span></td></tr></table>";
		GEvent.addListener(marker, "mouseover", function() {
//			var id = setInterval(function() {
//				clearInterval(id);
				map.addOverlay(marker02);
//			},1000);
		});
		GEvent.addListener(marker, "mouseout", function() { map.removeOverlay(marker02) });
		GEvent.addListener(marker, "click", function() {
			map.removeOverlay(marker02);
			marker.openInfoWindowHtml(detail);
		});
		map.addOverlay(marker);
		return marker;
	}
  }
}

function spot(i){
	// マーカーにクリックを送る
	GEvent.trigger(marker[i], 'click');
}