--- a/client/js/paper-renderer.js	Tue Jul 31 18:16:39 2012 +0200
+++ b/client/js/paper-renderer.js	Thu Aug 16 15:11:47 2012 +0200
@@ -149,6 +149,8 @@
     this.edit_button.node_controller = this;
     this.remove_button = new Rkns.Renderer.NodeRemoveButton(this._renderer, {});
     this.remove_button.node_controller = this;
+    this.link_button = new Rkns.Renderer.NodeLinkButton(this._renderer, {});
+    this.link_button.node_controller = this;
     this.title.paragraphStyle.justification = 'center';
     this.title.__controller = this;
 }
@@ -162,6 +164,7 @@
     this.circle.strokeColor = this._element.created_by.color;
     this.edit_button.moveTo(this.paper_coords);
     this.remove_button.moveTo(this.paper_coords);
+    this.link_button.moveTo(this.paper_coords);
 }
 
 Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
@@ -187,12 +190,14 @@
     this.circle.strokeWidth = 3;
     this.edit_button.show();
     this.remove_button.show();
+    this.link_button.show();
 }
 
 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
-    if (!_newTarget || (_newTarget !== this.edit_button && _newTarget !== this.remove_button)) {
+    if (!_newTarget || (_newTarget !== this.edit_button && _newTarget !== this.remove_button && _newTarget !== this.link_button)) {
         this.edit_button.hide();
         this.remove_button.hide();
+        this.link_button.hide();
     }
     this.circle.strokeWidth = 1;
 }
@@ -361,7 +366,7 @@
     this.editor_block.fillColor = "#e0e0e0";
     this.editor_block.opacity = .8;
     this.editor_$ = Rkns.$('<div>')
-        .appendTo('.Rk-Editor')
+        .appendTo(this._renderer.editor_$)
         .css({
             position: "absolute",
             opacity: .8
@@ -430,7 +435,7 @@
     this.editor_block.fillColor = "#e0e0e0";
     this.editor_block.opacity = .8;
     this.editor_$ = Rkns.$('<div>')
-        .appendTo('.Rk-Editor')
+        .appendTo(this._renderer.editor_$)
         .css({
             position: "absolute",
             opacity: .8
@@ -517,6 +522,7 @@
     this.sector.group.opacity = .5;
     this.hide();
     this.node_controller.remove_button.hide();
+    this.node_controller.link_button.hide();
 }
 
 Rkns.Renderer.NodeEditButton.prototype.mouseup = function() {
@@ -563,6 +569,7 @@
     this.sector.group.opacity = .5;
     this.hide();
     this.node_controller.edit_button.hide();
+    this.node_controller.link_button.hide();
 }
 
 Rkns.Renderer.NodeRemoveButton.prototype.mouseup = function() {
@@ -577,12 +584,57 @@
 
 /* */
 
+Rkns.Renderer.NodeLinkButton = Rkns.Utils.inherit(Rkns.Renderer._BaseController);
+
+Rkns.Renderer.NodeLinkButton.prototype._init = function() {
+    this._renderer.node_layer.activate();
+    this.type = "node-link-button";
+    this.sector = Rkns.Renderer.Utils.sector(1 + Rkns._NODE_RADIUS, 3 * Rkns._NODE_RADIUS, 30, 150, 2, 'img/link.png');
+    this.sector.group.visible = false;
+    this.sector.group.opacity = .5;
+    this.sector.circle.__controller = this;
+    this.sector.delta = this.sector.group.position;
+}
+
+Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) {
+    this.sector.group.position = this.sector.delta.add(_pos);
+}
+
+Rkns.Renderer.NodeLinkButton.prototype.show = function() {
+    this.sector.group.visible = true;
+}
+
+Rkns.Renderer.NodeLinkButton.prototype.hide = function() {
+    this.sector.group.visible = false;
+}
+
+Rkns.Renderer.NodeLinkButton.prototype.select = function() {
+    this.sector.group.opacity = .8;
+}
+
+Rkns.Renderer.NodeLinkButton.prototype.unselect = function() {
+    this.sector.group.opacity = .5;
+    this.hide();
+    this.node_controller.edit_button.hide();
+    this.node_controller.remove_button.hide();
+}
+
+Rkns.Renderer.NodeLinkButton.prototype.destroy = function() {
+    this.sector.group.remove();
+}
+
+/* */
+
 Rkns.Renderer.Scene = function(_project) {
     this._project = _project;
     this._MARGIN_X = 80;
     this._MARGIN_Y = 50;
     var _canvas_id = this._project._opts.canvas_id;
-    this.$ = Rkns.$("#"+_canvas_id)
+    this.$ = Rkns.$("#"+_canvas_id);
+    this.editor_$ = Rkns.$(".Rk-Editor");
+    this.editor_$.html(this.editorTemplate({
+        l10n: this._project.l10n
+    }));
     paper.setup(document.getElementById(_canvas_id));
     this.scale = 1;
     this.offset = paper.view.center;
@@ -612,13 +664,33 @@
     })
     this.$.dblclick(function(_event) {
         _this.onDoubleClick(_event);
-    })
+    });
+    this.editor_$.find(".Rk-ZoomOut").click(function() {
+        _this.offset = new paper.Point([
+            _this.$.width(),
+            _this.$.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()
+        ]).multiply( .5 * ( 1 - Math.SQRT2 ) ).add(_this.offset.multiply( Math.SQRT2 ));
+        _this.scale *= Math.SQRT2;
+        _this.redraw();
+    });
     paper.view.onResize = function(_event) {
         _this.offset = _this.offset.add(_event.delta.divide(2));
         _this.redraw();
     }
 }
 
+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.toPaperCoords = function(_point) {
     return _point.multiply(this.scale).add(this.offset);
 }
@@ -677,6 +749,14 @@
     paper.view.draw();
 }
 
+Rkns.Renderer.Scene.prototype.addTempEdge = function(_from, _point) {
+    var _tmpEdge = this.addController("TempEdge",{});
+    _tmpEdge.end_pos = _point;
+    _tmpEdge.from_controller = _from;
+    _tmpEdge.redraw();
+    this.click_target = _tmpEdge;
+}
+
 Rkns.Renderer.Scene.prototype.onMouseMove = function(_event) {
     var _hitResult = paper.project.hitTest(_event.point);
     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
@@ -702,11 +782,10 @@
     if (_hitResult && typeof _hitResult.item.__controller !== "undefined") {
         this.click_target = _hitResult.item.__controller;
         if (this.click_target.type === "node" && _hitResult.type === "stroke") {
-            var _tmpEdge = this.addController("TempEdge",{});
-            _tmpEdge.end_pos = _event.point;
-            _tmpEdge.from_controller = this.click_target;
-            _tmpEdge.redraw();
-            this.click_target = _tmpEdge;
+            this.addTempEdge(this.click_target, _event.point);
+        }
+        if (this.click_target.type === "node-link-button") {
+            this.addTempEdge(this.click_target.node_controller, _event.point);
         }
     } else {
         this.click_target = null;