<html>
<head>
  <title>dbg-info-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=import href="dbg-info.html">
  <style type="text/css" media="screen">
    #wrapper {
      width: 40em;
      margin: auto;
    }
  </style>
</head>
<body>
  <div id=wrapper class="layout horizontal wrap">
    <dbg-info-sk></dbg-info-sk>
    <button>Toggle</button>
  </div>

  <script type="text/javascript" charset="utf-8">
    // Hook up the messages from the crosshair to the zoom-sk element.
  var infos = [
    {
      "ClipRect": [
        0,    0,
        1014, 602
      ],
      "ViewMatrix": [
        [ 1, 0, 0 ],
        [ 0, 1, 0 ],
        [ 0, 0, 1 ]
      ]
    },
    {
      "ClipRect": [
        100,  100,
        200,  200
      ],
      "ViewMatrix": [
        [ 0, 0, 1 ],
        [ 0, 1, 0 ],
        [ 1, 0, 0 ]
      ]
    }
  ];
  $$$('dbg-info-sk').info = infos[0];
  var state = 0;
  $$$('button').addEventListener('click', function() {
    state = (state + 1) % 2;
    $$$('dbg-info-sk').info = infos[state];

  });
  </script>
</body>
</html>