<!DOCTYPE HTML>
<html>
<head>
	<style>
		p {
		  font: 12px/16px Arial;
		  margin: 10px 10px 15px;    
		}
		
		button {
		  font: bold 14px/14px Arial;  
		  margin-left: 10px;
		}
		
		#timing {
		  clear: both;
		  padding-top: 10px;
		}
		
		.box-view {
		  width: 20px; height: 20px;
		  float: left;
		  position: relative;
		  margin: 8px;    
		}
		
		.box {
		  border-radius: 100px;
		  width: 20px; height: 10px;
		  padding: 5px 0;
		  color: #fff;
		  font: 10px/10px Arial;
		  text-align: center;
		  position: absolute;
		}   

	</style>
</head>
<body>
<button id='start'>Start</button>
<button id='stop'>Stop</button>
<div id='timing'></div>
<script type="text/javascript" src="../../node_modules/steal/steal.js" main="@empty"></script>
<script type="text/javascript">

	steal("can/view/stache", "can-simple-dom", function(stache, simpleDom){
		can.document = new simpleDom.Document();

		var template = stache(
			"{{#each boxes}}"+
				"<div class='box-view'>"+
					"<div class='box' id='box-{{number}}'  style='{{style}}'>"+
						"{{content}}"+
					"</div>"+
				"</div>"+
			"{{/each}}");

		var boxes = new can.List(),
			Box = can.Map.extend({
				top: 0,
			    left: 0,
			    content: 0,
			    count: 0,
			
			    tick: function() {
			        var count = this.attr('count') + 1;
			        
			        this.attr('count', count);
			        this.attr('top', Math.sin(count / 10) * 10);
			        this.attr('left', Math.cos(count / 10) * 10);
			        this.attr('color', count % 255);
			        this.attr('content', count % 100);
			        this.attr('style', this.computeStyle());
			        
			    },
			
			    computeStyle: function() {
			        return 'top: ' + this.attr('top') + 'px; left: ' +  this.attr('left') +'px; background: rgb(0,0,' + this.attr('color') + ');';
			    }
			});
		
		for(var i =0; i < 100; i++) {
			var box = new Box({ number: i });
			box.tick();
			boxes.push( box );
		}
		
		var frag = template({boxes: boxes});
		var div = can.document.createElement("div");
		can.document.body.appendChild(div);
		div.appendChild(frag);
	
		var count = 0;
		
		var run = function(){
			can.batch.start();
			for(var n = 0 ; n < boxes.length; n++) {
	        		boxes[n].tick();
	        	}
	        	can.batch.stop();
		};
	
		$("#start").click(function(){
			 loopCount = 0;
   			 totalTime = 0;
   			 benchmarkLoop(run);
		});
		
        window.timeout = null;
		window.totalTime = null;
		window.loopCount = null; 	
        window.benchmarkLoop = function(fn) {
		    var startDate = new Date();
		    fn();
		    var endDate = new Date();
		    totalTime += endDate - startDate;
		    loopCount++;
		    if (loopCount % 20 === 0) {
		        $('#timing').text('Performed ' + loopCount + ' iterations in ' + totalTime + ' ms (average ' + (totalTime / loopCount).toFixed(2) + ' ms per loop).');
		    }
		    if(loopCount < 1000) {
		    	timeout = setTimeout(function(){
			    	benchmarkLoop(fn);
			    },1);
		    }
		   
		};
			
	});
	
	
</script>
</body>
</html>