<html>
<head>
  <title>dots-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="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../common/js/common.js"></script>
  <script src="testdata.js"></script>

  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" href="dots-sk.html">

</head>
<body>
  <h1>dots-sk demo</h1>

  <dom-module id="main-document-element">
    <template>
      <h3>Click/hover dots to test events and highlights. </h3>
      <div>
        <dots-sk id="firstDots" clickable></dots-sk>
      </div>
      Event: {{eventData}}
    </template>

    <script>
      HTMLImports.whenReady(function () {
        Polymer({
          is: 'main-document-element',

          ready: function() {
            var el = this.$.firstDots;

            // Make sure we don't slow down even when there are 1,000 traces.
            var trace = testdata.traces.traces[0];
            for (var i = 1; i < 1000; i++) {
              trace.label = "id" + i;
              for (var j = 0, len = trace.data.length; j < len; j++) {
                trace.data[j].y = i
              }
              testdata.traces.traces.push(JSON.parse(JSON.stringify(trace)));
            }
            el.setValue(testdata.traces);
            el.setCommits(testdata.commits);

            this.async(function() {
              el.highlight(0, true);
            }, 3000);

            this.listen(el, 'show-commits', '_handler');
            this.listen(el, 'hover', '_handler');
          },

          _handler: function(e) {
            console.log("Received event: " + e.type);
            this.eventData = e.type + " :: " + JSON.stringify(e.detail);
            e.stopPropagation();
          }
        });
      });
    </script>
  </dom-module>

  <!-- Instantite the element defined above -->
  <main-document-element></main-document-element>

</body>
</html>