Complete the Sort plugin

map/sort/sort.html

@@ -1,38 +1,115 @@
 <div id='out'></div>
-<script src="../../../steal/steal.js"></script>
+<style type="text/css">
+body, html {
+	margin: 0;
+	padding: 0;
+}
+table {
+	border-spacing: 0;
+}
+th {
+	text-align: center;
+}
+td {
+	text-align: right;
+	cell-
+}
+td, th {
+	padding: 5px;
+	font-size: 10px;
+	font-family: monospace;
+}
+button {
+	cursor: pointer;
+}
+</style>
+<script src="../../lib/steal/steal.js"></script>
 <script>
-steal("can/view/bindings",function(){
-
-var template = can.view.mustache(
-  "<div><button can-click='up'>&uarr;</button></div>"+
-  "<div><input "+
-               "can-enter='update' "+
-               "can-blur='update' "+
-               "value='{{age}}'/></div>"+
-  "<div><button can-click='down'>&darr;</button></div>"+
-  "<p>The age {{age}}</p>")
-
-var age = can.compute(31, function(newVal){
-  return +newVal
-})
+steal('can/view/stache', 'can/map/sort', 'can/view/bindings', function(){
+
+var template = can.view.stache(
+	'<table>' +
+		'<tr>' +
+			'{{#each rows.0.cols}}' +
+				'<th>' +
+					'<button comparator-index="{{@index}}" can-click="changeComparator">' +
+						'&#9660;' +
+					'</button>' +
+				'</th>' +
+			'{{/each}}' +
+		'</tr>' +
+		'{{#each rows}}' +
+			'<tr>' +
+				'{{#each cols}}' +
+					'<td style="background-color: rgb({{color}}, {{color}}, {{color}});">' +
+						'{{num}}' +
+					'</td>' +
+				'{{/each}}' +
+			'</tr>' +
+		'{{/each}}' +
+	'</table>'
+);
+
+var rows = new can.List();
+var rowCount = 50;
+var colCount = 50;
+rows.comparator = 'cols.0.num';
+
+for (var i = 0; i < rowCount; i++) {
+
+	var col = new can.List();
+
+	var row = {
+		cols: col
+	};
+
+	for (var j = 0; j < colCount; j++) {
+
+		var randomNumber = Math.round(Math.random() * 100);
+
+		col.attr(j, new can.Map({
+			num: randomNumber,
+			color: function () {
+				var percentage = this.attr('num') / 100;
+				return 256 - Math.round(156 * percentage);
+			}
+		}));
+	}
+
+	// Push into the list after the values are generated, so that the
+	// items can be pushed in at the correct index based on the comparator.
+	rows.push(row);
+}
 
 var data = {
-  age: age,
-  up: function(){
-    age( age()+1 );
-  },
-  down: function(){
-    age( age()-1 );
-  },
-  update: function(context, el, ev){
-    age( el.val() );
-  }
+	rows: rows,
+	changeComparator: function (map, el) {
+		var index = el.attr('comparator-index');
+
+		rows.comparator = 'cols.' + index + '.num';
+		rows.sort();
+		can.trigger(rows, 'length', [rows.length]);
+	}
 };
 
+$("#out").html( template( data , {}) );
+
+
+// Increment every number by a few every couple of secs
+// This will result in the color of the cell being changed
+
+setInterval(function () {
+	can.batch.start();
+	data.rows.each(function (row) {
+		row.attr('cols').each(function (td) {
+			td.attr('num', td.attr('num')+1);
+		});
+	})
+	can.batch.stop();
+}, 2000);
 
 
-$("#out").html( template( data ) );
 
-})
+});
 </script>