<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <title>polymer::mdv</title>
  <meta charset="utf-8">
  <script src="../../polymer.js"></script>
</head>
<body>
  <button onclick="test(100)">Test 100</button>
  <button onclick="make(1)">Add 1</button>
  <button onclick="clean()">Clear</button>
  <button onclick="continuous()">Continuous</button>
  <div id="work"></div>
  
  <element name="x-test">
    <template>
      <style>
        @host {
          * {
            display: block;
            padding: 10px;
          }
        }
        
        div {
          display: inline-block;
        }
        
      </style>
      <div style="background: {{one}};">one</div>
      <div style="background: {{two}};">two</div>
      <div style="background: {{three}};">three</div>
      <div style="background: {{four}};">four</div>
      <div style="background: {{five}};">five</div>
      <div style="background: {{six}};">six</div>
      <div style="background: {{seven}};">seven</div>
      <div style="background: {{eight}};">eight</div>
      <div style="background: {{nine}};">nine</div>
      <div style="background: {{ten}};">ten</div>
    </template>
    <script>
      Polymer.register(this, {
        one: 'tomato',
        two: 'steelblue',
        three: 'whitesmoke',
        four: 'tomato',
        five: 'steelblue',
        six: 'whitesmoke',
        seven: 'tomato',
        eight: 'steelblue',
        nine: 'whitesmoke',
        ten: 'tomato',
        oneChanged: function() {
        },
        twoChanged: function() {
        },
        threeChanged: function() {
        },
        fourChanged: function() {
        },
        fiveChanged: function() {
        },
        sixChanged: function() {
        },
        sevenChanged: function() {
        },
        eightChanged: function() {
        },
        nineChanged: function() {
        },
        tenChanged: function() {
        }
      });
    </script>
  </element>
  <script>
    var work = document.querySelector('#work');
    
    function test(count) {
      console.log('test', count);
      clean();
      make(count);
      if (interval) {
        setTimeout(function() {
          test(count);
        }, 250);
      }
    }
    
    function make(count) {
      for (var i=0; i < count; i++) {
        work.appendChild(document.createElement('x-test'));
      }
    }
    
    function clean() {
      work.textContent = '';
    }
    
    var interval;
    function continuous() {
      interval = !interval;
      console.log(interval);
      if (interval) {
        test(100);
      } else {
        clearTimeout(interval);
      }
    }
  </script>

</body>
</html>
