@@ -31,8 +31,8 @@ <script src="js/vendor/ace/ext-searchbox.js"> </script>
     <script src="js/vendor/ace/ext-settings_menu.js"> </script>
     <script src="js/vendor/ace/ext-statusbar.js"> </script>
     <script src="js/utils.js"> </script>
-    <script src="js/components/widgets.js"> </script>
     <script src="js/models.js"> </script>
+    <script src="js/components/widgets.js"> </script>
     <script src="js/components/navbar.js"> </script>
     <script src="js/components/uploader.js"> </script>
     <script src="js/components/editor.js"> </script>

@@ -2,6 +2,7 @@ (function(){
   'use strict';
   var app = window.LS || (window.LS = {});
   var u = app.utils;
+  var w = app.widgets;
   
   app.doclist = {};
   
@@ -23,10 +24,10 @@ obj.title = m("a", {href: path+ctrl.id, config: m.route}, [ctrl.id]);
       obj.content = m("div", [
         m("p", [ctrl.content]),
         m("p", ctrl.tags.map(function(tag){
-          return u.taglink(tag);
+          return w.taglink({name: tag, key: u.guid()});
         }))
       ]);
-      return m(".row.search-result", m(".col-md-12", [u.panel(obj)])); 
+      return m(".row.search-result", m(".col-md-12", [w.panel(obj)])); 
     }
   };
   
@@ -41,15 +42,16 @@ };
   
   app.doclist.view = function(ctrl){
     var results = m(".row", [m(".col-md-12", ctrl.items.map(function(item){
+      item.key = u.guid();
       return m.component(app.doclist.panel, item);
     }))]);
    
     return m("section", [
       m(".row", [ctrl.title]),
       m(".row", [ctrl.subtitle]),
-      m(".row.text-center", [u.paginator(ctrl.querydata)]),
+      m(".row.text-center", [w.paginator(ctrl.querydata)]),
       results,
-      m(".row.text-center", [u.paginator(ctrl.querydata)])
+      m(".row.text-center", [w.paginator(ctrl.querydata)])
     ]);
   };
   

@@ -3,7 +3,6 @@ 'use strict';
   var app = window.LS || (window.LS = {});
   app.editor = {};
 
