document.addEventListener("DOMContentLoaded", () => {
    /* ---------------------------- */
    var threshold = 15;
    /* ---------------------------- */
    var info	= document.getElementById("info"),
	trace	= document.getElementById("trace"),
	direct	= document.getElementById("direction"),
	llinfo	= document.getElementById("latlng"),
	curpos	= document.getElementById("curpos");
    var mymap, markers, infolist, lsKey = "SN", watching, myposmark, lastloc;
    function markerFound(i) {
	let m = markers[i];
	let p = info.childNodes[i];
	m.getElement().style.visibility = null;
	m.openPopup();
	p.classList.add("found");
	p.textContent = `発見!`;
	infolist[i] = true;
	localStorage.setItem(lsKey, JSON.stringify(infolist));
	direct.textContent = "1つ見つかりました。[追跡開始]ボタンで再開";
    }
    function checkDistance(latlng) {
	let d;
	myposmark.setLatLng(latlng);
	llinfo.textContent=latlng;
	for (let i in markers) {
	    if (infolist[i]) continue;
	    let p = info.childNodes[i];
	    d = markers[i].getLatLng().distanceTo(latlng);
	    if (d < threshold) {
		markerFound(i);
	    } else {
		p.textContent = `${d.toFixed(0)}m `;
	    }
	}
    }
    function initPanel() {
	console.log(`childlen=${info.childNodes.length}`);
	//if (info.childNodes.length > 0) return;
	let c, storage=localStorage.getItem(lsKey);
	while ((c=info.firstChild)) c.remove();
	stopTrace();
	infolist = [];
	if (storage) infolist = JSON.parse(storage);
	for (let i in markers) {
	    let m = markers[i],
		p = document.createElement("p");
	    m.getElement().style.visibility = 'hidden';
	    p.textContent = `${i}`;
	    info.appendChild(p);
	    if (infolist[i]) {
		markerFound(i);
	    } else {
		infolist[i] = false;
	    }
	}
	curpos.disabled = true;
	direct.textContent = "[追跡開始]ボタンを押して宝探しを始めよう!";
    }
    function stopTrace(e) {
	if (!watching) return;
	mymap.stopLocate();
	lastloc = null; curpos.disabled=true;
	watching = trace.disabled = false;
	llinfo.textContent = "追跡終了";
    }
    function locationerror() {
	lastloc = null; curpos.disabled=true;
    }
    function locationfound(e) {
	checkDistance(lastloc=e.latlng);
	curpos.disabled = false;
    }
    function startTrace(e) {
	if (watching) {
	    alert("すでに追跡中です。");
	    return;
	}
	watching = mymap.locate({
	    watch: true, setView: false, timeout: 8000,
	    maximumAge: 20000, enableHighAccuracy: true});
	mymap.on('locationerror', locationerror);
	mymap.on('locationfound', locationfound);
	trace.disabled = true;
	setTimeout(stopTrace, 900000);
    }
    function curPos(e) {
	if (lastloc) mymap.setView(lastloc, 18);
    }
    document.getElementById("mymap").addEventListener("ready", ()=>{
	console.log(`all=${Object.keys(Lumap.allMarkers)}`);
	markers = Lumap.allMarkers["mymap"];
	mymap = Lumap.maps["mymap"];
	mymap.on("click", (e) => {
	    checkDistance(e.latlng);
	});
	document.getElementById("clear").addEventListener("click", (e)=>{
	    if (confirm(`これまでの発見情報を全削除します。`)) {
		localStorage.clear();
		initPanel();
	    }
	});
	trace.addEventListener("click", startTrace)
	curpos.addEventListener("click", curPos);
	document.getElementById("stop").addEventListener("click", stopTrace);
	initPanel();
	myposmark = L.circleMarker(mymap.getCenter()).addTo(mymap);
    });
    Lumap.load("mymap", "test.umap", (f, l) => {
	console.log(`gl=${l.getElement()}`);
	//  l.setOpacity(0);
    })
    
}, false);