<html>
<head>
  <title>cluster-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">
  <script type="text/javascript" charset="utf-8">
    // Mock out sk.get() to return the login info.
    sk.get = function(url) {
      return new Promise(function (resolve, reject) {
        resolve('{"Email":"user@google.com","LoginURL":"https://accounts.google.com/"}');
      });
    };
  </script>
  <link rel="import" href="cluster.html">
  <style type="text/css" media="screen">
    button {
      display: inline-block;
    }

    body {
      font-family: Arial, sans-serif;
    }

    cluster-summary-sk {
      display: block;
    }
  </style>
</head>
<body>
  <h1>Cluster</h1>

  <h2>A transient cluster [id = -1]</h2>
  <cluster-summary-sk id=cluster></cluster-summary-sk>

  <h2>A saved cluster [id != -1]</h2>
  <cluster-summary-sk fade id=nostatus></cluster-summary-sk>

  <script type="text/javascript" charset="utf-8">
    sk.DomReady.then(function() {
      var ele = $$$('#plot');
      var summary = {
        "Traces": [
          [
            [ 0, -0.48292220324748 ],
            [ 1, -0.19706606661754 ],
            [ 2, 0.00054494750854771 ],
            [ 3, -0.43147446861824 ],
            [ 4, -0.2347926929897 ],
            [ 5, -0.50606012767934 ],
            [ 6, -0.4725167869021 ],
            [ 7, -0.335549429662 ],
            [ 8, -0.42048570967796 ],
            [ 18, 0.15131275216493 ],
            [ 20, 2.8717891635718 ],
            [ 25, 2.8717891635718 ]
          ]
        ],
        "Keys": [
          "x86_64:MSVC:GPU:GTX660:ShuttleA:Win8:GM_multipicturedraw_pathclip_tiled_180_286:nvprmsaa16"
        ],
        "ParamSummaries": [
            [ { "Value": "4.50 NVIDIA", "Weight": 19 } ],
            [ { "Value": "nvprmsaa16", "Weight": 19 } ],
            [ { "Value": "micro", "Weight": 19 }, { "Value": "macro", "Weight": 12 }],
            [ { "Value": "4.5.0 NVIDIA 350.12", "Weight": 19 } ],
            [ { "Value": "ShuttleA", "Weight": 19 } ],
        ],
        "StepFit": {
          "LeastSquares": 0.080854919675627,
          "TurningPoint": 140,
          "StepSize": -1.0747949806085,
          "Regression": -13.292882918199,
          "Status": "Low"
        },
        "Hash": "e5a38f0ad22d2c65c3f5b568a88a0b7224ad62d8",
        "Timestamp": 1441199069,
        "Status": "",
        "Message": "",
        "ID": -1,
        "Bugs": null
      };
      $$$('#cluster').setSummary(summary);

      var summary2 = JSON.parse(JSON.stringify(summary));
      summary2.ID = 3;
      summary2.Status = "New";
      $$$('#nostatus').setSummary(summary2);
    });
  </script>
</body>
</html>