diff -r d249d36ecc37 -r db991a757015 client/js/paper-renderer.js
--- a/client/js/paper-renderer.js	Wed Sep 05 14:49:33 2012 +0200
+++ b/client/js/paper-renderer.js	Thu Sep 06 17:21:11 2012 +0200
@@ -2,9 +2,9 @@
     _MARGIN_X: 80,
     _MARGIN_Y: 50,
     _MIN_DRAG_DISTANCE: 2,
-    _NODE_RADIUS: 15,
-    _NODE_BUTTON_INNER: 16,
-    _NODE_BUTTON_OUTER: 50,
+    _NODE_RADIUS: 25,
+    _NODE_BUTTON_INNER: 26,
+    _NODE_BUTTON_OUTER: 60,
     _EDGE_BUTTON_INNER: 1,
     _EDGE_BUTTON_OUTER: 40,
     _NODE_FONT_SIZE: 10,
@@ -205,7 +205,6 @@
     this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, {});
     this.link_button.node_representation = this;
     this.title.paragraphStyle.justification = 'center';
-    this.title.__representation = this;
 }
 
 Rkns.Renderer.Node.prototype.redraw = function() {
@@ -213,11 +212,43 @@
     this.paper_coords = this.renderer.toPaperCoords(_model_coords);
     this.circle.position = this.paper_coords;
     this.title.content = this.model.get("title");
-    this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]);
+    this.title.position = this.paper_coords.add([0, Rkns.Renderer._NODE_RADIUS + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
     this.circle.strokeColor = this.model.get("created_by").get("color");
     this.edit_button.moveTo(this.paper_coords);
     this.remove_button.moveTo(this.paper_coords);
     this.link_button.moveTo(this.paper_coords);
+    var _img = this.model.get("image");
+    if (_img && _img !== this.img) {
+        var _image = new Image(),
+            _this = this;
+        _image.onload = function() {
+            if (_this.node_image) {
+                _this.node_image.remove();
+            }
+            _this.renderer.node_layer.activate();
+            var _ratio = Math.min(1, 2 * Rkns.Renderer._NODE_RADIUS / _image.width, 2 * Rkns.Renderer._NODE_RADIUS / _image.height );
+            var _raster = new paper.Raster(_image);
+            var _clip = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);
+            _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.node_image.clipped = true;
+            _this.node_image.position = _this.paper_coords;
+            _this.node_image.__representation = _this;
+            paper.view.draw();
+        }
+        _image.src = _img;
+    }
+    this.img = _img;
+    if (this.node_image) {
+        if (!this.img) {
+            this.node_image.remove();
+            delete this.node_image;
+        } else {
+            this.node_image.position = this.paper_coords;
+        }
+    }
 }
 
 Rkns.Renderer.Node.prototype.paperShift = function(_delta) {
@@ -236,7 +267,7 @@
     this.renderer.removeRepresentationsOfType("editor");
     var _editor = this.renderer.addRepresentation("NodeEditor",null);
     _editor.node_representation = this;
-    _editor.redraw();
+    _editor.draw();
 }
 
 Rkns.Renderer.Node.prototype.select = function() {
@@ -264,11 +295,17 @@
 }
 
 Rkns.Renderer.Node.prototype.highlight = function() {
-    this.circle.fillColor = "#ffffc0";
+    this.circle.fillColor = "#ffff80";
+    if (this.node_image) {
+        this.node_image.opacity = .5;
+    }
 }
 
 Rkns.Renderer.Node.prototype.unhighlight = function(_newTarget) {
     this.circle.fillColor = "#ffffff";
+    if (this.node_image) {
+        this.node_image.opacity = .9;
+    }
 }
 
 Rkns.Renderer.Node.prototype.mouseup = function(_event) {
@@ -285,6 +322,9 @@
     this.link_button.destroy();
     this.circle.remove();
     this.title.remove();
+    if (this.node_image) {
+        this.node_image.remove();
+    }
 }
 
 /* */
@@ -309,7 +349,6 @@
         fillColor: 'black'
     };
     this.text.paragraphStyle.justification = 'center';
-    this.text.__representation = this;
     this.text_angle = 0;
     this.arrow_angle = 0;
     this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, {});
