<html>
<head>
  <title>plot-sk demo</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <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="stylesheet" href="/res/common/css/md.css">
  <link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
  <link rel="import" href="plot.html">
  <style type="text/css" media="screen">
    button {
      display: inline-block;
    }
  </style>
</head>
<body>
  <h1>Plot</h1>
  <div>
    <button class=action id=reset>Reset</button>
    <button class=action id=add>Add</button>
    <button class=action id=clear>Clear</button>
    <button class=action id=highlight>Highlight</button>
    <button class=action id=remove>Remove</button>
    <button class=action id=only>Only</button>
    <button class=action id=removeun>Remove Un-Highlighted</button>
  </div>

  <plot-sk width=1400 height=600 id=plot></plot-sk>

  <table>
    <tr><th>selected</th><td id=selected></td></tr>
    <tr><th>highlighted</th><td id=focused></td></tr>
  </table>

  <script type="text/javascript" charset="utf-8">
    (function () {
      var ele = $$$('#plot');
      var n = 0;
      var lastid = "";

      function add() {
        var traces = [];
        for (var j = 0; j < 10; j++) {
          var data = [];
          for (var i = 0; i < 50; i++) {
            if (Math.random() > 0.5) {
              data.push([i, 0.8 + Math.sin(i/10) + j + Math.random()*0.5]);
            }
          }
          var id = "trace" + (n);
          var trace = {
            data: data,
            label: id,
            _params: { parity: (n % 2) ? "odd" : "even" },
          };
          traces.push(trace);
          lastid = id;
          n += 1;
        }
        ele.addTraces(traces);
      }

      add();
      ele.setStepIndex(3);

      var ticks = {
        10: "6th",
        12: "7th",
        30: "8th",
      };
      var skps = [11, 15, 20, 35, 42];
      ele.setBackgroundInfo(ticks, skps, 49);

      $$$('#reset').addEventListener('click', function() {
        ele.resetAxes();
      });

      $$$('#add').addEventListener('click', function() {
        add();
      });

      $$$('#clear').addEventListener('click', function() {
        ele.clear();
      });

      $$$('#highlight').addEventListener('click', function() {
        ele.highlightGroup("parity", "odd");
      });

      $$$('#remove').addEventListener('click', function() {
        ele.remove(lastid);
      });

      $$$('#only').addEventListener('click', function() {
        ele.only(lastid);
      });

      $$$('#removeun').addEventListener('click', function() {
        ele.removeUnHighlighted();
      });

      $$$('#plot').addEventListener('selected', function(e) {
        $$$('#selected').textContent = JSON.stringify(e.detail);
      });

      $$$('#plot').addEventListener('highlighted', function(e) {
        $$$('#focused').textContent = JSON.stringify(e.detail);
      });
    })();
  </script>
</body>
</html>