const subtitlePreview = document.querySelector('.subtitle-preview');
let subtitleElemOnPreview;
let selectedDirection = document.getElementById('subtitle-direction').selectedOptions[0].value;
let subtitleSpeed = document.getElementById('subtitle-speed').value;
let enteredText;


function subtitlePreviwUpdater() {

    let subtitleToAdd = `<marquee class="subTitle" scrollamount="${subtitleSpeed}" scrolldelay="10" loop="-1"
    truespeed="truespeed" direction="${selectedDirection}" id="" data-x="-2" data-y="160">
    <p>
    ${enteredText}
    </p>
    </marquee>`

    subtitlePreview.innerHTML = subtitleToAdd;
    subtitleElemOnPreview = subtitlePreview.children[0];
}


//Calling preview updater by user entered data
document.querySelector('.subtitle-preview-btn').addEventListener('click', function () {

    enteredText = CKEDITOR.instances.editor1.getData();
    subtitlePreviwUpdater();

})

//   Update the preview by direction changing
document.getElementById('subtitle-direction').addEventListener('change', function () {
    selectedDirection = document.getElementById('subtitle-direction').selectedOptions[0].value;
    subtitleElemOnPreview.setAttribute('direction', selectedDirection);
})

//   Update the preview by speed changing
document.getElementById('subtitle-speed').addEventListener('change', function () {
    subtitleSpeed = this.value;
    subtitleElemOnPreview.setAttribute('scrollamount', subtitleSpeed);
})

// add subtitle to page on btn click
$('.add-subtitle-btn').on('click', function () {
    subtitleElemOnPreview.innerHTML = enteredText
    subtitleElemOnPreview.setAttribute('class', 'resize-drag subTitle');
    subtitleElemOnPreview.style.transform = "translate(0, 90vh)";
    subtitleElemOnPreview.setAttribute('id', 'subtitlelayer');
    subtitleElemOnPreview.setAttribute('id', `layer${layerCounter}-subtitle`);


    screenArea.appendChild(subtitleElemOnPreview);
    resetSubtitle()

    layersCounterHandler('+');
})


// Reset variables and functions to create new layer
function resetSubtitle() {
    subtitlePreview.innerHTML = '';
}