mapboxgl.accessToken = 'pk.eyJ1IjoibWFwa2luZCIsImEiOiJja29haTI1NXAxeG5hMndyd2RtbzVzdGN6In0.J2p2h-jNQLQOKk5wP5liSA';
var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapkind/ckdpdrlto047b1ipgdgqgt21z',
        center: [-97.7431, 30.2672],
        zoom: 13,
        attributionControl: true 
    });
    
    
var geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        mapboxgl: mapboxgl,
        marker: false
    });
    
    document.getElementById('geocoder').appendChild(geocoder.onAdd(map));
    
//Point code
var canvas = map.getCanvasContainer();

var createPoint = 'stop';

function createPointtoggleTrue(){
    createPoint = 'go';
};

function createPointtoggleFalse(){
    createPoint = 'stop';
    
};

//Create Point variables
var pointIcon = ''
var pointLabel
var featureSelected
var featureID
var newLabel
var popup

//Get the point that was clicked
function getFeature(selectedFeature){
    featureSelected = map.queryRenderedFeatures(selectedFeature.point, {
        layers: ['label-points']
    });
    featureID = featureSelected[0].id;
    console.log(featureSelected);
    console.log(featureID);
}

//Update the label for the clicked point by pulling in input text from popup form
function generateLabel(){
    newLabel = document.labelForm.updateLabel.value;
    geojsonData.features[featureID].properties.label = newLabel;
    map.getSource('geojson').setData(geojsonData);
    console.log('New label: ' + newLabel );
}

//Delete selected point
function deletePoint(){
    geojsonData.features[featureID].properties.display = 'no';
    map.getSource('geojson').setData(geojsonData);
    popup.remove();
}

//Populate ID property
function generateID(){
    pointID = Number(new Date().getTime());
};


// GeoJSON object to hold our point features
var geojsonData = {
    'type': 'FeatureCollection',
    'features': []
};


map.on('load', function () {

        
        map.addSource('geojson', {
            'type': 'geojson',
            'data': geojsonData,
            'generateId': true
    });    
    
    map.addLayer({
        id: 'label-points',
        type: 'symbol',
        source: 'geojson',
        layout: {
                    'text-field' : [
                        'format',['get', 'label'],
                        {'font-scale': 1}],
                    'text-font': ["Open Sans Semibold", "Arial Unicode MS Bold"], 
                    'text-variable-anchor': ['bottom'],
                    'text-radial-offset': 0.75,
                    'text-justify': 'auto',
                    //'icon-image': 'aquarium',
                    //'icon-size': 1
                    'icon-image': ['concat', ['get', 'icon'], '-15']
                    },
        paint: {
                    'text-color': '#202',
                    'text-halo-color': '#fff',
                    'text-halo-width': 2
                }

    });

    map.setFilter('label-points', ['==', ['get', 'display'], 'yes'])
    
    function onMove(e) {
        var coords = e.lngLat;
        //getFeature();
        // Set a UI indicator for dragging.
        canvas.style.cursor = 'grabbing';
        
        // Update the Point feature in `geojson` coordinates
        // and call setData to the source layer `point` on it.
        geojsonData.features[featureID].geometry.coordinates = [coords.lng, coords.lat];
        map.getSource('geojson').setData(geojsonData);
        }

    function onUp(e) {
        var coords = e.lngLat;
        canvas.style.cursor = '';
        
        // Unbind mouse/touch events
        map.off('mousemove', onMove);
        map.off('touchmove', onMove);
        }

    map.on('mousedown', 'label-points', function (e) {
        //Get selected point
        getFeature(e);

        //Remove popup...May want to check to see if selected feature has popup and only close its popup if true
        if(popup){
            popup.remove();
        }
        

        // Prevent the default map drag behavior.
        e.preventDefault();
        
        canvas.style.cursor = 'grab';
        
        map.on('mousemove', onMove);
        map.once('mouseup', onUp);
        });
        
    map.on('touchstart', 'point', function (e) {
        if (e.points.length !== 1) return;
        
        // Prevent the default map drag behavior.
        e.preventDefault();
        
        map.on('touchmove', onMove);
        map.once('touchend', onUp);
        });

    map.on('click', 'label-points', function (e) {
        getFeature(e);
        var currentLabel = e.features[0].properties.label;
        console.log('Current label: ' + currentLabel);

        popup = new mapboxgl.Popup({ offset: 25, closeButton: false })
        .setLngLat(e.lngLat)
        //.setHTML(e.features[0].properties.label)
        .setHTML("<form name='labelForm' method='post'><button type='submit' disabled style='display: none' aria-hidden='true'></button><input type='text' name='updateLabel' placeholder='Update Label' value=''/> <input id='submitbtn' type='button' value='+' onclick='generateLabel();'/></form><br><button id='delete-point' onclick='deletePoint()''>Delete</button><button id='style-point' onclick='deletePoint()''>Style</button>")
        .addTo(map);
        });

        //getLayerColor();

});

