diff -r b6b20e8c4a1a -r 55454c900296 client/js/paper-renderer.js
--- a/client/js/paper-renderer.js	Mon Mar 25 05:55:28 2013 +0100
+++ b/client/js/paper-renderer.js	Mon Mar 25 17:52:14 2013 +0100
@@ -11,10 +11,11 @@
     _EDGE_DISTANCE: 3,
     _NODE_MAX_CHAR: 50,
     _EDGE_MAX_CHAR: 40,
-    _ARROW_LENGTH: 16,
-    _ARROW_WIDTH: 8,
+    _ARROW_LENGTH: 18,
+    _ARROW_WIDTH: 12,
     _EDITOR_ARROW_LENGTH : 20,
     _EDITOR_ARROW_WIDTH : 40,
+    _EDITOR_WIDTH : 275,
     _EDITOR_MARGIN : 15,
     _EDITOR_PADDING : 10,
     _EDITOR_GRADIENT : new paper.Gradient(['#f0f0f0', '#d0d0d0']),
@@ -40,6 +41,9 @@
 }
 
 Rkns.Renderer.Utils = {
+	shortenText : function(_text, _maxlength) {
+		return (_text.length > _maxlength ? (_text.substr(0,_maxlength) + '…') : _text);
+	},
     drawEditBox : function(_coords, _path, _width, _xmargin, _selector) {
         _selector.css({
             width: (_width - 2* Rkns.Renderer._EDITOR_PADDING),
@@ -301,7 +305,7 @@
     this.last_circle_radius = this.circle_radius;
     
     var _text = this.model.get("title") || this.renderer.renkan.translate("(untitled)");
-    this.title.content = _text.length > Rkns.Renderer._NODE_MAX_CHAR ? (_text.substr(0,Rkns.Renderer._NODE_MAX_CHAR) + '…') : _text;
+    this.title.content = Rkns.Renderer.Utils.shortenText(_text, Rkns.Renderer._NODE_MAX_CHAR);
 
     this.title.position = this.paper_coords.add([0, this.circle_radius + 1.5 *Rkns.Renderer._NODE_FONT_SIZE]);
     var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color");
@@ -499,6 +503,8 @@
 }
 
 Rkns.Renderer.Edge.prototype.redraw = function() {
+    this.from_representation = this.renderer.getRepresentationByModel(this.model.get("from"));
+    this.to_representation = this.renderer.getRepresentationByModel(this.model.get("to"));
     var _p0a = this.from_representation.paper_coords,
         _p1a = this.to_representation.paper_coords,
         _v = _p1a.subtract(_p0a),
@@ -534,7 +540,7 @@
     }
     this.text.rotate(_a - this.text_angle);
     var _text = this.model.get("title");
-    this.text.content = _text.length > Rkns.Renderer._EDGE_MAX_CHAR ? (_text.substr(0,Rkns.Renderer._EDGE_MAX_CHAR) + '…') : _text;
+    this.text.content = Rkns.Renderer.Utils.shortenText(_text, Rkns.Renderer._EDGE_MAX_CHAR);
     this.text.position = this.paper_coords.add(_textdelta);
     this.text_angle = _a;
     this.edit_button.moveTo(this.paper_coords);
@@ -702,18 +708,19 @@
     + '<p><label><%-translate("Description:")%></label><textarea class="Rk-Edit-Description"><%-node.description%></textarea></p>'
     + '<p><span class="Rk-Editor-Label"><%-translate("Size:")%></span><a href="#" class="Rk-Edit-Size-Down">-</a><span class="Rk-Edit-Size-Value"><%-node.size%></span><a href="#" class="Rk-Edit-Size-Up">+</a></p>'
     + '<div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-translate("Node color:")%></span><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">'
-    + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
+    + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text"><%- translate("Choose color") %></span></div></div>'
     + '<img class="Rk-Edit-ImgPreview" src="<%-node.image || node.image_placeholder%>" />'
     + '<p><label><%-translate("Image URL:")%></label><input class="Rk-Edit-Image" type="text" value="<%-node.image%>"/></p>'
     + '<p><label><%-translate("Choose Image File:")%></label><input class="Rk-Edit-Image-File" type="file" accept="image/*"/></p>'    
-    + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span> <span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%-node.created_by_title%></p>'
+    + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span> <span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %></p>'
 );
 
 Rkns.Renderer.NodeEditor.prototype.readOnlyTemplate = Rkns._.template(
-    '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%-node.color%>;"></span><%-node.title%></span></h2>'
-    + '<p><a href="<%-node.uri%>" target="_blank"><%-node.uri%></a></p>'
+    '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%-node.color%>;"></span>'
+    + '<span class="Rk-Display-Title"><% if (node.uri) { %><a href="<%-node.uri%>" target="_blank"><% } %><%-node.title%><% if (node.uri) { %></a><% } %></span></h2>'
+    + '<% if (node.uri) { %><p class="Rk-Display-URI"><a href="<%-node.uri%>" target="_blank"><%-node.short_uri%></a></p><% } %>'
     + '<p><%-node.description%></p>'
-    + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%-node.created_by_title%></p>'
+    + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-node.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(node.created_by_title, 25) %></p>'
 );
 
 Rkns.Renderer.NodeEditor.prototype.draw = function() {
@@ -727,6 +734,7 @@
             node: {
                 title: _model.get("title"),
                 uri: _model.get("uri"),
+                short_uri:  Rkns.Renderer.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
                 description: _model.get("description"),
                 image: _model.get("image") || "",
                 image_placeholder: _image_placeholder,
@@ -793,6 +801,7 @@
             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"));
+            paper.view.draw();
         });
         
         function shiftSize(n) {
@@ -818,7 +827,7 @@
 
 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_$);
+    Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, Rkns.Renderer._EDITOR_WIDTH, 20, this.editor_$);
     this.editor_$.show();
     paper.view.draw();
 }
