#line 3494 "/home/travis/build/felix-lang/felix/src/packages/flx_web.fdoc"
  Make buttons in a consistent style
  include "./button-interface";
  
  fun setup(config_data:string) = {
    eprintln$ "Setup fdoc_button " + config_data;
    return 0;
  }
  
  val jscript = """
  <script>
  function mouseover(id)
  {
    var elt = document.getElementById(id);
    elt.style.display="none";
    var elt2 = document.getElementById(id+"_mo");
    elt2.style.display="inline";
  }
  
  function mouseout(id)
  {
    var elt = document.getElementById(id+"_mo");
    elt.style.display="none";
    var elt2 = document.getElementById(id);
    elt2.style.display="inline";
  }
  
  </script>
  """;
  
  object fdoc_button () implements button-factory_t = {
  
    method fun whatami () => "button factory";
  
    method fun get-jscript () => jscript;
  
    val sz = 65,30; // frame size
    val bz = 60,20; // button size
    val bp = 4,6; // button pos in frame
    val cr = 4,40; // corner radii
    val st = 2,"black"; // border stroke thickness and colour
    val fc = "blue",0.2; // fill colour and opacity
    val hfc = "red",0.2; // hilight colour and opacity
    val tp = 13,21; // text position in frame
    val tc = "black"; // text colour
    val fz = "12px"; // font size
  
    fun rect (bz: int^2, cr:int^2, st: int * string, fc: string * double) (bp:int^2) =>
      '<rect '+
        'x="'+bp.0.str+'px" y="'+bp.1.str+'px" '+
        'rx="'+cr.0.str+'px" ry="'+cr.1.str+'px" '+
        'width="'+bz.0.str+'px" height="'+bz.1.str+'px" '+
        'style='+
          '"'+
            'fill:'+fc.0+';opacity:'+fc.1.str+';'+
            'stroke:'+st.1+';stroke-width:'+st.0.str+
         '"'+
       '/>'
    ;
    fun text (tc:string, txt:string) (tp:int^2) =>
      '<text x="'+tp.0.str+'px" y="'+tp.1+'px" fill="'+tc+
      '" style="font-size:'+fz+';">'+txt+'</text>'
    ;
    fun span (id:string) (txt:string) =>
      '<span id="'+id+'">' + txt + '</span>'
    ;
  
    fun span_hide (id:string) (txt:string) =>
      '<span id="'+id+'" style="display:none">' + txt + '</span>'
    ;
  
    fun svg (sz:int^2) (txt:string) =>
      '<svg height="'+sz.1.str+'px" width="' + sz.0.str + 'px">' + txt + '</svg>'
    ;
  
    method fun make-button (b:button-spec_t) =>
    """<span style="position:relative; bottom:6px"
    onmouseover="mouseover('"""+b.id+"""')"
    onmouseout="mouseout('"""+b.id+"""')"
    onclick=\""""+b.onclick+"""('"""+b.id+"""')"
    >""" +
  
     span b.id (
      svg sz ( rect (bz,cr,st,fc) bp + text (tc,b.text) tp )
     ) +
     span_hide (b.id+"_mo") (
      svg sz ( rect (bz,cr,st,hfc) bp + text (tc,b.text) tp )
     )
     +
    '</span>'
    ;
  }
  
  export fun setup of (string) as "fdoc_button_setup";
  export fun fdoc_button of () as "fdoc_button";