<?xml version="1.0" encoding="UTF-8" ?>
<Module>
	<ModulePrefs
		title="__MSG_title__"
		description="__MSG_description__"
		author="INUYAMA Nyanjiro"
		author_email="nyanjiro@gmail.com"
		screenshot="__MSG_screenshot__"
		thumbnail="http://nyanjiro.net/gadgets/pathway/gadget_pathway_map_s.png"
		author_location="Tokyo, Japan"
		title_url="__MSG_titleurl__"
		directory_title="Pathwaymap on Google Maps"
		height="250"
		scrolling="true">
		<Locale messages="http://nyanjiro.net/gadgets/pathway/ALL_ALL.xml"/>
		<Locale lang="ja" messages="http://nyanjiro.net/gadgets/pathway/ja_ALL.xml"/>
		<Require feature="analytics" /> 
	</ModulePrefs>

	<Content type="html">
		<![CDATA[

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAIZvI7qkozpalSlBUMPwEUhQcieZB5Ea3kuCiTm6TjKGFISj7qBQiQUNQNCWoGvvAqthyn90QtQclnA" type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=ABQIAAAAIZvI7qkozpalSlBUMPwEUhQcieZB5Ea3kuCiTm6TjKGFISj7qBQiQUNQNCWoGvvAqthyn90QtQclnA" type="text/javascript"></script>
<style type="text/css">
#container{
  font-size: 12px;
}
#manual{
  background-color  : #D9D3C5;
  color             : #000000;
  margin            : 1px;
  padding           : 1px;
}
#guid_pane{
  background-color  : #D9D3C5;
  color             : #000000;
  margin            : 1px;
  padding           : 1px;
}
.contents_background{
  background-color  : #D9D3C5;
  color             : #000000;
  margin            : 1px;
  padding           : 1px;
}
.disabledtext{
  color             : #F00;
  font-weight       : bold;
}
#author{
  text-align        : center;
  background-color  : #C9100A;
  color             : #FFFFFF;
  font-size         : 8pt;
  font-weight       : bold;
}
</style>

<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////
var gLocalSearch;			// GlocalSearchオブジェクト
var elmQuery;				// query要素
var gMap;				// GMap2オブジェクト
var mapEventHandler;			// マップイベントハンドラ
var clickedPoints = new Array();	// クリックした点を保存する配列
var slantDistance = 0;
var pathwayDistance = 0;
var pathwayDistanceBuf = 0;

// 送信用データ
var drawnLines;				// 描画した線を保存する
var zoomLevel;				// ズームレベル
var centerLat;				// 中心の緯度
var centerLng;				// 中心の経度

if (document.namespaces) { // only exists in IE, only needed in IE
	document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
} 

/////////////////////////////////////////////////////////////////////
// ■Google Ajax Search API用初期設定
/////////////////////////////////////////////////////////////////////
// ローカルサーチが実行されたときに呼び出されるコールバック関数
function OnLocalSearch() {
	if (!gLocalSearch.results){
		alert(elmQuery.value + " は見つかりませんでした。別なキーワードでもう一度検索して下さい。");
		return;
	}

	var first = gLocalSearch.results[0];

	if (first==null){
		alert(elmQuery.value + " は見つかりませんでした。別なキーワードでもう一度検索して下さい。");
		return;
	}

	var searchedLatLng = new GLatLng(parseFloat(first.lat), parseFloat(first.lng));
	gMap.setCenter(searchedLatLng, 14);
}

// 「住所で移動」ボタンが押されたときに呼び出される関数
function CaptureForm(form) {
	// ローカルサーチの実行
	gLocalSearch.execute(form["query"].value);
	return false;
}

/////////////////////////////////////////////////////////////////////
// ■ページ表示時に呼び出される関数
/////////////////////////////////////////////////////////////////////
function load__MODULE_ID__() {
	if (GBrowserIsCompatible()) {
		// GMap2オブジェクトの生成
		gMap = new GMap2( document.getElementById("map_pane") );

		// 各種コントロールの追加
		gMap.addControl(new GSmallMapControl());

		// なめらかズーム
		gMap.enableContinuousZoom();
		// ダブルクリックズーム
		gMap.enableDoubleClickZoom();

		// 地図の初期位置の座標
		var lat = 0;
		var lng = 0;
		if(google.loader.ClientLocation != null){
			lat = google.loader.ClientLocation.latitude;
			lng = google.loader.ClientLocation.longitude;
		}
		

		// 初期位置へ移動
		var centerPoint = new GLatLng(lat, lng);
		gMap.setCenter(centerPoint, 1);
		if(google.loader.ClientLocation != null){
			gMap.setCenter(centerPoint, 12);
		}

		// Search API関連設定
		elmQuery = document.getElementById("query");

		gLocalSearch = new GlocalSearch();
		gLocalSearch.setCenterPoint(gMap);
		gLocalSearch.setSearchCompleteCallback(null, OnLocalSearch);
	}

	document.getElementById('author').innerHTML = "Produced by <a href='http://nyanjiro.net/' target='_blank'>INUYAMA Nyanjiro</a>.";

	makePathMode();
}