map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point, {
        layers: ['label-points']
    });
    //map.setPaintProperty('point', 'circle-color', '#3bb2d0');
    map.getCanvas().style.cursor = features.length
                ? 'move'
                : '';



if (createPoint === 'go'){

    map.getCanvas().style.cursor = features.length
        ? 'move'
        : 'crosshair';

    map.on('click', function (e) {
        

        if (createPoint === 'go'){

            generateID();
            
            
            var point = {
                'type': 'Feature',
                'geometry': {
                    'type': 'Point',
                    'coordinates': [e.lngLat.lng, e.lngLat.lat]
                },
                'properties': {
                    'id': pointID,
                    'label' : pointLabel,
                    'icon' : pointIcon,
                    'display' : 'yes'
                },
              
            };
            
            geojsonData.features.push(point);
            
            console.log('A point has been created at ' + e.lngLat + createPoint + ' id:' + pointID);
            map.getSource('geojson').setData(geojsonData);
             
            createPointtoggleFalse();

        }
    });

    
    }

})
    
    
    
//color picker

var colorGo = '';
var landColorTemp = '';
var landColor = '#fcfcfc';
var transportationColorTemp = '';
var transportationColor = '#000000';
var pathColor = '#000000';
var streetColor = '#000000';
var majorroadColor = '#000000';
var secondaryroadColor = '#000000';
var primaryroadColor = '#000000';
var railColor = '#000000';
var waterwayColor = '#e0e0e0';
var waterColor = '#e0e0e0';
var landuseColor = '#eff0f0';
var buildingColor = '#f2f2f2';


if (map.style === 'mapbox://styles/mapkind/ckdoh02wl4z2m1jmmyn8u52ld'){
    colorGo = '';
    landColorTemp = '';
    landColor = '#fa560f';
    transportationColorTemp = '';
    transportationColor = '#fa560f';
    waterwayColor = '#e0e0e0';
    waterColor = '#e0e0e0';
    landuseColor = '#eff0f0';
    buildingColor = '#f2f2f2';

}


function twofaceStyle(){
    colorPickerComp.colorChange('#000000', transportationColorButton);
    colorPickerComp.colorChange('#000000', pathColorButton);
    colorPickerComp.colorChange('#000000', streetColorButton);
    colorPickerComp.colorChange('#000000', majorroadColorButton);
    colorPickerComp.colorChange('#000000', secondaryroadColorButton);
    colorPickerComp.colorChange('#000000', primaryroadColorButton);
    colorPickerComp.colorChange('#000000', railColorButton);
    colorPickerComp.colorChange('#fcfcfc', landColorButton);
    colorPickerComp.colorChange('#eff0f0', landuseColorButton);
    colorPickerComp.colorChange('#e0e0e0', waterColorButton);
    colorPickerComp.colorChange('#e0e0e0', waterwayColorButton);
    colorPickerComp.colorChange('#e0e0e0', waterbodyColorButton);
    colorPickerComp.colorChange('#f2f2f2', buildingColorButton);
    //map.setPaintProperty("national-park", 'fill-color', '#eff0f0');
    map.setPaintProperty("building-outline", 'line-color', '#e3e3e3');
    
}

