<!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 foo="{{one}}">one</div>
      <div foo="{{two}}">two</div>
      <div foo="{{three}}">three</div>
      <div foo="{{four}}">four</div>
      <div foo="{{five}}">five</div>
      <div foo="{{six}}">six</div>
      <div foo="{{seven}}">seven</div>
      <div foo="{{eight}}">eight</div>
      <div foo="{{nine}}">nine</div>
      <div foo="{{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() {
          console.log('oneChanged', this.one);
          this.asyncUnbindAll();
        },
        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++) {
        var t = document.createElement('x-test');
        t.cancelUnbindAll();
        t.one = 'one';
      }
    }
    
    function clean() {
    }
    
    var interval;
    function continuous() {
      interval = !interval;
      console.log(interval);
      if (interval) {
        test(100);
      } else {
        clearTimeout(interval);
      }
    }
  </script>

</body>
</html>
