function hideInsert() {
    hideAnim("hider1");

    sleep(500).then(() => {
        var searchElm = document.getElementsByClassName("hider2")[0];
        searchElm.style.width = "100%";
        searchElm.style.display = "block";
    });
}

function hideSearch() {
    hideAnim("hider2");

    sleep(500).then(() => {
        var insertElm = document.getElementsByClassName("hider1")[0];
        insertElm.style.width = "100%";
        insertElm.style.display = "block";
    });
}

function hideAnim(id) {
    var elem = document.getElementsByClassName(id)[0];
    var size = 100;

    var intervalID = setInterval(hide, 15);
    function hide() {
        if (size == 0) {
            clearInterval(intervalID);
            elem.style.display = "none";
        } else {
            size -= 5;
            elem.style.width = size + "%";
        }
    }
}


// Insert data sent from search form clicks to query field
function querySetUp(val) {
    var queryField = document.getElementsByName("query")[0];
    queryField.value += val;
}

// Utils

// Sleep function
function sleep (time) {
  return new Promise((resolve) => setTimeout(resolve, time));
}

// Clean
function clearFields() {
    document.getElementsByName("link")[0].value = "";
    document.getElementsByName("category")[0].value = "";
    document.getElementsByName("tags")[0].value = "";
    document.getElementsByName("notes")[0].value = "";
}

function clearQuery() {
    document.getElementsByName("query")[0].value = "";
}


// Get Insert to show since CSS
// broke somewhere after adding hider classes
hideSearch();
