tastejs · rhysbrettbowen · May 7, 2012 · May 7, 2012 · May 7, 2012 · May 7, 2012
diff --git a/index.html b/index.html
@@ -150,4 +150,4 @@ <h2>Getting Involved</h2>
 		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 		<script>var _gaq=[['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));</script>
 	</body>
-</html>
+</html>
diff --git a/labs/architecture-examples/plastronjs/README.md b/labs/architecture-examples/plastronjs/README.md
@@ -0,0 +1,46 @@
+# PlastronJS • [TodoMVC](http://todomvc.com)
+
+A todo app using [PlastronJS](https://github.com/rhysbrettbowen/PlastronJS)
+and [Closure Tools](https://developers.google.com/closure/)
+
+## Run
+
+Just open the index.html in your browser
+
+## Run uncompiled
+
+The app is built with [Plovr](http://plovr.com/). To run the unminified version you need to [download Plovr](http://plovr.com/download.html), create a directory called "build" and put the jar file in the build folder.
+
+You will then need to [download PlastronJS](https://github.com/rhysbrettbowen/PlastronJS) to js/lib (you will need to create the folder).
+
+Next open a command prompt in the base directory of the plastronjs todomvc example and type in.
+
+```
+java -jar build/plovr.jar serve plovr.json
+```
+
+Change the script src at the bottom of the index.html from js/compiled.js to:
+
+```
+http://localhost:9810/compile?id=todomvc&mode=raw
+```
+
+You can now view the uncompiled example and play around with it!
+
+# Compilation
+
+Once you have done the steps above you can compile any changes you make by running the below command:
+
+```
+java -jar build/plovr.jar build plovr.json
+```
+
+and view the compiled version fo the page by changing the bottom script src back to js/compiled.
+
+## Need help?
+
+shoot me a quick message on [twitter](https://twitter.com/#!/RhysBB)
+
+## Credit
+
+Created by [Rhys Brett-Bowen](http://rhysbrettbowen.com)
diff --git a/labs/architecture-examples/plastronjs/index.html b/labs/architecture-examples/plastronjs/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>PlastronJS • TodoMVC</title>
+  <link rel="stylesheet" href="../../../assets/base.css">
+</head>
+<body>
+  <section id="todoapp">
+    <header id="header">
+      <h1>todos</h1>
+      <input id="new-todo" class="todo-entry" placeholder="What needs to be done?" autofocus>
+    </header>
+    <section id="main">
+      <input id="toggle-all" class="toggle-all" type="checkbox">
+      <label for="toggle-all">Mark all as complete</label>
+      <ul id="todo-list"></ul>
+    </section>
+    <footer id="footer">
+      <span id="todo-count"><strong>1</strong> item left</span>
+      <ul id="filters">
+        <li>
+          <a class="selected" href="#/">All</a>
+        </li>
+        <li>
+          <a href="#/active">Active</a>
+        </li>
+        <li>
+          <a href="#/completed">Completed</a>
+        </li>
+      </ul>
+      <button id="clear-completed" class="clear-completed">Clear completed (1)</button>
+    </footer>
+  </section>
+  <footer id="info">
+    <p>Double-click to edit a todo</p>
+    <p>Created by <a href="http://rhysbrettbowen.com">Rhys Brett-Bowen</a> (<a href="https://twitter.com/#!/RhysBB">RhysBB</a>).</p>
+    <p>Using <a href="https://github.com/rhysbrettbowen/PlastronJS">PlastronJS</a> and <a href="https://developers.google.com/closure/">Closure Tools</a></p>
+    <p>Part of <a href="http://todomvc.com">TodoMVC</a>.</p>
+  </footer>
+  <!-- <script src="http://localhost:9810/compile?id=todomvc&mode=raw"></script> -->
+  <script src="js/compiled.js"></script>
+</body>
+</html>
diff --git a/labs/architecture-examples/plastronjs/js/app.js b/labs/architecture-examples/plastronjs/js/app.js
@@ -0,0 +1,51 @@
+goog.require('goog.dom');
+goog.require('goog.dom.classes');
+goog.require('mvc.Collection');
+goog.require('mvc.Router');
+goog.require('todomvc.listcontrol');
+goog.require('todomvc.listmodel');
+
+
+
+
+
+var todolist = new todomvc.listmodel();
+
+//create the control for the collection.
+var todolistControl = new todomvc.listcontrol(todolist);
+todolistControl.decorate(goog.dom.getElement('todoapp'));
+
+//setup router
+var router = new mvc.Router();
+
+
+/**
+ * toggles selected class on filters list
+ *
+ * @param {string} chosenFilter selected filter by name.
+ */
+var toggleFilters = function(chosenFilter) {
+  var filters = goog.dom.getElementsByTagNameAndClass('A', undefined,
+    goog.dom.getElement('filters'));
+  goog.array.forEach(filters, function(filter) {
+    goog.dom.classes.enable(filter, 'selected',
+        goog.dom.getTextContent(filter) === chosenFilter);
+  });
+};
+
+router.route('/', function() {
+  todolistControl.setFilter(todomvc.listcontrol.Filter.ALL);
+  toggleFilters('All');
+});
+
+router.route('/active', function() {
+  todolistControl.setFilter(todomvc.listcontrol.Filter.ACTIVE);
+  toggleFilters('Active');
+});
+
+router.route('/completed', function() {
+  todolistControl.setFilter(todomvc.listcontrol.Filter.COMPLETED);
+  toggleFilters('Completed');
+});
+
+