//Leafletでの処理
function init(){
    //地図を表示するdiv要素のidを設定
    var map = L.map('mapcontainer');
    //座標の指定
    var mpoint = [38.5350, 139.8875];
    //地図の中心とズームレベルを指定
    map.setView(mpoint, 10);
    //表示するタイルレイヤのURLとAttributionコントロールの記述を設定して、地図に追加する
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,'
    }).addTo(map);
    // 外部のGeoJSONファイルを取得する
    fetch("tsuruoka_asahi.geojson")
    .then(response => response.json())
    // GeoJSONを地図に追加する
    .then(data => {
        L.geoJSON(data, {
            pointToLayer: function(feature, latlng) {
                let name = feature.properties.name;
                return L.marker(latlng, {title: name});
            },
            // ポップアップを表示する
            onEachFeature: function(j, layer){
                let p = j.properties;
                // 地点の名前や概要を取り出す
                if (p) {
                    let name = p.name;
                    let description = p.description;
                    let address = p.address;
                    let image = p.image;
                    let html = p.html;
                    let quiz = p.quiz;
                    let choiceA = p.choiceA;
                    let choiceB = p.choiceB;
                    let choiceC = p.choiceC;
                    let answer = p.answer;
                    let stampid = p.stampid;
                    let stampsrc = p.stampsrc;
                    // ポップアップに表示させる
                    let popup = "<h3>" + name + "</h3>" + "<p>" + description + "</p>" + "<p>" + address + "</p>" + "<img src='image/" + image + "' width='200px'>"
                    layer.bindPopup(popup)
                    .on("click", () => {
                        clickMarker(html, quiz, choiceA, choiceB, choiceC, answer, stampid, stampsrc);
                    });
                }
            }
        }).addTo(map);
    });
    var pointA = [38.891, 139.824];
    var pointB = [38.890, 139.822];
    var pointC = [38.892, 139.826];
    var foodLayer = L.marker(pointA);
    var placeLayer = L.marker(pointB);
    var natureLayer = L.marker(pointC);
    var ovlLayers  = {'食　': foodLayer, '場所': placeLayer, '自然': natureLayer};
    L.control.layers(null, ovlLayers).addTo(map);
}
//マーカーの情報に切り替わる
function clickMarker(url, quiz, a, b, c, ans, id, src){
    document.getElementById("model").setAttribute("src", url);
    document.getElementById("quiz").innerHTML = quiz;
    document.getElementById("a").innerHTML = a;
    document.getElementById("b").innerHTML = b;
    document.getElementById("c").innerHTML = c;
    document.getElementById("correct").innerHTML = b;
    document.getElementById("result").innerHTML = a,c,d;
    document.getElementById("answer").innerHTML = ans;
    document.getElementById("stamp-id").innerHTML = id;
    document.getElementById("stamp-src").innerHTML = src;
}
//解答の判定
function judgeAnswer(abc) {
    var select = document.getElementById(abc).value;
    var answer = document.getElementById("answer");
    var stampId = document.getElementById("stamp-id");
    var stampSrc = document.getElementById("stamp-src");
    if (select == answer.textContent) {
        document.getElementById("correct").innerHTML = "正解!!";
        document.getElementById("correct").setAttribute("class", "correct");
        document.getElementById(stampId.textContent).setAttribute("src", "image/"+stampSrc.textContent);
    } else {
        document.getElementById("result").innerHTML = "不正解";
        document.getElementById("result").setAttribute("class", "incorrect");
    }
}
//選択肢がクリックされたときの処理
document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("a").addEventListener("click", () => {
        judgeAnswer("a");
    });
    document.getElementById("b").addEventListener("click", () => {
        judgeAnswer("b");
    });
    document.getElementById("c").addEventListener("click", () => {
        judgeAnswer("c");
    });
});