document.addEventListener("DOMContentLoaded", () => {
    var markers = [	//マーカーパターンと出す画像、飛ぶhref先を入れておく
	// パターンファイルと画像は下記サイトで作る
	// https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html
	{pattern:	"../pattern-koeki.patt?v=4",
	 image:		"ten.png",
	 position:	"0 0 0",
	 comment:	"yatex",
	 link:		"http://www.yatex.org/"},
	{pattern:	"pattern-ten.patt?v=2",
	 image:		"cat-by-gemini.jpg",
	 position:	"0 0.5 0",
	 comment:	"gentei.org",
	 link:		"http://www.gentei.org/"},
	{pattern:	"pattern-treasurebox-bw.patt?v=12",
	 image:		"treasurebox.png",
	 position:	"0 0 0",
	 comment:	"osmだぜえ",
	 link:		"http://www.openstreetmap.org/"},
    ];
    
    let scene = document.querySelector("a-scene");
    let btnlist = document.querySelector("p.btnlist");
    let serial = 0;	// idにつける番号(後で使うために一応振る)
    for (let marker of markers) { // 設定した変数に従ってマーカを自動生成
	let mk = document.createElement("a-marker");
	// <a-marker id="1" type="pattern" url="??.patt"></a-marker>を生成
	mk.id	= serial++;
	mk.setAttribute("type","pattern");
	mk.setAttribute("url",	marker.pattern);
	let img = document.createElement("a-image");
	// <a-image position="..." width="1" height="1" rotation"-90 0 0"
	//    src="画像ファイル"></a-image>
	// を生成
	img.setAttribute("position", marker.position);
	img.setAttribute("width", "1");
	img.setAttribute("height", "1");
	img.setAttribute("rotation", "-90 0 0");
	img.setAttribute("src", marker.image);
	// img.setAttribute("link", `href: ${marker.link}`);//実はうまく飛べない
	mk.appendChild(img);	// a-marker要素の子に a-image を追加し、
	scene.appendChild(mk);	// それをa-sceneの子に追加
	// 対応するbuttonをHTML要素として追加(position:fixedなので上に被さる)
	let a = document.createElement("a"),
	    b = document.createElement("button")
	a.href = marker.link;
	b.classList.add("notfound");	// display: none; のclass
	b.textContent = marker.comment;
	mk.addEventListener("markerFound", (e) => {
	    b.classList.remove("notfound");
	});
	mk.addEventListener("markerLost", (e) => {
	    b.classList.add("notfound");
	});
	a.appendChild(b);
	btnlist.appendChild(a);
	btnlist.appendChild(document.createElement("br"));
    }
});