--- a/server/src/main/webapp/static/js/paper-renderer.js	Mon Feb 11 12:39:35 2013 +0100
+++ b/server/src/main/webapp/static/js/paper-renderer.js	Mon Feb 11 18:08:19 2013 +0100
@@ -20,7 +20,14 @@
     _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']),
     _CLICKMODE_ADDNODE : 1,
     _CLICKMODE_STARTEDGE : 2,
-    _CLICKMODE_ENDEDGE : 3
+    _CLICKMODE_ENDEDGE : 3,
+    _USER_PLACEHOLDER : {
+        color: "#000000",
+        title: "(unknown user)",
+        get: function(attr) {
+            return this[attr] || false;
+        }
+    }
 }
 
 Rkns.Renderer.Utils = {
@@ -236,6 +243,7 @@
     this.circle = new paper.Path.Circle([0, 0], Rkns.Renderer._NODE_RADIUS);
     this.circle.fillColor = '#ffffff';
     this.circle.__representation = this;
+    this.circle.strokeWidth = 2;
     this.title = new paper.PointText([0,0]);
     this.title.characterStyle = {
         fontSize: Rkns.Renderer._NODE_FONT_SIZE,
@@ -256,7 +264,7 @@
     this.circle.position = this.paper_coords;
     this.title.content = this.model.get("title");
     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.circle.strokeColor = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
     this.edit_button.moveTo(this.paper_coords);
     this.remove_button.moveTo(this.paper_coords);
     this.link_button.moveTo(this.paper_coords);
@@ -324,7 +332,7 @@
 }
 
 Rkns.Renderer.Node.prototype.select = function() {
-    this.circle.strokeWidth = 3;
+    this.circle.strokeWidth = 4;
     this.edit_button.show();
     this.remove_button.show();
     this.link_button.show();
@@ -342,7 +350,7 @@
         this.edit_button.hide();
         this.remove_button.hide();
         this.link_button.hide();
-        this.circle.strokeWidth = 1;
+        this.circle.strokeWidth = 2;
         Rkns.$('.Rk-Bin-Item').removeClass("selected");
     }
 }
@@ -394,6 +402,7 @@
     this.line = new paper.Path();
     this.line.add([0,0],[0,0],[0,0]);
     this.line.__representation = this;
+    this.line.strokeWidth = 2;
     this.arrow = new paper.Path();
     this.arrow.add([0,0],[Rkns.Renderer._ARROW_LENGTH,Rkns.Renderer._ARROW_WIDTH / 2],[0,Rkns.Renderer._ARROW_WIDTH]);
     this.arrow.__representation = this;
@@ -423,7 +432,7 @@
         _p1b = _p1a.add(_delta), /* to differentiate inbound and outbound links */
         _a = _v.angle,
         _handle = _v.divide(3),
-        _color = this.model.get("created_by").get("color");
+        _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
     this.paper_coords = _p0b.add(_p1b).divide(2);
     this.line.strokeColor = _color;
     this.line.segments[0].point = _p0a;
@@ -457,7 +466,7 @@
 }
 
 Rkns.Renderer.Edge.prototype.select = function() {
-    this.line.strokeWidth = 3;
+    this.line.strokeWidth = 4;
     this.edit_button.show();
     this.remove_button.show();
 }
@@ -466,7 +475,7 @@
     if (!_newTarget || _newTarget.edge_representation !== this) {
         this.edit_button.hide();
         this.remove_button.hide();
-        this.line.strokeWidth = 1;
+        this.line.strokeWidth = 2;
     }
 }
 
@@ -505,7 +514,7 @@
     this.renderer.edge_layer.activate();
     this.type = "temp-edge";
     
-    var _color = this.project.get("users").get(this.renderer.renkan.current_user).get("color");
+    var _color = this.project.get("users").get(this.renderer.renkan.current_user).get("color") || "#000000";
     this.line = new paper.Path();
     this.line.strokeColor = _color;
     this.line.add([0,0],[0,0]);
