var eventsChartObj;
var eventsChartObjInternal;
var allEvents = [];
var perStateEvents = [];
var currentState = '';

///////////////////////////////////////////////////////

var stateDropdown = $('.featured-events__custom-select');
var goBackDrillUpBtn = $('#eventsmap-drillup');
var showEventsListPopupBtn = $('#eventsmap-show-events');

// Custom Dropdown option click listener
stateDropdown.find(".featured-events__custom-select__options span").click(function () {
    const selectedStateValue = $(this).attr('data-value');
    const selectedStateText = $(this).text();

    stateDropdown.find('.selected-option').text(selectedStateText);
    stateDropdown.find('.selected-option').attr('data-value', selectedStateValue);
    stateDropdown.find('.featured-events__custom-select__options span.active').removeClass('active');
    stateDropdown.find(".featured-events__custom-select__options").hide();
    $(this).addClass('active');

    mapSelectState(selectedStateValue);
    stateDropdown.click()
});

// Custom Dropdown toggle
stateDropdown.click(function() {
    stateDropdown.find(".featured-events__custom-select__options").toggle();
});

// Go Back to US Map button click
goBackDrillUpBtn.hide().on('click', function(){
    // Load the US Map
    eventsChartObj = Highcharts.mapChart('events-map-chart', eventsChartObjInternal);
    currentState = '';

    initBackToUSMap();
});


function initBackToUSMap() {
    $('#events-map-chart').removeClass('zoomed');
    stateDropdown.show();
    goBackDrillUpBtn.hide();
    showEventsListPopupBtn.hide();
    $('.highcharts-data-label').show();
    showStatePopup('');
}

function initStateZoom() {
    stateDropdown.hide();
    goBackDrillUpBtn.show();
    showEventsListPopupBtn.show();
    $('.highcharts-map-view').hide();
    $('.highcharts-data-label').hide();
}

///////////////////////////////////////////////////////

// Window resize
$(window).resize(function () {
    adjustPopupPosition();
    setAlaskaAndHawaiiSVGPosition();
});

