// JavaScript Document

var markers = [];
//var points = [];
//var infos = [];
//var spinoffs = [];

var map = null;
var sidebar_html = "";
var opts = null;
var i = 0;
var marker_path = "../../../googlemap/markers/";

var icon_colors = [];
icon_colors["insti"] = 'num_red/';
icon_colors["ikou"] = 'num_yellow/';
icon_colors["hi"] = 'num_orange/';
icon_colors["monument"] = 'num_moss/';
icon_colors["after"] = 'num_lightblue/';
icon_colors["now"] = 'num_lightpurple/';
icon_colors["other"] = 'num_gray/';

// ベースアイコン
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/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 optionIcon = new GIcon();
optionIcon.shadow = marker_path + "icon_shadow.png";
optionIcon.iconSize = new GSize(20, 20);
optionIcon.shadowSize = new GSize(31, 20);
optionIcon.iconAnchor = new GPoint(8, 8);
optionIcon.infoWindowAnchor = new GPoint(9, 2);
optionIcon.infoShadowAnchor = new GPoint(18, 25);

// ゾーンアイコン
var zoneIcon = new GIcon();
zoneIcon.shadow = marker_path + "zone_shadow.png";
zoneIcon.iconSize = new GSize(110, 34);
zoneIcon.shadowSize = new GSize(128, 34);
zoneIcon.iconAnchor = new GPoint(55, 34);
zoneIcon.infoWindowAnchor = new GPoint(55, 1);
zoneIcon.infoShadowAnchor = new GPoint(64, 25);

/*var spot_icon_cds = ['virtual', 'ikou', 'hi', 'monument', 'after', 'now', 'other'];
var spot_icons = [];
for (var code in spot_icon_cds) {
	spot_icons[code] = new GIcon(baseIcon, marker_path + "icon_" + code + ".png");
}*/

var zone_icons = [];
zone_icons["negai"] = new GIcon(zoneIcon, marker_path + "zone_negai.png");
zone_icons["inori"] = new GIcon(zoneIcon, marker_path + "zone_inori.png");
zone_icons["manabi"] = new GIcon(zoneIcon, marker_path + "zone_manabi.png");
zone_icons["tenshudo"] = new GIcon(zoneIcon, marker_path + "zone_tenshudo.png");
zone_icons["hamaguchi"] = new GIcon(zoneIcon, marker_path + "zone_hamaguchi.png");
zone_icons["sanno"] = new GIcon(zoneIcon, marker_path + "zone_sanno.png");
zone_icons["shimonokawa"] = new GIcon(zoneIcon, marker_path + "zone_shimonokawa.png");
zone_icons["ikadai"] = new GIcon(zoneIcon, marker_path + "zone_ikadai.png");
zone_icons["yamazato"] = new GIcon(zoneIcon, marker_path + "zone_yamazato.png");
zone_icons["nagai"] = new GIcon(zoneIcon, marker_path + "zone_nagai.png");
zone_icons["shiroyama"] = new GIcon(zoneIcon, marker_path + "zone_shiroyama.png");

var opt_markers = [];
var opt_icons = [];
opt_icons["toilet"] = new GIcon(optionIcon, marker_path + "icon_toilet.png"); // トイレのアイコン
opt_icons["handi"] = new GIcon(optionIcon, marker_path + "icon_handi.png"); // 障害者設備のアイコン
opt_icons["rest"] = new GIcon(optionIcon, marker_path + "icon_rest.png"); // 飲食店のアイコン
opt_icons["parking"] = new GIcon(optionIcon, marker_path + "icon_parking.png"); // 駐車場のアイコン
opt_icons["store"] = new GIcon(optionIcon, marker_path + "icon_store.png"); // ストアのアイコン
opt_icons["bus"] = new GIcon(optionIcon, marker_path + "icon_bus.png"); // バス停のアイコン
//var opt_points = [];

