// entries are HTML (e.g. links)
// requires JQuery for click-outside-to-close trick
// Note: Make sure containing elements have overflow: visible,
// otherwise pop-up can get cut off
sclass HTMLPopDownButton {
  Cl<S> entries = new L;
  int width = 200, height = 200;
  
  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));
  
  *(S... entries) { this.entries = asList(entries); }
  *(Cl<S> *entries) {}
  
  void add(S entry) { main add(this.entries, entry); }
  void addAll(S... entries) { main addAll(this.entries, entries); }
  
  S html() {
    ret hstyle(replaceDollarVars([[
      #$id ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: ]] + width + [[px;
        background-color: #f1f1f1;
      }
      
      #$id {
        position: absolute;
        display:none;
        background-color: #f9f9f9;
        width:auto;
        height: ]] + height + [[px;
        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));
  }
  
  selfType width(int width) { this.width = width; this; }
  selfType height(int height) { this.height = height; this; }
}