var map;
var shopCount=0;

//markerを作成する
function createMarker(point,html,icon) {
	var marker = new GMarker(point,icon);
/*	口コミ化にする
	var tabList = [
    new GInfoWindowTab("お店情報", ""),
    new GInfoWindowTab("口コミする", inputform)         
  ];
  GEvent.addListener(marker, "click", function() {
      tabList[0].contentElem.innerHTML = html;
      marker.openInfoWindowTabs(tabList);
  });*/
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});

	return marker;
}

//side_barへ追加するリストを作成
function createside_barEntry(marker, name) {
	var li = document.createElement("li");
	var html = '' + name + '';
	li.innerHTML = html;
	li.style.cursor = "pointer";
	if(shopCount==0){
		li.id = "firstC";
	}
	sc=shopCount%2;
	if( sc== 0){li.className = "li01";}
	else{li.className = "li02";}
	
	GEvent.addDomListener(li, "click", function() {
		GEvent.trigger(marker, "click");
	});
	GEvent.addDomListener(li, "mouseover", function() {
		li.style.backgroundColor = "#CCC"; // ポインタが乗ったときサイドバー項目の色指定
	});
	GEvent.addDomListener(li, "mouseout", function() {
		if (this.className == "li01"){
			li.style.backgroundColor = "#F1B08D";
		}
		else{
			li.style.backgroundColor = "#F8D9C9";
		}
	});
	++shopCount;
	return li;
}

function load(){
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(new GLatLng(35.120189,138.918257), 14);
		map.enableScrollWheelZoom();
	}
	
	GDownloadUrl("mk_data.xml", function(data, responseCode) {
		if(responseCode == 200) {
			var xml = GXml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("marker");
			var side_bar = document.getElementById("side_bar");
			side_bar.innerHTML = "";
			for (var i = 0; i < markers.length; i++) {
				var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
									  parseFloat(markers[i].getAttribute("lng")));
				//店情報をまとめる
				var name = markers[i].getAttribute("name");
				var mc ="電話:"+ markers[i].getAttribute("tel") +"<br />";
				var ma = "住所:" + markers[i].getAttribute("address");
				var hp="";//サイトがあればコンテンツに挿入する
				if (ms = markers[i].getAttribute("site")) {hp = '<br /><a href="'+ ms + '" target="_blank">'+ ms + '</a>' }
				var img1="";//画像があればコンテンツに挿入する
				if (mi = markers[i].getAttribute("img1")) {img1 = "<img src='"+ mi +"' style='width:80px;' />" }
				//InfoWindowに表示するhtml作成
				var html = "<p style='background:#8D3C11;color:#FFFFFF;'>" + name + "</p>" + img1 + "<p>"+ mc + ma + hp + "</p>";
				//markerのアイコンを定義
				var icon = new GIcon();
				icon.image  = "http://charinkodays.com/mk/icon_croquette.png";
				icon.shadow ="http://charinkodays.com/mk/icon_croquette_sh.png";
				icon.iconSize = new GSize(22,20);
				icon.iconShadowSize = new GSize(26,20);
				icon.iconAnchor = new GPoint(11,10);
				icon.infoWindowAnchor = new GPoint(11,10);
					
				var marker = createMarker(point,html,icon);
				//markerの書き出し
				map.addOverlay(marker);
				var side_barEntry = createside_barEntry(marker, name);
				side_bar.appendChild(side_barEntry);
			}
		} else if(responseCode == -1) {
			alert("タイムアウトしました。後ほど再試行してください。");
		} else { 
			alert("エラーです。サーバー側データが応答しません。");
		}
	});
}