function initialize() {

	if (GBrowserIsCompatible()) { 
	
		// ===== 基礎部分、setCenterで中心座標を指定 =====
		map = new GMap2(document.getElementById("map"));
		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.enableScrollWheelZoom();
		map.setCenter(new GLatLng(crnt_lat, crnt_lng), crnt_zoom);	// 緯度と経度、ズームレベル

		// 情報ボックス（吹き出し）の幅設定
		opts = map.getInfoWindow();
		opts.maxWidth = 300;

		// ゾーンのポリゴン表示
		for (var code in zone_names) {
			if (crnt_zone != code) {
				var info = createZoneInfo(code);	// 情報ウィンドウの中身作成
				var zone = createPolygon(code, info);
				map.addOverlay(zone);	// ポリゴンの表示
				
				var zone_marker = createZoneMarker(code);
				map.addOverlay(zone_marker);	// ゾーンマーカーの表示
			}
		}

		// オプションマーカーの表示
		for (var wk = 0; wk < opt_lats.length; wk++) {
			var point = new GLatLng(opt_lats[wk],opt_lngs[wk]);
//			opt_points[wk] = point;
			var marker = createOptionMarker(point, opt_names[wk], opt_htmls[wk], opt_urls[wk], opt_cates[wk]);
			map.addOverlay(marker);	// マーカーの表示
		}

		// スポットマーカーの順次表示
		var spot_num = 0;
		sidebar_html += "<ol>\n";
		for (var code in lats) {
			if (crnt_zone == zones[code]) {	// 指定されたゾーンのみ
				spot_num++;
				var point = new GLatLng(lats[code],lngs[code]);
//				points[code] = point;
				info = createInfo(code);	// 情報ウィンドウの中身作成
				var marker = createSpotMarker(code, point, names[code], info, spot_num);
				map.addOverlay(marker);	// マーカーの表示
			}
		}
		sidebar_html += "</ol>\n";

		show("toilet");		// 初期表示で見せるカテゴリ
		hide("handi");		// 見せない
		hide("rest");		// 見せない
		hide("parking");	// 見せない
		hide("store");		// 見せない
		hide("bus");		// 見せない

		// サイドバー書き出し
		document.getElementById("sidebar").innerHTML = sidebar_html;

	}
}

// ゾーンとフキダシの生成
function createPolygon(code, info) {

	if (zone_polys[code] != '') {
		var polygon = new GPolygon.fromEncoded({
			polylines: [{
				points:     zone_polys[code], 		// エンコードされた座標値
				levels:     zone_lvls[code], 	// エンコードされたズームレベル値
				color:      '#3366cc',     // 線の色
				opacity:    1.0,           // 線の不透明度
				weight:     2,             // 線の太さ
				numLevels:  4,            // ズームレベルの分割数
				zoomFactor: 32              // ？
			}],
			fill:    true,      // 領域を塗りつぶすかどうか
			color:   zone_colors[code], // 塗りつぶす色
			opacity: 0.5,       // 塗りつぶす色の不透明度
			outline: false       // 線を表示するかどうか
		});

		GEvent.addListener(polygon, "click", function() {
			location.href = zone_urls[code]; // 別ページに飛ばす
		});
	}

	return polygon;

}

// マーカーとフキダシ。name がサイドバー表示、html がフキダシの指示
function createZoneMarker(code) {

	// アイコンの設定
	var zone_icon = new GIcon(zoneIcon);
//	zone_icon.image = "http://www.google.com/mapfiles/zone_" + code + ".png";	// ゾーンマーカー
	zone_icon.image = "http://www.google.com/mapfiles/zone_negai.png";	// ゾーンマーカー
	
	var zone_point = new GLatLng(zone_lats[code], zone_lngs[code]);
	var zone_marker = new GMarker(zone_point, zone_icons[code]);

	GEvent.addListener(zone_marker, "click", function() {
		location.href = zone_urls[code]; // 別ページに飛ばす
	});
	
	// 名称をサイドバーに設定
//	sidebar_html += '<a href="javascript:myclick(\'' + code + '\')">' + zone_names[code] + '<\/a><br \/>';
	
	return zone_marker;
}

// スポットマーカーとフキダシ。サイドバー表示
function createSpotMarker(code, point, name, info, num) {

	// デフォルトアイコンの設定
	var icon = new GIcon(baseIcon);
//	icon.image = marker_path + "marker" + num + ".png";	// 1-100マーカー
	icon.image = marker_path + icon_colors[icons[code]] + "marker" + num + ".png";	// 1-100マーカー
	
	var marker = new GMarker(point, icon);

	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(info, opts);
	});

	markers[code] = marker;

	// 名称をサイドバーに設定
//	sidebar_html += '<a href="javascript:myclick(\'' + code + '\')">' + num + "-" + name + '<\/a><br \/>';
	sidebar_html += '<li><a href="javascript:myclick(\'' + code + '\')">' + name + '<\/a><\/li>';
	
	return marker;
}

