let tooltipThreshold = 16;
        let toolIconThreshold = 12;
        let tooltipSmall;
        let tooltipBig;
        let singletooltipopen = false;
        let addressReferrer = '';
        let home_id = '';
        
        let id = 0;
        const corner1 = [37.866964, -88.606680];
        const corner2 = [35.735020, -86.061297];
        const interestBox = new bootstrap.Modal(document.getElementById('interestBox'));
        const thankYouBox = new bootstrap.Modal(document.getElementById('thankyouBox'));
        /*
        const colors = ["#0af248","#058dfc","#8905fc","#f25cd7","#5ce8f2"]
        const transcolors = ["rgba(10,242,72,.25)", "rgba(5,141,252,0.25)", "rgba(137,5,252,0.25)"]
        */
        const colors = ["#8f8389","#e0a100","#00AFF5","#f25cd7","#5ce8f2"]
        const transcolors = ["rgba(143, 131, 137,.25)", "rgba(224, 161, 0,0.25)", "rgba(0, 175, 245,0.25)"]
        const apiKey = "AAPKf3b50bc234014cb6a6a75347af8db0d2LIJ5XSQAYjsxBuxdmWT74QSa-BJBv0YtkdbUHv_MAqpXUIuTSH5VW5fD1wWgEsKi";
        const basemapEnum = "ArcGIS:LightGray";
        const polygons = [];
        const layers = [];
        let markers = [];
        const map = L.map('map',{
            maxBounds: [corner1,corner2],
        }).setView([36.8656, -87.4886],11);
        function init_map(map) {
            
            map.createPane('pane0');
            map.getPane('pane0').style.zIndex = 1100;
            map.getPane('pane0').style.pointerEvents = 'none';

            map.createPane('pane1');
            map.getPane('pane1').style.zIndex = 1101;
            map.getPane('pane1').style.pointerEvents = 'none';

            map.createPane('pane2');
            map.getPane('pane2').style.zIndex = 1102;
            map.getPane('pane2').style.pointerEvents = 'none';

            map.createPane('mkPane');
            map.getPane('mkPane').style.zIndex = 1103;
            map.getPane('mkPane').style.pointerEvents = 'none';

            map.createPane('ttPane');
            map.getPane('ttPane').style.zIndex = 1104;
            map.getPane('ttPane').style.pointerEvents = 'none';

            map.options.minZoom = 11;
            map.options.maxZoom = 16;
            
            L.esri.Vector.vectorBasemapLayer(basemapEnum, {
                apiKey: apiKey,
            }).addTo(map);
            
            fetch("https://goenergynet.com" + "/home/mapAreas/0")
            .then(function(response) {
                return response.json();
            }).then(function(data0) {
                renderGeoJson(data0, "pane0");
            }).catch(error => { console.log(error)});
            
            fetch("https://goenergynet.com" + "/home/mapAreas/1")
            .then(function(response) {
                return response.json();
            }).then(function(data1) {
                renderGeoJson(data1, "pane1");
            }).catch(error => {console.log(error)});

            fetch("https://goenergynet.com" + "/home/mapAreas/2")
            .then(function(response) {
                return response.json();
            }).then(function(data2) {
                renderGeoJson(data2, "pane2");
            }).catch(error => {console.log(error)});
            
            var legend = L.control({position: 'topright'});

            legend.onAdd = function (map) {
                let middlehtml = '';
                var div = L.DomUtil.create('div', 'info legend bg-white bg-gradient border border-info shadow rounded p-4'),
                
                    grades = ["Planning", "Under Construction", "Available"],
                    labels = ["https://goenergynet.com/images/planningMarker.png","https://goenergynet.com/images/constructionMarker.png", "https://goenergynet.com/images/completeMarker.png"];
                    
                if(!L.Browser.mobile){
                    for (var i = 0; i < grades.length; i++) {
                        middlehtml +=
                            "<tr><td class='text-end' style='height:30px;'><span class='rounded p-1' style='border: 1px solid " + colors[i] + "; background-color: " + transcolors[i] + " ;'>" + grades[i] + "</span></td></tr>";
                    }
                    div.innerHTML += "<h6>Legend</h6><table style='width:100%;'>" + middlehtml + "</table><p class='pt-2 mb-0'><strong>Click an area on the map<br />for additional information.</strong></p>";
                    return div;
                } else {
                    for (var i = 0; i < grades.length; i++) {
                        middlehtml +=
                            "<span class='rounded p-1 me-2' style='border: 1px solid " + colors[i] + "; background-color: " + transcolors[i] + " ;'>" + grades[i] + "</span>";
                    }
                    div.innerHTML += "<h6>Legend</h6>" + middlehtml + "<p class='pt-2 pb-0 mb-0'><strong>Click an area on the map for additional information.</strong></p>";
                    return div;
                } 
            };

            legend.addTo(map);
            handleReferrerAndSearch();
            
            
        }

        (function() {
            init_map(map);
        })();
        function renderGeoJson(data, pane) {
            let geo = new L.GeoJSON(data, {
                    style: function(feature) {
                        return {
                            color: colors[feature.properties.ready],
                            weight: 2,
                            opacity: 1,
                            clickable: false
                        };
                    },
                    onEachFeature: function (feature, layer) {
                        let currentZoom = map.getZoom();
                        let readydate = luxon.DateTime.fromISO(feature.properties.ready_date).toLocaleString({ month: 'long', year: 'numeric'})
                        let icon
                        let marker
                        let text = 'Construction'
                        polygons.push(feature)
                        layer.id = id;
                        let thislayer = { id: id, layer: layer};
                        layers.push(thislayer)
                        switch(feature.properties.ready){
                            case 0: 
                                icon='planningIcon.png'
                                marker='planningMarker.png'
                                text='<div class="card-text text-small p-1"><center><span class="fw-bold p-1 text-center">Planning Phase</span></center>' +
                                    'Construction expected to begin: <br /><center><strong>' + readydate + '</strong></center></div>';
                            break;

                            case 1:
                                icon='constructionIcon.png'
                                marker='constructionMarker.png'
                                text='<div class="card-text text-small p-1"><center><span class="fw-bold p-1 text-center">Construction Phase</span></center>' +
                                    'Early Signup Available.<br /><strong>Enter your address above!</strong><br />Est. <strong>' + readydate + '</strong></div>';
                                    //<center><strong>' + readydate + '</strong></center> 
                            break;

                            case 2:
                                icon='completeIcon.png'
                                marker='completeMarker.png'
                                text='<div class="card-text text-small p-1" style="width:180px;"><center><span class="fw-bold p-1 text-center">Available Today!</span></center>' +
                                    '<center><strong>Enter your address to<br />Sign up now!</strong></center></div>';
                            break;

                            case 999:
                                marker=''
                                text=''
                            break;
                        }

                        let html = '<div id="" class="tt-big-' + feature.properties.id + ' container bg-white bg-gradient border border-info shadow rounded-pill p-1" ' + tooltipBig + '>' +
                                        '<p style="display:block;"><center>' +
                                                    text +
                                        '</center></p>' +
                                    '</div>'
                        layer.bindTooltip(html, {interactive: false,opacity: .9, direction: 'center', pane: 'ttPane', className: 'project-area-callout tt-big-' + feature.properties.id + '',offset:[0, -45] })
                        layer.on('click', function(event) {
                            if(L.Browser.mobile) {
                                layers.forEach(function(thelayer){
                                    thelayer.layer.setStyle({
                                        fillOpacity: 0.2
                                    });
                                });
                                layer.setStyle({
                                    fillOpacity: 0.7
                                });
                            }
                            map.closeTooltip();
                            layer.openTooltip(event.latlng);
                        });
                        if(!L.Browser.mobile) {
                            layer.on('mouseover', function(event){
                           
                                map.closeTooltip();
                                layer.setStyle({
                                    fillOpacity: 0.7
                                });
                                layer.openTooltip(event.latlng);
                            });
                            layer.on('mousemove', function(event) {
                           
                                layer.openTooltip(event.latlng);
                            });
                            layer.on('mouseout', function(){
                           
                                map.closeTooltip();
                                layer.setStyle({
                                    fillOpacity: 0.2
                                });
                            });
                            }
                        id++;
                    },
                    pane: pane
                }).addTo(map);
                
        }
        function handleReferrerAndSearch() {
            
            if(addressReferrer !== "") {
                L.esri.Geocoding.geocode({apikey: apiKey}).text(addressReferrer).run(function (err, results, response) {
                if (err) {
                    console.log(err);
                    return;
                }
                const theData = {}
                theData.results = response.results;
                searchHandler(results, response);
                });
            }
        }

        async function searchHandler(data, results){
            const theLatLng = data.results[0].latlng;
            const address = data.results[0].text;
            const marker = L.marker(theLatLng).addTo(map);
            let point = turf.point([+theLatLng.lng, +theLatLng.lat]);
            let available = false;
            let signup = false;
            let early = false;
            let box = '#unavailableBox';
            let form = '#unavailableForm';
            let noform = false;
            let formurl = "";
            let clickedPolygon = "unavailable";
            let logSearch = await postDataAsJson({url:'https://goenergynet.com/addressForm', data: {address: address}})
            for(let j = 0; j < polygons.length; j++){
                let poly = turf.polygon(polygons[j].geometry.coordinates)
                if(turf.booleanPointInPolygon(point, poly)) {
                    switch(polygons[j].properties.ready) {
                        case 0:
                            clickedPolygon = polygons[j].properties.name;
                            box = '#planningBox';
                            form = '#planningForm';
                            available = true;
                            formurl = 'contactForm';
                        break;
                        case 1:
                            clickedPolygon = polygons[j].properties.name;
                            box = '#constructionBox';
                            form = '#constructionForm';
                            available = true;
                            signup = true;
                            early = true;
                            formurl = 'signupForm';
                        break;
                        case 2:
                            clickedPolygon = polygons[j].properties.name;
                            box = '#availableBox';
                            form = '#availableForm';
                            available = true;
                            signup = true;
                            formurl = 'signupForm';
                        break;
                    } 
                } else {
                    if(formurl == '') {
                        formurl = 'contactForm';
                    }
                }
            }
            
            fetch('https://goenergynet.com' + '/home/' + formurl + '/' + early + '/' + home_id)
            .then(function(response) {
                return response.text();
            }).then(function(data) {
                if(!noform) {
                    const modalContentForm = document.querySelector(form);
                    modalContentForm.innerHTML = data;
                    document.querySelector('#address').value = address;
                    document.querySelector('#address').readOnly = true;
                    document.querySelector('#clickedArea').value = clickedPolygon;
                    document.querySelector('#signup').value = signup;
                    document.querySelector('#early').value = early;
                    const interestForm = document.getElementById("interestForm");
                    if(formurl == 'signupForm') {
                        interestForm.addEventListener("submit", handleSignUpFormSubmit);   
                    } else {
                        interestForm.addEventListener("submit", handleFormSubmit);   
                    }  
                }
                document.querySelector(box).style.display = "block";
                                                        
            }).then(function() {
                interestBox.toggle();
            });
                
            
        }
        async function postDataAsJson({ url, data }) {
            
            const formDataJsonString = JSON.stringify(data);

            const fetchOptions = {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Accept: "application/json",
                },
                body: formDataJsonString,
            };
            const response = await fetch(url, fetchOptions);
            
            if (!response.ok) {
                const errorMessage = await response.text();
                throw new Error(errorMessage);
            }

            return response.json();
        }
        async function postFormDataAsJson({ url, formData }) {
            const plainFormData = Object.fromEntries(formData.entries());
            const formDataJsonString = JSON.stringify(plainFormData);

            const fetchOptions = {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Accept: "application/json",
                },
                body: formDataJsonString,
            };

            const response = await fetch(url, fetchOptions);
            
            if (!response.ok) {
                const errorMessage = await response.text();
                throw new Error(errorMessage);
            }

            return response.json();
        }

        async function handleSignUpFormSubmit(event) {
            event.preventDefault();
            // disable the button so that it can't be clicked again
            const interestForm = document.getElementById("interestForm");
            // find the button in this form
            const button = interestForm.querySelector('button[type="submit"]');
            // disable the button
            button.disabled = true;
            document.querySelector('.interestAlert').style.display = "none";
            // document.getElementById('signupErrors').innerHTML = "";
            const address = document.getElementById('address').value;
            const form = event.currentTarget;
            const formData = new FormData(form);
            const plainFormData = Object.fromEntries(formData.entries());
            const formDataJsonString = JSON.stringify(plainFormData);
            
            if (typeof formDataJsonString !== 'undefined') {
                const addressArray = address.split(",")
                const streetAddress = addressArray[0];
                addressArray.splice(0, 1);
                const cityStateZip = addressArray.join(",");
                const form = event.currentTarget;
                if(typeof(plainFormData.home_id) !== 'undefined') {
                    if(plainFormData.home_id == "999999999") {
                        // let's submit the form to the /home/submitMissingAddress endpoint
                        fetch("https://goenergynet.com" + "/home/submitMissingAddress", {
                            method: "POST",
                            body: formDataJsonString,
                            headers: {
                                'Content-Type': 'application/json'
                            },
                        }).then(function(response) {
                            return response.json();
                        }).then(function(data) {
                            if(data.error) {
                                document.getElementById('signupErrors').innerHTML = data.error;
                                //enable the button
                                button.disabled = false;
                                return;
                            }
                            if(data.success) {
                                // close the modal
                                interestBox.toggle();
                                // open the thank you box
                                thankYouBox.show();
                                console.log('Closing becuase success!');
                            } 
                            
                        }).catch(error => { console.log(error)});
                    } else {
                        const mbmUrl = 'https://mybroadbandaccount.com/energynet/gateway/v1/entrance'
                        
                        const handoffData = {
                            "homeId": plainFormData.home_id,
                            "customer": {
                                "firstName": plainFormData.firstName,
                                "lastName": plainFormData.lastName,
                                "email": plainFormData.email,
                                "primaryPhoneNumber": plainFormData.primaryPhoneNumber,
                            }
                        }

                        // use fetch to post the json data to home/mbmRedirect
                        fetch("https://goenergynet.com" + "/home/mbmRedirect", {
                            method: "POST",
                            body: JSON.stringify(handoffData),
                            headers: {
                                'Content-Type': 'application/json'
                            },
                        }).then(function(response) {
                            return response.json();
                        }).then(function(data) {
                            
                            if(typeof(data.error) !== 'undefined') {
                                document.getElementById('signupErrors').innerHTML = data.error;

                                //enable the button
                                button.disabled = false;
                            } else {
                                // create a new form and submit it to the mbm url
                                const mbmForm = document.createElement('form');
                                mbmForm.setAttribute('id', 'mbmForm');
                                mbmForm.setAttribute('method', 'post');
                                mbmForm.setAttribute('action', mbmUrl);
                                mbmForm.setAttribute('target', '_blank');
                                
                                const mbmFormInput = document.createElement('input');
                                //iterate over the data object and create input elements
                                for (var key in data) {
                                    if (data.hasOwnProperty(key)) {
                                        const mbmFormInput = document.createElement('input');
                                        mbmFormInput.setAttribute('type', 'hidden');
                                        mbmFormInput.setAttribute('name', key);
                                        mbmFormInput.setAttribute('value', data[key]);
                                        mbmForm.appendChild(mbmFormInput);
                                    }
                                }
                                document.body.appendChild(mbmForm);
                                // if it is mobile, do other things
                                if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
                                    // set the form target to the current window
                                    mbmForm.setAttribute('target', '_self');
                                }   
                                mbmForm.submit();
                                
                                // close the modal
                                // determine if this is a mobile device
                                interestBox.toggle();
                            }
                        }).catch(error => { console.log(error)});
                    }
                } else {
                    const url = form.action + '&Customer_Service%20Address=' + encodeURIComponent(streetAddress) + '&Customer_City%20State%20Zip=' + encodeURIComponent(cityStateZip) + '&Customer_EarlySignup=' + encodeURIComponent(plainFormData.early);
                    
                    fetch("https://goenergynet.com" + "/home/clickedSignupDebug", {
                        method: "POST",
                        body: formDataJsonString,
                        headers: {
                            'Content-Type': 'application/json'
                        },
                    });
                    window.open(url);
                }
            } else {
                document.querySelector('.interestAlert').
                document.querySelector('.interestAlert').style.display = "block";
            }
        }

        async function handleFormSubmit(event) {
            event.preventDefault();
            document.querySelector('.interestAlert').style.display = "none";
            const form = event.currentTarget;
            const url = form.action;

            try {
                const formData = new FormData(form);
                const responseData = await postFormDataAsJson({ url, formData });

                if(responseData.success === true) {
                    interestBox.hide();
                    thankYouBox.show();
                }

            } catch (error) {
                document.querySelector('.interestAlert').style.display = "block";
                console.error(error);
            }
        }