function twofacehhomeStyle(){
    
    map.setLayoutProperty("building-custom", 'visibility', 'visible');
    map.setPaintProperty("path", 'line-color', '#000000');
    map.setPaintProperty("street", 'line-color', '#000000');
    map.setPaintProperty("major-road", 'line-color', '#000000');
    map.setPaintProperty("secondary-road", 'line-color', '#000000');
    map.setPaintProperty("primary-road", 'line-color', '#000000');
    map.setPaintProperty("rail", 'line-color', '#000000');
    map.setPaintProperty("land", 'background-color', '#fcfcfc');
    map.setPaintProperty("landuse", 'fill-color', '#eff0f0');
    map.setPaintProperty("water", 'fill-color', '#e0e0e0');
    map.setPaintProperty("waterway", 'line-color', '#e0e0e0');
    map.setPaintProperty("building-custom", 'fill-color', '#f2f2f2');
    map.setPaintProperty("national-park", 'fill-color', '#eff0f0');
    map.setPaintProperty("building-outline", 'line-color', '#e3e3e3');
    
}

function greenishStyle(){
    colorPickerComp.colorChange('#ffffff', transportationColorButton);
    colorPickerComp.colorChange('#ffffff', pathColorButton);
    colorPickerComp.colorChange('#ffffff', streetColorButton);
    colorPickerComp.colorChange('#ffffff', majorroadColorButton);
    colorPickerComp.colorChange('#ffffff', secondaryroadColorButton);
    colorPickerComp.colorChange('#ffffff', primaryroadColorButton);
    colorPickerComp.colorChange('#ffffff', railColorButton);
    colorPickerComp.colorChange('#b2dde0', landColorButton);
    colorPickerComp.colorChange('#6db9c0', landuseColorButton);
    colorPickerComp.colorChange('#437a7f', waterColorButton);
    colorPickerComp.colorChange('#437a7f', waterwayColorButton);
    colorPickerComp.colorChange('#437a7f', waterbodyColorButton);
    colorPickerComp.colorChange('#4c8e9400', buildingColorButton);
    //map.setPaintProperty("national-park", 'fill-color', '#458b92');
    map.setPaintProperty("building-outline", 'line-color', '#4c8e94');
    
}

function greenishhomeStyle(){
    
    map.setLayoutProperty("building-custom", 'visibility', 'none');
    map.setPaintProperty("path", 'line-color', '#ffffff');
    map.setPaintProperty("street", 'line-color', '#ffffff');
    map.setPaintProperty("major-road", 'line-color', '#ffffff');
    map.setPaintProperty("secondary-road", 'line-color', '#ffffff');
    map.setPaintProperty("primary-road", 'line-color', '#ffffff');
    map.setPaintProperty("rail", 'line-color', '#ffffff');
    map.setPaintProperty("land", 'background-color', '#b2dde0');
    map.setPaintProperty("landuse", 'fill-color', '#6db9c0');
    map.setPaintProperty("water", 'fill-color', '#437a7f');
    map.setPaintProperty("waterway", 'line-color', '#437a7f');
    //map.setPaintProperty("building-custom", 'fill-color', '#4c8e9400');
    map.setPaintProperty("national-park", 'fill-color', '#458b92');
    map.setPaintProperty("building-outline", 'line-color', '#4c8e94');
    
}

function standardStyle(){

    colorPickerComp.colorChange('#d14545', transportationColorButton);
    colorPickerComp.colorChange('#d14545', pathColorButton);
    colorPickerComp.colorChange('#d14545', streetColorButton);
    colorPickerComp.colorChange('#d14545', majorroadColorButton);
    colorPickerComp.colorChange('#d14545', secondaryroadColorButton);
    colorPickerComp.colorChange('#d14545', primaryroadColorButton);
    colorPickerComp.colorChange('#d14545', railColorButton);
    colorPickerComp.colorChange('#efe8d7', landColorButton);
    colorPickerComp.colorChange('#e2d8c1', landuseColorButton);
    colorPickerComp.colorChange('#95c8cb', waterColorButton);
    colorPickerComp.colorChange('#95c8cb', waterwayColorButton);
    colorPickerComp.colorChange('#95c8cb', waterbodyColorButton);
    colorPickerComp.colorChange('#31339e00', buildingColorButton);
    //map.setPaintProperty("national-park", 'fill-color', '#c6b5b5');
    map.setPaintProperty("building-outline", 'line-color', '#31339e');
   
}

