document.addEventListener("DOMContentLoaded", ()=>{
    var csv =		    // この後CSVをファイルから読み取る方式にする
	[["rensyu2",	"rensyu3", -32, 3, -20, 3, "yellow"],
	 ["rensyu2",	"rensyu4", -22, 3, -28, 3, "pink"]
	];
    var sky360 = {	    // この後JSONファイルから読み取る方式にする
	"rensyu1": {src: "R0011272_20250501154958.jpg", rotation: "0 -90 0"},
	"rensyu2": {src: "R0011285_20250508162918.JPG", rotation: "0 -90 0"},
	"rensyu3": {src: "R0011286_20250508164424.JPG", rotation: "0 -90 0"},
	"rensyu4": {src: "R0011289_20250508164939.JPG", rotation: "0 -90 0"},
	"rensyu5": {src: "R0011293_20250508165527.JPG", rotation: "0 -90 0"},
	"rensyu6": {src: "R0011296_20250508171015.JPG", rotation: "0 -90 0"},
    };
    var sky = document.getElementById("sky"),	  // <a-sky id="sky">
	dodai = document.getElementById("dodai"); // <a-entity id="dodai">014
    function makeDodai(stage) {
	// 先に既存の a-sphere(球)を消す
	for (let t of document.querySelectorAll("a-sphere"))
	    t.remove();
	// a-sky(全天球画像)を(再)設定する
	sky.setAttribute("src", sky360[stage].src);
	sky.setAttribute("rotation", sky360[stage].rotation);
	for (let i in csv) {
	    console.log(`d=${stage} vs. ${csv[i][0]}`);
	    if (stage == csv[i][0]) { // ステージ名が一致するものを探す
		console.log("MATCH");
		let s = document.createElement("a-sphere");
		let next = csv[i][1],
		    x      = csv[i][2],
		    y      = csv[i][3],
		    z      = csv[i][4],
		    r      = csv[i][5],
		    color  = csv[i][6];
		s.setAttribute("position", `${x} ${y} ${z}`);
		s.setAttribute("radius", r);
		s.setAttribute("color", color);
		s.setAttribute("opacity", "0.5"); // 変えるかも
		s.setAttribute("next", next); // "next"は勝手に考えた属性
		console.log(`p=${x} ${y} ${z}, r=${r}, c=${color}`)
		s.addEventListener("click", nextStage);
		dodai.appendChild(s); // <a-entity id="dodai">に球追加
	    }
	}
	function nextStage(e) {
	    let nextDodai = e.target.getAttribute("next");
	    // 勝手に作った"next"属性に次のステージが入っている
	    makeDodai(nextDodai);
	}
    }
    makeDodai(csv[0][0]);
});
