let selectedDirection = document.getElementById('subtitle-direction').selectedOptions[0].value;
let subtitleEnteredText;
// const subtitleEnteredText = document.querySelector('#cke_1_contents p');
const subtitlePreview = document.querySelector('.subtitle-preview marquee');

// create subtitle layer
//   function createSubtitleLayer() {

// // var subTitleNodeEditor = document.createElement("div");
// // subTitleNodeEditor.setAttribute('id', "layer"+Mark+'-subTitle');
// var subTitleNode = document.createElement('marquee');
// subTitleNode.setAttribute('class', 'draggable resize subTitle');
// subTitleNode.setAttribute('scrollamount', '2');
// subTitleNode.setAttribute('scrolldelay', '20');
// subTitleNode.setAttribute('loop', '-1');
// subTitleNode.setAttribute('truespeed', 'truespeed');
// subTitleNode.setAttribute('direction', 'right');
// subTitleNode.setAttribute('id', "layer" + Mark + '-subTitle');

// var subTitleNodeEditor = document.createElement("div");
// subTitleNodeEditor.setAttribute('class', 'editable');

// var subTitleNodeText = document.createElement("p");
// subTitleNodeText.innerText = 'متن مورد نظر خو را برای قرار دادن به عنوان زیر نویس وارد کنید'
// subTitleNodeEditor.appendChild(subTitleNodeText)
// subTitleNode.appendChild(subTitleNodeEditor)

// Mark += 1;
// return subTitleNode
//   }





//   Update the preview function
function subtitlePreviwUpdater() {
    subtitlePreview.children[0].innerHTML = subtitleEnteredText

}

// //   Update the preview by text changing
// subtitleEnteredText.addEventListener('input', function () {
//     // console.log(subtitleEnteredText.value)
//     subtitlePreviwUpdater();
// })

// 
document.querySelector('.subtitle-preview-btn').addEventListener('click', function () {
    subtitleEnteredText = CKEDITOR.instances.editor1.getData();

    subtitlePreviwUpdater();
    // console.log('editor1',$('#editor1').val()) 
    //    console.log('CKEDITOR',subtitleEnteredText) 
})

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

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

// add subtitle to page on btn click
$('.add-subtitle-btn').on('click', function () {
    subtitlePreview.children[0].innerHTML = subtitleEnteredText
    subtitlePreview.setAttribute('class', 'resize-drag subTitle');
    subtitlePreview.style.transform = "translate(0, 90vh)";
    subtitlePreview.setAttribute('id', 'layer');
    screenArea.appendChild(subtitlePreview);

    // clearPreview()
})