///////////////////////////////////////////////////////
let USMapStates = [
    {"hc-key": "us-al", "value": 0, "eventsCount": 0, "defaultLat": "32.3770", "defaultLong": "-86.3000"}, // Alabama
    {"hc-key": "us-ak", "value": 0, "eventsCount": 0, "defaultLat": "58.3019", "defaultLong": "-134.4197"}, // Alaska
    {"hc-key": "us-az", "value": 0, "eventsCount": 0, "defaultLat": "33.4484", "defaultLong": "-112.0740"}, // Arizona
    {"hc-key": "us-ar", "value": 0, "eventsCount": 0, "defaultLat": "34.7465", "defaultLong": "-92.2896"}, // Arkansas
    {"hc-key": "us-ca", "value": 0, "eventsCount": 0, "defaultLat": "38.5767", "defaultLong": "-121.4944"}, // California
    {"hc-key": "us-co", "value": 0, "eventsCount": 0, "defaultLat": "39.7392", "defaultLong": "-104.9903"}, // Colorado
    {"hc-key": "us-ct", "value": 0, "eventsCount": 0, "defaultLat": "41.7640", "defaultLong": "-72.6825"}, // Connecticut
    {"hc-key": "us-de", "value": 0, "eventsCount": 0, "defaultLat": "38.9108", "defaultLong": "-75.5277"}, // Delaware
    {"hc-key": "us-fl", "value": 0, "eventsCount": 0, "defaultLat": "30.4383", "defaultLong": "-84.2807"}, // Florida
    {"hc-key": "us-ga", "value": 0, "eventsCount": 0, "defaultLat": "33.7490", "defaultLong": "-84.3880"}, // Georgia
    {"hc-key": "us-hi", "value": 0, "eventsCount": 0, "defaultLat": "21.3070", "defaultLong": "-157.8580"}, // Hawaii
    {"hc-key": "us-id", "value": 0, "eventsCount": 0, "defaultLat": "43.6178", "defaultLong": "-116.1996"}, // Idaho
    {"hc-key": "us-il", "value": 0, "eventsCount": 0, "defaultLat": "39.7983", "defaultLong": "-89.6544"}, // Illinois
    {"hc-key": "us-in", "value": 0, "eventsCount": 0, "defaultLat": "39.7684", "defaultLong": "-86.1581"}, // Indiana
    {"hc-key": "us-ia", "value": 0, "eventsCount": 0, "defaultLat": "41.5868", "defaultLong": "-93.6250"}, // Iowa
    {"hc-key": "us-ks", "value": 0, "eventsCount": 0, "defaultLat": "39.0473", "defaultLong": "-95.6752"}, // Kansas
    {"hc-key": "us-ky", "value": 0, "eventsCount": 0, "defaultLat": "38.1867", "defaultLong": "-84.8754"}, // Kentucky
    {"hc-key": "us-la", "value": 0, "eventsCount": 0, "defaultLat": "30.4515", "defaultLong": "-91.1871"}, // Louisiana
    {"hc-key": "us-me", "value": 0, "eventsCount": 0, "defaultLat": "44.3071", "defaultLong": "-69.7817"}, // Maine
    {"hc-key": "us-md", "value": 0, "eventsCount": 0, "defaultLat": "38.9784", "defaultLong": "-76.4922"}, // Maryland
    {"hc-key": "us-ma", "value": 0, "eventsCount": 0, "defaultLat": "42.3601", "defaultLong": "-71.0589"}, // Massachusetts
    {"hc-key": "us-mi", "value": 0, "eventsCount": 0, "defaultLat": "42.7335", "defaultLong": "-84.5555"}, // Michigan
    {"hc-key": "us-mn", "value": 0, "eventsCount": 0, "defaultLat": "44.9553", "defaultLong": "-93.1022"}, // Minnesota
    {"hc-key": "us-ms", "value": 0, "eventsCount": 0, "defaultLat": "32.2988", "defaultLong": "-90.1848"}, // Mississippi
    {"hc-key": "us-mo", "value": 0, "eventsCount": 0, "defaultLat": "38.5767", "defaultLong": "-92.1735"}, // Missouri
    {"hc-key": "us-mt", "value": 0, "eventsCount": 0, "defaultLat": "46.5891", "defaultLong": "-112.0391"}, // Montana
    {"hc-key": "us-ne", "value": 0, "eventsCount": 0, "defaultLat": "40.8081", "defaultLong": "-96.6996"}, // Nebraska
    {"hc-key": "us-nv", "value": 0, "eventsCount": 0, "defaultLat": "39.1638", "defaultLong": "-119.7674"}, // Nevada
    {"hc-key": "us-nh", "value": 0, "eventsCount": 0, "defaultLat": "43.2069", "defaultLong": "-71.5376"}, // New Hampshire
    {"hc-key": "us-nj", "value": 0, "eventsCount": 0, "defaultLat": "40.2206", "defaultLong": "-74.7699"}, // New Jersey
    {"hc-key": "us-nm", "value": 0, "eventsCount": 0, "defaultLat": "35.6870", "defaultLong": "-105.9378"}, // New Mexico
    {"hc-key": "us-ny", "value": 0, "eventsCount": 0, "defaultLat": "42.6526", "defaultLong": "-73.7562"}, // New York
    {"hc-key": "us-nc", "value": 0, "eventsCount": 0, "defaultLat": "35.7796", "defaultLong": "-78.6382"}, // North Carolina
    {"hc-key": "us-nd", "value": 0, "eventsCount": 0, "defaultLat": "46.8083", "defaultLong": "-100.7837"}, // North Dakota
    {"hc-key": "us-oh", "value": 0, "eventsCount": 0, "defaultLat": "39.9612", "defaultLong": "-82.9988"}, // Ohio
    {"hc-key": "us-ok", "value": 0, "eventsCount": 0, "defaultLat": "35.4676", "defaultLong": "-97.5164"}, // Oklahoma
    {"hc-key": "us-or", "value": 0, "eventsCount": 0, "defaultLat": "44.9429", "defaultLong": "-123.0351"}, // Oregon
    {"hc-key": "us-pa", "value": 0, "eventsCount": 0, "defaultLat": "40.2737", "defaultLong": "-76.8844"}, // Pennsylvania
    {"hc-key": "us-ri", "value": 0, "eventsCount": 0, "defaultLat": "41.8270", "defaultLong": "-71.4128"}, // Rhode Island
    {"hc-key": "us-sc", "value": 0, "eventsCount": 0, "defaultLat": "34.0007", "defaultLong": "-81.0348"}, // South Carolina
    {"hc-key": "us-sd", "value": 0, "eventsCount": 0, "defaultLat": "44.3683", "defaultLong": "-100.3510"}, // South Dakota
    {"hc-key": "us-tn", "value": 0, "eventsCount": 0, "defaultLat": "36.1627", "defaultLong": "-86.7816"}, // Tennessee
    {"hc-key": "us-tx", "value": 0, "eventsCount": 0, "defaultLat": "30.2672", "defaultLong": "-97.7431"}, // Texas
    {"hc-key": "us-ut", "value": 0, "eventsCount": 0, "defaultLat": "40.7608", "defaultLong": "-111.8910"}, // Utah
    {"hc-key": "us-vt", "value": 0, "eventsCount": 0, "defaultLat": "44.2624", "defaultLong": "-72.5805"}, // Vermont
    {"hc-key": "us-va", "value": 0, "eventsCount": 0, "defaultLat": "37.5407", "defaultLong": "-77.4360"}, // Virginia
    {"hc-key": "us-wa", "value": 0, "eventsCount": 0, "defaultLat": "47.0379", "defaultLong": "-122.9007"}, // Washington
    {"hc-key": "us-wv", "value": 0, "eventsCount": 0, "defaultLat": "38.3498", "defaultLong": "-81.6326"}, // West Virginia
    {"hc-key": "us-wi", "value": 0, "eventsCount": 0, "defaultLat": "43.0731", "defaultLong": "-89.4012"}, // Wisconsin
    {"hc-key": "us-wy", "value": 0, "eventsCount": 0, "defaultLat": "41.1398", "defaultLong": "-104.8202"}  // Wyoming
  ];
