document.addEventListener("DOMContentLoaded", ()=>{
    var csv;
    var sky360;
    var sky = document.getElementById("sky"),	  // <a-sky id="sky">
	dodai = document.getElementById("dodai"); // <a-entity id="dodai">014
    fetch("dodai.csv").then((resp)=>{
	// dodai.csvを読み込み開始。しばらく時間がかかる。
	if (resp) return resp.text();
    }).then((txt)=>{
	// ここが実行されるのは少し経ってから。
	csv = new CSV(txt, {header: true}).parse();	// (1)
	// csvが代入されてからmakeDodai()を呼ばないとcvs変数空っぽのまま
	// ただし同時に読み込むsky360(2)が空だとだめなので確認してから呼ぶ
	if (sky360) makeDodai(csv[0]["scene"]);
    });
    fetch("sky360.json").then((resp)=>{
	if (resp) return resp.json();
    }).then((json)=>{
	sky360 = json;					// (2)
	// この時点でcsv変数(1)がロードされていればmakeDodai()を呼んでOK
	if (csv) makeDodai(csv[0]["scene"]);
    });
    function makeDodai(stage) {
	// 先に既存の a-sphere(球)を消す
	for (let t of document.querySelectorAll("a-sphere"))
	    t.remove();
	// a-sky(全天球画像)を(再)設定する
	//console.log(`next STAGE=${stage}`);
	//console.log(`src src=${sky360[stage].src}`);
	sky.setAttribute("src", sky360[stage].src);
	sky.setAttribute("rotation", sky360[stage].rotation);
	for (let i in csv) {
	    console.log(`d=${stage} vs. ${csv[i]["scene"]}`);
	    if (stage == csv[i]["scene"]) { // ステージ名が一致するものを探す
		console.log("MATCH");
		let s = document.createElement("a-sphere");
		let next   = csv[i].goal,
		    x      = csv[i].x,
		    y      = csv[i].y,
		    z      = csv[i].z,
		    r      = csv[i].r,
		    color  = csv[i].color;
		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);
	}
    }
});
