let notScrolled = true;

document.getElementById("query").addEventListener("keyup", function(event) {
    // Number 13 is the "Enter" key on the keyboard
    if (event.keyCode === 13) {
        search();
    }
});

window.onscroll = function(ev) {
    if ((window.innerHeight - window.scrollY) >= 100 && !notScrolled) {
        notScrolled = true;
    }

    if ((window.innerHeight - window.scrollY) <= 100 && notScrolled) {
        notScrolled = false;
        loadMore(document.getElementById("loadMore"));
    }
};

const search = () => {
    let query     = document.getElementById("query").value;
    let data    = "query=true&stub=" + query + "&continuation=null";
    let path    = "resources/php/query.php";
    document.getElementById('video-list').innerHTML = "";
    doAjax(path, data);
}

const loadPrev = (elm) => {
    if (elm.prev != "null") {
        let query            = document.getElementById("query").value;
        let continuationData = elm.getAttribute("prev")
        let data             = "query=true&stub=" + query + "&continuation=" + continuationData;
        let path             = "resources/php/query.php";
        preAjax(path, data, clearList=true);
    }
}
const loadNext = (elm) => {
    if (elm.next != "null") {
        let query            = document.getElementById("query").value;
        let continuationData = elm.getAttribute("next")
        let data             = "query=true&stub=" + query + "&continuation=" + continuationData;
        let path             = "resources/php/query.php";
        preAjax(path, data, clearList=true);
    }
}

const loadMore = (elm) => {
    let query            = document.getElementById("query").value;
    let continuationData = elm.getAttribute("continuation")
    let data    = "query=true&stub=" + query + "&continuation=" + continuationData;
    let path    = "resources/php/query.php";
    preAjax(path, data, clearList=false);
}

const preAjax = (path, data, clearList=undefined) => {
    if (clearList)
        document.getElementById("video-list").innerHTML = "";

    doAjax(path, data);
}


const clear = () => {
    document.getElementById("query").value = "";
    document.getElementById('video-list').innerHTML = "";
}


//  Drage event for the poped out image and media container
const dragContainer = (elmnt) => {
    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    elmnt.onmousedown  = dragMouseDown;

    function dragMouseDown(e) {
        e = e || window.event;
        pauseEvent(e);
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        pauseEvent(e);
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }

    function closeDragElement(e) {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    }

    function pauseEvent(e) {
        if(e.stopPropagation) e.stopPropagation();
        if(e.preventDefault) e.preventDefault();

        e.cancelBubble=true;
        e.returnValue=false;
    return false;
    }
}

dragContainer(document.getElementById('internalPlayerContainer'));  // Set for dragging events
