@@ -12,6 +12,11 @@ <script src="js/jquery.min.js"> </script>
     <script src="js/marked.min.js"></script>
     <script src="js/mithril.min.js"></script>
     <script src="js/bootstrap.min.js"> </script>
+    <script src="js/utils.js"> </script>
+    <script src="js/models.js"> </script>
+    <script src="js/components.js"> </script>
+    <script src="js/navbar.js"> </script>
+    <script src="js/modules.js"> </script>
     <script src="js/app.js"> </script>
   </body>
 </html>

@@ -1,130 +1,11 @@ 
-var Page = {}
+var app = app || {};
+(function(){
+  'use strict';
 
-Page.get = function(id) {
-  var content = m.prop("");
-  return m.request({
-      method: "GET", 
-      url: "md/"+id+".md",
-      deserialize: function(value) {return value;}
-    }).then(function(content){ return marked(content)});
-}
+  m.route.mode = "hash";
 
-var app = {}
-
-app.vm = {};
-
-app.controller = function(){
-  this.navbar = new app.navbar.controller();
-  app.vm.init();
-}
-
-app.vm.init = function() {
-  this.pageid = m.prop(m.route.param("page"));
-  this.content = Page.get(this.pageid());
-}
-  
-app.view = function(ctrl){
-  return m("div", [
-    m(".container", [
-      app.navbar.view(ctrl.navbar),
-        m("main.row", [
-          m("article", m.trust(app.vm.content()))
-        ])
-      ])
-    ])
-}
-
-var bsNavDropdown = function() {
-  var dropdown = {}
-  dropdown.view = function(ctrl) {
-    return m("li.dropdown", [
-      m("a.dropdown-toggle[href='#'][data-toggle='dropdown'][role='button'][aria-expanded='false']",
-        [m("span", ctrl.title()+" "), m("span.caret")]),
-      m("ul.dropdown-menu[role='menu']", 
-        ctrl.links().map(function(e){
-          return m("li", 
-            [m("a", {href: e.path, config: m.route}, e.title)])}))
-      ])
-  };
-  return dropdown;
-};
-
-app.navlinks = {
-  controller: function(){
-    app.navlinks.vm.init();
-  },
-  vm: {
-    init: function(){
-      this.links = m.prop([
-        {path: "/pages/overview", title: "Overview"},
-        {path: "/pages/getting-started", title: "Getting Started"},
-        {path: "/pages/usage", title: "Usage"},
-        {path: "/pages/api", title: "API"},
-        {path: "/pages/credits", title: "Credits"}
-      ]);
-      this.title = m.prop("Guide");
-      this.guideDropdown = new bsNavDropdown();
-    }
-  },
-  view: function(ctrl){
-    var vm = app.navlinks.vm;
-    return m("ul.nav.navbar-nav", [
-      m("li", [m("a", {href: "/admin", config: m.route}, "Admin")]),
-      vm.guideDropdown.view({title: vm.title, links: vm.links})
-    ])
-  }
-}
-
-app.navheader = {
-  controller: function() {},
-  view: function(ctrl) {
-    return m(".navbar-header", [
-      m("button.navbar-toggle.collapsed[data-toggle='collapse'][data-target='#nav-collapse'][type='button']", [
-        m("span.sr-only", "Toggle navigation"),
-        m("span.icon-bar"),
-        m("span.icon-bar"),
-        m("span.icon-bar")
-      ]),
-      m("a.navbar-brand", {href: "/", config:m.route}, "LiteStore")
-    ])
-  }
-}
-
-app.searchbox = {
-  controller: function() {},
-  view: function(ctrl) {
-    return m("form.navbar-form.navbar-right[role='search']", [
-        m(".input-group", [
-          m("input.form-control[type='text'i][placeholder='Search...']"),
-          m("span.input-group-btn", 
-            m("button.btn.btn-default[type='button']", [m("i.fa.fa-search")]))
-        ])
-      ]
-    )
-  }
-}
-
-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("#nav-collapse.collapse.navbar-collapse", [
-          app.navlinks.view(ctrl.navlinks),
-          app.searchbox.view(ctrl.searchbox)
-        ])
-      ])  
-    ])
-  }
-}
-
-m.route.mode = "hash";
-
-m.route(document.body, "/pages/overview", {
-    "/pages/:page": app
-});
+  m.route(document.body, "/info", {
+    '/info': app.info,
+    "/pages/:page": app.guide
+  });
+}());

@@ -0,0 +1,17 @@ 
+var app = app || {};
+
+var bsNavDropdown = function() {
+  var dropdown = {}
+  dropdown.view = function(ctrl) {
+    return m("li.dropdown", [
+      m("a.dropdown-toggle[href='#'][data-toggle='dropdown'][role='button'][aria-expanded='false']",
+        [m("span", ctrl.title()+" "), m("span.caret")]),
+      m("ul.dropdown-menu[role='menu']", 
+        ctrl.links().map(function(e){
+          return m("li", 
+            [m("a", {href: e.path, config: m.route}, e.title)])}))
+      ])
+  };
+  return dropdown;
+};
+