function standardhomeStyle(){
    
    map.setLayoutProperty("building-custom", 'visibility', 'none');
    map.setPaintProperty("path", 'line-color', '#d14545');
    map.setPaintProperty("street", 'line-color', '#d14545');
    map.setPaintProperty("major-road", 'line-color', '#d14545');
    map.setPaintProperty("secondary-road", 'line-color', '#d14545');
    map.setPaintProperty("primary-road", 'line-color', '#d14545');
    map.setPaintProperty("rail", 'line-color', '#d14545');
    map.setPaintProperty("land", 'background-color', '#efe8d7');
    map.setPaintProperty("landuse", 'fill-color', '#e2d8c1');
    map.setPaintProperty("water", 'fill-color', '#95c8cb');
    map.setPaintProperty("waterway", 'line-color', '#95c8cb');
    //map.setPaintProperty("building-custom", 'fill-color', '#31339e00');
    map.setPaintProperty("national-park", 'fill-color', '#c6b5b5');
    map.setPaintProperty("building-outline", 'line-color', '#31339e');
    
}

function blueprintStyle(){
    colorPickerComp.colorChange('#ffffff', transportationColorButton);
    colorPickerComp.colorChange('#ffffff', pathColorButton);
    colorPickerComp.colorChange('#ffffff', streetColorButton);
    colorPickerComp.colorChange('#ffffff', majorroadColorButton);
    colorPickerComp.colorChange('#ffffff', secondaryroadColorButton);
    colorPickerComp.colorChange('#ffffff', primaryroadColorButton);
    colorPickerComp.colorChange('#ffffff', railColorButton);
    colorPickerComp.colorChange('#415eaf', landColorButton);
    colorPickerComp.colorChange('#415eaf00', landuseColorButton);
    colorPickerComp.colorChange('#415eaf00', waterColorButton);
    colorPickerComp.colorChange('#ffffff', waterwayColorButton);
    colorPickerComp.colorChange('#ffffff', waterbodyColorButton);
    colorPickerComp.colorChange('#2c407700', buildingColorButton);
    //map.setPaintProperty("national-park", 'fill-color', '#6c84c6');
    map.setPaintProperty("building-outline", 'line-color', 'white');
   
}

function decimalStyle(){
    colorPickerComp.colorChange('#507c69', transportationColorButton);
    colorPickerComp.colorChange('#507c69', pathColorButton);
    colorPickerComp.colorChange('#507c69', streetColorButton);
    colorPickerComp.colorChange('#507c69', majorroadColorButton);
    colorPickerComp.colorChange('#507c69', secondaryroadColorButton);
    colorPickerComp.colorChange('#507c69', primaryroadColorButton);
    colorPickerComp.colorChange('#507c69', railColorButton);
    colorPickerComp.colorChange('#000000', landColorButton);
    colorPickerComp.colorChange('#182f25', landuseColorButton);
    colorPickerComp.colorChange('#182f25', waterColorButton);
    colorPickerComp.colorChange('#182f25', waterwayColorButton);
    colorPickerComp.colorChange('#182f25', waterbodyColorButton);
    colorPickerComp.colorChange('#234d3b', buildingColorButton);
    //map.setPaintProperty("national-park", 'fill-color', '#000000');
    map.setPaintProperty("building-outline", 'line-color', '#1a1a1a');
    
}

var lineWidth;

function lineStyleDash(lineLayer){
    /*if (!(lineWidth)){
        if (lineLayer == "major-road"){
            lineWidth = 2;
        }
        else if (lineLayer == "path"){
            lineWidth = 0.5;
        }
        else if (lineLayer == "street"){
            lineWidth = 0.5;
        }
        else if (lineLayer == "primary-road"){
            lineWidth = 1.5;
        }
        else if (lineLayer == "secondary-road"){
            lineWidth = 1;
        }
        else if (lineLayer == "rail"){
            lineWidth = 1.75;
        }
    }*/
    
    map.setPaintProperty(lineLayer, 'line-dasharray', [3, 3]);
    //map.setPaintProperty(lineLayer, 'line-width', lineWidth);
}

