/*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);*/

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);

    // ボタンをクリックして画像をトグルする
    document.querySelector('button').addEventListener('click', () => {
        const h1 = document.querySelector('h1');
        if (h1.style.display === 'none' || h1.style.display === '') {
            h1.style.display = 'block';
        } else {
            h1.style.display = 'none';
        }
    });

    fetch("./memory.csv").then(resp => {
        return resp.text().then(text => {
            createDivs(new CSV(text, { header: true }).parse());
        });
    })
}, false);