// entries are HTML (e.g. links)
// requires JQuery for click-outside-to-close trick
// TODO: doesn't open on first click (does it still?)
// Note: Make sure containing elements have overflow: visible,
// otherwise pop-up can get cut off
sS hPopDownButton(S... entries) {
  S id = "dropdown-" + aGlobalID(), outerID = "outer-" + id;
  
  S onclick = replaceDollarVars([[
    var x = document.getElementById($id);
    x.style.display = window.getComputedStyle(x).display === "none" ? "block" : "none";
    console.log("popup " + id + " display: " + x.style.display);
  ]], $id := jsQuote(id));
  
  ret hstyle(replaceDollarVars([[
    #$id ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      width: 200px;
      background-color: #f1f1f1;
    }
    
    #$id {
      position: absolute;
      display:none;
      background-color: #f9f9f9;
      width:auto;
      height:200px;
      overflow: auto;
     
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      
      z-index: 99;
    }
    
    #$id li a {
      text-decoration: none;
      color: #000;
    }

    #$id li {    
      display: block;
      border-bottom: 1px solid #555;
      padding: 8px 16px;
      color: #000;
    }
  ]]
  /*
    #$id li:hover, #$id li:hover a {
      background-color: #3399ff;
      color: white;
    }
    
    /* exclude sub menus - works but submenu loses hover highlights *//*
    #$id li:hover ul li, #$id li:hover ul li a {
      background-color: #f9f9f9;
      color: #000;
    }
  */
  // version 2 of the trick
  + [[
    #$id li:hover, #$id li:hover > a {
      background-color: #3399ff;
      color: white;
    }
  ]], $id := id))
  + hdiv(
      span(htmlEncode2(unicode_smallDownPointingTriangle()), +onclick)
    + hdiv(ul(entries), +id),
    style := "position: relative; display: inline-block; cursor: context-menu",
    /*+onclick,*/ id := outerID)
    + hscript(replaceDollarVars([[
      if (typeof $ !== 'undefined')
        $('body').click(function(e) {
          //console.log("target=" + e.target + ", outerID=$outerID");
          if (!$(e.target).closest('#$outerID').length) {
            //console.log("hiding $id");
            $("#$id").hide();
          }
        });
    ]], +id, +outerID));
}

sS hPopDownButton(Cl<S> entries) {
  ret hPopDownButton(toStringArray(entries));
}