document.getElementById('myInput').addEventListener('focus', function () {
    document.getElementById('added-video-source').style.display = 'block'


})
// document.getElementById('myInput').addEventListener('focusout',function(){
//     document.getElementById('added-video-source').style.display = 'none'
// })







// // Add a "checked" symbol when clicking on a list item
// var list = document.querySelector('ul');
// list.addEventListener('click', function (ev) {
//     if (ev.target.tagName === 'LI') {
//         ev.target.classList.toggle('checked');
//     }
// }, false);


// Create a new list item when clicking on the "Add" button
function addVideoSource(addBtn) {
    var li = document.createElement("li");
    var inputValue

    if (addBtn == 'byPath') {
        inputValue = document.getElementById("myInput").value;
    } else if (addBtn == 'fromServer') {

        let serverVideos = document.getElementById("server-videos");
        let selectedItemIndex = document.getElementById("server-videos").selectedIndex;
        inputValue = serverVideos[selectedItemIndex].innerText

    }



    var t = document.createElement('span');
    t.innerText = inputValue
    li.appendChild(t);
    if (inputValue === '') {
        alert("You must write something!");
    } else {
        document.getElementById("added-video-source").appendChild(li);
    }
    document.getElementById("myInput").value = "";

    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);

    for (i = 0; i < close.length; i++) {
        close[i].onclick = function () {
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}



var addedVideoSource = []
document.getElementById('add-multi-video').addEventListener('click', function addMultiVideo() {
    var addedPathCount = document.getElementById('added-video-source').children
    var i;
    for (i = 0; i < addedPathCount.length; i++) {
        addedVideoSource.push(addedPathCount[i].children[0].innerText)
        console.log(addedPathCount[i].children[0].innerText)
    }
    mltVideo(addedVideoSource)
})


// Create a "close" button and append it to each list item
var myNodelist = document.querySelectorAll("#added-video-source li");
var i;
for (i = 0; i < myNodelist.length; i++) {
    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
    close[i].onclick = function () {
        var div = this.parentElement;
        console.log(div.children[0].innerText)
        if (div.children[0].innerText == addedVideoSource[i]) {
            addedVideoSource.splice(i,1)
        }
       
        div.remove();
    }
}



////////////////////////
function mltVideo(addedVideoSource) {

    //multi video player

    console.log(addedVideoSource)

    var i = 0; // global
    const videoCount = addedVideoSource.length;
    const element = document.getElementById("videoPlayer");

    function videoPlay(videoNum) {
        element.setAttribute("src", addedVideoSource[videoNum]);
        element.autoplay = true;
        element.load();
        element.play();
    }
    document.getElementById('videoPlayer').addEventListener('ended', myHandler, false);

    videoPlay(0); // play the video

    function myHandler() {
        i++;
        if (i == videoCount) {
            i = 0;
            videoPlay(i);
        } else {
            videoPlay(i);
        }
    }

}
