function hideOnClickOutsided(element, btn) {
    // given a menu element and btn, hide the menu
    // whenever the click is not on either the element 
    // or the btn the opened it
    const outsideClickListener = event => {
        if (!element.contains(event.target) && (event.target.id != btn)) { // or use: event.target.closest(selector) === null
            if (isVisible(element)) {
                element.classList.remove('active');
                removeClickListener();
            }
        }
    };

    const removeClickListener = () => {
        document.removeEventListener('click', outsideClickListener);
    };
    document.addEventListener('click', outsideClickListener);
}
const isVisible = elem => !!elem && !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length ); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js 

//----------------------------------------
//Initialize main menu bar with progressive enhancements
//if we find the menu items
//----------------------------------------------
// Account Menu
if (document.getElementById('account-menu')) {
    var account_a = document.getElementById('account-menu');
    var account_div = document.getElementById('user-menu');
    //Add button function
    account_a.addEventListener('click', function(e){
        e.preventDefault();
        account_div.classList.toggle('active');
        account_div.focus(); 
        hideOnClickOutsided(account_div, account_a.id);
    }, false);

    // Notebooks Menu
    var notebook_a = document.getElementById('notebook-menu-link');
    var notebook_div = document.getElementById('notebooks-menu');
    //Add button function
    notebook_a.addEventListener('click', function(e){
        e.preventDefault();
        notebook_div.classList.toggle('active');
        notebook_div.focus(); 
        hideOnClickOutsided(notebook_div, notebook_a.id);
    }, false);
}

//function buildNotebookMenu () {
//    var data = JSON.parse(this.responseText);
//    var div = document.getElementById("notebooks-menu");
//    var ul = document.createElement("ul");
//    ul.classList.add("vertical","list-style-none");
//    div.appendChild(ul);
//    for(var i in data) {
//        var li = document.createElement("li");
//        var a = document.createElement("a");
//        a.setAttribute("href", data[i]['json_absolute_url']);
//        a.innerHTML = data[i]['name']; 
//        li.append(a);
//        ul.append(li);
//    }
//    var li = document.createElement("li");
//    var a = document.createElement("a");
//    a.setAttribute("href", '/user/{{user.username}}/notebooks/');
//    a.innerHTML = "View all"
//    li.append(a);
//    ul.append(li);
//}
//
//
////    getJSON("{%url 'notebook-api-list' %}", buildNotebookMenu);
//

if (typeof(document.getElementById('js-overlay-content')) != 'undefined' && document.getElementById('js-overlay-content') != null) {
  // Select your overlay trigger
  var trigger = document.querySelector('#overlay-trigger');
  trigger.addEventListener('click', function(e){
    e.preventDefault();
    novicell.overlay.create({
      'selector': trigger.getAttribute('data-element'),
      'class': 'selector-overlay',
    });
  });
}