document.addEventListener("DOMContentLoaded", () => {
        var photo = document.querySelector("div.photo"), // <div class="photo">
    	shop  = document.querySelector("div.shop");  // <div class="shop">
        var photobtn, shopbtn;	// あとでボタン一覧を格納する
        function resetBtns() {	// ラジオボタンを全部未チェックにする
    	for (let b of document.querySelectorAll('input[type="radio"]')) {
    	    b.checked = false;		// 
    	    console.log("Cleared");
    	}
        }
        function createDivs(csv) {
    	//https://into-the-program.com/insertadjacenthtml/
    	console.log(`photo=${photo}`);
    	console.log(`csv=${csv.length}`);
    	for (let row of csv) {
    	    let ph = row["photo"], sh = row["shop"], desc = row["説明"],
    		jpg = "image/"+ph+".jpg";
    	    photo.insertAdjacentHTML(
    		'beforeend',
    		`<input name="photo" type="radio" id="${ph}">
    <label for="${ph}"><img src="${jpg}" title="${desc}"></label>\n`);
    	    shop.insertAdjacentHTML(
    		'beforeend',
    		`<input name="shop" type="radio" id="s-${ph}">
    <label for="s-${ph}">${sh}</label>\n`);
    	    
    	}
    	photobtn = document.querySelectorAll('div.photo input[type="radio"]');
    	shopbtn  = document.querySelectorAll('div.shop input[type="radio"]');
    	resetBtns();
    	for (let radio of photobtn) {
    	    radio.addEventListener("click", hantei0, false);
    	}
    	for (let radio of shopbtn) {
    	    radio.addEventListener("click", hantei1, false);
    	}
        }
        function hantei0(e) {
    	var selection = e.target.id;
    	console.log(`val = ${selection}`);	// 写真側どれかボタンが選ばれたら
    	for (let b of shopbtn) {	// 店名ラジオボタンを
    	    b.checked = false;		// 全部未チェックにする
    	}
        }
        function whichshop() {	// 選択されているshopボタンのidを返す
    	let selected;
    	for (let b of photobtn)
    	    if (b.checked) return b.id;
    	return null;		// 選択されていなければnull
        }
        function hantei1(e) {
    	let selection = e.target.id;
    	let kekka = document.getElementById("kekka"),
    	    selphoto = whichshop();
    	if (selphoto) {			// 写真側で何か選ばれていたら
    	    if (selection == "s-"+selphoto) {
    		kekka.textContent = "正解!"	// p要素の内部文字列を上書き
    		kekka.classList.remove("ng");	// ngのclass設定を外して
    		kekka.classList.add("ok");	// okのclass設定を足す
    	    } else {
    		kekka.textContent = "ぶっぶー!"
    		kekka.classList.remove("ok");
    		kekka.classList.add("ng");
    	    }
    	} else {
    	    kekka.textContent = "写真側を選んでください。";
    	}
        }
        document.getElementById("shuffle").addEventListener("click", (e) => {
    	//SHUFFLEボタンを押したら memory-shuffle.js をロードする。
    	let script = document.createElement("script");
    	script.src = "memory-shuffle.js";
    	document.body.appendChild(script);
    	resetBtns();
        }, false);
     
        fetch("./memory.csv").then(resp=>{
    	return resp.text().then(text=>{
    	    createDivs(new CSV(text, {header: true}).parse());
    	});
        })
    }, false);