var toggler = document.getElementsByClassName("caret");
var i;

for (i = 0; i < toggler.length; i++) {
    toggler[i].addEventListener("click", function () {
        this.parentElement.querySelector(".nested").classList.toggle("active");
        this.classList.toggle("caret-down");
    });
}

const menu = document.getElementById('menu');
//const outClick = document.getElementById('out-click');

var div_list = document.querySelectorAll('.clickable'); // returns NodeList
var div_array = [...div_list]; // converts NodeList to Array
div_array.forEach(div => {
    // do something awesome with each div
    div.addEventListener('contextmenu', e => {
        e.preventDefault();
        var itemID = e.target.getAttribute("value");
        $("#itemID").val(itemID);

        var w = $(window);
        if (window.scrollY + e.clientY - w.scrollTop() < 700) {
            menu.style.top = `${window.scrollY + e.clientY - 260}px`;
            menu.style.left = `${window.scrollX + e.clientX - 30}px`;
            menu.classList.add('show-top');
        } else {
            menu.style.top = `${window.scrollY + e.clientY - 550}px`;
            menu.style.left = `${window.scrollX + e.clientX - 30}px`;
            menu.classList.add('show-bottom');
        }
        //outClick.style.display = "block";
    });
});

//outClick.addEventListener('click', () => {
//    menu.classList.remove('show-top');
//    menu.classList.remove('show-bottom');
//    outClick.style.display = "none";
//})



function clickableOutClick() {
    const menu = document.getElementById('menu');
    //const outClick = document.getElementById('out-click');

    menu.classList.remove('show-top');
    menu.classList.remove('show-bottom');
    //outClick.style.display = "none";

}