function getStoryval(sel) {
    var styles = {
        '0': 'none',
        '1': 'style-one',
        '2': 'style-two',
        '3': 'style-three',
        '4': 'style-four',
        '5': 'style-five',
        '6': 'style-six',
        '7': 'style-seven',
        '8': 'style-eight',
        '9': 'style-nine'
    };

    var previewArea = sel.closest('.story-separator-settings').querySelector('.preview-area hr');
    previewArea.className = styles[sel.value] || '';
}

// Adds a toggle switch to the WordPress admin settings page.
document.addEventListener('DOMContentLoaded', function () {
    var toggles = document.querySelectorAll('.switch input[type="checkbox"]');

    toggles.forEach(function(checkbox) {
        var label = document.getElementById('label_' + checkbox.id);

        // Immediately update label based on the initial state
        label.textContent = checkbox.checked ? checkbox.getAttribute('data-true-label') : checkbox.getAttribute('data-false-label');

        // Add event listener to update label on change
        checkbox.addEventListener('change', function() {
            label.textContent = this.checked ? this.getAttribute('data-true-label') : this.getAttribute('data-false-label');
        });
    });
});

document.addEventListener('DOMContentLoaded', function () {
    const buttons = document.querySelectorAll('.button');
    let maxWidth = 0;

    // Calculate the maximum width
    buttons.forEach(button => {
        const width = button.offsetWidth;
        if (width > maxWidth) {
            maxWidth = width;
        }
    });

    // Set all buttons to the maximum width
    buttons.forEach(button => {
        button.style.width = maxWidth + 'px';
    });

    // Add click event to make the entire div clickable
    buttons.forEach(button => {
        button.addEventListener('click', function () {
            const radio = button.querySelector('input[type="radio"]');
            if (radio) {
                radio.checked = true;
            }
        });
    });
});
document.addEventListener('DOMContentLoaded', function() {
    var items = document.querySelectorAll('.item');
    
    items.forEach(function(item) {
        var buttonContainer = item.querySelector('.button-container');
        var paragraph = item.querySelector('p');
        
        if (paragraph.offsetHeight <= buttonContainer.offsetHeight) {
            paragraph.classList.add('short-description');
        } else {
            paragraph.classList.add('long-description');
        }
    });
});

// Lazy load images
document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('.lazyload');

    images.forEach(img => {
        const imgSrc = img.getAttribute('data-src');
        fetch(imgSrc)
            .then(response => {
                if (response.ok) {
                    img.setAttribute('src', imgSrc);
                    img.classList.remove('lazyload');
                } else {
                    console.error('Image not found:', imgSrc);
                    img.remove(); // Remove the image element if it's broken
                }
            })
            .catch(error => {
                console.error('Error fetching the image:', error);
                img.remove(); // Remove the image element if there's an error
            });
    });
});

/**
 * Adds a custom shortcode button to the WordPress editor.
 *
 * This function adds a custom shortcode button to the WordPress editor using the `QTags.addButton()` function.
 * The button is added if the "quicktags" script is loaded.
 * When the button is clicked, it inserts the "[dacdb_plus show='']" shortcode into the editor content.
 */

function waitForQTags() {
    if (window.QTags) {
        QTags.addButton("dacdb_shortcode", "DACdb", callback);
        function callback() {
            QTags.insertContent("[dacdb_plus show=\"\"]");
        }
    } else {
        setTimeout(waitForQTags, 50);
    }
}

waitForQTags();

// Remove slider functionality

// Toggle visibility for conditional fields
document.addEventListener('DOMContentLoaded', function() {
    // Handle member pictures toggle
    const memberPicsToggle = document.getElementById('member_pics');
    const thumbnailWidthInput = document.getElementById('thumbnail_width');
    
    if (memberPicsToggle && thumbnailWidthInput) {
        const thumbnailWidthRow = thumbnailWidthInput.closest('tr');
        memberPicsToggle.addEventListener('change', function() {
            thumbnailWidthRow.style.display = this.checked ? '' : 'none';
        });
        // Set initial state
        thumbnailWidthRow.style.display = memberPicsToggle.checked ? '' : 'none';
    }

    // Handle club name toggle
    const clubNameToggle = document.getElementById('member_club_pos');
    const clubNameInput = document.getElementById('member_show_club_name');
    
    if (clubNameToggle && clubNameInput) {
        const clubNameRow = clubNameInput.closest('tr');
        const includeSatelliteToggle = document.getElementById('include_satellite');
        
        if (includeSatelliteToggle) {
            const clubNameRow = clubNameInput.closest('tr');
            includeSatelliteToggle.addEventListener('change', function() {
                clubNameRow.style.display = this.checked ? '' : 'none';
            });
            // Set initial state
            clubNameRow.style.display = includeSatelliteToggle.checked ? '' : 'none';
        }
    }

    // Handle members since toggle
    const membersSinceToggle = document.getElementById('members_since');
    const membersSinceFormatSelect = document.getElementById('members_since_format');
    
    if (membersSinceToggle && membersSinceFormatSelect) {
        const membersSinceFormatRow = membersSinceFormatSelect.closest('tr');
        membersSinceToggle.addEventListener('change', function() {
            membersSinceFormatRow.style.display = this.checked ? '' : 'none';
        });
        // Set initial state
        membersSinceFormatRow.style.display = membersSinceToggle.checked ? '' : 'none';
    }
});
