document.addEventListener("DOMContentLoaded", ()=>{
        var place;	// あとでcsvから読み込まれて配列になる
        var sky = document.getElementById("sky");		// 360画像
        var kago = document.getElementById("basket");	// 球の入れ物
        var cam = document.getElementById("camera");	// カメラ
        var dir = "image/";				// 画像格納ディレクトリ
        var inirot = {};					// カメラの初期の向き
        function addSphere(attr) {	// CSVの該当行の位置に球を配置する
    	// photo,color,radius,opacity,x,y,z,next
    	console.log(attr);
    	let xyz = `${attr.x} ${attr.y} ${attr.z}`;
    	/*
    	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);
        }
        
        console.log("sphere設置")
        
        function setPlace(target) {
   	for (let e of document.querySelectorAll("#basket > *")) {
    	    e.remove();		// 前の場所に設置した球をすべて消す
    	}
        
    	sky.setAttribute("src", dir+target);	// 新しい場所の360度写真へ
    	cam.setAttribute("rotation", inirot[target]);
    	console.log(`----------${target}`);
    	console.log(inirot[target]);
    	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("camera.csv")
    	    .then((response) => response.text()).then((csv) => {
    		let rot = new CSV(csv, {header: true}).parse();
    		for (let row of rot) {
    		    inirot[row.photo] = `${row.rotX} ${row.rotY} ${row.rotZ}`;
    		}
    	    });
    	fetch("picture.csv")
    	    .then((response) => response.text()).then((csv) => {
    		place = new CSV(csv, {header: true}).parse();
    		//setPlace(place[0].photo);
    		if (document.URL.match(/\?.*\.jpg/i)) {
    			let photo = document.URL.replace(/.*\?/, "")
    			setPlace(photo)
    		} else {
    			setPlace("360sankyo1.jpg")		// 最初の写真
    		}
    	    });
        }
        
        console.log("csvまで")
        
        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);
    });

console.log("last")