/* 朝日中央地区: LatLng(38.671707, 139.795534), LatLng(38.572461, 139.880335) */
document.addEventListener("DOMContentLoaded", () => {
    var bounds = [[38.672624, 139.768734], [38.562711, 139.914402]];
    var komisen = [[38.613491, 139.834304],[38.609797, 139.838132]];
    var center = [38.617121, 139.8417];
    var inizoom = 13;
    var infobox = document.getElementById("info");
    var mymapL = L.map("leftmap").setView(center, inizoom);
    L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution:
	'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymapL);
    mymapL.on('contextmenu', (e) => {
	// alert(e.latlng);
	let b=mymapL.getBounds(),
	    b1=b.getNorthWest(), b2=b.getSouthEast();
	infobox.innerText = `${e.latlng}, bound=${b1}, ${b2}`;
    });
    var mymapR = L.map("rightmap").setView(center, inizoom);
    // LatLng(38.903357, 139.813385), LatLng(38.878639, 139.834585)
    var leftBounds = mymapL.getBounds();
    // L.imageOverlay("image/asahi.png",bounds).addTo(mymapR);
    L.imageOverlay("image/commcen.png",komisen ).addTo(mymapR);
    mymapR.setMaxBounds(bounds);
    function syncmap(srcmap, destmap) { // mapをlatLng中心にする
	var z=srcmap.getZoom(), c=srcmap.getCenter()
	destmap.setZoom(z); destmap.setView(c);
	//infobox.innerText = `Center: ${c}, zm=${z}`;
    }

    var cheat = location.search;
    
    var gpsmarker = L.marker(mymapL.getCenter()).addTo(mymapL);
    gpsmarker.bindPopup("START").openPopup();
    var LeafIcon = L.Icon.extend({
	options:{
	    shadowUrl:'src/images/marker-shadow.png',
	    shadowSize:[41,41],
	    shadowAnchor:[10,41],
	    iconSize:[25,41],
	    iconAnchor:[10,41],
	    popupAnchor:[3,-40]}});
    var geticon = new LeafIcon({iconUrl:"image/Yellow.png"});
    var gpsmarkerR = L.marker(mymapR.getCenter()).addTo(mymapR);
    gpsmarkerR.bindPopup("現在地").openPopup();
    
    var nTrial = 10;
    var watchId = null;

    let titen =[];
    let marker =[];
    let judge = [];
    let comment =[];
    var point = [],pos = 0;
    var tmp = [];
    var image = [];
    var info = [];
    var stamping=[];
    var contents = [];
    const endpoint ="https://script.google.com/macros/s/AKfycbzA9iZotNFTQ7xpYWUbQdOhXwU-_pIFS5lqOIDZ9GLlQyAqIUTCLi-78EPKUEdkdG-0/exec";
    
    function putValues(row){
	for (let key of Object.keys(row)){
	}
    }
    function init(){
	fetch(endpoint).
	    then((response)=>response.json())
	    .then(data =>{
		const csv = data;
		for (let x of csv){
		    putValues(x);
		    var a = (x.number);
		    let p = L.latLng(x.lat,x.lng);

		    image.push(x.image);

		    var pattern = /[\/]/;
		    const img = x.image.split(pattern);

		    titen.push(p);
		    comment.push(x.comment);
		    info.push(x.info);

		    const stamp = x.stamp.split(pattern);
		    stamping.push(`"${stamp[0]}//${stamp[2]}/uc?export=view&id=${stamp[5]}"`);
		    console.log(stamping[pos]);

		    contents[a] = `<div class="text"><h2>${x.name}</h2><p>${x.comment}</p><img src="${img[0]}//${img[2]}/uc?export=view&id=${img[5]}"/></div>`
		    var elem = document.createElement('img');
		    elem.id = `image${pos}`;
		    if(localStorage.getItem(`stamp${pos}`)=="true"){
			elem.src = stamping[pos];
			marker.push(L.marker(p).bindPopup(contents[a]).setIcon(geticon).addTo(mymapR).on('click',function(e){clickEvt(e);}));
		    }else{
			elem.src = 'image/img.png';
			marker.push(L.marker(p).bindPopup(contents[a]).addTo(mymapR).on('click',function(e){clickEvt(e);}));
		    }
		    marker[pos].title = (x.info);
		    var stam = document.getElementById('stamp');
		    stam.appendChild(elem);
		    
		    pos += 1;
		}
	    });;
    }
    init();
    
    
    function stopGPS() {
	console.log("watchId="+watchId);
	if (watchId != null) {
	    navigator.geolocation.clearWatch(watchId);
	    gpsmarker.setPopupContent("停止");
	}
	watchId = null;
    }
    function tryWatchGPS() {
	stopGPS();
	watchId = navigator.geolocation.watchPosition(
	    onSuccess,onError,{
		maximumAge: 0, timeout: 3000, enableHighAccuracy: true});
    }

    function onSuccess(pos) {
	var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]);
	mymapL.panTo(latlng);
	console.log(latlng);
	gpsmarker.setLatLng(latlng).setPopupContent(
	    "lat="+latlng.lat+",lng="+latlng.lng+"です"
	).openPopup();
	gpsmarkerR.setLatLng(latlng);
	judgeimage(komisen);
	for (var i in titen){
	    if (latlng.distanceTo(titen[i]) < 50){
		if (!judge[i]){
		    judge[i] = true;
		    alert("スタンプゲット!!!");
		    let img = document.getElementById(`image${i}`);
		    img.src = stampimg[i];
		    marker[i].setIcon(geticon);
		    localStorage.setItem(`stamp${i}`,true);
		    
		}
	    }
	}
    }
    function onError(err) {
	restN = "あと"+(--nTrial)+"回試行します";
	gpsmarker.setPopupContent("補足失敗:"+restN).openPopup();
	if (nTrial <= 0) {
	    navigator.geolocation.clearWatch(watchId);
	}
    }

    function clickEvt(e){
    	let gaiyo = document.getElementById("info");
    	let com = e.target.title;
    	gaiyo.innerHTML=com;
    }
    
    mymapL.options.singleClickTimeout = 250;
    mymapL.on('singleclick', function(e) {
	if (cheat === "?cheat") {
	    var latlng = L.latLng(e.latlng);
	    gpsmarker.setLatLng(e.latlng).setPopupContent(
		"lat="+latlng.lat+",lng="+latlng.lng+""
	    ).openPopup();
	    gpsmarkerR.setLatLng(e.latlng);
	}
	// for (var a in komisen){
	//     if (latlng.distanceTo(komisen[a]) < 200){
	// 	L.imageOverlay("image/commcen.png", komisen).addTo(mymapR);
	//     }
	// }
	for (var i in titen) {
	    if (latlng.distanceTo(titen[i]) < 50) {
		if (!judge[i]){
		    judge[i] = true;
		    let img = document.getElementById(`image${i}`);
		    img.src = stamping[i];
		    console.log(stamping[i]);
		    alert("スタンプゲット!!!");
		    marker[i].setIcon(geticon);
		    localStorage.setItem(`stamp${i}`,true);
		}
	    }
	    
	}
    })
    
    
    mymapL.on('zoomend', (e) => {syncmap(mymapL, mymapR);});
    mymapL.on('moveend', (e) => {syncmap(mymapL, mymapR);});
    document.getElementById("start").addEventListener("click", tryWatchGPS);
    document.getElementById("stop").addEventListener("click", stopGPS);
});