let statesCodeNames = [{ code: "al", name: "Alabama" },{ code: "ak", name: "Alaska" },{ code: "az", name: "Arizona" },{ code: "ar", name: "Arkansas" },{ code: "ca", name: "California" },{ code: "co", name: "Colorado" },{ code: "ct", name: "Connecticut" },{ code: "de", name: "Delaware" },{ code: "fl", name: "Florida" },{ code: "ga", name: "Georgia" },{ code: "hi", name: "Hawaii" },{ code: "id", name: "Idaho" },{ code: "il", name: "Illinois" },{ code: "in", name: "Indiana" },{ code: "ia", name: "Iowa" },{ code: "ks", name: "Kansas" },{ code: "ky", name: "Kentucky" },{ code: "la", name: "Louisiana" },{ code: "me", name: "Maine" },{ code: "md", name: "Maryland" },{ code: "ma", name: "Massachusetts" },{ code: "mi", name: "Michigan" },{ code: "mn", name: "Minnesota" },{ code: "ms", name: "Mississippi" },{ code: "mo", name: "Missouri" },{ code: "mt", name: "Montana" },{ code: "ne", name: "Nebraska" },{ code: "nv", name: "Nevada" },{ code: "nh", name: "New Hampshire" },{ code: "nj", name: "New Jersey" },{ code: "nm", name: "New Mexico" },{ code: "ny", name: "New York" },{ code: "nc", name: "North Carolina" },{ code: "nd", name: "North Dakota" },{ code: "oh", name: "Ohio" },{ code: "ok", name: "Oklahoma" },{ code: "or", name: "Oregon" },{ code: "pa", name: "Pennsylvania" },{ code: "ri", name: "Rhode Island" },{ code: "sc", name: "South Carolina" },{ code: "sd", name: "South Dakota" },{ code: "tn", name: "Tennessee" },{ code: "tx", name: "Texas" },{ code: "ut", name: "Utah" },{ code: "vt", name: "Vermont" },{ code: "va", name: "Virginia" },{ code: "wa", name: "Washington" },{ code: "wv", name: "West Virginia" },{ code: "wi", name: "Wisconsin" },{ code: "wy", name: "Wyoming" }];

///////////////////////////////////////////////////////

function mapSelectState(stateKey) {
    // find the right series
    const series = eventsChartObj.get('map-series');
    
    const point = series.points.find(x => x.drilldown == 'us-'+stateKey);

    if (point) {
      point.doDrilldown(false);
    }
}

///////////////////////////////////////////////////////