/////////////////////////////////////////////////////////////////////
// ■その他
/////////////////////////////////////////////////////////////////////
// 作成モード時の画面表示
function makePathMode(){
	// 地図の初期化
	gMap.clearOverlays();
	delete clickedPoints;
	clickedPoints = new Array();

	// GUID入力ペインの描画
	document.getElementById("guid_pane").innerHTML = 
		"<strong>GUID：</strong>"
		+ "<input id='input_guid' type='text' size='20' />"
		+ "<input type='button' value='__MSG_load__' onClick='resultMode()' />";
	
	// 入力・結果ペインの描画
	var buf = "";
	buf += '<strong>__MSG_start__：</strong>';
	buf += '<input type="text" id="start_marker" size="16" /><br />';
	buf += '<strong>__MSG_end__：</strong>';
	buf += '<input type="text" id="end_marker" size="16" /><br />';
	buf += '<strong>__MSG_comment__</strong>__MSG_charlimit__：<br />';
	buf += '<textarea id="comment" rows="2" cols="20"></textarea><br />';
	buf += '<input type="button" id="mode_button" value="__MSG_save__" onClick="postData()">';

	document.getElementById("input_output_pane").innerHTML = buf;

	GEvent.clearInstanceListeners( gMap );

	// 送信用経路座標の初期化
	drawnLines = '';

	// マップクリック時のイベントハンドラの指定(画面クリック時のコールバック関数)
	eventHandleLine = GEvent.addListener(
		gMap,
		'click',
		function(marker, clickedPoint) {
			if( clickedPoints.length > 63 ){
				alert( "__MSG_pathwaylimit__");
				return;
			}

			// クリックによるライン描画
			clickedPoints.push(clickedPoint);

			gMap.addOverlay(new GPolyline(clickedPoints, '#ff0000'));

			// 登録情報をフォームに代入
			if (clickedPoints.length >= 2) {
				slantDistance = clickedPoints[0].distanceFrom(clickedPoints[clickedPoints.length-1]) * 0.001;
				pathwayDistance += (clickedPoints[clickedPoints.length-2]).distanceFrom(clickedPoints[clickedPoints.length-1]) * 0.001;
			}

			document.getElementById('pathway_distance').innerHTML = pathwayDistance.toFixed(3).toString();
			document.getElementById('slant_distance').innerHTML = slantDistance.toFixed(3).toString();
			document.getElementById('calorie_jogging').innerHTML = ( document.getElementById('id_weight').value * pathwayDistance ).toFixed(3);
			document.getElementById('calorie_bicycle').innerHTML = ( document.getElementById('id_weight').value * pathwayDistance * 0.48).toFixed(3);

			// 経路座標情報の取得
			drawnLines += ",[" + clickedPoint.y.toString().substring(0,9) + "," + clickedPoint.x.toString().substring(0,9) + "]";

			// Zoomレベルの取得
			zoomLevel = gMap.getZoom();
		}
	);

}

// GUIDを入力して、地図読込ボタンを押したとき
function resultMode(){
	var msg = "guid=" + encodeURIComponent( document.getElementById("input_guid").value );
	var entry_url = 'http://nyanjiro.net/pathway/pathway_map2.php?' + msg;

	// 投稿
	_IG_FetchContent(
		entry_url,
		getResponse
	);

	// 投稿成功時のコールバック関数
	function getResponse( req ){
		if( !resultModeDisp( req ) ){
			makePathMode();
		}
	}
}

