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

var M_info=document.getElementById("mak_info");

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 pp=document.getElementById('Point'+pan);
		    var lat=Icon[pan][1],lng=Icon[pan][0];
		    var pan_to=[lat,lng];
		    map.flyTo(pan_to);
		    //sidebar.open('home')
		    //location.href="#"+pp;//"#Point"+pan;
		}
		
	    });
	    
	});
    });
};


function Set_Contents(str){
    //contents replace
    var desc="";
    str=str.split(/\n/);
    //console.log(str);
    for(i=0; i<str.length; i++){
	if(str[i].match(/^{{{/)){
	    var Mov=str[i].replace(/{{{/g, "");
	    Mov=Mov.replace(/}}}/g, "");
	}else if(str[i].match(/^{{/)){
	    var Pic=str[i].replace(/{{/g, "<img src=\"");
	    Pic=Pic.replace(/}}/g, "\">");
	    //console.log(Pic);
	}else if(str[i].match(/^\[\[/)){
	    var Link=str[i].replace(/^\[\[/g, "<a href=\"")
	    Link=Link.replace(/\|/g, "\">");
	    Link=Link.replace(/]]/g, "</a>");
	}else{
	    desc=desc.concat(str[i]);
	}
    };
    
    return [desc,Mov,Pic,Link];
};


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 haru=L.layerGroup([]);
var natu=L.layerGroup([]);
var akii=L.layerGroup([]);
var huyu=L.layerGroup([]);

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

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

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

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

function M_Icon(CON,MOV,mcon,pan){
    if(MOV==undefined){
	var mkdIcon=L.divIcon({
	    html:'<img id='+CON+' src="../../src/leaflet/images/marker-icon.png">',
	    className:'',
	    //if not class name marker has select box 
	    iconAnchor: [22, 40],
	    popupAnchor: [-10,-30],
	    shadowUrl: '../../src/leaflet/images/marker-shadow.png',
	    shadowSize: [68, 95],
	    shadowAnchor: [22, 94],
	    tooltipAnchor:[0,-20]
	});
    }else{
	var mkdIcon=L.divIcon({
	    html:'<img id='+CON+' src="../../src/leaflet/images/marker-icon.png" href='+MOV+' class="movie">',
	    className:'Movie',
	    //if not class name marker has select box 
	    iconAnchor: [22, 40],
	    popupAnchor: [-10,-30],
	    shadowUrl: '../../src/leaflet/images/marker-shadow.png',
	    shadowSize: [68, 95],
	    shadowAnchor: [22, 94]
	    });
    }
    mcon.setIcon(mkdIcon);
};

var count=0;

var customLayer=L.geoJson(null,{
    style: function(feature) {
    	if (feature.properties._storage_options && feature.properties._storage_options.color){
	    switch (feature.properties._storage_options.color) {
		//alert(feature.properties._storege_opions);
    	    case 'Red': return {color: "red"};
	    case 'brown': return {color: "brown"};
	    case 'Cyan': return {color: "cyan"};
	    case 'lime': return {color: "lime"};
            }    
	}
	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;
		}else {
		    katati="";
		}
		
	    }
	    
	    var season=propert.Season;
	    var period=propert.period;
	    var address=propert.address;
	    var type=geomet.type, m=geomet.coordinates;
	    k_type.push(type);
	    
	    //alert(k_type);
	    
	    
	    
	    if(type=="Point"){
		    var Point_id=type+count;
		    var SMC=Set_Contents(tose);
		    
		    if(SMC[1]==undefined){
			console.log(SMC);
			var coment='<div id='+Point_id+' class="mak"><h1>'+name+'</h1><h2>'+SMC[0]+'</h2>'+SMC[2]+'</div>';
			movie=undefined;
			coments.push(coment);
			usepan.push(m);
			mkname.push(name);
			var mak=layer.bindPopup(coment);
			M_info.innerHTML+=coment;
			M_Icon(count,movie,mak,m);
			count++;
		    }else{	
			var coment='<div id='+Point_id+' class="mak"><h1>'+name+'</h1><h3>'+SMC[0]+'</h3>'+SMC[3]+''+SMC[2]+'</div>';
			var movie=SMC[1];
			coments.push(movie);
			usepan.push(m);
			mkname.push(name);
			var mak=layer.bindPopup(coment);
			M_info.innerHTML+=coment;
			mak.name=name;	
			M_Icon(count,movie,mak,m);
			count++;
		    }
		}else{
		    
		    var coment='<div id='+Point_id+' class="mak"><h1>'+name+'</h1><h3>'+tose+'</h3></div>';
		    movie=undefined;
		    var mak=layer.bindPopup(coment);
		    M_info.innerHTML+=coment;
		    M_Icon(count,movie,mak,m);
		    count++;
		}
	    
	    layer.bindTooltip(name);
	    mak.on('click', function(o){
		mymap.closePopup();
		sidebar.open("home");
		id=o.originalEvent.explicitOriginalTarget.attributes.id;
		val=document.getElementById(id.value);
		location.href="#Point"+val.id;
	    });
	    
	    
	    
	    /*
	    if (color=="Red" && type=="Point" && katati==""){
	    	mak.setIcon(r_Icon);
	    }else if (color=="Yellow" && type=="Point" || color=="Gold" && type=="Point" ){
	    	mak.setIcon(y_Icon);	
	    }else if (color=="lightpink" && type=="Point" || color=="LightPink" && type=="Point"){
	    	mak.setIcon(lp_Icon);
	    }else if (color=="lime" && type=="Point" || color=="Lime" && type=="Point"){
	    	mak.setIcon(lime_Icon);
	    }else if (color=="DarkSlateGray" && type=="Point" || color=="darkslategray" && type=="Point" ){
	    	mak.setIcon(DSG_Icon);
	    }else if (katati=="Drop"){
	    	mak.setIcon(hinanjo);
	    }
	    */
	    
	    if(season=="Spring" || season=="spring"){
		haru.addLayer(mak);
	    }else if(season=="Summar" || season=="summar"){
		//console.log(layer);
		natu.addLayer(mak);
		//console.log(m);
	    }else if(season=="Fall" || season=="fall"){
		akii.addLayer(mak);
	    }else{
		huyu.addLayer(mak);
	    }
	    
	    //natu.addTo(mymap);
	    if (type=="LineString"){
		for(i=0; i<m.length; i++){
		    //alert(m[i]);
		    kasyo.push(m[i]);
		    naiyo.push(tose);
		    ten.push(mak);
		    //alert(naiyo);
		};
		// LineStringでの座標を細かくとる
	    }else {
		kasyo.push(m); //この関数外に変数を持って行くために使用
		naiyo.push(tose);
		ten.push(mak);
	    }
	    
	    
	}
    })
});

var gpxLayer = omnivore.geojson('kisetuwake.geojson', null, customLayer).on('ready', function() {  
    
    Boxes(mymap,usepan,ten,mkname);
    sidebar.on('content', function () {
	//location.
	 //location.href="#Point1"
     });
    
}).addTo(mymap);

// var gpxLayer = omnivore.geojson('yuza_wakimizu.geojson', null, customLayer).on('ready', function() {  
    
//     Boxes(mymap,usepan,ten,mkname);
//     sidebar.on('content', function () {
// 	//location.
// 	 //location.href="#Point1"
//      });
    
// }).addTo(mymap);

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


//レイヤー変更オプション
var late_season={'SP':haru,'SM':natu,'FA':akii,'WI':huyu};
var C_layers=L.control.layers(baseLayers,late_season).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);
//console.log(l_info);

//console.log();

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

sidebar.on('content', function(e) {
    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 ati=document.getElementById("aps");

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

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

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

*/