function chartLoadingTimeout(chart, pointName) {
    let fail = setTimeout(() => {
        if (!Highcharts.maps[mapKey]) {
            chart.showLoading(`
                <i class="icon-frown"></i>
                Failed loading ${pointName}
            `);
            fail = setTimeout(() => {
                chart.hideLoading();
            }, 2500);
        }
    }, 3000);

    // Show the Font Awesome spinner
    chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>');

    return fail;
}

async function loadStateMap (chart, mapKey, e, stateCode) {
    // Load the drilldown map
    const topology = await fetch(
        `https://code.highcharts.com/mapdata/${mapKey}.topo.json`
    ).then(response => response.json());

    // Get State Data
    const data = Highcharts.geojson(topology);

    // Get State Events
    let stateEvents = allEvents.filter(x => x.stateCode == stateCode);
    const mapEvents = stateEvents
        .filter(x => x.lat)
        .map(x => {
            const { eventName, ...rest } = x;
            return {
                name: eventName,
                ...rest
            };
        });

    // Add state drilldown series
    chart.addSeriesAsDrilldown(e.point, {
        name: e.point.name,
        data,
        enableMouseTracking: false,
        dataLabels: {
            enabled: false,
            format: '{point.name}'
        },
    });
    
    // Zoom in on the state
    chart.applyDrilldown({
        animation: {
            duration: 800,
            easing: 'easeOutQuad'
        }
    });

    // Add state event points series
    chart.addSingleSeriesAsDrilldown(e.point, {
        name: 'Events',
        color: 'rgb(124, 181, 236)',
        type: 'mappoint',
        enableMouseTracking: false,
        data: mapEvents,
    });

    return mapEvents;
}

// Set the markers infront of the focused state
function setMarkersInfront() {
    const markers = $('.highcharts-markers.highcharts-mappoint-series')[0];
    const markersParent = $('.highcharts-markers.highcharts-mappoint-series').parent()[0];
    $('.highcharts-markers.highcharts-mappoint-series')[0].remove();
    markersParent.append(markers);
}

// Add click listeners to event points
function setEventClickListeners(eventSeries) {
    const $markerPopup = $('#marker-popup');
    const $popup = $("#popup");
    const $eventsMapChart = $("#events-map-chart");

    eventSeries.points.forEach(point => {
        const $markerElement = $(point.graphic.element);

        // Hover event
        $markerElement.hover(
            () => {
                if (!$("#popup").is(':visible')) {
                    $markerPopup.find('p').text(point.options.name).end().show();
                }
            },
            () => $markerPopup.hide()
        );

        // Mouse move event
        $markerElement.mousemove(e => {
            const popupHeight = $markerPopup.outerHeight();
            const popupWidth = $markerPopup.outerWidth();
            const viewportWidth = $(window).width();

            let leftPos = e.pageX - popupWidth / 2;
            let topPos = e.pageY - popupHeight - 20;

            leftPos = Math.min(Math.max(leftPos, 10), viewportWidth - popupWidth - 10);
            if (topPos < 10) {
                topPos = e.pageY + 20;
            }

            $markerPopup.css({ left: leftPos, top: topPos });
        });

        // Click event
        $markerElement.click(() => {
            const offset = $eventsMapChart.offset();
            const height = $eventsMapChart.outerHeight();
            const popupHeight = $popup.outerHeight();
            const popupHeightValue = popupHeight > height ? height : "unset";

            // Hide the event marker popup
            $markerPopup.hide()

            // Reset all event markers to blue colors
            $('.highcharts-markers.highcharts-mappoint-series > path').attr('fill', '#213875');

            // Set the clicked event to be red
            $($markerElement).attr('fill', '#dc2633');

            const { name, cityState, date, time, timezone, venue, description, url } = point.options;
            const timezoneHTML = timezone ? `<p class="event__time">${timezone}</p>` : '';
            const descriptionHTML = description ? `<p class="event__description">${description}</p>` : '';

            $popup.html(`
                <button class="event__close-btn">×</button>
                <h2 class="event__event">${name}</h2>
                <h4 class="event__city-state">${cityState}</h4>
                <p class="event__date">${date}</p>
                <p class="event__time">${time}</p>
                ${timezoneHTML}
                <p class="event__venue">${venue}</p>
                ${descriptionHTML}
                <a class="event__link" href="${url}" target="_blank">Get Tickets</a>
            `).css({
                display: "block",
                top: offset.top,
                left: offset.left,
                height: popupHeightValue,
            });

            adjustPopupPosition();
        });
    });
}

