//<![CDATA[
var map = null;
var center = new GLatLng(42.91771501488713,143.20232391357422);
var level = 12;
var zoomInLevel = 14;
var markers = [];
var htmls = [];
var i = null;
var baseIcon = null;
var sidebar = "";
var category = "";
var categorys = [];
var groups = [];

function load() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GScaleControl());
		map.addControl(new GMapTypeControl());
		map.setCenter(center,level);
		
		readMap("xml/center_south.xml");// 最初はこれを読み込む
	} else {
	alert("お使いのブラウザーではGoogle Mapsを表示できません。");
	}
}

// XMLファイルの読み込み
// フォーマット<marker name="?" lat="?" lng="?" item1="?" item2="?" image/>
function readMap(url) {
	var request = GXmlHttp.create();
	request.open("GET", url, true);
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			var xmlDoc = request.responseXML;
			var markers = xmlDoc.documentElement.getElementsByTagName("marker");
			map.clearOverlays();
			map.setCenter(center,level);
			map.getInfoWindow().hide();
			sidebar="";
			for (i = 0; i < markers.length; i++) {
				var category = markers[i].getAttribute("category");
				var name = markers[i].getAttribute("name");
				var lat = parseFloat(markers[i].getAttribute("lat"));
				var lng = parseFloat(markers[i].getAttribute("lng"));
				var point = new GLatLng(lat,lng);
				var item1 = markers[i].getAttribute("item1");
				var item2 = markers[i].getAttribute("item2");
				var image= markers[i].getAttribute("image");
				var zoomOut = '<a href="javascript:zoomOut();">ズームアウト</a>';
				var html = '<span id="name">'+name+'</span>'+'<br />'+item1+'<br />'+item2+'<br />'+image+'<br />'+'<div id="zoomOut">'+zoomOut+'</div>';
				var marker = createMarker(category,name,point,html);
				map.addOverlay(marker);
			}
			document.getElementById("ShowSidebar").innerHTML = sidebar;
		}
	}
	request.send(null);
}

function createMarker(category,name,point,html) {
	baseIcon = new GIcon();
	baseIcon.shadow = "img/markerShadow.png";
	baseIcon.iconSize = new GSize(20, 34);
	baseIcon.shadowSize = new GSize(37, 34);
	baseIcon.iconAnchor = new GPoint(9, 34);
	baseIcon.infoWindowAnchor = new GPoint(9, 2);
	baseIcon.infoShadowAnchor = new GPoint(18, 25);
	var icon = new GIcon(baseIcon);
	var letter = String.fromCharCode("A".charCodeAt(0) + i);
	icon.image = "img/darkgreen_Marker" + letter + ".png";
	var marker = new GMarker(point,{icon:icon,title:name});
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
		map.setZoom(zoomInLevel);
	});
	categorys[i] = category;
	groups[i] = category;
	if (groups[i] == categorys[i-1]) {
		groups[i] = "";
	}
	if (i!=0 && groups[i]!="") {
		groups[i] = groups[i];
	}
	markers[i] = marker;
	htmls[i] = html;
	sidebar += '<div id="category">'+groups[i]+'</div>'+'<a href="javascript:sidebarClick('+i+')">'+'<div id="item">'+String(letter)+'&nbsp;'+name+'</div>'+'</a>';
	return marker;
}

function sidebarClick(i) {
	map.setZoom(zoomInLevel);
	markers[i].openInfoWindowHtml(htmls[i]);
}

function zoomOut() {
	map.getInfoWindow().hide();
	map.setCenter(center,level);
}
//]]>