document.addEventListener("DOMContentLoaded", () => {
    var mymap = L.map("gpsmap").setView([38.8933, 139.8191], 17);
    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.89426, 139.81888];
    var ccopt = {
        radius: 5,
        color: "black"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("201教室");

    var cc = [38.89413, 139.81886];
    var ccopt = {
        radius: 5,
        color: "black"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("202教室");

    var cc = [38.89400, 139.81884];
    var ccopt = {
        radius: 5,
        color: "black"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("203教室");

    var cc = [38.89369, 139.81884];
    var ccopt = {
        radius: 5,
        color: "black"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("204教室");

    var cc = [38.89356, 139.81882];
    var ccopt = {
        radius: 5,
        color: "black"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("205教室");

    var cc = [38.89338, 139.81880];
    var ccopt = {
        radius: 5,
        color: "black"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("206教室");
6
    var cc = [38.89325, 139.81879];
    var ccopt = {
        radius: 5,
        color: "black"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("207教室");

    var cc = [38.89303, 139.81877];
    var ccopt = {
        radius: 5,
        color: "black"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("208教室");

    var cc = [38.89290, 139.81877];
    var ccopt = {
        radius: 5,
        color: "black"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("209教室");

    var cc = [38.89261, 139.81877];
    var ccopt = {
        radius: 5,
        color: "black"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("210教室");

    var cc = [38.89248, 139.81875];
    var ccopt = {
        radius: 5,
        color: "black"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("211教室");

    var cc = [38.89235, 139.81873];
    var ccopt = {
        radius: 5,
        color: "black"
    };
    var ccobj = L.circle(cc, ccopt).addTo(mymap);
    ccobj.bindPopup("212教室");

    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.894081 && latlng.lat <= 38.894173) && (latlng.lng >= 139.818792 && latlng.lng <= 139.818910)) {
	        document.getElementById("nazo_ttl").textContent = "202の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo1.png");
            document.getElementById("result").innerHTML = "　";
            document.getElementById("answer").innerHTML = "さかた";
        } else if ((latlng.lat >= 38.893642 && latlng.lat <= 38.893734) && (latlng.lng >= 139.818776 && latlng.lng <= 139.818894)) {
            document.getElementById("nazo_ttl").textContent = "204の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo2.png");
            document.getElementById("answer").innerHTML = "しょうない";
        } else if ((latlng.lat >= 38.893329 && latlng.lat <= 38.893421) && (latlng.lng >= 139.818739 && latlng.lng <= 139.818857)) {
            document.getElementById("nazo_ttl").textContent = "206の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo3.png");
            document.getElementById("answer").innerHTML = "つるおか";
        } else if ((latlng.lat >= 38.892983 && latlng.lat <= 38.893079) && (latlng.lng >= 139.818707 && latlng.lng <= 139.818825)) {
            document.getElementById("nazo_ttl").textContent = "208の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo4.png");
            document.getElementById("answer").innerHTML = "ゆざ";
        } else if ((latlng.lat >= 38.892561 && latlng.lat <= 38.892649) && (latlng.lng >= 139.818707 && latlng.lng <= 139.818825)) {
            document.getElementById("nazo_ttl").textContent = "210の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo5.png");
            document.getElementById("answer").innerHTML = "みかわ";
        } else if ((latlng.lat >= 38.892302 && latlng.lat <= 38.892394) && (latlng.lng >= 139.818664 && latlng.lng <= 139.818787)) {
            document.getElementById("nazo_ttl").textContent = "212の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo6.png");
            document.getElementById("answer").innerHTML = "いもに";
        } else {
            document.getElementById("nazo_ttl").textContent = "最初の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo0.png");
            document.getElementById("answer").innerHTML = "ニカイノグウスウヘイケ";
        }
    });

    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.894081 && latlng.lat <= 38.894173) && (latlng.lng >= 139.818792 && latlng.lng <= 139.818910)) {
            document.getElementById("nazo_ttl").textContent = "202の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo1.png");
            document.getElementById("result").innerHTML = "　";
            document.getElementById("answer").innerHTML = "さかた";
        } else if ((latlng.lat >= 38.893642 && latlng.lat <= 38.893734) && (latlng.lng >= 139.818776 && latlng.lng <= 139.818894)) {
            document.getElementById("nazo_ttl").textContent = "204の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo2.png");
            document.getElementById("answer").innerHTML = "しょうない";
        } else if ((latlng.lat >= 38.893329 && latlng.lat <= 38.893421) && (latlng.lng >= 139.818739 && latlng.lng <= 139.818857)) {
            document.getElementById("nazo_ttl").textContent = "206の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo3.png");
            document.getElementById("answer").innerHTML = "つるおか";
        } else if ((latlng.lat >= 38.892983 && latlng.lat <= 38.893079) && (latlng.lng >= 139.818707 && latlng.lng <= 139.818825)) {
            document.getElementById("nazo_ttl").textContent = "208の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo4.png");
            document.getElementById("answer").innerHTML = "ゆざ";
        } else if ((latlng.lat >= 38.892561 && latlng.lat <= 38.892649) && (latlng.lng >= 139.818707 && latlng.lng <= 139.818825)) {
            document.getElementById("nazo_ttl").textContent = "210の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo5.png");
            document.getElementById("answer").innerHTML = "みかわ";
        } else if ((latlng.lat >= 38.892302 && latlng.lat <= 38.892394) && (latlng.lng >= 139.818664 && latlng.lng <= 139.818787)) {
            document.getElementById("nazo_ttl").textContent = "212の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo6.png");
            document.getElementById("answer").innerHTML = "いもに";
        } else {
            document.getElementById("nazo_ttl").textContent = "最初の謎";
            document.getElementById("nazo_img").setAttribute("src", "image/nazo0.png");
            document.getElementById("answer").innerHTML = "にかいのぐうすうへいけ";
        }
    }
    function onError(err) {
        restN = "あと"+(--nTrial)+"回試行します。";
        gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup();
        if (nTrial <= 0) {
            navigator.geolocation.clearWatch(watchId);
        }
    }
    //解答の判定
    function judgeAnswer(ans) {
        var answer = document.getElementById("answer");
        if (ans == answer.textContent) {
            document.getElementById("result").innerHTML = "正解!!";
            document.getElementById("result").setAttribute("class", "correct");
        } else {
            document.getElementById("result").innerHTML = "不正解…";
            document.getElementById("result").setAttribute("class", "incorrect");
        }
    }
    // STARTボタンに開始を仕込む
    document.getElementById("start").addEventListener("click", tryWatchGPS);
    // STOPボタンに停止を仕込む
    document.getElementById("stop").addEventListener("click", stopGPS);
    //送信ボタンが押されたときの処理
    document.getElementById("send").addEventListener("click", () => {
        var input = document.getElementById("input").value;
        judgeAnswer(input);
    });
}, false);