function lineStyleRail(lineLayer){
    
    map.setPaintProperty(lineLayer, 'line-dasharray', [0.2, 0.5]);
    //map.setPaintProperty(lineLayer, 'line-width', 4);
}

function lineStyleSolid(lineLayer){
    /*if (!(lineWidth)){
        if (lineLayer == "major-road"){
            lineWidth = 2;
        }
        else if (lineLayer == "path"){
            lineWidth = 0.5;
        }
        else if (lineLayer == "street"){
            lineWidth = 0.75;
        }
        else if (lineLayer == "primary-road"){
            lineWidth = 1.5;
        }
        else if (lineLayer == "secondary-road"){
            lineWidth = 1;
        }
        else if (lineLayer == "rail"){
            lineWidth = 1.75;
        }
    }*/
    map.setPaintProperty(lineLayer, 'line-dasharray', [3, 0]);
    //map.setPaintProperty(lineLayer, 'line-width', lineWidth);
}

function lineWidth1(lineLayer){
    map.setPaintProperty(lineLayer, 'line-width', 0.5);
    //lineWidth = 0.5;
}

function lineWidth2(lineLayer){
    map.setPaintProperty(lineLayer, 'line-width', 0.75);
    //lineWidth = 0.75;
}

function lineWidth3(lineLayer){
    map.setPaintProperty(lineLayer, 'line-width', 1);
    //lineWidth = 1;
}

function lineWidth4(lineLayer){
    map.setPaintProperty(lineLayer, 'line-width', 1.5);
    //lineWidth = 1.5;
}

function lineWidth5(lineLayer){
    map.setPaintProperty(lineLayer, 'line-width', 2);
    //lineWidth = 2;
}

function lineWidth6(lineLayer){
    map.setPaintProperty(lineLayer, 'line-width', 4);
    //lineWidth = 4;
}

function polygonCubePattern(polygonLayer){
    //map.setPaintProperty(polygonLayer, 'fill-pattern', '')
    map.loadImage(
        'https://uploads-ssl.webflow.com/608a258a8995993724a25f22/60c9fc95ebcd0d81b2ca16a3_LinePattern.png',
        function (err, image) {
            if(err) throw err;

            map.addImage('CubePattern', image);

            map.setPaintProperty(polygonLayer, 'fill-pattern', 'CubePattern')
        }
    )
}

function polygonDotPattern(polygonLayer){
    //map.setPaintProperty(polygonLayer, 'fill-pattern', '')
    map.loadImage(
        'https://uploads-ssl.webflow.com/608a258a8995993724a25f22/60c9eef5383d8141b936e2a8_DotPattern2.png',
        function (err, image) {
            if(err) throw err;

            map.addImage('DotPattern', image);

            map.setPaintProperty(polygonLayer, 'fill-pattern', 'DotPattern')
        }
    )
}

function polygonLatticePattern(polygonLayer){
    map.loadImage(
        'https://uploads-ssl.webflow.com/608a258a8995993724a25f22/60c9ffcfa887524069609fa8_LatticePattern.png',
        function (err, image) {
            if(err) throw err;

            map.addImage('LatticePattern', image);

            map.setPaintProperty(polygonLayer, 'fill-pattern', 'LatticePattern')
        }
    )
}

function polygonWavePattern(polygonLayer){
    map.loadImage(
        'https://uploads-ssl.webflow.com/608a258a8995993724a25f22/60ca0a61503cfebd3104538b_WavePattern.png',
        function (err, image) {
            if(err) throw err;

            map.addImage('WavePattern', image);

            map.setPaintProperty(polygonLayer, 'fill-pattern', 'WavePattern')
        }
    )
}


const transportationColorButton = document.getElementById("transportation_Picker");
let transportationPicker = new ColorPicker(transportationColorButton, transportationColor);


transportationColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newTransportationColor = event.detail.color.hsla;
    //console.log(newTransportationColor);

    // Change the color of the layer

    map.setPaintProperty("major-road", 'line-color', newTransportationColor);
    map.setPaintProperty("street", 'line-color', newTransportationColor);
    map.setPaintProperty("secondary-road", 'line-color', newTransportationColor);
    map.setPaintProperty("primary-road", 'line-color', newTransportationColor);
    //map.setPaintProperty("rail-rd", 'line-color', newTransportationColor);
    map.setPaintProperty("rail", 'line-color', newTransportationColor);

    //Update the color picker button color. Must use hex.
    colorPickerComp.colorChange(event.detail.color.hex, pathColorButton);
    colorPickerComp.colorChange(event.detail.color.hex, streetColorButton);
    colorPickerComp.colorChange(event.detail.color.hex, majorroadColorButton);
    colorPickerComp.colorChange(event.detail.color.hex, secondaryroadColorButton);
    colorPickerComp.colorChange(event.detail.color.hex, primaryroadColorButton);
    colorPickerComp.colorChange(event.detail.color.hex, railColorButton);
});

const pathColorButton = document.getElementById("path_Picker");
let pathPicker = new ColorPicker(pathColorButton, pathColor);


pathColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newPathColor = event.detail.color.hsla;
    //console.log(newTransportationColor);
 
    // Change the color of the layer
    //map.setPaintProperty(transportationCheck.value, 'line-color', newTransportationColor);
    map.setPaintProperty("path", 'line-color', newPathColor);
});

const streetColorButton = document.getElementById("street_Picker");
let streetPicker = new ColorPicker(streetColorButton, streetColor);


streetColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newStreetColor = event.detail.color.hsla;
    //console.log(newTransportationColor);
 
    // Change the color of the layer
    //map.setPaintProperty(transportationCheck.value, 'line-color', newTransportationColor);
    map.setPaintProperty("street", 'line-color', newStreetColor);
});

const majorroadColorButton = document.getElementById("majorroad_Picker");
let majorroadPicker = new ColorPicker(majorroadColorButton, majorroadColor);


majorroadColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newMajorRoadColor = event.detail.color.hsla;
    //console.log(newTransportationColor);
 
    // Change the color of the layer
    //map.setPaintProperty(transportationCheck.value, 'line-color', newTransportationColor);
    map.setPaintProperty("major-road", 'line-color', newMajorRoadColor);
});

const secondaryroadColorButton = document.getElementById("secondaryroad_Picker");
let secondaryroadPicker = new ColorPicker(secondaryroadColorButton, secondaryroadColor);


secondaryroadColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newSecondaryRoadColor = event.detail.color.hsla;
    //console.log(newTransportationColor);
 
    // Change the color of the layer
    //map.setPaintProperty(transportationCheck.value, 'line-color', newTransportationColor);
    map.setPaintProperty("secondary-road", 'line-color', newSecondaryRoadColor);
});

const primaryroadColorButton = document.getElementById("primaryroad_Picker");
let primaryroadPicker = new ColorPicker(primaryroadColorButton, primaryroadColor);


primaryroadColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newPrimaryRoadColor = event.detail.color.hsla;
    //console.log(newTransportationColor);
 
    // Change the color of the layer
    //map.setPaintProperty(transportationCheck.value, 'line-color', newTransportationColor);
    map.setPaintProperty("primary-road", 'line-color', newPrimaryRoadColor);
});

const railColorButton = document.getElementById("rail_Picker");
let railPicker = new ColorPicker(railColorButton, railColor);


railColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newRailColor = event.detail.color.hsla;
    //console.log(newTransportationColor);
 
    // Change the color of the layer
    //map.setPaintProperty(transportationCheck.value, 'line-color', newTransportationColor);
    //map.setPaintProperty("rail-rd", 'line-color', newRailColor);
    map.setPaintProperty("rail", 'line-color', newRailColor);
});

const waterbodyColorButton = document.getElementById("waterbody_Picker");
let waterbodyPicker = new ColorPicker(waterbodyColorButton, waterColor);


waterbodyColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newWaterbodyColor = event.detail.color.hsla;

    // Change the color of the layer
    map.setPaintProperty("water", 'fill-opacity', 1);
    map.setPaintProperty("water", 'fill-color', newWaterbodyColor);
});

const waterwayColorButton = document.getElementById("waterway_Picker");
let waterwayPicker = new ColorPicker(waterwayColorButton,);


waterwayColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newWaterwayColor = event.detail.color.hsla;

    // Change the color of the layer
    map.setPaintProperty("waterway", 'line-color', newWaterwayColor);
});

const waterColorButton = document.getElementById("water_Picker");
let waterPicker = new ColorPicker(waterColorButton, waterColor);


waterColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newWaterColor = event.detail.color.hsla;

    // Change the color of the layer
    map.setPaintProperty("water", 'fill-opacity', 1);
    map.setPaintProperty("water", 'fill-color', newWaterColor);
    map.setPaintProperty("waterway", 'line-color', newWaterColor);

    //Update the color picker button color. Must use hex.
    colorPickerComp.colorChange(event.detail.color.hex, waterbodyColorButton);
    colorPickerComp.colorChange(event.detail.color.hex, waterwayColorButton);
});

const landuseColorButton = document.getElementById("landuse_Picker");
let landusePicker = new ColorPicker(landuseColorButton, landuseColor);


landuseColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newLanduseColor = event.detail.color.hsla;

    // Change the color of the layer
    map.setPaintProperty("landuse", 'fill-opacity', 1);
    map.setPaintProperty("landuse", 'fill-color', newLanduseColor);
    map.setPaintProperty("national-park", 'fill-color', newLanduseColor);
    map.setPaintProperty("landcover", 'fill-color', newLanduseColor);
    
    //Update the color picker button color. Must use hex.
    colorPickerComp.colorChange(event.detail.color.hex, nationalparkColorButton);

});

const nationalparkColorButton = document.getElementById("nationalpark_Picker");
let nationalparkPicker = new ColorPicker(nationalparkColorButton, landuseColor);


nationalparkColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newNationalParkColor = event.detail.color.hsla;

    // Change the color of the layer
    
    map.setPaintProperty("national-park", 'fill-color', newNationalParkColor);
    
});

const landColorButton = document.getElementById("land_Picker");
let landPicker = new ColorPicker(landColorButton, landColor);


landColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newLandColor = event.detail.color.hsla;
    console.log(newLandColor);

    // Change the color of the layer
    map.setPaintProperty("land", 'background-color', newLandColor);
});

const buildingColorButton = document.getElementById("building_Picker");
let buildingPicker = new ColorPicker(buildingColorButton, buildingColor);


buildingColorButton.addEventListener("colorChange", function (event) {

    // This will give you the color you selected
    const newBuildingColor = event.detail.color.hsla;

    // Change the color of the layer
    map.setPaintProperty("building-custom", 'fill-opacity', 1);
    map.setPaintProperty("building-custom", 'fill-color', newBuildingColor);
});

//Layer visibility checkbox

checkbox = '';

if (checkbox){

    checkbox.addEventListener ("CheckboxStateChange", OnChangeCheckbox, false);
}

function OnChangeCheckbox (checkbox) {
    if (checkbox.checked) {
        console.log ('The check box is checked.');
        map.setLayoutProperty(checkbox.value, 'visibility', 'visible');
        //layerColor = map.getPaintProperty(checkbox.value, "line-color");
        //console.log(layerColor);
        if(checkbox.value == "water"){
            map.setLayoutProperty("waterway", 'visibility', 'visible')
        }
        else if(checkbox.value == "street"){
            map.setLayoutProperty("path", 'visibility', 'visible');
            map.setLayoutProperty("major-road", 'visibility', 'visible');
            //map.setLayoutProperty("street", 'visibility', 'visible');
            map.setLayoutProperty("secondary-road", 'visibility', 'visible');
            map.setLayoutProperty("primary-road", 'visibility', 'visible');
            map.setLayoutProperty("rail", 'visibility', 'visible');
            //map.setLayoutProperty("rail-rd", 'visibility', 'visible');
        }
    }
    else {
        console.log ('The check box is not checked.');
        map.setLayoutProperty(checkbox.value, 'visibility', 'none');
        if(checkbox.value == "street"){
            map.setLayoutProperty("path", 'visibility', 'none');
            map.setLayoutProperty("major-road", 'visibility', 'none');
            //map.setLayoutProperty("street", 'visibility', 'none');
            map.setLayoutProperty("secondary-road", 'visibility', 'none');
            map.setLayoutProperty("primary-road", 'visibility', 'none');
            map.setLayoutProperty("rail", 'visibility', 'none');
            //map.setLayoutProperty("rail-rd", 'visibility', 'none');
        }
        if(checkbox.value == "water"){
            map.setLayoutProperty("waterway", 'visibility', 'none')
        }
    }
}