// 情報ボックス表示
function myclick(code) {

//	markers[code].openInfoWindowHtml(createInfo(code), opts);
	GEvent.trigger(markers[code], "click");

}
		
// アルファベットから数字を得る
function getSortedIndex(alfa) {

	var charCodeA = "A".charCodeAt(0);	// A を数字に変換
	
	return alfa.charCodeAt(0) - charCodeA;	// 先頭のアルファベットを A=0 から始まる数字に変換

}

// 吹き出し（情報ウィンドウ）の作成（サムネイルは128×128以下に抑えること）
function createInfo(code) {

	var info_str = "";
	if (urls[code]) {
		var href_str = html_path + urls[code];
	}
	else {
		var href_str = html_path + code + ".html";
	}
	
	info_str += '<div class="infoWindow"><b>'+ names[code] + '</b></div>';
	info_str += '<div class="infoWindow">';
//	if (imgs[code]) {
		info_str += '<div class="infoWindowBox"><a href="' + img_path + code + '.jpg' + '" target="image" title="' + names[code] + '"><img src="' + img_path + code + '_s.jpg' + '" align="right" border="0" /></a></div>';
//	}
	info_str += htmls[code] + '</div>';
	info_str += '<div class="infoWindowBottom">';
	info_str += '｜<a href="' + href_str + '" target="detail" title="' + names[code] + '">詳細</a>｜';
	info_str += '</div>';
//	info_str += '<div class="clearFix">&nbsp;</div>';
	
	return info_str;
	
}

function createInfo_bak(code) {	// 古い形式

	var info_str = "";
	
	info_str += '<div class="infoWindow"><b>'+ names[code] + '</b></div>';
	info_str += '<div class="infoWindow">';
	if (imgs[code]) {
		info_str += '<a href="' + img_path + imgs[code] + '" target="image" title="' +  names[code] + '"><img src="' + img_path + imgs[code] + '" width="50%" align="right" border="0" /></a>';
	}
	info_str += htmls[code] + '<br />';
	info_str += '観覧時間：' + minutes[code] + '分</div>';
	info_str += '<div class="clearFix">';
	info_str += '｜<a href="' + html_path + urls[code] + '" target="detail" title="' + names[code] + '">詳細</a>｜';
	info_str += '</div>';
//	info_str += '<div class="clearFix">&nbsp;</div>';
	
	return info_str;
	
}

// ゾーンの吹き出し（情報ウィンドウ）の作成
function createZoneInfo(code) {

	var info_str = "";
	
	info_str += '<div class="infoWindow"><b>'+ zone_names[code] + '</b></div>';
	info_str += '<div class="infoWindow">' + "クリックすると拡大表示します。" + '</div>';
	info_str += '<div class="clearFix">';
	info_str += '｜<a href="' + zone_urls[code] + '" title="' + zone_names[code] + '">拡大表示</a>｜';
	info_str += '</div>';
//	info_str += '<div class="clearFix">&nbsp;</div>';
	
	return info_str;
	
}

// オプションマーカーのトグルスイッチ
function boxclick(box,category) {
	if (box.checked) {
	  show(category);
	} else {
	  hide(category);
	}
}

// オプションマーカーの表示
function show(category) {
	for (var i=0; i<opt_markers.length; i++) {
		if (opt_markers[i].mycategory == category) {
			opt_markers[i].show();
		}
	}
	document.getElementById(category).checked = true;
}

// オプションマーカーの非表示
function hide(category) {
	for (var i=0; i<opt_markers.length; i++) {
		if (opt_markers[i].mycategory == category) {
			opt_markers[i].hide();
		}
	}
	document.getElementById(category).checked = false;
	map.closeInfoWindow();
}

// オプションマーカー作成
function createOptionMarker(point, name, html, url, category) {

	// デフォルトアイコンの設定
	var opt_icon = new GIcon(optionIcon);
	opt_icon.image = "marker/icon_toilet.png";	// トイレマーカー

	var marker = new GMarker(point, opt_icons[category]);
//	var marker = new GMarker(point, opt_icon);
	marker.mycategory = category;
	marker.myname = name;
	var html = "<strong>"+name+"<\/strong><br />"+html+"<br />";
	if (url) {
		html += '｜<a href="' + url + '" target="_blank">リンク</a>｜';
	}
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html);
	});
	opt_markers.push(marker);
	return marker;
}