<script>
function applyKaraokeEffect() {
    // Function to apply the effect to a list of elements
    const applyEffectToElements = (elements) => {
        elements.forEach(element => {
            // Clear existing spans to avoid duplication
            if (!element.classList.contains('karaoke-initialized')) {
                const text = element.innerText;
                element.innerHTML = ''; // Clear the element
                const words = text.split(/\s+/);

                words.forEach((word, index) => {
                    const span = document.createElement('span');
                    const isPunctuation = /[,.!?;]/.test(word.slice(-1));
                    const extraTime = isPunctuation ? 500 : 0;
                    span.textContent = word + (index < words.length - 1 ? ' ' : '');
                    span.dataset.duration = Math.max(300, word.length * 100) + extraTime;
                    element.appendChild(span);
                });

                element.classList.add('karaoke-initialized');

                let currentWord = 0;
                const highlightWord = () => {
                    if (currentWord < element.children.length) {
                        const span = element.children[currentWord];
                        span.classList.add('highlight');
                        setTimeout(() => {
                            span.classList.remove('highlight');
                            currentWord++;
                            highlightWord();
                        }, span.dataset.duration);
                    } else {
                        currentWord = 0; // Reset to start from the first word again
                        setTimeout(highlightWord, 1000); // Delay before starting the loop again
                    }
                };

                highlightWord();
            }
        });
    };

    // Target elements outside of the Froala Editor only
    const karaokeElementsOutsideEditor = document.querySelectorAll('.fnFrPclasskaraoke1:not(.fr-element .fnFrPclasskaraoke1)');
    applyEffectToElements(karaokeElementsOutsideEditor);
}

document.addEventListener('DOMContentLoaded', applyKaraokeEffect);

function onModalClose() {
    setTimeout(applyKaraokeEffect, 500); // Adjust the delay as needed
}

// Attach a single event listener to the document
// and check if the clicked element is a modal close button within a modal
document.addEventListener('click', function(event) {
    if (event.target.matches('.zb-modalClose') && event.target.closest('.zb-modalContent')) {
        onModalClose();
    }
});

</script>