@@ -597,12 +606,15 @@
     + '<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>'
+    + '<div class="Rk-Editor-p"><label>Node color</label><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%=node.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">'
+    + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
     + '<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.draw = function() {
-    var _model = this.node_representation.model;
+    var _model = this.node_representation.model,
+        _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER;
     this.editor_$
         .html(this.template({
             node: {
@@ -610,8 +622,9 @@
                 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")
+                color: _model.get("color") || _created_by.get("color"),
+                created_by_color: _created_by.get("color"),
+                created_by_title: _created_by.get("title")
             },
             l10n: this.renderer.renkan.l10n
         }));
@@ -639,6 +652,17 @@
         _this.redraw();
     })
     this.editor_$.find(".Rk-Edit-Title")[0].focus();
+    this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
+        function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
+        function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
+    );
+    this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
+        function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
+        function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")) }
+    ).click(function() {
+        _model.set("color", $(this).attr("data-color"));
+        _this.redraw();
+    });
 }
 
 Rkns.Renderer.NodeEditor.prototype.redraw = function() {
@@ -680,25 +704,31 @@
     '<h2><span class="Rk-CloseX">&times;</span><%=l10n.edit_edge%></span></h2>'
     + '<p><label><%=l10n.edit_title%></label><input class="Rk-Edit-Title" type="text" value="<%=edge.title%>"/></p>'
     + '<p><label><%=l10n.edit_uri%></label><input class="Rk-Edit-URI" type="text" value="<%=edge.uri%>"/><a class="Rk-Edit-Goto" href="<%=edge.uri%>" target="_blank"></a></p>'
-    + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from_created_by_color%>;"></span><%=edge.from_title%></p>'
-    + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to_created_by_color%>;"></span><%=edge.to_title%></p>'
+    + '<div class="Rk-Editor-p"><label>Edge color:</label><div class="Rk-Edit-ColorPicker-Wrapper"><span class="Rk-Edit-Color" style="background:<%=edge.color%>;"><span class="Rk-Edit-ColorTip"></span></span><ul class="Rk-Edit-ColorPicker">'
+    + '<% print(Rkns.pickerColors.reduce(function(m,c) { return m + "<li data-color=\'" + c + "\' style=\'background: " + c + "\'></li>"},"")); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
+    + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from_color%>;"></span><%=edge.from_title%></p>'
+    + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to_color%>;"></span><%=edge.to_title%></p>'
     + '<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.draw = function() {
-    var _model = this.edge_representation.model;
+    var _model = this.edge_representation.model,
+        _from_model = _model.get("from"),
+        _to_model = _model.get("to"),
+        _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER;
     this.editor_$
         .html(this.template({
             edge: {
                 title: _model.get("title"),
                 uri: _model.get("uri"),
                 description: _model.get("description"),
-                from_title: _model.get("from").get("title"),
-                to_title: _model.get("to").get("title"),
-                from_created_by_color: _model.get("from").get("created_by").get("color"),
-                to_created_by_color: _model.get("to").get("created_by").get("color"),
-                created_by_color: _model.get("created_by").get("color"),
-                created_by_title: _model.get("created_by").get("title")
+                color: _model.get("color") || _created_by.get("color"),
+                from_title: _from_model.get("title"),
+                to_title: _to_model.get("title"),
+                from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),
+                to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color"),
+                created_by_color: _created_by.get("color"),
+                created_by_title: _created_by.get("title")
             },
             l10n: this.renderer.renkan.l10n
         }));
@@ -717,6 +747,17 @@
         _model.set(_data);
         _this.redraw();
     });
+    this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
+        function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
+        function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
+    );
+    this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
+        function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
+        function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")); }
+    ).click(function() {
+        _model.set("color", $(this).attr("data-color"));
+        _this.redraw();
+    });
 }
 Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
     var _coords = this.edge_representation.paper_coords;