document.addEventListener("DOMContentLoaded", () => {
    var mymap = L.map("gpsmap").setView([38.891, 139.824], 20);
    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
	attribution:
	'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> \
		contributors'
    }).addTo(mymap);

	// ボタンの仕込み-----------------------------------------------------------

	// 目的地確定を仕込む
	document.getElementById("dn").addEventListener("click", DestinationConfirmed);
    // STARTボタンに開始を仕込む
    document.getElementById("start").addEventListener("click", tryWatchGPS);
    // STOPボタンに停止を仕込む
    document.getElementById("stop").addEventListener("click", stopGPS);
	// RESTARTボタンにリスタートを仕込む
    document.getElementById("resart").addEventListener("click", doReload);
	// お試しボタンを仕込む
	document.getElementById("otamesi").addEventListener("click", otamesi);

	// 全体での定義-----------------------------------------------------------

	var destination = L.marker(mymap.getCenter(), {draggable: true,icon: L.spriteIcon('red')}).addTo(mymap);
    destination.bindPopup("目的地を動かして選んで！").openPopup();
    var nTrial = 100
    var watchId = null;		// 最初はnullにしておく
	var ccopt = {	//目的地のサークル
		radius: 15,
		color: "blue"	
	};
	var gpsmarker = L.marker([0,0], {draggable: true}).addTo(mymap);
	gpsmarker.bindPopup("");



	// 目的地ボタン-----------------------------------------------------------

	function DestinationConfirmed(){		// 目的地を作成する。
		var alatlng = destination.getLatLng();
		var ccobj = L.circle(alatlng, ccopt).addTo(mymap);
		ccobj.bindPopup("この位置は"+alatlng+"です。").openPopup();
		document.getElementById("dn").disabled = true; //ボタンを無効化
		destination.setLatLng({draggable: false}); 
		mokutekiti = destination.getLatLng();
		document.getElementById("arrive").textContent = mokutekiti;
	}
	
	destination.on('dragend', function(e) { // 目的地のピンをの座標を示す。
		var latlng = e.target.getLatLng();
		e.target.setPopupContent("この位置は"+latlng+"です。").openPopup();

	});

	// お試しボタンの動作-----------------------------------------------------------
	function otamesi(){
		var mokutekiti = destination.getLatLng();
		document.getElementById("arrive").textContent = mokutekiti;
		var latlng = L.latLng([38.89360, 139.81882]);
		gpsmarker.setLatLng(latlng).setPopupContent(
			"ここは lat="+latlng.lat+", lng="+latlng.lng+" です."
		).openPopup();
		document.getElementById("otamesi").disabled = true; //ボタンを無効化

		gpsmarker.on('dragend', function(e) {
			var latlng = e.target.getLatLng();
			if ((latlng.lat >= mokutekiti.lat-0.000130 && latlng.lat <= mokutekiti.lat+0.000130) && (latlng.lng >= mokutekiti.lng-0.000130 && latlng.lng <= mokutekiti.lng+0.000130)) {
				e.target.setPopupContent("目的地到着").openPopup();
			} else {
				e.target.setPopupContent("この位置は"+latlng+"です。").openPopup();
			}
		});
	}

	// STOPボタン-----------------------------------------------------------
	
	function stopGPS() {	// watchが動いていたら止めてnullにする
		console.log("watchId="+watchId);
		if (watchId != null) {	// nullかどうかで比較しないとだめ(初期値0)
			navigator.geolocation.clearWatch(watchId);
			document.getElementById("title").textContent = "stop";
			gpsmarker.setPopupContent("停めました");
		}
		watchId = null;
	}
	
	// STARTボタン-----------------------------------------------------------


    function tryWatchGPS() {
		stopGPS();		// 二重で動かないように注意する
		watchId = navigator.geolocation.watchPosition(
			onSuccess, onError,{
			maximumAge: 0, timeout: 3000, enableHighAccuracy: true});
		document.getElementById("title").textContent = "START!!";
		}
		function onSuccess(pos) {	// GPS信号が取れたらここに来る
		var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
		mymap.panTo(latlng);// 地図の中心をそこにする
		console.log(latlng);
		// ★★★★★ ここから
		gpsmarker.setLatLng(latlng).setPopupContent(
			"ここは lat="+latlng.lat+", lng="+latlng.lng+" です."
		).openPopup();
		if ((latlng.lat >= 38.89360 && latlng.lat <= 38.89361) && (latlng.lng >= 139.81890 && latlng.lng <= 139.81891)) {
			document.getElementById("title").textContent = "GOAL!!";
		}
		// ★★★★★ ここまでの latlng.lat と latlng.lng を
		// if文などで判定して、特定の場所に近づいたら「GOAL!」と
		// 表示するように変えてみよ。
    }
    function onError(err) {
		restN = "あと"+(--nTrial)+"回試行します。";
		gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup();
		if (nTrial <= 0) {
			navigator.geolocation.clearWatch(watchId);
		}
    }

	// RESTRTボタン-----------------------------------------------------------

	function doReload() {
        // reloadメソッドによりページをリロード
        window.location.reload(true);
    }

	// -----------------------------------------------------------
}, false);