//Leafletでの処理
function init(){
    //地図を表示するdiv要素のidを設定
    var map = L.map('mapcontainer');
    //座標の指定
    var mpoint = [38.5350, 139.8875];
    //マーカーのURL
    var markerIcon = "https://esm.sh/leaflet@1.9.2/dist/images/marker-icon.png";
    var markerIcon2x = "https://esm.sh/leaflet@1.9.2/dist/images/marker-icon-2x.png";
    var markerShadow = "https://esm.sh/leaflet@1.9.2/dist/images/marker-shadow.png";
    //マーカーの色の設定
    var skyblueIcon = L.icon({
        iconUrl: markerIcon,
        iconRetinaUrl: markerIcon2x,
        shadowUrl: markerShadow,
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        tooltipAnchor: [16, -28],
        shadowSize: [41, 41],
        className: "icon-skyblue"
    });
    var brownIcon = L.icon({
        iconUrl: markerIcon,
        iconRetinaUrl: markerIcon2x,
        shadowUrl: markerShadow,
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        tooltipAnchor: [16, -28],
        shadowSize: [41, 41],
        className: "icon-brown"
    });
    var purpleIcon = L.icon({
        iconUrl: markerIcon,
        iconRetinaUrl: markerIcon2x,
        shadowUrl: markerShadow,
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        tooltipAnchor: [16, -28],
        shadowSize: [41, 41],
        className: "icon-purple"
    });
    var orangeIcon = L.icon({
        iconUrl: markerIcon,
        iconRetinaUrl: markerIcon2x,
        shadowUrl: markerShadow,
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        tooltipAnchor: [16, -28],
        shadowSize: [41, 41],
        className: "icon-orange"
    });
    var pinkIcon = L.icon({
        iconUrl: markerIcon,
        iconRetinaUrl: markerIcon2x,
        shadowUrl: markerShadow,
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        tooltipAnchor: [16, -28],
        shadowSize: [41, 41],
        className: "icon-pink"
    });
    var whiteIcon = L.icon({
        iconUrl: markerIcon,
        iconRetinaUrl: markerIcon2x,
        shadowUrl: markerShadow,
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        tooltipAnchor: [16, -28],
        shadowSize: [41, 41],
        className: "icon-white"
    });
    var blackIcon = L.icon({
        iconUrl: markerIcon,
        iconRetinaUrl: markerIcon2x,
        shadowUrl: markerShadow,
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        tooltipAnchor: [16, -28],
        shadowSize: [41, 41],
        className: "icon-black"
    });
    var darkgoldIcon = L.icon({
        iconUrl: markerIcon,
        iconRetinaUrl: markerIcon2x,
        shadowUrl: markerShadow,
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        tooltipAnchor: [16, -28],
        shadowSize: [41, 41],
        className: "icon-darkgold"
    });
    var redIcon = L.icon({
        iconUrl: markerIcon,
        iconRetinaUrl: markerIcon2x,
        shadowUrl: markerShadow,
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        tooltipAnchor: [16, -28],
        shadowSize: [41, 41],
        className: "icon-red"
    });
    //地図の中心とズームレベルを指定
    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のレイヤーを設定
    var foodLayer = L.geoJson(asahi, { // asahi変数は asahi.geojson からロードした
        style: function (feature) {
            return feature.properties;
        },
        onEachFeature: function(j, layer) {
            let p = j.properties;
            if (p) {
                let name = p.name, desc = p.description;
                let popup = "<h3>" + name + "</h3>" + "<p>" + desc + "</p>";
                layer.bindPopup(popup);
            }
        }
    })
    var placeLayer = L.geoJson(asahi, { // asahi変数は asahi.geojson からロードした
        style: function (feature) {
            return feature.properties;
        },
        onEachFeature: function(j, layer) {
            let p = j.properties;
            if (p) {
                let name = p.name, desc = p.description;
                let popup = "<h3>" + name + "</h3>" + "<p>" + desc + "</p>";
                layer.bindPopup(popup);
            }
        }
    })
    var natureLayer = L.geoJson(asahi, { // asahi変数は asahi.geojson からロードした
        style: function (feature) {
            return feature.properties;
        },
        onEachFeature: function(j, layer) {
            let p = j.properties;
            if (p) {
                let name = p.name, desc = p.description;
                let popup = "<h3>" + name + "</h3>" + "<p>" + desc + "</p>";
                layer.bindPopup(popup);
            }
        }
    })
    foodLayer.addTo(map);
    placeLayer.addTo(map);
    natureLayer.addTo(map);
    // マーカーをオーバーレイレイヤに指定
    var ovlLayers = {'食　': foodLayer, '場所': placeLayer, '自然': natureLayer};
    // オーバーレイレイヤをマップに追加
	L.control.layers(null, ovlLayers).addTo(map);
    */
    //地図に地点を表示する（asahi変数はtsuruoka-asahi.geojsonからロードした）
    L.marker([asahi["features"][0]["geometry"]["coordinates"][1], asahi["features"][0]["geometry"]["coordinates"][0]],
    {title: asahi["features"][0]["properties"]["name"], icon: skyblueIcon})
    .bindPopup(L.popup().setContent("<h3>"+asahi["features"][0]["properties"]["name"]+"</h3>"+"<p>"+asahi["features"][0]["properties"]["description"]+"</p>"+"<img src='"+"image/"+asahi["features"][0]["properties"]["image"]+"' width='200px'>"))
    .addTo(map).on("click", () => {
        clickMarker(asahi["features"][0]["properties"]["html"],
        asahi["features"][0]["properties"]["quiz"],
        asahi["features"][0]["properties"]["choiceA"],
        asahi["features"][0]["properties"]["choiceB"],
        asahi["features"][0]["properties"]["choiceC"],
        asahi["features"][0]["properties"]["answer"],
        asahi["features"][0]["properties"]["stampid"],
        asahi["features"][0]["properties"]["stampsrc"],
        asahi["features"][0]["properties"]["name"],
        asahi["features"][0]["properties"]["description"]);
    });
    L.marker([asahi["features"][1]["geometry"]["coordinates"][1], asahi["features"][1]["geometry"]["coordinates"][0]],
    {title: asahi["features"][1]["properties"]["name"], icon: brownIcon})
    .bindPopup(L.popup().setContent("<h3>"+asahi["features"][1]["properties"]["name"]+"</h3>"+"<p>"+asahi["features"][1]["properties"]["description"]+"</p>"))
    .addTo(map).on("click", () => {
        clickMarker(asahi["features"][1]["properties"]["html"],
        asahi["features"][1]["properties"]["quiz"],
        asahi["features"][1]["properties"]["choiceA"],
        asahi["features"][1]["properties"]["choiceB"],
        asahi["features"][1]["properties"]["choiceC"],
        asahi["features"][1]["properties"]["answer"],
        asahi["features"][1]["properties"]["stampid"],
        asahi["features"][1]["properties"]["stampsrc"],
        asahi["features"][1]["properties"]["name"],
        asahi["features"][1]["properties"]["description"]);
    });
    L.marker([asahi["features"][2]["geometry"]["coordinates"][1], asahi["features"][2]["geometry"]["coordinates"][0]],
    {title: asahi["features"][2]["properties"]["name"], icon: purpleIcon})
    .bindPopup(L.popup().setContent("<h3>"+asahi["features"][2]["properties"]["name"]+"</h3>"+"<p>"+asahi["features"][2]["properties"]["description"]+"</p>"))
    .addTo(map).on("click", () => {
        clickMarker(asahi["features"][2]["properties"]["html"],
        asahi["features"][2]["properties"]["quiz"],
        asahi["features"][2]["properties"]["choiceA"],
        asahi["features"][2]["properties"]["choiceB"],
        asahi["features"][2]["properties"]["choiceC"],
        asahi["features"][2]["properties"]["answer"],
        asahi["features"][2]["properties"]["stampid"],
        asahi["features"][2]["properties"]["stampsrc"],
        asahi["features"][2]["properties"]["name"],
        asahi["features"][2]["properties"]["description"]);
    });
    L.marker([asahi["features"][3]["geometry"]["coordinates"][1], asahi["features"][3]["geometry"]["coordinates"][0]],
    {title: asahi["features"][3]["properties"]["name"], icon: orangeIcon})
    .bindPopup(L.popup().setContent("<h3>"+asahi["features"][3]["properties"]["name"]+"</h3>"+"<p>"+asahi["features"][3]["properties"]["description"]+"</p>"))
    .addTo(map).on("click", () => {
        clickMarker(asahi["features"][3]["properties"]["html"],
        asahi["features"][3]["properties"]["quiz"],
        asahi["features"][3]["properties"]["choiceA"],
        asahi["features"][3]["properties"]["choiceB"],
        asahi["features"][3]["properties"]["choiceC"],
        asahi["features"][3]["properties"]["answer"],
        asahi["features"][3]["properties"]["stampid"],
        asahi["features"][3]["properties"]["stampsrc"],
        asahi["features"][3]["properties"]["name"],
        asahi["features"][3]["properties"]["description"]);
    });
    L.marker([asahi["features"][4]["geometry"]["coordinates"][1], asahi["features"][4]["geometry"]["coordinates"][0]],
    {title: asahi["features"][4]["properties"]["name"]})
    .bindPopup(L.popup().setContent("<h3>"+asahi["features"][4]["properties"]["name"]+"</h3>"+"<p>"+asahi["features"][4]["properties"]["description"]+"</p>"))
    .addTo(map).on("click", () => {
        clickMarker(asahi["features"][4]["properties"]["html"],
        asahi["features"][4]["properties"]["quiz"],
        asahi["features"][4]["properties"]["choiceA"],
        asahi["features"][4]["properties"]["choiceB"],
        asahi["features"][4]["properties"]["choiceC"],
        asahi["features"][4]["properties"]["answer"],
        asahi["features"][4]["properties"]["stampid"],
        asahi["features"][4]["properties"]["stampsrc"],
        asahi["features"][4]["properties"]["name"],
        asahi["features"][4]["properties"]["description"]);
    });
    L.marker([asahi["features"][5]["geometry"]["coordinates"][1], asahi["features"][5]["geometry"]["coordinates"][0]],
    {title: asahi["features"][5]["properties"]["name"], icon: pinkIcon})
    .bindPopup(L.popup().setContent("<h3>"+asahi["features"][5]["properties"]["name"]+"</h3>"+"<p>"+asahi["features"][5]["properties"]["description"]+"</p>"))
    .addTo(map).on("click", () => {
        clickMarker(asahi["features"][5]["properties"]["html"],
        asahi["features"][5]["properties"]["quiz"],
        asahi["features"][5]["properties"]["choiceA"],
        asahi["features"][5]["properties"]["choiceB"],
        asahi["features"][5]["properties"]["choiceC"],
        asahi["features"][5]["properties"]["answer"],
        asahi["features"][5]["properties"]["stampid"],
        asahi["features"][5]["properties"]["stampsrc"],
        asahi["features"][5]["properties"]["name"],
        asahi["features"][5]["properties"]["description"]);
    });
    L.marker([asahi["features"][6]["geometry"]["coordinates"][1], asahi["features"][6]["geometry"]["coordinates"][0]],
    {title: asahi["features"][6]["properties"]["name"], icon: whiteIcon})
    .bindPopup(L.popup().setContent("<h3>"+asahi["features"][6]["properties"]["name"]+"</h3>"+"<p>"+asahi["features"][6]["properties"]["description"]+"</p>"))
    .addTo(map).on("click", () => {
        clickMarker(asahi["features"][6]["properties"]["html"],
        asahi["features"][6]["properties"]["quiz"],
        asahi["features"][6]["properties"]["choiceA"],
        asahi["features"][6]["properties"]["choiceB"],
        asahi["features"][6]["properties"]["choiceC"],
        asahi["features"][6]["properties"]["answer"],
        asahi["features"][6]["properties"]["stampid"],
        asahi["features"][6]["properties"]["stampsrc"],
        asahi["features"][6]["properties"]["name"],
        asahi["features"][6]["properties"]["description"]);
    });
    L.marker([asahi["features"][7]["geometry"]["coordinates"][1], asahi["features"][7]["geometry"]["coordinates"][0]],
    {title: asahi["features"][7]["properties"]["name"], icon: blackIcon})
    .bindPopup(L.popup().setContent("<h3>"+asahi["features"][7]["properties"]["name"]+"</h3>"+"<p>"+asahi["features"][7]["properties"]["description"]+"</p>"))
    .addTo(map).on("click", () => {
        clickMarker(asahi["features"][7]["properties"]["html"],
        asahi["features"][7]["properties"]["quiz"],
        asahi["features"][7]["properties"]["choiceA"],
        asahi["features"][7]["properties"]["choiceB"],
        asahi["features"][7]["properties"]["choiceC"],
        asahi["features"][7]["properties"]["answer"],
        asahi["features"][7]["properties"]["stampid"],
        asahi["features"][7]["properties"]["stampsrc"],
        asahi["features"][7]["properties"]["name"],
        asahi["features"][7]["properties"]["description"]);
    });
    L.marker([asahi["features"][8]["geometry"]["coordinates"][1], asahi["features"][8]["geometry"]["coordinates"][0]],
    {title: asahi["features"][8]["properties"]["name"], icon: darkgoldIcon})
    .bindPopup(L.popup().setContent("<h3>"+asahi["features"][8]["properties"]["name"]+"</h3>"+"<p>"+asahi["features"][8]["properties"]["description"]+"</p>"))
    .addTo(map).on("click", () => {
        clickMarker(asahi["features"][8]["properties"]["html"],
        asahi["features"][8]["properties"]["quiz"],
        asahi["features"][8]["properties"]["choiceA"],
        asahi["features"][8]["properties"]["choiceB"],
        asahi["features"][8]["properties"]["choiceC"],
        asahi["features"][8]["properties"]["answer"],
        asahi["features"][8]["properties"]["stampid"],
        asahi["features"][8]["properties"]["stampsrc"],
        asahi["features"][8]["properties"]["name"],
        asahi["features"][8]["properties"]["description"]);
    });
    L.marker([asahi["features"][9]["geometry"]["coordinates"][1], asahi["features"][9]["geometry"]["coordinates"][0]],
    {title: asahi["features"][9]["properties"]["name"], icon: redIcon})
    .bindPopup(L.popup().setContent("<h3>"+asahi["features"][9]["properties"]["name"]+"</h3>"+"<p>"+asahi["features"][9]["properties"]["description"]+"</p>"))
    .addTo(map).on("click", () => {
        clickMarker(asahi["features"][9]["properties"]["html"],
        asahi["features"][9]["properties"]["quiz"],
        asahi["features"][9]["properties"]["choiceA"],
        asahi["features"][9]["properties"]["choiceB"],
        asahi["features"][9]["properties"]["choiceC"],
        asahi["features"][9]["properties"]["answer"],
        asahi["features"][9]["properties"]["stampid"],
        asahi["features"][9]["properties"]["stampsrc"],
        asahi["features"][9]["properties"]["name"],
        asahi["features"][9]["properties"]["description"]);
    });
}
//マーカーの情報に切り替わる
function clickMarker(url, quiz, a, b, c, ans, id, src, pname, explain){
    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("result").innerHTML = "　";
    document.getElementById("answer").innerHTML = ans;
    document.getElementById("stamp-id").innerHTML = id;
    document.getElementById("stamp-src").innerHTML = src;
    document.getElementById("pname").innerHTML = pname;
    document.getElementById("explain").innerHTML = explain;
}
//解答の判定
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("result").innerHTML = "正解!!";
        document.getElementById("result").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");
    });
});