if (!GBrowserIsCompatible()) alert("ご利用の環境では地図を表示できません");
var val_sel = "cate00";
var side_bar_html = "";
var gmarkers = [];
var htmls = [];
var i = 0;
function CheckUnload() {
	try {
		GUnload();
	}
	catch(e) {
	}
}
function createMarker(point,name,address,phone,intro,url,index,count) {  
    var marker = new GMarker(point);
    var icon = new GIcon(baseIcon);
	if (count < 26) {
    var letter = String.fromCharCode("A".charCodeAt(0) + count);
  	icon.image = "icons/marker" + letter + ".png";
	}
	else
	{
	var letter = "*";
	icon.image = "icons/marker.png";
	}
  	var marker = new GMarker(point, icon);
	
	marker.tooltip = '<div class="tooltip">' + name + '</div>';
    
	var msg = "";
        msg += '<div>';
        msg += '<span class="meisyo">' + '名称: ' + name    + '</span><br />';
        msg += '<span class="etc">'    + '住所: ' + address + '</span><br />';
        msg += '<span class="etc">'    + '電話: ' + phone   + '</span><br />';
        msg += '<span class="etc">'    + '内容: ' + intro   + '</span><br />';
        msg += '<span class="etc">'    + 'URL: '  + '<a href="' + url + '"target="_blank">' + url + '</a></span>';
        msg += '</div>';
        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(msg);
        });
		GEvent.addListener( marker, "mouseover", function() {
			showTooltip( marker );
		});
		GEvent.addListener( marker, "mouseout", function() {
			tooltip.style.visibility = "hidden"
		});

    gmarkers[i] = marker;
    htmls[i] = msg;
    side_bar_html += '<span class="meisyo">' + letter + '</span>' + " " 
	+ '<a href="javascript:myclick(' + i + ')"onmouseover="mymouseover(' + 
		i + ')" onmouseout="mymouseout()">' + '<span class="meisyo">' + name + '</span></a><br>';
		i++;
    return marker;
    }
function myclick(i) {
    gmarkers[i].openInfoWindowHtml(htmls[i]);
    }
function mymouseover(i) {
	showTooltip( gmarkers[i] )
}
function mymouseout() {
	tooltip.style.visibility = "hidden";
}
function selectchanged() { 
	map.clearOverlays();
	val_sel = el("category").value;
	var htmls = [];
	var side_bar = htmls;
	side_bar_html = side_bar;
	i = 0;
	
	CallBack();
}
function el(id) {
    return document.getElementById(id);
	}
function CallBack() {
	if (request.readyState == 4)  { 
		var xmlDoc = request.responseXML;
		var markers = xmlDoc.documentElement.getElementsByTagName("marker");
		var j = 0;
		for (var i = 0; i < markers.length; i++) {
			var w_val_sel = markers[i].getAttribute("category");
			if (w_val_sel == val_sel || val_sel == "cate00") {
				var lat = parseFloat(markers[i].getAttribute("lat"));
				var lng = parseFloat(markers[i].getAttribute("lng"));
				var point = new GLatLng(lat,lng);
				if ( j == 0 ) {
					var point0 = point;
				}
				var name = markers[i].getAttribute("name");
				var address = markers[i].getAttribute("address");
				var phone = markers[i].getAttribute("phone");
				var intro = markers[i].getAttribute("intro");
				var url = markers[i].getAttribute("url");
				var marker = createMarker(point,name,address,phone,intro,url,i,j);
				map.addOverlay(marker);
				j++;
			}
			document.getElementById("side_bar").innerHTML = side_bar_html;
		}
		if ( point0 == undefined ) {
			map.panTo(new GLatLng(35.742138, 139.257419));
			alert("該当する施設がありません");
		}
		else {
			map.panTo(point0);
		}
    }	
}
function showTooltip( marker ) {
	var bd = map.getBounds();
	var pt = marker.getPoint();
	var sw = bd.getSouthWest();
	var ne = bd.getNorthEast();

	if ( sw.lng() > pt.lng() || ne.lng() < pt.lng() || sw.lat() > pt.lat() || ne.lat() < pt.lat() ) {
		return 0;
	}
	
	tooltip.innerHTML = marker.tooltip;
	var point  = map.getCurrentMapType().getProjection().fromLatLngToPixel( map.getBounds().getSouthWest(), map.getZoom() );
	var offset = map.getCurrentMapType().getProjection().fromLatLngToPixel( marker.getPoint(), map.getZoom() );
	var anchor = marker.getIcon().iconAnchor;
	var width  = marker.getIcon().iconSize.width;
	var pos    = 
		new GControlPosition( 
			G_ANCHOR_BOTTOM_LEFT, 
			new GSize( 
				offset.x - point.x - anchor.x + width, 
				- offset.y + point.y + anchor.y 
			)
		); 
	pos.apply( tooltip );
	tooltip.style.visibility = "visible";
}
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl(new GSize(160,80)));
map.setCenter(new GLatLng(35.742138, 139.257419), 14);
var Scale = new GScaleControl();
map.addControl(Scale);	
map.enableDoubleClickZoom(); 
map.enableContinuousZoom(); 
var baseIcon = new GIcon();
baseIcon.shadow = "icons/shadow50.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 tooltip = document.createElement( "div" );
document.getElementById( "map" ).appendChild( tooltip );
tooltip.style.visibility = "hidden";
var request = GXmlHttp.create();
request.open("GET", "hinode.xml", true);
request.onreadystatechange = CallBack;
request.send(null);
document.getElementById("category").value = val_sel;