@@ -360,7 +399,7 @@
     this.renderer.removeRepresentationsOfType("editor");
     var _editor = this.renderer.addRepresentation("EdgeEditor",null);
     _editor.edge_representation = this;
-    _editor.redraw();
+    _editor.draw();
 }
 
 Rkns.Renderer.Edge.prototype.select = function() {
@@ -503,41 +542,51 @@
     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=node.title%>"/></p>'
     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=node.uri%>"/><a class="Rk-Edit-Goto" href="<%=node.uri%>" target="_blank"></a></p>'
     + '<p><label><%=l10n.edit_description%></label><textarea class="Rk-Edit-Description"><%=node.description%></textarea></p>'
+    + '<p><label><%=l10n.edit_image%></label><input class="Rk-Edit-Image" type="text" value="<%=node.image%>"/><img class="Rk-Edit-ImgPreview" src="<%=node.image%>" /></p>'
     + '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>'
 );
 
-Rkns.Renderer.NodeEditor.prototype.redraw = function() {
-    var _coords = this.node_representation.paper_coords,
-        _model = this.node_representation.model;
+Rkns.Renderer.NodeEditor.prototype.draw = function() {
+    var _model = this.node_representation.model;
     this.editor_$
         .html(this.template({
             node: {
                 title: _model.get("title"),
                 uri: _model.get("uri"),
                 description: _model.get("description"),
+                image: _model.get("image") || "",
                 created_by_color: _model.get("created_by").get("color"),
                 created_by_title: _model.get("created_by").get("title")
             },
             l10n: this.renderer.renkan.l10n
-        }))
-        .show();
-    Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$);
+        }));
+    this.redraw();
     var _this = this;
     this.editor_$.find(".Rk-CloseX").click(function() {
         _this.renderer.removeRepresentation(_this);
         paper.view.draw();
     });
     this.editor_$.find("input, textarea").bind("keyup change", function() {
-        _this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val());
+        var _uri = _this.editor_$.find(".Rk-Edit-URI").val(),
+            _image = _this.editor_$.find(".Rk-Edit-Image").val();
+        _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image);
+        _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri);
         var _data = {
             title: _this.editor_$.find(".Rk-Edit-Title").val(),
             description: _this.editor_$.find(".Rk-Edit-Description").val(),
-            uri: _this.editor_$.find(".Rk-Edit-URI").val()
+            uri: _uri,
+            image: _image
         }
         _model.set(_data);
-        paper.view.draw();
+        _this.redraw();
     });
     this.editor_$.find(".Rk-Edit-Title")[0].focus();
+}
+
+Rkns.Renderer.NodeEditor.prototype.redraw = function() {
+    var _coords = this.node_representation.paper_coords;
+    Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 20, this.editor_$);
+    this.editor_$.show();
     paper.view.draw();
 }
 
@@ -578,9 +627,8 @@
     + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by_color%>;"></span><%=edge.created_by_title%></p>'
 );
 
-Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
-    var _coords = this.edge_representation.paper_coords,
-        _model = this.edge_representation.model;
+Rkns.Renderer.EdgeEditor.prototype.draw = function() {
+    var _model = this.edge_representation.model;
     this.editor_$
         .html(this.template({
             edge: {
@@ -595,9 +643,8 @@
                 created_by_title: _model.get("created_by").get("title")
             },
             l10n: this.renderer.renkan.l10n
-        }))
-        .show();
-    Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$);
+        }));
+    this.redraw();
     var _this = this;
     this.editor_$.find(".Rk-CloseX").click(function() {
         _this.renderer.removeRepresentation(_this);
@@ -610,8 +657,13 @@
             uri: _this.editor_$.find(".Rk-Edit-URI").val()
         }
         _model.set(_data);
-        paper.view.draw();
+        _this.redraw();
     });
+}
+Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
+    var _coords = this.edge_representation.paper_coords;
+    Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$);
+    this.editor_$.show();
     paper.view.draw();
 }
 
@@ -1288,6 +1340,7 @@
                 uri: _newEl.uri,
                 title: _newEl.title,
                 description: _newEl.description,
+                image: _newEl.image,
                 position: {
                     x: _coords.x,
                     y: _coords.y