@@ -861,19 +870,21 @@
     + '"<% if (uri === edge.uri) { %> selected<% } %>><%- translate(property.label) %></option>'
     + '<% }) %><% }) %></select></p><% } %>'
     + '<div class="Rk-Editor-p"><span class="Rk-Editor-Label"><%-translate("Edge color:")%></span><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">'
-    + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text">Choose color</span></div></div>'
-    + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%-edge.from_title%></p>'
-    + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%-edge.to_title%></p>'
-    + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%-edge.created_by_title%></p>'
+    + '<% _(Rkns.pickerColors).each(function(c) { %><li data-color="<%=c%>" style="background: <%=c%>"></li><% }); %></ul><span class="Rk-Edit-ColorPicker-Text"><%- translate("Choose color") %></span></div></div>'
+    + '<p><span class="Rk-Edit-Direction"><%- translate("Change edge direction") %></span></p>'
+    + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.from_title, 25) %></p>'
+    + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.to_title, 25) %></p>'
+    + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.created_by_title, 25) %></p>'
 );
 
 Rkns.Renderer.EdgeEditor.prototype.readOnlyTemplate = Rkns._.template(
-    '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%-edge.color%>;"></span><%- edge.title %></span></h2>'
-    + '<p><a href="<%-edge.uri%>" target="_blank"><%-edge.uri%></a></p>'
+    '<h2><span class="Rk-CloseX">&times;</span><span class="Rk-UserColor" style="background:<%-edge.color%>;"></span>'
+    + '<span class="Rk-Display-Title"><% if (edge.uri) { %><a href="<%-edge.uri%>" target="_blank"><% } %><%-edge.title%><% if (edge.uri) { %></a><% } %></span></h2>'
+    + '<% if (edge.uri) { %><p class="Rk-Display-URI"><a href="<%-edge.uri%>" target="_blank"><%-edge.short_uri%></a></p><% } %>'
     + '<p><%-edge.description%></p>'
-    + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%-edge.from_title%></p>'
-    + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%-edge.to_title%></p>'
-    + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%-edge.created_by_title%></p>'
+    + '<p><span class="Rk-Editor-Label"><%-translate("From:")%></span><span class="Rk-UserColor" style="background:<%-edge.from_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.from_title, 25) %></p>'
+    + '<p><span class="Rk-Editor-Label"><%-translate("To:")%></span><span class="Rk-UserColor" style="background:<%-edge.to_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.to_title, 25) %></p>'
+    + '<p><span class="Rk-Editor-Label"><%-translate("Created by:")%></span><span class="Rk-UserColor" style="background:<%-edge.created_by_color%>;"></span><%- Rkns.Renderer.Utils.shortenText(edge.created_by_title, 25) %></p>'
 );
 
 Rkns.Renderer.EdgeEditor.prototype.draw = function() {
@@ -887,6 +898,7 @@
             edge: {
                 title: _model.get("title"),
                 uri: _model.get("uri"),
+                short_uri:  Rkns.Renderer.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
                 description: _model.get("description"),
                 color: _model.get("color") || _created_by.get("color"),
                 from_title: _from_model.get("title"),
@@ -915,7 +927,6 @@
 	                uri: _this.editor_$.find(".Rk-Edit-URI").val()
 	            }
 	            _model.set(_data);
-	            _this.edge_representation.redraw();
 	            paper.view.draw();
     		}).defer();
     	}).throttle(500);
@@ -930,6 +941,13 @@
         		onFieldChange();
         	}
         });
+        this.editor_$.find(".Rk-Edit-Direction").click(function() {
+        	_model.set({
+        		from: _model.get("to"),
+        		to: _model.get("from")
+        	});
+        	_this.draw();
+        });
         this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
             function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
@@ -939,14 +957,14 @@
             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();
+            paper.view.draw();
         });
     }
 }
 
 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_$);
+    Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, Rkns.Renderer._EDITOR_WIDTH, 5, this.editor_$);
     this.editor_$.show();
     paper.view.draw();
 }