// How often to query the server?
const REFRESH_INTERVAL_SEC = 60;

// Storage for the spot data that the server gives us.
var spots = []

// Dynamically add CSS code for the band toggle buttons to be in the appropriate colour.
// Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p".
function addBandToggleColourCSS(band_options) {
    var $style = $('<style>');
    band_options.forEach(o => {
        // CSS doesn't like IDs with decimal points in, so we need to replace that
        var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
        $style.append(`#filter-button-label-band-${cssFormattedBandName} { border-color: ${o['color']}; color: var(--bs-primary);}`);
        $style.append(`.btn-check:checked + #filter-button-label-band-${cssFormattedBandName} { background-color: ${o['color']}; color: ${o['contrast_color']};}`);
    });
    $('html > head').append($style);
}

// Generate bands filter card. This one is a special case.
function generateBandsMultiToggleFilterCard(band_options) {
    // Create a button for each option
    band_options.forEach(o => {
        // CSS doesn't like IDs with decimal points in, so we need to replace that in the same way as when we originally
        // queried the options endpoint and set our CSS.
        var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
        $("#band-options").append(`<input type="checkbox" class="btn-check filter-button-band storeable-checkbox" name="options" id="filter-button-band-${cssFormattedBandName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline" id="filter-button-label-band-${cssFormattedBandName}" for="filter-button-band-${cssFormattedBandName}">${o['name']}</label> `);
    });
    // Create All/None buttons
    $("#band-options").append(` <span style="display: inline-block"><button id="filter-button-band-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', true);">All</button>&nbsp;<button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button></span>`);
}

// Method called when any filter is changed to reload the spots and persist the filter settings.
function filtersUpdated() {
    loadSpots();
    saveSettings();
}