// 結果モード時の画面表示
function resultModeDisp( req ){
	// 初期化
	clearLine();
	GEvent.removeListener( eventHandleLine )

	// "Not Found"が返されたときの動作
	if( req.substring(0, 9) == "Not Found"){
		alert("経路データが見つかりませんでした。\nアドレスが間違っているか長期間利用されなかったためデータが削除された可能性があります。");

		return false;
	}
	else if( req.substring(0, 1) != "{" ){
		alert("エラーが発生しました。");

		return false;
	}
	

	// GUID入力ペインの描画
	document.getElementById("guid_pane").innerHTML = '<a href="#" onClick="makePathMode()">__MSG_drawmode__</a>';

	// 入力・結果ペインの描画
	var buf = "";
	buf += "<strong>__MSG_thisguid__：</strong><br />";
	buf += '<input type="text" id="result_guid" size="20" class="disabledform" onClick="this.select()" /><br />';
	buf += "<strong>__MSG_thisurl__：</strong><br />";
	buf += '<textarea id="url" rows="1" cols="26" class="disabledform" onClick="this.select()"></textarea><br />';
	buf += '<strong>__MSG_start__：</strong>';
	buf += '<input type="text" id="result_start_marker" size="16" class="disabledform" /><br />';
	buf += '<strong>__MSG_end__：</strong>';
	buf += '<input type="text" id="result_end_marker" size="16" class="disabledform" /><br />';
	buf += '<strong>__MSG_comment__</strong>__MSG_charlimit__：<br />';
	buf += '<textarea id="result_comment" rows="2" cols="20" class="disabledform"></textarea><br />';
	buf += '<a href="#" onClick="makePathMode()">__MSG_drawmode__</a>';

	document.getElementById("input_output_pane").innerHTML = buf;

	// レスポンスをJSONデータとして取得
	var result = eval( "(" + req + ")" );

	var linePoints = result.pathway;
	var lat = linePoints[0][0];
	var lng = linePoints[0][1];
	var zoom = result.zoom;
	var start_marker = result.start_marker;
	var end_marker = result.end_marker;
	var comment = result.comment.replace("<br />", "\n");
	var guid = result.guid;

	// 初期位置へ移動
	var centerPoint = new GLatLng(lat, lng);
	gMap.setCenter( centerPoint, parseInt(zoom, 10) );
	
	// ラインの描画
	var lineLatLngPoints = [];
	for(var i=0; i<linePoints.length; i++){
		lineLatLngPoints.push(new GLatLng(linePoints[i][0], linePoints[i][1]));
	}

	gMap.addOverlay(new GPolyline(lineLatLngPoints, '#ff0000'));

	// マーカの描画
	gMap.addOverlay(
		createMarker(
			lineLatLngPoints[0],
			start_marker,
			'http://maps.google.com/mapfiles/kml/pal2/icon10.png',
			'http://maps.google.com/mapfiles/kml/pal2/icon10s.png'
		)
	);
	gMap.addOverlay(
		createMarker(
			lineLatLngPoints[linePoints.length-1],
			end_marker,
			'http://maps.google.com/mapfiles/kml/pal2/icon13.png',
			'http://maps.google.com/mapfiles/kml/pal2/icon13s.png'
		)
	);

	// フォームにURLを表示する
	document.getElementById("result_guid").value = guid;
	document.getElementById("url").value = 'http://nyanjiro.net/pathway/pathway_map2.html?uid=' + guid;
	document.getElementById("result_start_marker").value = start_marker;
	document.getElementById("result_end_marker").value = end_marker;
	document.getElementById("result_comment").value = comment;

	pathwayDistance = 0;
	for(i=1; i<lineLatLngPoints.length; i++){
		pathwayDistance += lineLatLngPoints[i-1].distanceFrom(lineLatLngPoints[i]) * 0.001;
	}
	document.getElementById('pathway_distance').innerHTML = pathwayDistance.toFixed(2).toString();
	document.getElementById('slant_distance').innerHTML = ( lineLatLngPoints[0].distanceFrom( lineLatLngPoints[lineLatLngPoints.length-1] ) * 0.001 ).toFixed(2).toString();
	document.getElementById('calorie_jogging').innerHTML = ( document.getElementById('id_weight').value * pathwayDistance ).toFixed(2);
	document.getElementById('calorie_bicycle').innerHTML = ( document.getElementById('id_weight').value * pathwayDistance * 0.48 ).toFixed(2);

	return true;
}

// 投稿ボタン押下時
function postData(){
	// パラメータチェック
	if( document.getElementById('start_marker').value.length > 32 ){
		alert('出発地点名は16文字以内で入力してください。');
		return;
	}
	if( document.getElementById('end_marker').value.length > 32 ){
		alert('到着地点名は16文字以内で入力してください。');
		return;
	}
	if( document.getElementById('comment').value.length > 256 ){
		alert('コメントは128文字以内で入力してください。');
		return;
	}
	if( drawnLines == '' ){
		alert('地図をクリックして経路を入力してください。');
		return;
	}

	// getパラメータの生成
	var msg = "";
	msg += "line_array=" + encodeURIComponent( drawnLines.toString() );
	msg += "&zoom=" + encodeURIComponent( zoomLevel.toString() );
	msg += "&start_marker=" + encodeURIComponent( document.getElementById('start_marker').value );
	msg += "&end_marker=" + encodeURIComponent( document.getElementById('end_marker').value );
	msg += "&comment=" + encodeURIComponent( document.getElementById('comment').value );

	var entry_url = 'http://nyanjiro.net/pathway/pathway_map2.php?' + msg;
	_IG_FetchContent(
		entry_url,
		getResponse
	);

	// 投稿成功時のコールバック関数
	function getResponse( req ){
		if( !resultModeDisp( req ) ){
			makePathMode();
		}
	}
}

