mapboxgl.accessToken = 'pk.eyJ1IjoiZXBheiIsImEiOiJjajcwazFibDMwYW9jMndueHY0Yzc4eHV3In0.nGVkyB2cNMNbGbSpxEAL5w';
var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v10',
	zoom: 12,
	center: [-79.95,32.78]
});

//add navigation controls
var nav = new mapboxgl.NavigationControl();
map.addControl(nav,'bottom-right');

//add geolocation control
var geoPosition = new mapboxgl.GeolocateControl({
	positionOptions: {
			enableHighAccuracy: true
	},
	trackUserLocation: true
});
map.addControl(geoPosition, 'bottom-right');

//add scalebar
var scalebar = new mapboxgl.ScaleControl({
    maxWidth: 80,
    unit: 'imperial'
});
map.addControl(scalebar, 'bottom-left');


//configure basemap selections
var layerList = $('#bmMenu');
var inputs = $("#bmMenu :input");

function switchBasemap(layer) {
    var layerId = layer.target.id;
    map.setStyle('mapbox://styles/mapbox/' + layerId + '-v9');
    setTimeout(function(){
        addLayers();
    }, 500);
//    map.on('dataloading', function(e){
//        console.log(e);
//        this.fire('${e.dataType}dataloading', function(e){    
//            if(e.isSourceLoaded){
//                console.log(e);
//                console.log(event);
//                addLayers();
//            }
//        });
//    });
}

for (var i = 0; i < inputs.length; i++) {
    inputs[i].onclick = switchBasemap;
}
//configure route selections
var routelayerList = $('.routeMenu');
var routeinputs = $(".routeMenu :input");

function switchRoute(layer) {
    var layerId = layer.target.id;
    map.setFilter("runningshapes-hover", ["==", "Shape", layerId]);
}

for (var i = 0; i < routeinputs.length; i++) {
    routeinputs[i].onclick = switchRoute;
}

map.on('load', function () {	
	addLayers();
	// Center the map on the coordinates of any clicked symbol from the 'symbols' layer.
	map.on('click', 'runningshapes', function (e) {
		var clickedFeature = e.features[0];
        var selectedLayerId = $('input[name=rtoggle]:checked').attr('id');
        if(clickedFeature.properties.Shape == selectedLayerId){
            console.log(clickedFeature);
            map.flyTo({center: e.lngLat});

            var content = '<b>' +clickedFeature.properties.Shape+ '</b> Route<hr><p>~ ' +clickedFeature.properties.Distance+ ' Miles</p>';

            new mapboxgl.Popup()
            .setLngLat(e.lngLat)
            .setHTML(content)
            .addTo(map);   
        }
	});

	// Change the cursor to a pointer when the it enters a feature in the 'symbols' layer.
	map.on('mouseenter', 'runningshapes', function (e) {
        var selectedLayerId = $('input[name=rtoggle]:checked').attr('id');
		if(e.features[0].properties.Shape == selectedLayerId){
            map.getCanvas().style.cursor = 'pointer';    
        }
        //map.setFilter("runningshapes-hover", ["==", "Shape", e.features[0].properties.Shape]);
	});

	// Change it back to a pointer when it leaves.
	map.on('mouseleave', 'runningshapes', function () {
		map.getCanvas().style.cursor = '';
        //map.setFilter("runningshapes-hover", ["==", "Shape", ""]);
	});	
    
    //set info for join us modal
    var today = new Date();
    var nextRun = "02/20/2018";
    var nextRunSpot = "Colonial Lake";
    var nextRunDist = "3.5ish miles";
    var fbEvent = "";
    var fbEventsPage = "https://www.facebook.com/pg/RunIntoShapeCHS/events/";
    var one_day=1000*60*60*24;
    var nextRunDate = new Date(nextRun);
    var daycount = Math.round((nextRunDate - today)/one_day);
    if(daycount == 1){
        $('#nextRunCountdown').html("T - " + daycount + " DAY!");    
    }
    else{
        $('#nextRunCountdown').html("T - " + daycount + " DAYS!");   
    }
    $('#nextRunDate').html("<b>Our Next Group Run</b>: Tuesday, " + nextRun);
    $('#nextRunMeetingSpot').html("<b>Meeting Spot</b>: " + nextRunSpot);
    $('#nextRunDistance').html("<b>Approximate Distance</b>: " + nextRunDist);
    if(fbEvent !== ""){
        $('#nextRunEvent').html("<b><i class='fa fa-facebook' aria-hidden='true'></i> Event</b>: " + fbEvent);
    }
});
function addLayers(){
    map.addSource('runningshapes', {
		type: 'vector',
		url: 'mapbox://epaz.cj5wtiiq600ay2wlc88yr58fy-3yh2d'
	});
	map.addLayer({
		'id': 'runningshapes',
		'type': 'line',
		'source': 'runningshapes',
		'layout': {
            'visibility': 'visible',
            'line-cap': 'round'
		},
		'paint': {
//            'line-color': 'rgba(55,148,179,1)',
            'line-color': '#08bc9c',
            'line-width': 3,
            "line-opacity": 0
		},
		'source-layer': 'runningshapes'
	});
    map.addLayer({
		'id': 'runningshapes-hover',
		'type': 'line',
		'source': 'runningshapes',
		'paint': {
            'line-color': '#08bc9c',
            'line-width': 3,
            "line-opacity": 1
		},
		'source-layer': 'runningshapes',
        'filter': ["==", "Shape", "Handsaw"]
	});
}