document.addEventListener("DOMContentLoaded", ()=>{
                /*const scene = document.querySelector('a-scene');
                if (!scene){
                  console.error("not found")
                  return; 
                }  
                
                scene.addEventListener('loaded', () => {
                 initConn();
    });*/
     
                var place;	// あとでcsvから読み込まれて配列になる
                var sky = document.getElementById("sky");		// 360画像
                var kago = document.getElementById("basket");	// 球の入れ物
                var cam = document.getElementById("camera");	// カメラ
                var dir = "image/";				// 画像格納ディレクトリ
                var inirot = {};					// カメラの初期の向き
                /*var connect = document.getElementById("connect");*/
                /*var conn, PORT = 8888, server = location.hostname||"localhost"; 
                var conn;
     
                /*function initConn() {*/
                /*try {
                     conn = new Websocket('ws://' + server + ':' + PORT + '/');
                     conn.onopen = function() {
                      console.log("websocket connection established"); 
                       };
                     conn.onerror = function(err) {
                     alert('WebSocket failure:' + err);
                      };
                     conn.onmessage = function(ev) {
        		     /*info.textContent = ev.data;*/
                     /*console.log("Message from server" + ev.data)
        	          };
                     }catch(err){
                     alert("creation error" , + err.message);
                     }    
                    //}*/
                
                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();
            		/*var x = Math.floor(Math.random()*place.length)             //sortとRubyで言うシャッフル関数を使えば、使われた配列を削除していくためダブリがなくなる
            		if (place[x].photo.match(/\.jpg$/)) {　　*/　　　　　　　　　//将来的にはこっちに変更したい
            			//let photo = place.photoreplace(/.*\?/, "")       //この部分の最初の方でrand選びをすればいいのでは？
            			//setPlace(place[x].photo)
            			if (document.URL.match(/\?.*\.jpg/i)) {
    			let photo = document.URL.replace(/.*\?/, "")
    			setPlace(photo)
            		} else {
            			setPlace("301-1.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")