// マーカ描画関数 
function createMarker(point, name, iconUrl, shadowUrl) {
	var icon = new GIcon();
	icon.image = iconUrl;
	icon.shadow = shadowUrl;
	icon.iconSize = new GSize(25, 30);
	icon.shadowSize = new GSize(22, 20);
	icon.iconAnchor = new GPoint(6, 20);
	icon.infoWindowAnchor = new GPoint(5, 1);

	var marker = new GMarker(point, icon);
	eventHandleMarker = GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(name);
	});

	return marker;
}

// REDOボタンが押されたときに呼ばれる関数
function clearLine() {
	for(i=0; i<clickedPoints.length; i++){ ;
		clickedPoints.pop();
	}

	drawnLines = '';
	delete clickedPoints;
	clickedPoints = new Array();
	gMap.clearOverlays();

	slantDistance = 0;
	pathwayDistance = 0;

	document.getElementById('pathway_distance').innerHTML = "0.000";
	document.getElementById('slant_distance').innerHTML = "0.000";
	document.getElementById('calorie_jogging').innerHTML = "0.000";
	document.getElementById('calorie_bicycle').innerHTML = "0.000";
}

// カロリー計算(体重を変更したときに呼ばれる関数)
function CalCalorie(){
	document.getElementById('calorie_jogging').innerHTML = ( document.getElementById('id_weight').value * pathwayDistance ).toFixed(3);
	document.getElementById('calorie_bicycle').innerHTML = ( document.getElementById('id_weight').value * pathwayDistance * 0.48 ).toFixed(3);
}

// マニュアル表示
var manual_state = false;
function display_manual(){
	if( !manual_state ){
		document.getElementById('manual').innerHTML = 
			  "<strong>__MSG_subtitile1__</strong><br />"
			+ "	__MSG_st11__<br />"
			+ "	__MSG_st12__<br />"
			+ "	__MSG_st13__<br />"
			+ "	__MSG_st14__<br />"
			+ "<strong>__MSG_subtitile1__</strong><br />"
			+ "	 __MSG_st21__<br />"
			+ "	 __MSG_st22__<br />";

		document.getElementById('manual_link').innerHTML = "__MSG_closehowto__";

		manual_state = true;
	}
	else{
		document.getElementById('manual').innerHTML = "";

		document.getElementById('manual_link').innerHTML = "__MSG_howto__";

		manual_state = false;
	}
}

/////////////////////////////////////////////////////////////////////
// OnLoad()関数をコール
/////////////////////////////////////////////////////////////////////
_IG_RegisterOnloadHandler(load__MODULE_ID__);

/////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////
</script>

<div id="container">
	<a href="#" id="manual_link" onClick="display_manual()">__MSG_howto__</a><br />
	<div id="manual"></div>

	<div id="guid_pane">
	</div>

	<div id="map">
		<!-- GoogleMapペイン -->
		<div id="map_pane" style="height:150px"></div>
	</div>

	<!-- REDOボタン -->
	<div id="redo">
		<input id="refresh_button" type="button" value="__MSG_redo__" onClick="clearLine()" />
	</div>

	<!-- SearchBoxペイン -->
	<div id="searchbox_pane" class="contents_background">
		<form action="#" method="get" onsubmit="return CaptureForm(this)">
			<span class="text"><input id="query" type="text" size="30" name="q" value="__MSG_address__" /></span>
			<span class="button"><input type="submit" value="__MSG_jump__"/></span>
		</form>
	</div>

	<div id="console">	
		<!-- 入力・結果ペイン -->
		<div id="input_output_pane" class="contents_background"></div>
		
		<!-- 情報ペイン -->
		<div id="info_pane" class="contents_background">
			・<strong>__MSG_pathdistance__</strong>：<span id="pathway_distance" class="disabledtext">0</span> km 
			・<strong>__MSG_slantdistance__</strong>：<span id="slant_distance" class="disabledtext">0</span> km<br />
			・<strong>__MSG_calorie__</strong>：<br />
			　__MSG_calorietxt1__<input type="text" id="id_weight" size="4" name="weight" value="60" onChange="CalCalorie()"/>__MSG_calorietxt2__<span id="calorie_jogging" class="disabledtext">0</span> __MSG_calorietxt3__<span id="calorie_bicycle" class="disabledtext">0</span> __MSG_calorietxt4__
		</div>
	</div>
</div>

<!-- クレジット表示 -->
<div id="author"></div>

<!-- Analytics -->
<script>
	_IG_Analytics("UA-403022-4", "/pathway_map");
</script>

		]]>
	</Content>
</Module>