@@ -0,0 +1,21 @@ 
+var Page = {};
+
+Page.get = function(id) {
+  var content = m.prop("");
+  return m.request({
+      method: "GET", 
+      url: "md/"+id+".md",
+      deserialize: function(value) {return value;}
+    }).then(function(content){ return marked(content)});
+}
+
+var Info = {};
+
+Info.get = function(){
+  var content = m.prop("");
+  return m.request({
+      method: "GET", 
+      url: "/v1/info"
+    }).then(content);
+}
+

@@ -0,0 +1,50 @@ 
+var app = app || {};
+
+(function(){
+  'use strict';
+
+  // Info Module
+  app.info = {vm: {}};
+  app.info.vm.init = function() {
+    this.content = Info.get();
+  };
+  app.info.main = function(){
+    var info = app.info.vm.content();
+    var infolist = m("dl", [
+          m("dt", "Version"),
+          m("dd", info.version),
+          m("dt", "Size"),
+          m("dd", info.size),
+          m("dt", "Total Documents"),
+          m("dd", info.total_documents),
+          m("dt", "Total Tags"),
+          m("dd", info.total_tags)
+    ]);
+    var taglist = m("ul", info.tags.map(function(tag){
+        var key = Object.keys(tag)[0];
+        return m("li", [m("a", {href: "#"}, key+" ("+tag[key]+")")])
+        })
+      );
+    var v = m(".row", [
+      m(".col-md-6", [u.panel({title: "Datastore Information", content: infolist})]),
+      m(".col-md-6", [u.panel({title: "Tags", content: taglist})])
+    ])
+    return v;
+  };
+
+
+  // Guide Module
+  app.guide = {vm: {}};
+  app.guide.vm.init = function() {
+    this.pageid = m.prop(m.route.param("page"));
+    this.content = Page.get(this.pageid());
+  };
+  app.guide.main = function(){
+    return m("article.row", m.trust(app.guide.vm.content()));
+  };
+
+
+  u.layout(app.guide);
+  u.layout(app.info);
+
+}());

@@ -0,0 +1,79 @@ 
+  var app = app || {};
+  
+(function(){
+  'use strict';
+
+  app.navlinks = {
+    controller: function(){
+      app.navlinks.vm.init();
+    },
+    vm: {
+      init: function(){
+        this.guide = m.prop([
+          {path: "/pages/overview", title: "Overview"},
+          {path: "/pages/getting-started", title: "Getting Started"},
+          {path: "/pages/usage", title: "Usage"},
+          {path: "/pages/api", title: "API"},
+          {path: "/pages/credits", title: "Credits"}
+        ]);
+        this.title = m.prop("Guide");
+        this.guideDropdown = new bsNavDropdown();
+      }
+    },
+    view: function(ctrl){
+      var vm = app.navlinks.vm;
+      return m("ul.nav.navbar-nav", [
+        m("li", [m("a", {href: "/info", config: m.route}, "Info")]),
+        vm.guideDropdown.view({title: vm.title, links: vm.guide})
+      ])
+    }
+  }
+  
+  app.navheader = {
+    controller: function() {},
+    view: function(ctrl) {
+      return m(".navbar-header", [
+        m("button.navbar-toggle.collapsed[data-toggle='collapse'][data-target='#nav-collapse'][type='button']", [
+          m("span.sr-only", "Toggle navigation"),
+          m("span.icon-bar"),
+          m("span.icon-bar"),
+          m("span.icon-bar")
+        ]),
+        m("a.navbar-brand", {href: "/", config:m.route}, "LiteStore")
+      ])
+    }
+  }
+  
+  app.searchbox = {
+    controller: function() {},
+    view: function(ctrl) {
+      return m("form.navbar-form.navbar-right[role='search']", [
+          m(".input-group", [
+            m("input.form-control[type='text'i][placeholder='Search...']"),
+            m("span.input-group-btn", 
+              m("button.btn.btn-default[type='button']", [m("i.fa.fa-search")]))
+          ])
+        ]
+      )
+    }
+  }
+  
+  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("#nav-collapse.collapse.navbar-collapse", [
+            app.navlinks.view(ctrl.navlinks),
+            app.searchbox.view(ctrl.searchbox)
+          ])
+        ])  
+      ])
+    }
+  }
+}());

@@ -0,0 +1,39 @@ 
+var app = app || {};
+var u = {};
+  
+(function(){
+  'use strict';
+  /**
+   * @param mod a module
+   * @param vm a view-model (with init function)
+   * @param main the main view to load
+   */
+  u.layout = function(mod) {
+  
+    mod.controller = function(){
+      this.navbar = new app.navbar.controller();
+      mod.vm.init();
+    }
+  
+    mod.view = function(ctrl){
+      return m("div", [
+        m(".container", [
+            app.navbar.view(ctrl.navbar),
+            m("main", [mod.main()])
+          ])
+      ])
+    }
+  }
+
+  u.panel = function(obj){
+    return m(".panel.panel-default", [
+      m(".panel-heading", [
+        m("h2.panel-title", obj.title)  
+      ]),
+      m(".panel-body", [
+        obj.content
+      ])
+    ])
+  }
+  
+}());