-
   app.editor.config = function(obj){
     return function(element, isInitialized, context){
       var e = element;
@@ -56,8 +55,15 @@ /**
    * @param obj
    *  - content The content of the editor
    */
-  app.editor.view = function(obj) {
-    return m(".editor.panel.panal-default", {config: app.editor.config(obj)}, obj.content);
+  app.editor.controller = function(args) {
+    return {
+      content: args.content,
+      id: args.id,
+      readOnly: args.readOnly,
+    };
+  };
+  app.editor.view = function(ctrl) {
+    return m(".editor.panel.panal-default", {config: app.editor.config(ctrl)}, ctrl.content);
   };
   
 }());

@@ -2,45 +2,41 @@ (function(){
   'use strict';
   var app = window.LS || (window.LS = {});
   var u = app.utils;
+  var w = app.widgets;
 
   app.navlinks = {
-    controller: function(){
-      app.navlinks.vm.init();
-    },
-    vm: {
-      init: function(){
-        var vm = this;
-        var caret = "<i class='fa fa-angle-right'></i> ";
-        this.activelink = function(url){
-          return (m.route().match(new RegExp("^\/"+url))) ? "active" : "";
-        };
-        vm.guidelinks = [
-          {path: "/guide/overview", title: "Overview"},
-          {path: "/guide/use-cases", title: caret+"Use Cases"},
-          {path: "/guide/architecture", title: caret+"Architecture"},
-          {path: "/guide/getting-started", title: "Getting Started"},
-          {path: "/guide/usage", title: "Usage"},
-          {path: "/guide/api", title: "API"},
-          {path: "/guide/credits", title: "Credits"}
-        ];
-        vm.taglinks = function(info){ 
-          return info.tags.map(function(tag){
-            var key = Object.keys(tag)[0];
-            return {path: "/tags/"+key, title: key+" ("+tag[key]+")"};
-          });
-        };
-      }
+    controller: function(args){
+      var vm = {};
+      var caret = "<i class='fa fa-angle-right'></i> ";
+      vm.activelink = function(url){
+        return (m.route().match(new RegExp("^\/"+url))) ? "active" : "";
+      };
+      vm.guidelinks = [
+        {path: "/guide/overview", title: "Overview"},
+        {path: "/guide/use-cases", title: caret+"Use Cases"},
+        {path: "/guide/architecture", title: caret+"Architecture"},
+        {path: "/guide/getting-started", title: "Getting Started"},
+        {path: "/guide/usage", title: "Usage"},
+        {path: "/guide/api", title: "API"},
+        {path: "/guide/credits", title: "Credits"}
+      ];
+      vm.taglinks = function(info){ 
+        return info.tags.map(function(tag){
+          var key = Object.keys(tag)[0];
+          return {path: "/tags/"+key, title: key+" ("+tag[key]+")"};
+        });
+      };
+      return vm;
     },
     view: function(ctrl){
-      var vm = app.navlinks.vm;
       var links = [
-        m("li", {class: vm.activelink("info")}, [m("a", {href: "/info", config: m.route}, 
+        m("li", {class: ctrl.activelink("info")}, [m("a", {href: "/info", config: m.route}, 
             [m("i.fa.fa-info-circle"), " Info"])]),
-        u.dropdown({title: "Guide", icon:"fa-book", links: vm.guidelinks, active: vm.activelink("guide")}),
-        u.dropdown({title: "Tags", icon:"fa-tags", links: vm.taglinks(app.system), active: vm.activelink("tags")})];
+        w.dropdown({title: "Guide", icon:"fa-book", links: ctrl.guidelinks, active: ctrl.activelink("guide")}),
+        w.dropdown({title: "Tags", icon:"fa-tags", links: ctrl.taglinks(app.system), active: ctrl.activelink("tags")})];
       if (!app.system.read_only) {
         links.push(m("li", 
-          {class: vm.activelink("new")}, [m("a", {href: "/document/create/", config: m.route}, 
+          {class: ctrl.activelink("new")}, [m("a", {href: "/document/create/", config: m.route}, 
             [m("i.fa.fa-plus-circle"), " New"])]));
       }
       return m("ul.nav.navbar-nav", links);
@@ -48,9 +44,8 @@ }
   };
   
   app.navheader = {
-    controller: function() {},
+    controller: function(args) {},
     view: function(ctrl) {
-      var vm =  app.navlinks.vm;
       return m(".navbar-header", [
         m("button.navbar-toggle.collapsed[data-toggle='collapse'][data-target='#nav-collapse'][type='button']", [
           m("span.sr-only", "Toggle navigation"),
@@ -65,45 +60,40 @@ };
   
   app.searchbox = {
     controller: function() {
-      app.searchbox.vm.init();
-    },
-    vm: {
-      init: function(){
-        var vm =  this;
-        vm.query = m.prop("");
-        vm.keySearch = function(el, isInitialized, context){
+      var vm =  {};
+      vm.query = m.prop("");
+      vm.keySearch = function(el, isInitialized, context){
+        if (isInitialized) return;
+        $(el).keypress(function(event){
           if (isInitialized) return;
-          $(el).keypress(function(event){
-            if (isInitialized) return;
-            m.redraw.strategy("none");
-            vm.query($(el).val());
-            if (event.which == 13){
-              vm.search();
-              return false;
-            }
-          });
-        };
-        vm.search = function(){
-          m.route("/search/"+vm.query());
-        };
-      }
+          m.redraw.strategy("none");
+          vm.query($(el).val());
+          if (event.which == 13){
+            vm.search();
+            return false;
+          }
+        });
+      };
+      vm.search = function(){
+        m.route("/search/"+vm.query());
+      };
+      return vm;
     },
     view: function(ctrl) {
-      var vm = app.searchbox.vm;
       return m("form.navbar-form.navbar-right[role='search']", [
           m(".input-group", [
             m("input.form-control", {
               type:"text", 
               placeholder:"Search...",
-              onchange: m.withAttr("value", vm.query),
-              config: vm.keySearch,
-              value: vm.query()
+              onchange: m.withAttr("value", ctrl.query),
+              config: ctrl.keySearch,
+              value: ctrl.query()
             }),
             m("span.input-group-btn", 
               m("button.btn.btn-default",
                 {
                   type: "button",
-                  onclick: vm.search
+                  onclick: ctrl.search
                 }, 
                 [m("i.fa.fa-search")]))
           ])
@@ -113,18 +103,13 @@ }
   };
   
   app.navbar = {
-    controller: function() {
-      this.navheader = new app.navheader.controller();
-      this.navlinks = new app.navlinks.controller();
-      this.searchbox = new app.searchbox.controller();
-    },
     view: function(ctrl) {
       return m("nav.navbar.navbar-inverse.navbar-fixed-top", [
         m(".container-fluid", [
-          app.navheader.view(ctrl.navheader),
+          m.component(app.navheader),
           m("#nav-collapse.collapse.navbar-collapse", [
-            app.navlinks.view(ctrl.navlinks),
-            app.searchbox.view(ctrl.searchbox)
+            m.component(app.navlinks),
+            m.component(app.searchbox)
           ])
         ])  
       ]);

@@ -89,7 +89,7 @@ }
           if (ctrl.c_page === 0){
               prev = page(0, "«", true);
           }
-          if (c_page === ctrl.max_page){
+          if (ctrl.c_page === ctrl.max_page){
               next = page(ctrl.max_page, "»", true);
           }
           pages.push(page(i));
@@ -137,13 +137,13 @@ app.widgets.taglink = function(obj){
     var taglink = {
       controller: function(args) {
         return {
-          color: /^\$/.test(args.tag) ? "warning" : "primary",
-          tag: args.tag
+          color: /^\$/.test(args.name) ? "warning" : "primary",
+          name: args.name
         };
       },
       view: function(ctrl) {
         return m("span.tag-label.label.label-"+ctrl.color, 
-          [m("i.fa.fa-tag"), " ", m("a", {href: "/tags/"+ctrl.tag, config:m.route}, ctrl.tag)]);
+          [m("i.fa.fa-tag"), " ", m("a", {href: "/tags/"+ctrl.name, config:m.route}, ctrl.name)]);
       }
     };
     return m.component(taglink, obj);
@@ -167,13 +167,13 @@ app.widgets.tagbutton = function(obj) {
     var tagbutton = {
       controller: function(args){
         return {
-          tag: args.tag,
+          name: args.tag,
           n: args.n
         };
       },
       view: function(ctrl) {
         return m("a", {href: "/tags/"+ctrl.tag, config:m.route},
-          [m("i.fa.fa-tag"), " "+ctrl.tag+" ", m("span.badge", ctrl.n)]);
+          [m("i.fa.fa-tag"), " "+ctrl.name+" ", m("span.badge", ctrl.n)]);
       }
     };
     return m.component(tagbutton, obj);
@@ -183,7 +183,7 @@ // Toolbar
   app.widgets.toolbar = function(obj) {
     var toolbar = {
       controller: function(args){
-        return {link: args.links};
+        return {links: args.links};
       },
       view: function(ctrl){
         return m("nav.toolbar.btn-group[role='group'][aria-label='...'].pull-right", 

@@ -1,7 +1,8 @@ 
 (function(){
   'use strict';
   var app = window.LS || (window.LS = {});
-  var u = LS.utils;
+  var u = app.utils;
+  var w = app.widgets;
 
   // Document module
   app.document = {vm: {}};
@@ -178,7 +179,7 @@ // Module main view
   app.document.main = function(){
     var vm = app.document.vm;
     var titleLeft = vm.id();
-    var titleRight = m("span.pull-right", vm.tags.map(function(t){return u.taglink(t);}));
+    var titleRight = m("span.pull-right", vm.tags.map(function(t){return w.taglink({name: t, key: u.guid()});}));
     // Delete confirmation dialog
     var deleteDialogCfg = {
       title: "Delete Document",
@@ -231,16 +232,16 @@ var panelContent;
     if (vm.image){
       panelContent = m("div.text-center", [m("img", {src: "/docs/"+vm.id(), title: vm.id()})]);
     } else {
-      panelContent = app.editor.view(vm);
+      panelContent = m.component(app.editor, vm);
     }
     var title = m("span",[titleLeft, titleRight]);
     
     return m("div", [
       vm.uploader.view(),
-      u.modal(deleteDialogCfg),
-      u.modal(editTagsDialogCfg),
-      m(".row", [u.toolbar({links: vm.tools()})]),
-      m(".row", [u.panel({title: title, content:panelContent})])
+      w.modal(deleteDialogCfg),
+      w.modal(editTagsDialogCfg),
+      m(".row", [w.toolbar({links: vm.tools()})]),
+      m(".row", [w.panel({title: title, content:panelContent})])
     ]);
   };
   

@@ -1,7 +1,8 @@ 
 (function(){
   'use strict';
   var app = window.LS || (window.LS = {});
-  var u = LS.utils;
+  var u = app.utils;
+  var w = app.widgets;
 
   // Guide Module
   app.guide = {vm: {}};
@@ -16,7 +17,7 @@ vm.links = app.system.read_only ? m.prop([]) : m.prop([{action: vm.edit, title: "Edit", icon: "edit"}]);
   };
   app.guide.main = function(){
     return m("article.row", [
-      u.toolbar({links: app.guide.vm.links()}), 
+      w.toolbar({links: app.guide.vm.links()}), 
       m.trust(app.guide.vm.content())
     ]);
   };

@@ -1,7 +1,8 @@ 
 (function(){
   'use strict';
   var app = window.LS || (window.LS = {});
-  var u = LS.utils;
+  var u = app.utils;
+  var w = app.widgets;
 
   // HTMLDoc Module
   app.htmldoc = {vm: {}};
@@ -18,7 +19,7 @@ vm.links = m.prop([{action: vm.view, title: "View Source", icon: "code"}]);
   };
   app.htmldoc.main = function(){
     return m("article.row", [
-      u.toolbar({links: app.htmldoc.vm.links()}), 
+      w.toolbar({links: app.htmldoc.vm.links()}), 
       m.trust(app.htmldoc.vm.content())
     ]);
   };

@@ -1,7 +1,8 @@ 
 (function(){
   'use strict';
   var app = window.LS || (window.LS = {});
-  var u = LS.utils;
+  var u = app.utils;
+  var w = app.widgets;
 
   // Info Module
   app.info = {vm: {}};
@@ -28,12 +29,12 @@ ])]);
     var logo = m(".col-sm-6", [m("img", {src: "images/litestore.png"})]);
     var taglist = m("ul.list-unstyled", info.tags.map(function(tag){
         var key = Object.keys(tag)[0];
-        return m("li", [u.tagbutton(key, tag[key])]);
+        return m("li", [w.tagbutton({tag: key, n: tag[key], key: u.guid()})]);
         })
       );
     var v = m(".row", [
-      m(".col-md-6", [u.panel({title: "Datastore Information", content: m(".row", [logo,infolist])})]),
-      m(".col-md-6", [u.panel({title: "Tags", content: taglist})])
+      m(".col-md-6", [w.panel({title: "Datastore Information", content: m(".row", [logo, infolist])})]),
+      m(".col-md-6", [w.panel({title: "Tags", content: taglist})])
     ]);
     return v;
   };

@@ -71,9 +71,7 @@ * @property vm a view-model (with init function)
    * @property main the main view to load
    */
   u.layout = function(mod) {
-  
-    mod.controller = mod.controller || function(){
-      this.navbar = new app.navbar.controller();
+    mod.controller = mod.controller || function(args){
       mod.vm.init();
       // Display flash if set on previous route
       mod.vm.flash = m.prop(u.flash());
@@ -87,11 +85,10 @@ mod.vm.flashError = function(obj){
         mod.vm.showFlash({type: "warning", content: obj.error});
       };
     };
-  
     mod.view = function(ctrl){
       return m("div", [
         m(".container", [
-            app.navbar.view(ctrl.navbar),
+            m.component(app.navbar),
             m("main", [mod.vm.flash(), mod.main()]),
             m("footer.footer.container.center", [
               m("p")])