--- a/client/js/paper-renderer.js	Thu Sep 06 17:21:11 2012 +0200
+++ b/client/js/paper-renderer.js	Fri Sep 07 12:26:16 2012 +0200
@@ -67,7 +67,7 @@
             top: (Rkns.Renderer._EDITOR_PADDING + _top)
         });
     },
-    sector : function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc) {
+    sector : function(_repr, _inR, _outR, _startAngle, _endAngle, _padding, _imgsrc, _caption) {
         var _startRads = _startAngle * Math.PI / 180,
             _endRads = _endAngle * Math.PI / 180,
             _img = new Image(),
@@ -91,6 +91,8 @@
             _centerRads = (_startRads + _endRads) / 2,
             _centerX = Math.cos(_centerRads) * _centerR,
             _centerY = Math.sin(_centerRads) * _centerR,
+            _textX = Math.cos(_centerRads) * (_outR + 3),
+            _textY = Math.sin(_centerRads) * (_outR + 3),
             _segments = [];
         _segments.push([[_startXIn, _startYIn], [0, 0], [ _kin * _startdx, _kin * _startdy ]]);
         for (var i = 1; i < 4; i++) {
@@ -118,12 +120,31 @@
         _path.opacity = .5;
         _path.closed = true;
         _path.__representation = _repr;
+        if (_textX >= -2 && _textX <= 2) {
+            if (_textY > 0) {
+                _textY += 6;
+            }
+        }
+        var _text = new paper.PointText(_textX,_textY);
+        _text.characterStyle = {
+            fontSize: 9,
+            fillColor: '#c000c0'
+        };
+        if (_textX > 2) {
+            _text.paragraphStyle.justification = 'left';
+        } else if (_textX < -2) {
+            _text.paragraphStyle.justification = 'right';
+        } else {
+            _text.paragraphStyle.justification = 'center';
+        }
+        _text.visible = false;
         var _visible = false,
             _restPos = new paper.Point(-200, -200),
-            _grp = new paper.Group([_path]),
+            _grp = new paper.Group([_path, _text]),
             _delta = _grp.position,
             _imgdelta = new paper.Point([_centerX, _centerY]),
             _currentPos = new paper.Point(0,0);
+        _text.content = _caption;
         _grp.visible = false;
         _grp.position = _restPos;
         var _res = {
@@ -145,17 +166,18 @@
             },
             select: function() {
                 _path.opacity = .8;
+                _text.visible = true;
             },
             unselect: function() {
                 _path.opacity = .5;
+                _text.visible = false;
             },
             destroy: function() {
                 _grp.remove();
             }
         }
         _img.onload = function() {
-            var _w = _img.width,
-                _h = _img.height;
+            var _h = _img.height;
             var _raster = new paper.Raster(_img);
             _raster.position = _imgdelta.add(_grp.position).subtract(_delta);
             _grp.addChild(_raster);
@@ -232,10 +254,13 @@
             _raster.scale(_ratio);
             _this.node_image = new paper.Group(_clip, _raster);
             _this.node_image.opacity = .9;
-            /* This is a workaround to allow clipping at group level */
+            /* This is a workaround to allow clipping at group level
+             * If opacity was set to 1, paper.js would merge all clipping groups in one (known bug).
+            */
             _this.node_image.clipped = true;
             _this.node_image.position = _this.paper_coords;
             _this.node_image.__representation = _this;
+            _clip.__representation = _this;
             paper.view.draw();
         }
         _image.src = _img;
@@ -580,6 +605,9 @@
         _model.set(_data);
         _this.redraw();
     });
+    this.editor_$.find("img").load(function() {
+        _this.redraw();
+    })
     this.editor_$.find(".Rk-Edit-Title")[0].focus();
 }
 
@@ -679,7 +707,7 @@
 Rkns.Renderer.NodeEditButton.prototype._init = function() {
     this.renderer.overlay_layer.activate();
     this.type = "Node-edit-button";
-    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, - 90, 30, 1, 'img/edit.png');
+    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, - 90, 30, 1, 'img/edit.png', this.renderer.renkan.l10n.caption_edit);
 }
 
 Rkns.Renderer.NodeEditButton.prototype.moveTo = function(_pos) {
@@ -722,7 +750,7 @@
 Rkns.Renderer.NodeRemoveButton.prototype._init = function() {
     this.renderer.overlay_layer.activate();
     this.type = "Node-remove-button";
-    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, -210, -90, 1, 'img/remove.png');
+    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, -210, -90, 1, 'img/remove.png', this.renderer.renkan.l10n.caption_remove);
 }
 
 Rkns.Renderer.NodeRemoveButton.prototype.moveTo = function(_pos) {
@@ -766,7 +794,7 @@
 Rkns.Renderer.NodeLinkButton.prototype._init = function() {
     this.renderer.overlay_layer.activate();
     this.type = "Node-link-button";
-    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, 30, 150, 1, 'img/link.png');
+    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._NODE_BUTTON_INNER, Rkns.Renderer._NODE_BUTTON_OUTER, 30, 150, 1, 'img/link.png', this.renderer.renkan.l10n.caption_link);
 }
 
 Rkns.Renderer.NodeLinkButton.prototype.moveTo = function(_pos) {
@@ -803,7 +831,7 @@
 Rkns.Renderer.EdgeEditButton.prototype._init = function() {
     this.renderer.overlay_layer.activate();
     this.type = "Edge-edit-button";
-    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, 'img/edit.png');
+    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 90, 90, 1, 'img/edit.png', this.renderer.renkan.l10n.caption_edit);
 }
 
 Rkns.Renderer.EdgeEditButton.prototype.moveTo = function(_pos) {
@@ -846,7 +874,7 @@
 Rkns.Renderer.EdgeRemoveButton.prototype._init = function() {
     this.renderer.overlay_layer.activate();
     this.type = "Edge-remove-button";
-    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, 'img/remove.png');
+    this.sector = Rkns.Renderer.Utils.sector(this, Rkns.Renderer._EDGE_BUTTON_INNER, Rkns.Renderer._EDGE_BUTTON_OUTER, - 270, -90, 1, 'img/remove.png', this.renderer.renkan.l10n.caption_remove);
 }
 Rkns.Renderer.EdgeRemoveButton.prototype.moveTo = function(_pos) {
     this.sector.moveTo(_pos);