// Smooth Zoom of the svg viewbox
function smoothZoom(svgElement, targetViewBox, duration) {
    // Prevent updating the svg to move to the left on small desktop and mobile
    if ($(window).width() <= 1050) {
        return;
    }

    const startViewBox = svgElement.attr('viewBox').split(' ').map(Number);
    const startTime = performance.now();

    function animate(time) {
        const elapsed = time - startTime;
        const progress = Math.min(elapsed / duration, 1);

        const currentViewBox = startViewBox.map((start, i) =>
            start + (targetViewBox[i] - start) * progress
        );

        svgElement.attr('viewBox', currentViewBox.join(' '));

        if (progress < 1) {
            requestAnimationFrame(animate);
        }
    }

    requestAnimationFrame(animate);
}

// Process the event series
function processEventSeries(eventSeries, chart) {
    if (eventSeries) {
        setMarkersInfront();
        setEventClickListeners(eventSeries);
    }

    // Update the viewbox of the SVG to move to the left
    const svgElement = $('svg.highcharts-root');
    const svgViewBox = svgElement.attr('viewBox').split(' ');
    svgViewBox[2] = parseInt(svgViewBox[2]) + 300;
    const targetViewBox = svgViewBox.map(Number);

    smoothZoom(svgElement, targetViewBox, 250);

    // Hide loading
    chart.hideLoading();
}

const drilldown = async function (e) {
    initStateZoom();

    if (!e.seriesOptions) {
        const chart = this;
        const mapKey = `countries/us/${e.point.drilldown}-all`;
        const stateCode = e.point.drilldown.split('-')[1];
        currentState = e.point.name;

        // Handle error, the timeout is cleared on success
        let fail = chartLoadingTimeout(chart, e.point.name);

        // Show the state popup
        showStatePopup(stateCode);

        // Load the state map and state events
        const mapEvents = await loadStateMap(chart, mapKey, e, stateCode);

        // Ignore the chartLoadingTimeout if reached here
        clearTimeout(fail);

        if (mapEvents.length) {
            const checkEventSeries = () => {
                const eventSeries = chart.series.find(series => series.name === 'Events');
                if (eventSeries.data.length) {
                    clearInterval(intervalId);

                    setAlaskaAndHawaiiSVGPosition();
                    processEventSeries(eventSeries, chart);
                }
            };
        
            const intervalId = setInterval(checkEventSeries, 100);
        } else {
            processEventSeries(null, chart);

            setTimeout(() => {
                setAlaskaAndHawaiiSVGPosition();
            }, 1000);
        }
    }
};

function setAlaskaAndHawaiiSVGPosition() {
    // This should only be for Alaska and Hawaii
    if (currentState !== 'Alaska' && currentState !== 'Hawaii') {
        return;
    }

    let alaskaTranslateValue;
    let hawaiiTranslateValue;
    let finalTranslateValue;

    if (window.innerWidth > 1050) {
        alaskaTranslateValue = 'translate(604px, 1417px) scale(15, -15)';
        hawaiiTranslateValue = 'translate(582px, 1597px) scale(60, -60)';
    } else if (window.innerWidth > 768) {
        alaskaTranslateValue = `translate(${(window.innerWidth / 3) + 50}px, 997px) scale(10, -10)`;
        hawaiiTranslateValue = `translate(${window.innerWidth / 2}px, 1567px) scale(60, -60)`;
    } else if (window.innerWidth > 500) {
        alaskaTranslateValue = `translate(${(window.innerWidth / 3) + 50}px, 797px) scale(8, -8)`;
        hawaiiTranslateValue = `translate(${window.innerWidth / 2}px, 1140px) scale(40, -40)`;
    } else {
        alaskaTranslateValue = `translate(${(window.innerWidth / 3) + 50}px, 797px) scale(8, -8)`;
        hawaiiTranslateValue = `translate(${window.innerWidth / 2}px, 830px) scale(30, -30)`;
    }

    if (currentState === 'Alaska') {
        finalTranslateValue = alaskaTranslateValue;
    } else if (currentState === 'Hawaii') {
        finalTranslateValue = hawaiiTranslateValue;
    }

    const stateSVGPath = $('g.highcharts-map-series g').has('path');

    stateSVGPath.css({
        transform: finalTranslateValue,
    });
}

