//var ltlg= [38.72859248614108,139.82239320874214];
var ltlg=[38.96715, 139.966164];
//マップの中心にする座標

var M_info=document.getElementById("mak_info");
var select_btm=document.getElementById("info_btm");
var cicle=document.getElementsByClassName("maru");
var maks=document.getElementsByClassName("mki-intext");


function changeTab(){
    //var targetid =it_a[0].href.substring(it_a[0].href.indexOf('#')+1,it_a[0].href.length);
    //console.log(a);
    //console.log(b);
    if (this.href==undefined){
	var num=this.children[0].id;
	var point_num="Point"+num;
	var Points=document.getElementById(point_num);
	console.log(this);
	if (Points==null){}
	else{
	    targetid=point_num;
	}
    }else{
	var targetid =this.href.substring(this.href.indexOf('#')+1,this.href.length);
	
    }
    if(targetid==undefined){}
    else{
	for(i=1;i<side_id;i++){
	    var id_s="side"+i;
	    var side_ids=document.getElementById(id_s);
	    var P_ids=side_ids.getElementsByTagName("div");
	    var iii=P_ids[0].id;
	    
	    if(iii==targetid){
		P_ids[0].style.display = "block";	    
	    }else{
		P_ids[0].style.display = "none";
	    }
	}
    }
    
return false;
};

function click_EV(Points,move){
    location.href="#"+Points;
    //これができるようにする
    {mymap.flyTo(move,17)};
    //mymap.openPopup()};    
};


function Boxes(map,Icon,tenten,Name,id){
    
    map.on('popupopen', function(o) {	
	var S_width=window.innerWidth;
	var S_height=window.innerHeight;
	
	if(S_width<S_height){
	    var M_width=S_width;
	    var M_height=S_height/2;
	}else{
	    var M_width=S_width/2;
	    var M_height=S_height-200;
	};

	//console.log(Name[0]);
	//console.log(o);
	
	$(function(){
	    var num=[];
	    $('.movie').colorbox({
		onOpen:function(){	    
		    //map.closePopup();  
		},
		onLoad:function(){
	    	    map.setZoom(17);		    
		    num.push($.colorbox.element().context.attributes.id.nodeValue);
		},
		iframe: true,
		//  titleで祭の名前とレストランの名前を表示		
		width:M_width,
		height: M_height,
		rel:'movie', //同じクラス名のものをスライド表示
		//width:s_width-100,
		onClosed:function(){
		    var pan=num[num.length-1];
		    var lat=Icon[pan][1],lng=Icon[pan][0];
		    var pan_to=[lat,lng];
		    map.flyTo(pan_to);
		    location.href="#Point"+pan;
		}
		
	    });
	    
	});
    });
};

function Set_Contents(str){
    if(str.match(/{{{/)){
	var Mov_star=str.indexOf("{{{");
	var Mov_end=str.indexOf("}}}");
	var Mov=str.slice(Mov_star,Mov_end+3); //Mov_endがある位置を出すと}が含まれないため +3 している
	str=str.replace(Mov,"");
	Mov=Mov.replace(/{{{/g, "");
	Mov=Mov.replace(/}}}/g, "");
    }else{
	Mov="";
    }
    var Pic=str.replace(/{{/g, "<img width='400' length='200' src=\"");
    Pic=Pic.replace(/}}/g, "\">");
    var Link=Pic.replace(/\[\[/g, "<a href=\"")
    Link=Link.replace(/\|/g, "\">");
    Link=Link.replace(/]]/g, "</a>");
    
    return [Link,Mov];
};


var osmTile =
    L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution:
	'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> \
contributors'
    });

var gsiTile = 
    L.tileLayer('//cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
	attribution:
	'<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
    });

var mymap= L.map("mymap", {
    layers: [osmTile], //最初に指定するタイルレイヤー
    center: ltlg, zoom: 14, scrollWheelZoom: false
    //中心座標とズームレベルとマウスのホイールでのズームをしないよう設定
});

//var time= document.getElementById("time");

var baseLayers = {'OpenStreetMap': osmTile, '国土地理院': gsiTile};
//レイヤーの内容

var kasyo=[],naiyo=[],iro=[],k_type=[],ten=[],coments=[],usepan=[],mkname=[];
var nakami=[];


/*
var mkdIcon = L.icon.mapkey({
//htmlCode:'<a href="https://www.google.com"></a>',
icon:"drop",
color:'white',
background:col,
size:30
});
*/
//src='+icon+'

