document.addEventListener("DOMContentLoaded", ()=>{
    var place;	// あとでcsvから読み込まれて配列になる
    var sky = document.getElementById("sky");		// 360画像
    var kago = document.getElementById("basket");	// 球の入れ物
    var dir = "360picture/";				// 画像格納ディレクトリ
    function addSphere(attr) {	// CSVの該当行の位置に球を配置する
	// photo,color,radius,opacity,x,y,z,next
	console.log(attr);
	let xyz = `${attr.x} ${attr.y} ${attr.z}`;
	/*	// a-textな日本語未対応、残念!
	let text = document.createElement("a-text");
	kago.appendChild(text);
	text.setAttribute("position", xyz);
	text.setAttribute("value", attr.next);
	text.setAttribute("value", "あいうえabcdかきく");
	*/
	let tama = document.createElement("a-sphere");
	kago.appendChild(tama);
	console.log(`x y z=${xyz}`)
	tama.setAttribute("color", attr.color)
	tama.setAttribute("opacity", attr.opacity);
	tama.setAttribute("radius", attr.radius);
	tama.setAttribute("position", xyz);
	tama.addEventListener("click", moveStage);
	tama.setAttribute("next", attr.next);
    }
    function setPlace(target) {
	for (let e of document.querySelectorAll("#basket > *")) {
	    e.remove();		// 前の場所に設置した球をすべて消す
	}
	sky.setAttribute("src", dir+target);	// 新しい場所の360度写真へ
	for (let i in place) {
	    if (place[i].photo == target) {	// その場所の定義を
		addSphere(place[i]);		// CSVデータから全て読んで
	    }
	}
    }
    function moveStage(e) {
	setPlace(e.target.getAttribute("next"));
    }
    function prepareCSV() {
	fetch("picture.csv")
	    .then((response) => response.text())
	    .then((csv) => {
		place = new CSV(csv, {header: true}).parse();
		setPlace(place[0].photo)});
    }
    let s = document.createElement("script");
    s.setAttribute("src", "https://www.yatex.org/libcache/knrz/csv.min.js");
    s.addEventListener("load", prepareCSV);
    document.querySelector("head").appendChild(s);
});