/////////////////////////////////////////////////////////////////////////

const showStatePopup = (selectedState) => {
    const $popup = $("#state-info-popup");

    // Hide the popup if no state is selected
    if (!selectedState) {
        $popup.hide();
        return;
    }

    // Find the active state and its name
    const activeState = perStateEvents.find(
        (state) => state[0].stateCode === selectedState
    );
    const stateNameObj = statesCodeNames.find(
        (codeName) => codeName.code === (activeState ? activeState[0].stateCode : selectedState)
    );
    const stateName = stateNameObj ? stateNameObj.name : '';

    // Generate the HTML for events
    const activeStateEventsHTML = activeState
        ? activeState.map(({ eventName, cityState, date, time, timezone, url }) => `
            <div class="state-info-popup__list-item">
              <h3>${eventName}</h3>
              <p>${cityState}</p>
              <p>${date} | ${time}</p>
              ${timezone ? `<p>${timezone}</p>` : ''}
              <a href="${url}" target="_blank">More Info</a>
            </div>
        `).join("")
        : `
            <div class="state-info-popup__list-item">
              <p>No events currently listed</p>
            </div>
        `;

    // Set popup content and show
    $popup.html(`
        <h2 class="state-info-popup__title">${stateName}</h2>
        <div class="state-info-popup__events-listing">
          ${activeStateEventsHTML}
        </div>
    `).show();

    adjustPopupPosition();
};

function adjustPopupPosition() {
    if ($("section.upcoming-events").length === 0) {
        return;
    }

    const popup = $("#popup");
    const stateInfoPopup = $("#state-info-popup");
    const $eventsMapChart = $("#events-map-chart");
    const offset = $eventsMapChart.offset();
    const height = $eventsMapChart.outerHeight();
    const popupHeightValue = {
        height: height,
    };

    popup.css({
        top: offset.top,
        left: offset.left,
        ...popupHeightValue,
    });

    stateInfoPopup.css({
        top: offset.top,
        right: offset.left,
    });
}

$(document).on("click", function (event) {
    const popup = $("#popup");
    const statePopup = $("#state-info-popup");
    const popupCloseButton = $(event.target).closest('.event__close-btn');
    const isClickInsidePopup = popup.has(event.target).length > 0;
    const isClickOnEventDot = $(event.target).hasClass("highcharts-point");
    const isClickOnSelect = $(event.target).closest(".featured-events__custom-select").length > 0;
    const isClickOnStatePopup = statePopup.has(event.target).length > 0;
    const isClickOnShowStatePopup = $(event.target).closest("#eventsmap-show-events").length > 0;

    if (
        !isClickInsidePopup &&
        !isClickOnEventDot &&
        !isClickOnSelect &&
        !isClickOnStatePopup &&
        !isClickOnShowStatePopup
    ) {
        popup.hide();

        // Reset all event markers to blue colors
        $('.highcharts-markers.highcharts-mappoint-series > path').attr('fill', '#213875');
    }

    if (popupCloseButton.length) {
        popup.hide();

        // Reset all event markers to blue colors
        $('.highcharts-markers.highcharts-mappoint-series > path').attr('fill', '#213875');
    }
});

////////////////////////////////////////////////////////////////////////////