function M_Icon(CON,MOV,mcon,icon,col,ic_col,rad){
    if(MOV==""){
	var mkdIcon = L.icon.mapkey({
	    htmlCode:'<span id='+CON+' class="'+icon+'"></span>',
	    //htmlCode:'<span id='+CON+' class="fa fa-map-marker"></span>',
	    color:ic_col,
	    background:col,
	    size:25,
	    borderRadius:rad
	});	
    }else{
	var mkdIcon = L.icon.mapkey({
	    htmlCode:'<span id='+CON+' class="'+icon+' movie" href='+MOV+'></span>',
	    //htmlCode:'<span id='+CON+' class="fa fa-map-marker"></span>',
	    color:ic_col,
	    background:col,
	    size:25,
	    additionalCSS:"border:4px solid #aa3838;"
	});
    }
    mcon.setIcon(mkdIcon);
};

function mak_click(marker,map){
    marker.on('click', function(o){
	//console.log(o);
	//marker.openTooltip();
	var pt=L.latLng(o.latlng);
	map.flyTo(pt);
	sidebar.open("home");
	id=o.originalEvent.explicitOriginalTarget.attributes.id;
	val=document.getElementById(id.value);
	location.href="#Point"+val.id;
    });
};

var count=0,side_id=1;


var customLayer=L.geoJson(null,{
    style: function(feature) {
	//alert(feature.properties._storage_options.color);
    	if (feature.properties._storage_options && feature.properties._storage_options.color){
	    var colors=feature.properties._storage_options.color;
	    switch (feature.properties._storage_options.color) {
	    case colors: return {color:colors};
            }    
	}
	if (feature.properties._storage_options && feature.properties._storage_options.weight){
	    var hutosa=feature.properties._storage_options.weight;
    	    return {weight: hutosa};
        }
	if (feature.properties._storage_options && feature.properties._storage_options.dashArray){
	    var hakai=feature.properties._storage_options.dashArray;
	    return {dashArray: hakai};   
        }
    },
    onEachFeature: (function (feature, layer){
	var propert= feature.properties, geomet=feature.geometry;
	// 予めfeature.propertisをletで宣言。(varでも可)
	if (propert && geomet) {
	    if (propert.name){
		var name=propert.name;
	    } else {
		var name="";
	    }
	    if (propert.description){
		var tose=propert.description;
	    } else {
		var tose="";
	    }
	    if (propert._storage_options){
		if (propert._storage_options.color){
		    var color=propert._storage_options.color;
		    iro.push(color);
		}else {
		    color="";
		    iro.push(color);
		}
		if (propert._storage_options.iconClass){
		    var katati=propert._storage_options.iconClass;
		    if(katati=="Default"){
			katati="";
		    }
		}else {
		    katati="";
		}
		
	    }
	   
	    var type=geomet.type, pos=geomet.coordinates,st_o=propert._storage_options;

	    
	    
	    k_type.push(type);
	    if(type=="Point"){
		 if (color=="red" && katati=="" || color=="Red" && katati==""){
		     Icon_img="fa fa-exclamation-triangle";
		     type_name="死亡事故現場";
		     layer.bindTooltip(type_name);
		     Ic_color="white";
		     radius=0.1;
		 }else if (color=="Yellow" || color=="Gold" ){
		     Icon_img="fa fa-exclamation-circle";
		     type_name="事故現場";
		     layer.bindTooltip(type_name);		     
		     color="Gold";
		     Ic_color="black";
		     radius=5;
		     //Icon_img="forbidden";
		 }else if (color=="lightpink" || color=="LightPink"){
	    	     Icon_img="fa fa-history";
		     type_name="歴史的な事物";
		     layer.bindTooltip(type_name);
		     Ic_color="black";
		     radius=20;
		 }else if (color=="lime" || color=="Lime"){
		     Icon_img="fa fa-tint";
		     type_name="湧き水";
		     Ic_color="black";
		     layer.bindTooltip(type_name);
		     radius=20;
		 }else if (color=="DarkSlateGray" || color=="darkslategray"){
		     Icon_img="mki mki-waterwork";
		     type_name="水管理/水利施設";
		     layer.bindTooltip(type_name);
		     Ic_color="white";
		     radius=20;
		 }else if(katati=="Drop"){
		     Icon_img="mki mki-shelter";
		     type_name="避難所";
		     layer.bindTooltip(type_name);
		     color="green";
		     Ic_color="white";
		     radius=10;
		 }else if(color=="LawnGreen"){
		     Icon_img="fa fa-play-circle";
		     type_name="水路動画関連";
		     layer.bindTooltip(type_name);
		     Ic_color="black";
		     radius=20;
		 }else{
		     Icon_img="fa fa-exclamation";
		     type_name="危険箇所";
		     layer.bindTooltip(type_name);
		     Ic_color="white";
		     color="blue";
		     radius=20;
		     
	    }

		var Point_id=type+count;

		if(tose==""){
		    var coment='<div><h1>'+name+'</h1><h3>'+tose+'</h3></div>';
		    movie="";
		    usepan.push(pos);
		    mkname.push(name);
		    layer.bindPopup(coment);
		    M_Icon(count,movie,layer,Icon_img,color,Ic_color,radius);
		    count++;
		}else{
		    var SMC=Set_Contents(tose);
		    var movie=SMC[1];
		    usepan.push(pos);
		    mkname.push(name);
		    //layer.bindPopup(coment);
		    //<span class="info_type">'+tobas+'</span>
		    layer.bindPopup(type_name);
		    //onclick="click_EV('+Point_id+',['+pos[1]+','+pos[0]+'])";
		    var tobas='<a class="maru" href="#'+Point_id+'">'+side_id+'</a>';
		    //cicle[side_id-1].style.color="red";
		    var coment='<div id="side'+side_id+'"><div id="'+Point_id+'" class="mak"><h1>'+name+'</h1><h3>'+SMC[0]+'</h3></div></div>';
		    M_info.innerHTML+=coment;
		    //var ids=document.getElementById(Point_id);
		    select_btm.innerHTML+=tobas;
		    layer.name=name;
		    M_Icon(count,movie,layer,Icon_img,color,Ic_color,radius);
		    count++;
		    side_id++;
		    mak_click(layer,mymap);
		}
	    }else{
		var coment='<div><h1>'+name+'</h1><h3>'+tose+'</h3></div>';
		usepan.push(pos);
		var line=layer.bindPopup(coment);
		count++;
	    }
	    
	    
	    
	    //natu.addTo(mymap);
	    if (type=="LineString"){
		for(i=0; i<pos.length; i++){
		    //alert(m[i]);
		    kasyo.push(pos[i]);
		    naiyo.push(tose);
		    ten.push(layer);
		    //alert(naiyo);
		};
		// LineStringでの座標を細かくとる
	    }else {
		kasyo.push(pos); //この関数外に変数を持って行くために使用
		naiyo.push(tose);
		ten.push(layer);
	    }
	    
	    
	}
    })
});

