// 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_v2 {
  Cl<S> entries = new L;
  int width = 200, height = 200;
  
  S id = "dropdown-" + aGlobalID(), outerID = "outer-" + 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 js_closeOnClickAnywhere() {
    ret [[
      if (typeof $ !== 'undefined')
        $('body').click(function(e) {
          if (!$(e.target).closest('.popdowntrigger').length) {
            $(".popdown").hide();
          }
        });
    ]];
  }
  
  S css() {
    ret [[
      .popdown ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: ]] + width + [[px;
        background-color: #f1f1f1;
      }
      
      .popdown {
        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;
      }
      
      .popdown li a {
        text-decoration: none;
        color: #000;
      }
  
      .popdown li {    
        display: block;
        border-bottom: 1px solid #555;
        padding: 8px 16px;
        color: #000;
      }
    ]]
    /*
      .popdown li:hover, .popdown li:hover a {
        background-color: #3399ff;
        color: white;
      }
      
      /* exclude sub menus - works but submenu loses hover highlights *//*
      .popdown li:hover ul li, .popdown li:hover ul li a {
        background-color: #f9f9f9;
        color: #000;
      }
    */
    // version 2 of the trick
    + [[
      .popdown li:hover, .popdown li:hover > a {
        background-color: #3399ff;
        color: white;
      }
    ]];
  }
  
  S headStuff() { ret hcss(css()); }
  
  S onclick() {
    ret jsEscapedDollarVars([[
      var x = document.getElementById($id);
      x.style.display = window.getComputedStyle(x).display === "none" ? "block" : "none";
      console.log("popup " + id + " display: " + x.style.display);
    ]], +id);
  }
  
  S html() {
    ret hdiv(
        span(htmlEncode2(unicode_smallDownPointingTriangle()), +onclick())
      + hdiv(ul(entries), +id, class := "popdown"),
      style := "position: relative; display: inline-block; cursor: context-menu",
      id := outerID, class := "popdowntrigger");
  }
  
  S complete() { ret hcombine(headStuff(), html()); }
  
  selfType width(int width) { this.width = width; this; }
  selfType height(int height) { this.height = height; this; }
}