(async () => {
    // Fetch events from multiple sources
    const fetchEvents = async (url) => {
        const response = await fetch(url);
        return response.json();
    };

    // Get all Events
    const [e1, e2, e3] = await Promise.all([
        fetchEvents('https://rne.campaignnucleus.com/feeds/events'),
        fetchEvents('https://rnp.campaignnucleus.com/feeds/events'),
        fetchEvents('https://djt.campaignnucleus.com/feeds/events'),
    ]);

    const convertDateTimeToTimezone = (dateString, timeZone, isDate = true) => {
        const options = isDate ? 
            { month: "long", day: "numeric", year: "numeric" } : 
            { hour: "2-digit", minute: "2-digit" };
        return new Date(dateString).toLocaleString("en-US", { ...options, timeZone });
    };

    // function randomizeLatLong(number, maxOffset) {
    //     let randomOffset = (Math.random() * 2 - 1) * maxOffset;
    //     return (number + randomOffset).toFixed(4);
    // }
    
    // Combine into 1 single array
    allEvents = [...e1.data, ...e2.data, ...e3.data].map(event => ({
        eventName: event.label,
        lat: parseFloat(event.location_lat),
        lon: parseFloat(event.location_long),
        url: event.url_public,
        cityState: `${event.location_city.toUpperCase()}, ${event.location_state.toUpperCase()}`,
        stateCode: event.location_state,
        date: convertDateTimeToTimezone(event.starts_at, event.timezone),
        time: convertDateTimeToTimezone(event.starts_at, event.timezone, false),
        timezone: event.timezone,
        venue: event.location_name,
        description: event.description,
        value: 1,
    }));

    let tfe = [];

    const controller = new AbortController();
    const timeoutId = setTimeout(() => {
        controller.abort();
        tfe = [];
        console.error('Failed to load events within 5 seconds');
    }, 5000);

    try {
        tfe = await fetch('https://app.trumpforce47.com/events-json', {
            signal: controller.signal
        }).then(response => response.json());
    } catch (error) {
        if (error.name === 'AbortError') {
            console.warn('Request was aborted due to timeout');
        } else {
            console.error('Failed to load events');
        }
    } finally {
        clearTimeout(timeoutId);
    }

    // current time
    const d = new Date();
    const utcDate = new Date(Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate(), d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds(), d.getUTCMilliseconds()));

    // Map the timezone property to corresponding UTC offsets
    const timezoneOffsets = {
        "Eastern": "-0500",
        "Central": "-0600",
        "Mountain": "-0700",
        "Pacific": "-0800",
        "Mountain/Pacific": "-0700",
        "Pacific/Mountain": "-0800",
        "Eastern/Central": "-0500",
        "Central/Mountain": "-0600",
        "": "-0800",
        null: "-0800"
    };

tfe = tfe.filter(function(evt) {
    const tz = timezoneOffsets[evt.timezone] || "0000"; // Default to UTC if timezone is not recognized
    return new Date(`${evt.start_date} ${evt.end_time} GMT${tz}`) > utcDate;
});

    tfe = tfe.filter(function(evt){
        return evt.event_type === 'Public';
    });

    // Push all event data to allEvents
    for (const evt of tfe) {
        const codeName = statesCodeNames.find(state => state.name === evt.states);
        const lat = evt.latitude ? evt.latitude.toFixed(4) : null;
        const lon = evt.longitude ? evt.longitude.toFixed(4) : null;
        const cityStateString = codeName ? (evt.county ? `${evt.county}, ${codeName.code.toUpperCase()}` : codeName.code.toUpperCase()) : evt.states;

        allEvents.push({
            eventName: evt.title,
            lat: parseFloat(lat),
            lon: parseFloat(lon),
            realLat: parseFloat(lat),
            realLon: parseFloat(lon),
            url: evt.event_url,
            cityState: cityStateString,
            stateCode: codeName?.code || null,
            date: evt.start_date,
            time: evt.start_time,
            timezone: evt.timezone,
            venue: evt.venue_name,
            description: evt.description,
            value: 1,
        });
    }

    const eventsByState = allEvents.reduce((acc, event) => {
        if (event.stateCode) {
            acc[event.stateCode] = acc[event.stateCode] || [];
            acc[event.stateCode].push(event);
        }
        return acc;
    }, {});

    perStateEvents = Object.values(eventsByState);

    // Grab main US map topo
    const topology = await fetch('https://code.highcharts.com/mapdata/countries/us/us-all.topo.json')
        .then(response => response.json());
    const data = Highcharts.geojson(topology);
    const mapView = topology.objects.default['hc-recommended-mapview'];

    // Set drilldown pointers
    data.forEach(d => {
        const state = d.properties['hc-key'].substring(3);
        d.drilldown = d.properties['hc-key'];
        d.value = eventsByState[state]?.length || 0;
    });

    // Instantiate the map
    window.eventsChartObjInternal = {
        chart: {
          events: {
                drilldown,
                load: function() {
                    const statesListSVGPath = $('.highcharts-point.highcharts-drilldown-point');
                    statesListSVGPath.on('click', function() {
                        $(this).css({ 'fill': '', 'stroke': '' }).attr('style', function(i, style) {
                            return style + 'fill: #dcddde !important; stroke: #dcddde !important;';
                        });
                    });
                },
                redraw: function() {
                    // Only adjust the viewbox when the chart is showing a state instead of the full US map
                    if ($('svg.highcharts-root').find('path.highcharts-drilldown-point').length === 0) {
                        const svgElement = $('svg.highcharts-root');
                        const svgViewBox = svgElement.attr('viewBox').split(' ');
                        svgViewBox[2] = parseInt(svgViewBox[2]) + 300;
                        const targetViewBox = svgViewBox.map(Number);

                        smoothZoom(svgElement, targetViewBox, 250);
                        adjustPopupPosition();
                    }
                }
          }
        },
        title: {
            text: ''
        },
        tooltip: {
            enabled: true,
            useHTML: true,
            pointFormatter: function () {
                const currentState = this?.properties?.['hc-key'];

                // Tooltip hover for individual events
                if (!currentState) {
                    const stateToolTip = `
                    <p class="custom-tooltip__event-name">${this.options.name}<p>
                    `;
        
                    return stateToolTip;
                }

                // Tooltip hover for states
                const stateFullName = this.name;
                const stateToolTip = `
                    <p class="custom-tooltip__state-name">${stateFullName}<p>
                    ${
                        this.value === 0
                        ? "No Events Currently Scheduled"
                        : `${this.value} events in the next month`
                    }
                `;
    
                return stateToolTip;
            },
        },
        navigation: {
            breadcrumbs: {
                useHTML: true,
                separator: {
                    text: ''
                },
                formatter: function() {return '<span></span>'}
            }
        },
        mapView,
        mapNavigation: {
            enabled: false,
            buttonOptions: {
                verticalAlign: 'bottom'
            },
            breadcrumbs: {
              useHTML: true,
              formatter: function() {return '<span></span>'}
            }
        },
        plotOptions: {
            map: {
                states: {
                    hover: {
                        color: '#EEDD66'
                    }
                }
            },
            mappoint: {
                marker: {
                    lineWidth: 1,
                    lineColor: '#000',
                    fillColor: '#213875',
                    symbol: 'mapmarker',
                    radius: 8
                },
                dataLabels: {
                    enabled: false
                }
            }
        },

        series: [{
            id: 'map-series',
            mapData: Highcharts.maps['countries/us/us-all'],
            borderColor: "#FFFFFF",
            color: "#dcddde",
            nullColor: "#dcddde",
            states: {
                hover: {
                    color: "#dc2633",
                },
            },
            data,
            name: 'USA',
            dataLabels: {
                enabled: true,
                allowOverlap: true,
                useHTML: true,
                formatter: function(){
                    let stateCode = this.point.properties['postal-code'].toLowerCase();

                    if (eventsByState[stateCode] && eventsByState[stateCode].length > 0) {
                        return `
                            <span class="group hover:w-[38px] hover:h-[38px] origin-center transition-all duration-300 flex items-center justify-center relative text-white font-bold text-uppercase text-[12px] w-[33px] h-[33px] rounded-full" style="background-color: #213875;">
                                <span class="group-hover:opacity-0 group-hover:w-[43px] group-hover:h-[43px] transition-all duration-300 w-[38px] h-[38px] border border-solid border-blue-500 rounded-full absolute left--[50%] top--[50%] translate--[50%]"></span>
                                <span class="group-hover:opacity-0 transition-all duration-300 w-[43px] h-[43px] group-hover:w-[48px] group-hover:h-[48px] border border-solid border-blue-500 rounded-full absolute left--[50%] top--[50%] translate--[50%]"></span>
                                ${eventsByState[stateCode].length}
                            </span>
                        `; 
                    }

                    return null;
                },
            },
            custom: {
                mapView
            }
        }],
        drilldown: {
            activeDataLabelStyle: {
                color: '#FFFFFF',
                textDecoration: 'none',
                textOutline: '1px #000000'
            },
            breadcrumbs: {
                floating: true
            },
            drillUpButton: {
                relativeTo: 'spacingBox',
                position: {
                    x: 0,
                    y: 60
                }
            }
        }
    };

    window.eventsChartObj = Highcharts.mapChart('events-map-chart', eventsChartObjInternal);
})();