document.addEventListener("DOMContentLoaded", () => {
    var mymap = L.map("mymap").setView([38.919, 139.828], 12);
    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 markers = [];
    var hanaIcon= L.icon({
	iconUrl:"Hana.png",
	iconSize:[40,40],
	iconAnchor:[19,33],
	popupAnchor:[0,-40]
    });
    var tubomiIcon = L.icon({
    	iconUrl:"Tubomi .png",
    	iconSize:[40,40],
    	iconAnchor:[19,33],
    	popupAnchor:[0,-40]
    });
 
    // 全マーカー記憶用
    var customLayer = L.geoJson(null, {
	onEachFeature: (f, layer) => {
	    markers.push(layer);
	    
	   // マーカーをすべて記憶しておく
	    let qn = markers.length; // 問題番号
	    let fp = f.properties;
	    if (!fp) return
	    let place = fp.設置場所;
	    let q = fp.問題;
	    let A = fp.A, B = fp.B, C = fp.C, D = fp.D; 
	    let answer = fp.正解;
	    let id=`q${qn}`, sel = "";
	    for (let i of ["A", "B", "C", "D"]) {
		sel += `<li><label class="quiz-button">
		<input name="${id}" type="radio" value="${answer}" class="${i}">
		<span class="quiz-text">${fp[i]}</span></label></li>`;
	    }			// classの値に正解を仕込んでおく
	    let bun = `<h2>${place}</h2>\n<p>${q}<p><ul id="${id}">${sel}
		<p id="result">　</p>`; 
	    if (localStorage.getItem("AED:"+id) == "1") {
		// input要素の name= にも id が保存してある
		layer.setIcon(hanaIcon);
	    } else
		layer.setIcon(tubomiIcon);
	    layer.bindPopup(bun);
	}
	
    });
    var gj = omnivore.csv('R5.csv', null,  customLayer).addTo(mymap);
    gj.on("ready", () => {
	// popup内のHTMLは当初文書DOMには入らない
	// マーカーがクリックされてから始めて配備されるので
	// DOMContentLoadedのタイミングで document.querySelectorAll しても
	// 見つからない。popup内の文が準備OKになった contentupdate
	// イベントで呼んでもらって click イベントを仕掛ける。
	for (let m of markers) { // 記録済みの全マーカーに対して繰り返す
	    m._popup.on("contentupdate", (e) => {
		for (let inp of document.querySelectorAll("input")) {
		    inp.addEventListener("click", (e) => {
			let cls=inp.getAttribute("class"),
			    ans=inp.value,
			    res=document.getElementById("result");
			res.textContent  =  cls==ans ? "正解!!" : "...";
			
			if (cls==ans) {
			    localStorage.setItem("AED:"+inp.name, "1");
			    m.setIcon(hanaIcon);
			}
		    });
		}
	    });
	}
    });
    document.getElementById("reset").addEventListener("click", (e) => {
	if (confirm("回答済みフラグを全消去します:")) {
	    localStorage.clear();
	    for (let m of markers)
		m.setIcon(tubomiIcon);
	}
    });
}, false);