<html>
<head>
  <title>paramset-sk demo</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  <script src="/res/common/js/common.js"></script>
  <script src="/res/imp/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel=import href="/res/imp/bower_components/polymer/polymer.html">
  <link rel="stylesheet" href="res/common/css/md.css" type="text/css" media="all" />
  <link rel=import href="paramset.html">
<!--We must use is=custom-style here so the variables get piped through to the
    app properly. Note that using custom-style inside <dom-module> can lead to
    unintended consequences, such as CSS mixins not being visible.
    https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style -->
  <style is="custom-style">
    body {
      font-family: sans-serif;
    }

    paramset-sk {
      display: block;
      margin: 3em;
    }

    #set1 {
      --paramset-highlight-color: red;
    }
  </style>
</head>
<body>
  <h1>Params</h1>

  <button class=action id=highlight>Highlight</button>
  <button class=action id=clear>Clear</button>

  <paramset-sk id=set1></paramset-sk>

  <paramset-sk clickable id=set2></paramset-sk>

  <paramset-sk clickable-values id=set3></paramset-sk>

  <table>
    <tr><th>paramset-key-click</th>      <td id=key  ></td></tr>
    <tr><th>paramset-key-value-click</th><td id=value></td></tr>
  </table>

  <script type="text/javascript" charset="utf-8">
    var paramset = {
      "arch":       ["Arm7", "Arm64", "x86_64", "x86"],
      "bench_type": ["micro", "playback", "recording"],
      "compiler":   ["GCC", "MSVC", "Clang"],
      "cpu_or_gpu": ["GPU", "CPU"],
    };

    var paramset2 = {
      "arch":       ["Arm7", ],
      "bench_type": ["playback", "recording"],
      "compiler":   [],
      "cpu_or_gpu": ["GPU"],
    };

    var set1 = $$$('#set1');
    var set2 = $$$('#set2');
    var set3 = $$$('#set3');

    set1.setParamSets([paramset]);
    set2.setParamSets([paramset, paramset2], ["Set 1", "Set 2"]);
    set3.setParamSets([paramset], ["Clickable Values Only"]);

    set2.addEventListener('paramset-key-click', function(e) {
      $$$('#key').textContent = JSON.stringify(e.detail);
    });

    set2.addEventListener('paramset-key-value-click', function(e) {
      $$$('#value').textContent = JSON.stringify(e.detail);
    });

    set3.addEventListener('paramset-key-value-click', function(e) {
      $$$('#value').textContent = JSON.stringify(e.detail);
    });

    $$$('#highlight').addEventListener('click', function() {
      set1.setHighlight({"arch": "Arm7", "cpu_or_gpu": "GPU"});
      set2.setHighlight({"arch": "Arm7", "cpu_or_gpu": "GPU"});
      set3.setHighlight({"arch": "Arm7", "cpu_or_gpu": "GPU"});
    });

    $$$('#clear').addEventListener('click', function() {
      set1.clearHighlight();
      set2.clearHighlight();
    });
  </script>

</body>
</html>