diff -r d49b927bfe62 -r bd58970ffd16 client/js/main.js
--- a/client/js/main.js	Thu Aug 16 17:24:13 2012 +0200
+++ b/client/js/main.js	Fri Aug 17 12:50:00 2012 +0200
@@ -33,9 +33,9 @@
 
 Rkns._ = _;
 
-Rkns.Serializers = {};
+Rkns.RemoteModels = {};
 
-Rkns.Serializers._Base = function(_project) {
+Rkns.RemoteModels._Base = function(_project, _opts) {
     if (typeof _project !== "undefined") {
         this._project = _project;
         this._callbackQueue = [];
@@ -43,23 +43,31 @@
     }
 }
 
-Rkns.Serializers._Base.prototype.deserialize = function() {}
+Rkns.RemoteModels._Base.prototype.fullSave
+    = Rkns.RemoteModels._Base.prototype.addUser
+    = Rkns.RemoteModels._Base.prototype.addNode
+    = Rkns.RemoteModels._Base.prototype.addEdge
+    = Rkns.RemoteModels._Base.prototype.updateNode
+    = Rkns.RemoteModels._Base.prototype.updateEdge
+    = Rkns.RemoteModels._Base.prototype.removeNode
+    = Rkns.RemoteModels._Base.prototype.removeEdge
+    = function() {}
 
-Rkns.Serializers._Base.prototype.deferCallback = function(_callback) {
+Rkns.RemoteModels._Base.prototype.deferCallback = function(_callback) {
     var _this = this;
     Rkns._.defer(function() {
         _callback.call(_this);
     });
 }
 
-Rkns.Serializers._Base.prototype.handleCallbacks = function() {
+Rkns.RemoteModels._Base.prototype.handleCallbacks = function() {
     this._loaded = true;
     while (this._callbackQueue.length) {
         this.deferCallback(this._callbackQueue.splice(0,1)[0]);
     }
 }
 
-Rkns.Serializers._Base.prototype.onLoad = function(_callback) {
+Rkns.RemoteModels._Base.prototype.onLoad = function(_callback) {
     if (this._loaded) {
         this.deferCallback(_callback);
     } else {
@@ -67,117 +75,78 @@
     }
 }
 
-Rkns.Serializers._Base.prototype.save = function() {}
+Rkns.RemoteModels._Base.prototype.save = function() {}
+
+Rkns.Bins = {}
+
+Rkns.Bins._Base = function(_project) {
+    if (typeof _project !== "undefined") {
+        this._project = _project;
+    }
+}
+
+Rkns.Bins._Base.prototype.baseTemplate = '';
 
-Rkns.Project = function(_opts) {
-    if (typeof _opts.serializer == "undefined") {
-        _opts.serializer = "BasicJson";
+Rkns.Bins._Base.prototype.addTab = function(_title) {
+    var _tabDiv = Rkns.$('<div>');
+    _tabDiv.addClass('Rk-TabDiv')
+        .css("display","none")
+        .appendTo('.Rk-TabDivs');
+    var _tabButton = Rkns.$('<li>');
+    _tabButton.addClass('Rk-TabButton')
+        .html(_title)
+        .click(function() {
+            Rkns.$('.Rk-TabButton').removeClass("active");
+            Rkns.$(this).addClass("active");
+            Rkns.$('.Rk-TabDiv').hide();
+            _tabDiv.show();
+        })
+        .appendTo('.Rk-TabButtons');
+    return {
+        button: _tabButton,
+        contents: _tabDiv
+    }
+}
+
+/* Point of entry */
+
+Rkns.Renkan = function(_opts) {
+    if (typeof _opts.remotemodel == "undefined") {
+        _opts.remotemodel = "BasicJson";
     }
     if (typeof _opts.language == "undefined" || typeof Rkns.i18n[_opts.language] == "undefined") {
         _opts.language = "en";
     }
-    this.l10n = Rkns.i18n[_opts.language];
-    this._opts = _opts;
-    this.users = new Rkns.Model.List();
-    this.nodes = new Rkns.Model.List();
-    this.edges = new Rkns.Model.List();
-    if (typeof this._opts.user === "object") {
-        this.current_user = this.addUser(this._opts.user)
+    if (typeof _opts.container == "undefined") {
+        _opts.container = "renkan";
+    }
+    this.project = new Rkns.ViewModel.Project();
+    this.project.l10n = Rkns.i18n[_opts.language];
+    if (typeof _opts.user === "object") {
+        this.current_user = this.project.addUser(_opts.user)
     }
-    this.serializer = new Rkns.Serializers[_opts.serializer](this);
-    this.renderer = new Rkns.Renderer.Scene(this);
+    Rkns.$("#" + _opts.container).html(this.template());
+    this.project.remotemodel = new Rkns.RemoteModels[_opts.remotemodel](this.project, _opts);
+    this.project.renderer = new Rkns.Renderer.Scene(this.project, _opts);
     var _this = this;
-    this.serializer.onLoad(function() {
-        if (typeof _this.current_user === "undefined") {
-            _this.current_user = _proj.users[0];
+/*    if (typeof _opts.bins === "object") {
+        this.bins = Rkns._(_opts.bins).map(function(_type) {
+            return new Rkns.Bins[_type](_this);
+        });
+        Rkns.$('.Rk-TabButton:last').addClass("active");
+        Rkns.$('.Rk-TabDiv:last').show();
+} */
+    this.project.remotemodel.onLoad(function() {
+        if (typeof _this.project.current_user === "undefined") {
+            _this.project.current_user = _this.project.users[0];
         }
-        _this.renderer.draw();
+        _this.project.renderer.draw();
     });
 }
 
-Rkns.Project.prototype.addNode = function(_props, _render_save) {
-    var _node = new Rkns.Model.Node(this, _props);
-    this.nodes.push(_node);
-    if (typeof _render_save !== "undefined" && (_render_save&Rkns._RENDER)) {
-        var _controller = this.renderer.addController("Node", _node);
-        _controller.redraw();
-    }
-    if (typeof _render_save !== "undefined" && (_render_save&Rkns._SAVE)) {
-        this.serializer.save();
-    }
-    return _node;
-}
-
-Rkns.Project.prototype.addEdge = function(_props, _render_save) {
-    var _edge = new Rkns.Model.Edge(this, _props);
-    this.edges.push(_edge);
-    if (typeof _render_save !== "undefined" && (_render_save&Rkns._RENDER)) {
-        var _controller = this.renderer.addController("Edge", _edge);
-        _controller.redraw();
-    }
-    if (typeof _render_save !== "undefined" && (_render_save&Rkns._SAVE)) {
-        this.serializer.save();
-    }
-    return _edge;
-}
-
-Rkns.Project.prototype.addUser = function(_props, _render_save) {
-    var _user = new Rkns.Model.User(this, _props);
-    this.users.push(_user);
-    return _user;
-}
-
-Rkns.Project.prototype.updateElement = function(_element, _props, _render_save) {
-    Rkns._(_props).each(function(_v, _k) {
-        _element[_k] = _v;
-    });
-    if (typeof _render_save !== "undefined" && (_render_save&Rkns._RENDER)) {
-        if (typeof _element.__controller !== "undefined") {
-            _element.__controller.redraw();
-        } else {
-            this._renderer.redraw();
-        }
-    }
-    if (typeof _render_save !== "undefined" && (_render_save&Rkns._SAVE)) {
-        this.serializer.save();
-    }
-}
-
-Rkns.Project.prototype.removeNode = function(_node, _render_save) {
-    this.nodes.removeId(_node.id);
-    if (typeof _node.__controller !== "undefined") {
-        this.renderer.removeController(_node.__controller);
-    }
-    var _this = this;
-    this.edges = this.edges.filter(function(_edge) {
-        var _keep = _edge.from !== _node && _edge.to !== _node;
-        if (!_keep && typeof _edge.__controller !== "undefined") {
-            _this.renderer.removeController(_edge.__controller);
-        }
-        return _keep;
-    });
-    if (typeof _render_save !== "undefined" && (_render_save&Rkns._RENDER)) {
-        this.renderer.redraw();
-    }
-    if (typeof _render_save !== "undefined" && (_render_save&Rkns._SAVE)) {
-        this.serializer.save();
-    }
-    return _node;
-}
-
-Rkns.Project.prototype.removeEdge = function(_edge, _render_save) {
-    this.edges.removeId(_edge.id);
-    if (typeof _edge.__controller !== "undefined") {
-        this.renderer.removeController(_edge.__controller);
-    }
-    if (typeof _render_save !== "undefined" && (_render_save&Rkns._RENDER)) {
-        this.renderer.redraw();
-    }
-    if (typeof _render_save !== "undefined" && (_render_save&Rkns._SAVE)) {
-        this.serializer.save();
-    }
-    return _edge;
-}
+Rkns.Renkan.prototype.template = Rkns._.template(
+    '<div class="Rk-Bins"></div><div class="Rk-Render"></div>'
+);
 
 /* Utility functions */