//Print map

function toPixels(length) {
    'use strict';
    var unit = 'in';
    var conversionFactor = 96;
    if (unit == 'mm') {
        conversionFactor /= 25.4;
    }

    return conversionFactor * length + 'px';
}

document.getElementById('generate-btn').addEventListener('click', generateMap);

function generateMap() {
    'use strict';

    /*if (isError()) {
        openErrorModal('The current configuration is invalid! Please ' +
            'correct the errors and try again.');
        return;
    }*/

    //document.getElementById('spinner').style.display = 'inline-block';
    document.getElementById('generate-btn').classList.add('disabled');


    var frame = document.getElementById('map-frame');


    //var width = 24;
    //var height = 36;

    
    var width = frame.offsetWidth;
    var height = frame.offsetHeight;

    console.log('frame width: ' + width + ' frame height: ' + height);
    

    var dpi = 300;

    var format = 'png';

    var unit = 'in';

    var style = map.getStyle();
    /*if (style.indexOf('maptiler') >= 0)
        style += '?key=' + mapTilerAccessToken;*/

    //var zoom = map.getZoom()+2.05;
    var zoom = map.getZoom();
    var center = map.getCenter();
    var bearing = map.getBearing();
    var pitch = map.getPitch();

    createPrintMap(width, height, dpi, format, unit, zoom, center,
        bearing, style, pitch);
}

function createPrintMap(width, height, dpi, format, unit, zoom, center,
    bearing, style, pitch) {
    'use strict';

    // Calculate pixel ratio
    var actualPixelRatio = window.devicePixelRatio;
    Object.defineProperty(window, 'devicePixelRatio', {
        get: function() {return dpi / 96}
    });

    // Create map container
    var hidden = document.createElement('div');
    hidden.className = 'hidden-map';
    document.body.appendChild(hidden);
    var container = document.createElement('div');
    //var container = document.getElementById('map-frame');
    //var container = frame;
    //container.style.width = toPixels(width);
    //container.style.height = toPixels(height);
    container.style.width = width + 'px';
    container.style.height = height + 'px';
    hidden.appendChild(container);
    console.log('width: ' + container.style.width + ' height: ' + container.style.height);

    // Render map
    var renderMap = new mapboxgl.Map({
        container: container,
        center: center,
        zoom: zoom,
        style: style,
        bearing: bearing,
        pitch: pitch,
        interactive: false,
        preserveDrawingBuffer: true,
        fadeDuration: 0,
        attributionControl: false
    });
    renderMap.once('idle', function() {
        if (format == 'png') {
            renderMap.getCanvas().toBlob(function(blob) {
                saveAs(blob, 'map.png');
            });
        } else {
            var pdf = new jsPDF({
                orientation: width > height ? 'l' : 'p',
                unit: unit,
                format: [width, height],
                compress: true
            });

            pdf.addImage(renderMap.getCanvas().toDataURL('image/png'),
                'png', 0, 0, width, height, null, 'FAST');

            var title = map.getStyle().name,
                subject = "center: [" + form.lonInput.value  + ", " + form.latInput.value + ", " + form.zoomInput.value + "]",
                attribution = '(c) ' +
                    (form.styleSelect.value.indexOf('mapbox') >= 0 ? 'Mapbox' : 'OpenMapTiles') +
                    ', (c) OpenStreetMap';

            pdf.setProperties({
                title: title,
                subject: subject,
                creator: 'Print Maps',
                author: attribution
            })

            pdf.save('map.pdf');
        }

        renderMap.remove();
        hidden.parentNode.removeChild(hidden);
        Object.defineProperty(window, 'devicePixelRatio', {
            get: function() {return actualPixelRatio}
        });
        //document.getElementById('spinner').style.display = 'none';
        document.getElementById('generate-btn').classList.remove('disabled');
    });
}