var gpxLayer = omnivore.geojson('suiro.geojson', null, customLayer).on('ready', function() {  

    
    
    //var aaa=document.getElementsByClassName("maru");
    //console.log(aaa);
    Boxes(mymap,usepan,ten,mkname);
    var unko=[],anko=[];
    for(i=0;i<usepan.length;i++){
	var tne=ten[i]._latlngs;
	//console.log(tne.length);
	if(ten[i].length==2){// && usepan[i][0].length==undefined){
	    unko.push(tne);
	    anko.push(usepan[i]);
	}

    }
    
    for(i=0;i<cicle.length;i++){
	console.log(unko[i]);
	console.log(anko[i]);
	//aaa[i].onclick=changeTab;
	// for(i=1;i<side_id;i++){
	// 	var iii=document.getElementById("info_btm");
	// 	var id_s="side"+i;
	// 	var side_ids=document.getElementById(id_s);
	//var unko=side_ids;//.getElementsByTagName("div");
	//console.log(unko);
	// var pok=side_ids.getElementsByTagName("a");
	// var targetid = pok[0].href.substring(pok[0].href.indexOf('#')+1,pok[0].href.length);
	// var mk_id=M_info.getElementsByTagName("div");
	cicle[i].onclick=changeTab;
	
    };

    for(i=0;i<maks.length;i++){
	maks[i].onclick=changeTab;
    };
    
    sidebar.on('content', function () {
	//location.
	//location.href="#Point1"
     });

    cicle[0].onclick();
    
    
}).addTo(mymap);

//geojsonファイルを読みだし

//レイヤー変更オプション
var C_layers=L.control.layers(baseLayers).addTo(mymap);

var sidebar = L.control.sidebar('sidebar',{
    position: 'left'
}).addTo(mymap);



//var vits=C_layers.getContainer();
//var l_info=document.getElementById("mak_info");
//l_info.appendChild(vits)x;
//console.log(l_info);

//console.log();

mymap.on("click", function(){
    sidebar.close();
});



sidebar.on('content', function(e) {
    var select_btm=document.getElementById("info_btm");
    select_btm.style.position="fixed";
    var fa_s=document.getElementById("FaW");
    fa_s.classList.remove("fa-map-marker");
    fa_s.classList.add("fa-times");
    //console.log(fa_s);
   //sidebar open 
});

sidebar.on("closing", function(e){
    var fa_s=document.getElementById("FaW");
    fa_s.classList.add("fa-map-marker");
    fa_s.classList.remove("fa-times");
    //var fa_ss=document.getElementsByClassName("active");
    //var fa_icon=fa_ss[0].firstChild.childNodes[0].classList[1];
    //var fa_ss=document.getElementsByClassName(fa_icon);
    //var iti=document.getElementById("home");
    //console.log("pop");
    var select_btm=document.getElementById("info_btm");
    select_btm.style.position="absolute";
});




// function aaaa(){
//     //alert("unko");
// };

// aps.addEventListener("click",aaaa,false);
/*

マーカーに対する変更
サイドバーのスマホ表示の仕方
レイヤーコントロールボタンをサイドバー内に

*/