diff -r d49b927bfe62 -r bd58970ffd16 client/js/paper-renderer.js
--- a/client/js/paper-renderer.js	Thu Aug 16 17:24:13 2012 +0200
+++ b/client/js/paper-renderer.js	Fri Aug 17 12:50:00 2012 +0200
@@ -164,7 +164,7 @@
 
 Rkns.Renderer.Node.prototype._init = function() {
     this._renderer.node_layer.activate();
-    this.type = "node";
+    this.type = "Node";
     this.circle = new paper.Path.Circle([0, 0], Rkns._NODE_RADIUS);
     this.circle.fillColor = '#ffffff';
     this.circle.__controller = this;
@@ -203,7 +203,7 @@
                 y: _coords.y
             }
         };
-    this._project.updateElement(this._element, _data, Rkns._SAVE);
+    this._project.updateElement(this.type, this._element, _data, Rkns._SAVE);
     this._renderer.redraw();
 }
 
@@ -249,7 +249,7 @@
 
 Rkns.Renderer.Edge.prototype._init = function() {
     this._renderer.edge_layer.activate();
-    this.type = "edge";
+    this.type = "Edge";
     this.from_controller = this._element.from.__controller;
     this.to_node_controller = this._element.to.__controller;
     this.line = new paper.Path();
@@ -388,7 +388,7 @@
     var _hitResult = paper.project.hitTest(_event.point);
     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
         var _target = _hitResult.item.__controller;
-        if (_target.type === "node" && this.from_controller._element.id !== _target._element.id) {
+        if (_target.type === "Node" && this.from_controller._element.id !== _target._element.id) {
             this._project.addEdge({
                 from: this.from_controller._element.id,
                 to: _target._element.id
@@ -456,7 +456,7 @@
             description: _this.editor_$.find(".Rk-Edit-Description").val(),
             uri: _this.editor_$.find(".Rk-Edit-URI").val()
         }
-        _this._project.updateElement(
+        _this._project.updateNode(
             _element,
             _data,
             Rkns._SAVE
@@ -525,7 +525,7 @@
             title: _this.editor_$.find(".Rk-Edit-Title").val(),
             uri: _this.editor_$.find(".Rk-Edit-URI").val()
         }
-        _this._project.updateElement(
+        _this._project.updateEdge(
             _element,
             _data,
             Rkns._SAVE
@@ -546,7 +546,7 @@
 
 Rkns.Renderer.NodeEditButton.prototype._init = function() {
     this._renderer.node_layer.activate();
-    this.type = "node-edit-button";
+    this.type = "Node-edit-button";
     this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, - 90, 30, 2, 'img/edit.png');
 }
 
@@ -589,7 +589,7 @@
 
 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
     this._renderer.node_layer.activate();
-    this.type = "node-remove-button";
+    this.type = "Node-remove-button";
     this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, -210, -90, 2, 'img/remove.png');
 }
 
@@ -632,7 +632,7 @@
 
 Rkns.Renderer.NodeLinkButton.prototype._init = function() {
     this._renderer.node_layer.activate();
-    this.type = "node-link-button";
+    this.type = "Node-link-button";
     this.sector = Rkns.Renderer.Utils.sector(this, 1 + Rkns._NODE_RADIUS , 3 * Rkns._NODE_RADIUS, 30, 150, 2, 'img/link.png');
 }
 
@@ -669,7 +669,7 @@
 
 Rkns.Renderer.EdgeEditButton.prototype._init = function() {
     this._renderer.edge_layer.activate();
-    this.type = "edge-edit-button";
+    this.type = "Edge-edit-button";
     this.sector = Rkns.Renderer.Utils.sector(this, 5 , 2 * Rkns._NODE_RADIUS, - 60, 60, 2, 'img/edit.png');
 }
 
@@ -711,7 +711,7 @@
 
 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
     this._renderer.edge_layer.activate();
-    this.type = "edge-remove-button";
+    this.type = "Edge-remove-button";
     this.sector = Rkns.Renderer.Utils.sector(this, 5, 2 * Rkns._NODE_RADIUS, - 240, -120, 2, 'img/remove.png');
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
@@ -752,13 +752,13 @@
     this._project = _project;
     this._MARGIN_X = 80;
     this._MARGIN_Y = 50;
-    var _canvas_id = this._project._opts.canvas_id;
-    this.$ = Rkns.$("#"+_canvas_id);
-    this.editor_$ = Rkns.$(".Rk-Editor");
-    this.editor_$.html(this.editorTemplate({
+    this.$ = Rkns.$(".Rk-Render");
+    this.$.html(this.template({
         l10n: this._project.l10n
-    }));
-    paper.setup(document.getElementById(_canvas_id));
+    }))
+    this.canvas_$ = this.$.find(".Rk-Canvas");
+    this.editor_$ = this.$.find(".Rk-Editor");
+    paper.setup(this.canvas_$[0]);
     this.scale = 1;
     this.offset = paper.view.center;
     this.totalScroll = 0;
@@ -782,24 +782,24 @@
     _tool.onMouseUp = function(_event) {
         _this.onMouseUp(_event);
     }
-    this.$.mousewheel(function(_event, _delta) {
+    this.canvas_$.mousewheel(function(_event, _delta) {
         _this.onScroll(_event, _delta);
     })
-    this.$.dblclick(function(_event) {
+    this.canvas_$.dblclick(function(_event) {
         _this.onDoubleClick(_event);
     });
     this.editor_$.find(".Rk-ZoomOut").click(function() {
         _this.offset = new paper.Point([
-            _this.$.width(),
-            _this.$.height()
+            _this.canvas_$.width(),
+            _this.canvas_$.height()
         ]).multiply( .5 * ( 1 - Math.SQRT1_2 ) ).add(_this.offset.multiply( Math.SQRT1_2 ));
         _this.scale *= Math.SQRT1_2;
         _this.redraw();
     });
     this.editor_$.find(".Rk-ZoomIn").click(function() {
         _this.offset = new paper.Point([
-            _this.$.width(),
-            _this.$.height()
+            _this.canvas_$.width(),
+            _this.canvas_$.height()
         ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
         _this.scale *= Math.SQRT2;
         _this.redraw();
@@ -810,8 +810,10 @@
     }
 }
 
-Rkns.Renderer.Scene.prototype.editorTemplate = Rkns._.template(
-    '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
+Rkns.Renderer.Scene.prototype.template = Rkns._.template(
+    '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor">'
+    + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
+    + '</div>'
 );
 
 Rkns.Renderer.Scene.prototype.toPaperCoords = function(_point) {
@@ -833,7 +835,7 @@
         _maxy = Math.max.apply(Math, _yy);
     this.scale = Math.min((paper.view.size.width - 2 * this._MARGIN_X) / (_maxx - _minx), (paper.view.size.height - 2 * this._MARGIN_Y) / (_maxy - _miny));
     this.offset = paper.view.center.subtract(new paper.Point([(_maxx + _minx) / 2, (_maxy + _miny) / 2]).multiply(this.scale));
-    this.controllers = new Rkns.Model.List();
+    this.controllers = new Rkns.ViewModel.List();
     this._project.nodes.forEach(function(_node) {
         _this.addController("Node", _node);
     });
@@ -904,10 +906,10 @@
     var _hitResult = paper.project.hitTest(_event.point);
     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
         this.click_target = _hitResult.item.__controller;
-        if (this.click_target.type === "node" && _hitResult.type === "stroke") {
+        if (this.click_target.type === "Node" && _hitResult.type === "stroke") {
             this.addTempEdge(this.click_target, _event.point);
         }
-        if (this.click_target.type === "node-link-button") {
+        if (this.click_target.type === "Node-link-button") {
             this.addTempEdge(this.click_target.node_controller, _event.point);
         }
     } else {
@@ -936,7 +938,7 @@
 Rkns.Renderer.Scene.prototype.onScroll = function(_event, _scrolldelta) {
     this.totalScroll += _scrolldelta;
     if (Math.abs(this.totalScroll) >= 1) {
-        var _off = this.$.offset(),
+        var _off = this.canvas_$.offset(),
             _delta = new paper.Point([
                 _event.pageX - _off.left,
                 _event.pageY - _off.top
@@ -954,7 +956,7 @@
 }
 
 Rkns.Renderer.Scene.prototype.onDoubleClick = function(_event) {
-    var _off = this.$.offset(),
+    var _off = this.canvas_$.offset(),
         _point = new paper.Point([
             _event.pageX - _off.left,
             _event.pageY - _off.top