--- a/client/js/renkan-publish.js	Wed Sep 05 14:49:33 2012 +0200
+++ b/client/js/renkan-publish.js	Thu Sep 06 17:21:11 2012 +0200
@@ -125,6 +125,7 @@
             uri: this.get("uri"),
             description: this.get("description"),
             position: this.get("position"),
+            image: this.get("image"),
             created_by: this.get("created_by").get("_id")
         }
     },
@@ -291,7 +292,7 @@
     _MARGIN_X: 80,
     _MARGIN_Y: 50,
     _MIN_DRAG_DISTANCE: 2,
-    _NODE_RADIUS: 15,
+    _NODE_RADIUS: 20,
     _NODE_FONT_SIZE: 10,
     _EDGE_FONT_SIZE: 9,
     _NODE_MAX_CHAR: 30,
@@ -408,6 +409,38 @@
     this.title.content = Rkns.Renderer.Utils.shortenText(this.model.get("title"), Rkns.Renderer._NODE_MAX_CHAR);
     this.title.position = this.paper_coords.add([0, 2 * Rkns.Renderer._NODE_RADIUS]);
     this.circle.strokeColor = this.model.get("created_by").get("color");
+    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) {
@@ -420,18 +453,24 @@
     this.renderer.removeRepresentationsOfType("tooltip");
     var _tooltip = this.renderer.addRepresentation("NodeTooltip",null);
     _tooltip.node_representation = this;
-    _tooltip.redraw();
+    _tooltip.draw();
 }
 
 Rkns.Renderer.Node.prototype.select = function() {
     this.circle.strokeWidth = 3;
-    this.circle.fillColor = "#ffffc0";
+    this.circle.fillColor = "#ffff80";
+    if (this.node_image) {
+        this.node_image.opacity = .5;
+    }
     paper.view.draw();
 }
 
 Rkns.Renderer.Node.prototype.unselect = function() {
     this.circle.strokeWidth = 1;
     this.circle.fillColor = "#ffffff";
+    if (this.node_image) {
+        this.node_image.opacity = .9;
+    }
     paper.view.draw();
 }
 
@@ -441,6 +480,9 @@
 Rkns.Renderer.Node.prototype.destroy = function(_event) {
     this.circle.remove();
     this.title.remove();
+    if (this.node_image) {
+        this.node_image.remove();
+    }
 }
 
 /* */
@@ -510,7 +552,7 @@
     this.renderer.removeRepresentationsOfType("tooltip");
     var _tooltip = this.renderer.addRepresentation("EdgeTooltip",null);
     _tooltip.edge_representation = this;
-    _tooltip.redraw();
+    _tooltip.draw();
 }
 
 Rkns.Renderer.Edge.prototype.select = function() {
@@ -571,9 +613,8 @@
     + '<p><%=description%></p>'
 );
 
-Rkns.Renderer.NodeTooltip.prototype.redraw = function() {
-    var _coords = this.node_representation.paper_coords,
-        _model = this.node_representation.model,
+Rkns.Renderer.NodeTooltip.prototype.draw = function() {
+    var _model = this.node_representation.model,
         _title = _model.get("title"),
         _uri = _model.get("uri");
     this.tooltip_$
@@ -581,17 +622,18 @@
             a: (_uri ? '<a href="' + _uri + '" target="_blank">' : '' ) + _title + (_uri ? '</a>' : '' ),
             description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1&hellip;')
         }))
-        .show();
-    Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 15, this.tooltip_$);
+    this.redraw();
     var _this = this;
     this.tooltip_$.find(".Rk-CloseX").click(function() {
         _this.renderer.removeRepresentation(_this);
         paper.view.draw();
     });
-    this.tooltip_$.find("input, textarea").bind("keyup change", function() {
-        _this.tooltip_$.find(".Rk-Edit-Goto").attr("href",_this.tooltip_$.find(".Rk-Edit-URI").val());
-    });
-    paper.view.draw();
+}
+
+Rkns.Renderer.NodeTooltip.prototype.redraw = function() {
+    var _coords = this.node_representation.paper_coords;
+    Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 10, this.tooltip_$);
+    this.tooltip_$.show();
 }
 
 Rkns.Renderer.NodeTooltip.prototype.destroy = function() {
@@ -627,23 +669,27 @@
     + '<p><%=description%></p>'
 );
 
-Rkns.Renderer.EdgeTooltip.prototype.redraw = function() {
-    var _coords = this.edge_representation.paper_coords,
-        _model = this.edge_representation.model,
+Rkns.Renderer.EdgeTooltip.prototype.draw = function() {
+    var _model = this.edge_representation.model,
         _title = _model.get("title"),
         _uri = _model.get("uri");
     this.tooltip_$
         .html(this.template({
             a: (_uri ? '<a href="' + _uri + '" target="_blank">' : '' ) + _title + (_uri ? '</a>' : '' ),
             description: _model.get("description").replace(/(\n|\r|\r\n)/mg,' ').substr(0,180).replace(/(^.{150,179})[\s].+$/m,'$1&hellip;')
-        }))
-        .show();
-    Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 5, this.tooltip_$);
+        }));
+    this.redraw();
     var _this = this;
     this.tooltip_$.find(".Rk-CloseX").click(function() {
         _this.renderer.removeRepresentation(_this);
         paper.view.draw();
     });
+}
+
+Rkns.Renderer.EdgeTooltip.prototype.redraw = function() {
+    var _coords = this.edge_representation.paper_coords;
+    Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 5, this.tooltip_$);
+    this.tooltip_$.show();
     paper.view.draw();
 }