@@ -52,14 +52,12 @@ };
   };
 
   /**
-   * @param obj
-   *  - content The content of the editor
+   * @param {Function} ctrl
+   * @param {Object} args
+   * @param {string} args.content
    */
-  app.editor.controller = function(args) {
-    return args;
-  };
-  app.editor.view = function(ctrl) {
-    return m(".editor.panel.panal-default", {config: app.editor.config(ctrl)}, ctrl.content);
+  app.editor.view = function(ctrl, args) {
+    return m(".editor.panel.panal-default", {config: app.editor.config(args)}, args.content);
   };
   
-}());+}());

@@ -44,8 +44,7 @@ }
   };
   
   app.navheader = {
-    controller: function(args) {},
-    view: function(ctrl) {
+    view: function(ctrl, args) {
       return m(".navbar-header", [
         m("button.navbar-toggle.collapsed[data-toggle='collapse'][data-target='#nav-collapse'][type='button']", [
           m("span.sr-only", "Toggle navigation"),
@@ -78,7 +77,7 @@ m.route("/search/"+vm.query());
       };
       return vm;
     },
-    view: function(ctrl) {
+    view: function(ctrl, args) {
       return m("form.navbar-form.navbar-right[role='search']", [
           m(".input-group", [
             m("input.form-control", {
@@ -102,7 +101,7 @@ }
   };
   
   app.navbar = {
-    view: function(ctrl) {
+    view: function(ctrl, args) {
       return m("nav.navbar.navbar-inverse.navbar-fixed-top", [
         m(".container-fluid", [
           m.component(app.navheader),

@@ -6,96 +6,102 @@ */
 (function(){
   'use strict';  
   var app = window.LS || (window.LS = {});
-  var u = LS.utils;
+  var u = app.utils;
+  var w = app.widgets;
   
-  app.uploader = function(docid){
-    
-    var uploader = {vm: {}};
-    var vm = uploader.vm;
-    
-    vm.docid = m.prop(docid);
-    vm.file = m.prop();
-    vm.id = u.guid();
-    vm.modalId = "#upload-"+vm.id+"-modal";
-    vm.btnId = "#upload-"+vm.id+"-btn";
-    vm.reader = new FileReader();
-    vm.contents = m.prop();
-    vm.isText = m.prop(false);
-    
-    vm.reader.onloadstart = function() {
-      vm.contents("");
-      $(uploader.vm.modalId).find(".btn-primary").attr("disabled", true);
-    };
-    
-    vm.reader.onloadend = function() {
-      vm.contents(vm.reader.result);
-      $(uploader.vm.modalId).find(".btn-primary").removeAttr("disabled");
-    };
+  /**
+   * @param {Object} obj
+   * @param {string} obj.docid
+   * @param {string} obj.id
+   * @param {Function} obj.onSuccess
+   * @param {Function} obj.onFailure
+   */
+  app.uploader = function(obj){
 
-    vm.save = function() {
-      var doc = {id: vm.docid()};
-      doc.data = vm.contents().split(',')[1];
-      if (vm.isText()) {
-        doc.data = window.atob(doc.data);
-      }
-      return Doc.put(doc, vm.file().type).then(uploader.onSuccess, uploader.onFailure);
-    };
+    var modalId = "#upload-"+obj.id+"-modal";
+    var uploader = {};
     
     uploader.config = function(obj){
       return function(element, isInitialized, context){
         $(element).change(function(event){
-          vm.file(element.files[0]);
-          if (vm.reader.readyState != 1) {
-            vm.reader.readAsDataURL(vm.file()); 
+          obj.file(element.files[0]);
+          if (obj.reader.readyState != 1) {
+            obj.reader.readAsDataURL(obj.file()); 
           }
         });
       };
     };
     
-    uploader.showModal = function() {
-      return u.showModal(uploader.vm.modalId);
-    };
-    
-    uploader.onSuccess = function(data){
-      // Callback
-    };
-    uploader.onFailure = function(data){
-      // Callback
-    };
+    uploader.controller = function(args) {
+      var vm = this;
+
+      vm.docid = m.prop(args.docid);
+      vm.file = m.prop();
+      vm.id = args.id; 
+      vm.btnId = "#upload-"+vm.id+"-btn";
+      vm.reader = new FileReader();
+      vm.contents = m.prop();
+      vm.isText = m.prop(false);
+
+      vm.reader.onloadstart = function() {
+        vm.contents("");
+        $(modalId).find(".btn-primary").attr("disabled", true);
+      };
+
+      vm.reader.onloadend = function() {
+        vm.contents(vm.reader.result);
+        $(modalId).find(".btn-primary").removeAttr("disabled");
+      };
+
+      vm.save = function() {
+        var doc = {id: vm.docid()};
+        doc.data = vm.contents().split(',')[1];
+        if (vm.isText()) {
+          doc.data = window.atob(doc.data);
+        }
+        return Doc.put(doc, vm.file().type).then(args.onSuccess, args.onFailure);
+      };
+      return vm;
+    }
     
-    uploader.view = function(){
+    uploader.view = function(ctrl, args){
       var config = {
         title: "Upload Document",
-        id: "upload-"+vm.id+"-modal",
-        action: vm.save,
+        id: "upload-"+ctrl.id+"-modal",
+        action: ctrl.save,
         actionText: "Upload",
         content: m("div", [
           m(".form-group", [
           m("label", "Document ID"),
             m("input.form-control", {
               placeholder: "Enter document ID",
-              onchange: m.withAttr("value", vm.docid),
+              onchange: m.withAttr("value", ctrl.docid),
               size: 35,
-              disabled: (docid === "") ? false : true,
-              value: vm.docid()
+              disabled: (ctrl.docid() === "") ? false : true,
+              value: ctrl.docid()
             })
           ]),
           m(".form-group", [
             m("label", "File"),
-            m("input.form-control#upload-"+vm.id+"-btn", {type:"file", config: uploader.config(vm)}),
+            m("input.form-control#upload-"+ctrl.id+"-btn", {type:"file", config: uploader.config(ctrl)}),
             m("p.help-block", "Select a file to upload as document.")
           ]),
           m(".checkbox", [
             m("label", [
-              m("input", {type: "checkbox", value: vm.isText(), onchange: m.withAttr("value", vm.isText)}), 
+              m("input", {type: "checkbox", value: ctrl.isText(), onchange: m.withAttr("value", ctrl.isText)}), 
               "Text File"
             ]),
             m("p.help-block", "Select if the file to upload contains textual content.")
           ])
         ])
       };
-      return u.modal(config);
+      return w.modal(config);
     };
-    return uploader;
+
+    var instance = m.component(uploader, obj);
+    instance.show = function() {
+      return u.showModal(modalId);
+    };
+    return instance;
   };
-}());+}());

@@ -2,10 +2,11 @@ (function(){
   window.Page = {};
   window.Info = {};
   window.Doc = {};
-  var u = window.LS.utils;
-  var ls_host = 'http://localhost:9500'
+  var app = window.LS || (window.LS = {});
+  var u = app.utils;
+  app.host = 'http://localhost:9500'
 
-  var host = location.origin === ls_host ? "" : ls_host
+  var host = location.origin === app.host ? "" : app.host
   
   Page.get = function(id) {
     var content = m.prop("");

@@ -11,7 +11,6 @@ var vm = this;
     vm.dir = app.system.directory;
     vm.id = m.prop(m.route.param("id"));
     vm.action = m.route.param("action");
-    vm.uploader = app.uploader({docid: vm.id() || ""});
     vm.readOnly = true; 
     vm.contentType = m.prop("");
     vm.updatedTags = m.prop("");
@@ -134,7 +133,7 @@ }, vm.flashError);
     };
     
     // File uploader callbacks.
-    vm.uploader.onSuccess = function(data){
+    var onSuccess = function(data){
       vm.id(data.id);
       LS.flash({type: "success", content: "Document '"+vm.id()+"' uploader successfully."});
       Info.get().then(function(info){
@@ -143,9 +142,13 @@ vm.viewDocument();
       });
     };
     
-    vm.uploader.onFailure = function(data){
+    var onFailure = function(data){
       vm.flashError;
     };
+
+    var modalId = u.guid();
+
+    vm.uploader = app.uploader({docid: vm.id() || "", onSuccess: onSuccess, onFailure: onFailure, id: modalId});
     
     // Populate tools based on current action
     vm.tools = function(){
@@ -157,9 +160,10 @@ var cfg = {};
       cfg.title = "Edit Tags";
       cfg.contentId = "#edit-tags-popover";
       var tools = [];
+      var show = function(){ u.showModal()}
       switch (vm.action){
         case "view":
-          tools.push({title: "Upload", icon: "upload", action: vm.uploader.showModal()});
+          tools.push({title: "Upload", icon: "upload", action: vm.uploader.show()});
           if (!vm.binary) {
             tools.push({title: "Edit Content", icon: "edit", action: vm.edit});
           }
@@ -167,7 +171,7 @@ tools.push({title: "Edit Tags", icon: "tags", action: u.showModal("#edit-tags-modal")});
           tools.push({title: "Delete", icon: "trash", action: u.showModal("#delete-document-modal")});
           break;
         default:
-          tools.push({title: "Upload", icon: "upload", action: vm.uploader.showModal()});
+          tools.push({title: "Upload", icon: "upload", action: vm.uploader.show()});
           tools.push({title: "Save", icon: "save", action: vm.save});
           tools.push({title: "Cancel", icon: "times-circle", action: vm.cancel});
       }
@@ -230,14 +234,14 @@ })]);
     }
     var panelContent;
     if (vm.image){
-      panelContent = m("div.text-center", [m("img", {src: "/docs/"+vm.id(), title: vm.id()})]);
+      panelContent = m("div.text-center", [m("img", {src: app.host+"/docs/"+vm.id(), title: vm.id()})]);
     } else {
       panelContent = m.component(app.editor, vm);
     }
     var title = m("span",[titleLeft, titleRight]);
     
     return m("div", [
-      vm.uploader.view(),
+      vm.uploader,
       w.modal(deleteDialogCfg),
       w.modal(editTagsDialogCfg),
       m(".row", [w.toolbar({links: vm.tools()})]),
@@ -246,4 +250,4 @@ ]);
   };
   
   u.layout(app.document);
-}());+}());