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

    var cc = [38.89360, 139.81882];
    var ccopt = {
        radius: 10,
        color: "red"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("A教室");

    var cc = [38.89330, 139.81880];
    var ccopt = {
        radius: 10,
        color: "blue"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("B教室");

    var cc = [38.89300, 139.81877];
    var ccopt = {
        radius: 10,
        color: "yellow"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("C教室");

    var gpsmarker = L.marker(mymap.getCenter(), {draggable: true}).addTo(mymap);
    gpsmarker.bindPopup("STARTを押してね").openPopup();
    gpsmarker.on('dragend', function(e) {
        var latlng = e.target.getLatLng();
        e.target.setPopupContent("この位置は"+latlng+"です。");
        if ((latlng.lat >= 38.893504 && latlng.lat <= 38.893688) && (latlng.lng >= 139.818701 && latlng.lng <= 139.818932)) {
            document.getElementById("arrive").textContent = "A教室到着!!";
        } else if ((latlng.lat >= 38.893200 && latlng.lat <= 38.893396) && (latlng.lng >= 139.818680 && latlng.lng <= 139.818916)) {
            document.getElementById("arrive").textContent = "B教室到着!!";
        } else if ((latlng.lat >= 38.892904 && latlng.lat <= 38.893091) && (latlng.lng >= 139.818648 && latlng.lng <= 139.818884)) {
            document.getElementById("arrive").textContent = "C教室到着!!";
        } else {
            document.getElementById("arrive").textContent = "　";
        }
    });

    var nTrial = 100
    var watchId = null;		// 最初はnullにしておく
    function stopGPS() {	// watchが動いていたら止めてnullにする
	console.log("watchId="+watchId);
	if (watchId != null) {	// nullかどうかで比較しないとだめ(初期値0)
	    navigator.geolocation.clearWatch(watchId);
	    document.getElementById("arrive").textContent = "stop";
	    gpsmarker.setPopupContent("停めました");
	}
	watchId = null;
    }
    function tryWatchGPS() {
	stopGPS();		// 二重で動かないように注意する
	watchId = navigator.geolocation.watchPosition(
	    onSuccess, onError,{
		maximumAge: 0, timeout: 3000, enableHighAccuracy: true});
	document.getElementById("arrive").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();
	// ★★★★★ ここまでの latlng.lat と latlng.lng を
	// if文などで判定して、特定の場所に近づいたら「GOAL!」と
	// 表示するように変えてみよ。
	if ((latlng.lat >= 38.893504 && latlng.lat <= 38.893688) && (latlng.lng >= 139.818701 && latlng.lng <= 139.818932)) {
        document.getElementById("arrive").textContent = "A教室到着!!";
    } else if ((latlng.lat >= 38.893200 && latlng.lat <= 38.893396) && (latlng.lng >= 139.818680 && latlng.lng <= 139.818916)) {
        document.getElementById("arrive").textContent = "B教室到着!!";
    } else if ((latlng.lat >= 38.892904 && latlng.lat <= 38.893091) && (latlng.lng >= 139.818648 && latlng.lng <= 139.818884)) {
        document.getElementById("arrive").textContent = "C教室到着!!";
    } else {
        document.getElementById("arrive").textContent = "　";
    }
    }
    function onError(err) {
	restN = "あと"+(--nTrial)+"回試行します。";
	gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup();
	if (nTrial <= 0) {
	    navigator.geolocation.clearWatch(watchId);
	}
    }
    // STARTボタンに開始を仕込む
    document.getElementById("start").addEventListener("click", tryWatchGPS);
    // STOPボタンに停止を仕込む
    document.getElementById("stop").addEventListener("click", stopGPS);
}, false);