document.addEventListener("DOMContentLoaded", () => {
    var photo = document.querySelector("div.photo"), // <div class="photo">
	shop  = document.querySelector("div.shop");  // <div class="shop">
    var photobtn, shopbtn;	// あとでボタン一覧を格納する
    
    //最後に選択されたラジオボタンを記憶する
    let lastPhoto = null;
    let lastShop = null;
    
    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 = "img/"+ph+".jpg";
	    photo.insertAdjacentHTML(
		'beforeend',
		`<input name="photo" type="radio" id="${ph}">
<label for="${ph}"><img src="${jpg}" title="${desc}" class="toggle-photo" style="display:none;"></label>\n`);
	    shop.insertAdjacentHTML(
		'beforeend',
		`<input name="shop" type="radio" id="s-${ph}">
<label for="s-${ph}" class="toggle-shop"><span style="display: none;">${sh}</span></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", function () { 
	    	let img = this.nextElementSibling.querySelector('img');
	    	if (this.checked && this === lastPhoto) {
	    		this.cheked = false;
	    		LastPhoto = null;
	    		img.style.display = 'none';
	    		}else{
	    			lastPhoto = this;
	    			img.style.display = 'block';
	    			}
	    			}, false);
	}
	
	for (let radio of shopbtn) {
	    radio.addEventListener("click", function () {
	    	let labelSpan = this.nextElementSibling.querySelector('span');
	    	if(this.checked && this === lastShop) {
	    		this.checked = false;
	    		lastShop = null;
	    		labelSpan.style.display = 'none';
	    		} else {
	    			lastShop = this;
	    			labelSpan.style.display = 'block';
	    			}
	    			hantei1(this);
	    			},false);
	}
    }
    
    
    //正誤判定:写真が選ばれたらリセット処理
    function hantei0(e) {
	var selection = e.target.id;
	console.log(`val = ${selection}`);	// 写真側どれかボタンが選ばれたら
	for (let b of shopbtn) {	// 店名ラジオボタンを
	    b.checked = false;		// 全部未チェックにする
	}
	document.getElementById("kekka").texitContent = '';
    }
    
    //正誤判定:選択されているshopボタンのidを返す
    function whichshop() {	// 選択されているshopボタンのidを返す
	let selected;
	for (let b of photobtn)
	    if (b.checked) return b.id;
	return null;		// 選択されていなければnull
    }
    
    //正誤判定:店名が選ばれたら選択する
    function hantei1(selectedShop) {
    let kekka = document.getElementById("kekka"),
	    selphoto = whichshop();
	if (selphoto) {			// 写真側で何か選ばれていたら
	    if (selectedShop.id === "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);