diff -r 67f3a24a7c01 -r fa8035885814 client/js/paper-renderer.js
--- a/client/js/paper-renderer.js	Tue Apr 29 23:53:13 2014 +0200
+++ b/client/js/paper-renderer.js	Mon May 05 17:43:37 2014 +0200
@@ -11,94 +11,7 @@
 
     /* This object contains constants, utility functions and classes for Renkan's Graph Manipulation GUI */
 
-    var Renderer = Rkns.Renderer = {},
-    /* The minimum distance (in pixels) the mouse has to move to consider an element was dragged */
-    _MIN_DRAG_DISTANCE = 2,
-    /* Distance between the inner and outer radius of buttons that appear when hovering on a node */
-    _NODE_BUTTON_WIDTH = 40,
-
-    _EDGE_BUTTON_INNER = 2,
-    _EDGE_BUTTON_OUTER = 40,
-    /* Constants used to know if a specific action is to be performed when clicking on the canvas */
-    _CLICKMODE_ADDNODE = 1,
-    _CLICKMODE_STARTEDGE = 2,
-    _CLICKMODE_ENDEDGE = 3,
-    /* Node size step: Used to calculate the size change when clicking the +/- buttons */
-    _NODE_SIZE_STEP = Math.LN2/4,
-    _MIN_SCALE = 1/20,
-    _MAX_SCALE = 20,
-    _MOUSEMOVE_RATE = 80,
-    _DOUBLETAP_DELAY = 800,
-    /* Maximum distance in pixels (squared, to reduce calculations)
-     * between two taps when double-tapping on a touch terminal */
-    _DOUBLETAP_DISTANCE = 20*20,
-    /* A placeholder so a default colour is displayed when a node has a null value for its user property */
-    _USER_PLACEHOLDER = function(_renkan) {
-        return {
-            color: _renkan.options.default_user_color,
-            title: _renkan.translate("(unknown user)"),
-            get: function(attr) {
-                return this[attr] || false;
-            }
-        };
-    },
-    /* The code for the "Drag and Add Bookmarklet", slightly minified and with whitespaces removed, though
-     * it doesn't seem that it's still a requirement in newer browsers (i.e. the ones compatibles with canvas drawing)
-     */
-    _BOOKMARKLET_CODE = function(_renkan) {
-        return "(function(a,b,c,d,e,f,h,i,j,k,l,m,n,o,p,q,r){a=document;b=a.body;c=a.location.href;j='draggable';m='text/x-iri-';d=a.createElement('div');d.innerHTML='<p_style=\"position:fixed;top:0;right:0;font:bold_18px_sans-serif;color:#fff;background:#909;padding:10px;z-index:100000;\">"
-        + _renkan.translate("Drag items from this website, drop them in Renkan").replace(/ /g,"_")
-        + "</p>'.replace(/_/g,String.fromCharCode(32));b.appendChild(d);e=[{r:/https?:\\/\\/[^\\/]*twitter\\.com\\//,s:'.tweet',n:'twitter'},{r:/https?:\\/\\/[^\\/]*google\\.[^\\/]+\\//,s:'.g',n:'google'},{r:/https?:\\/\\/[^\\/]*lemonde\\.fr\\//,s:'[data-vr-contentbox]',n:'lemonde'}];f=false;e.forEach(function(g){if(g.r.test(c)){f=g;}});if(f){h=function(){Array.prototype.forEach.call(a.querySelectorAll(f.s),function(i){i[j]=true;k=i.style;k.borderWidth='2px';k.borderColor='#909';k.borderStyle='solid';k.backgroundColor='rgba(200,0,180,.1)';})};window.setInterval(h,500);h();};a.addEventListener('dragstart',function(k){l=k.dataTransfer;l.setData(m+'source-uri',c);l.setData(m+'source-title',a.title);n=k.target;if(f){o=n;while(!o.attributes[j]){o=o.parentNode;if(o==b){break;}}}if(f&&o.attributes[j]){p=o.cloneNode(true);l.setData(m+'specific-site',f.n)}else{q=a.getSelection();if(q.type==='Range'||!q.type){p=q.getRangeAt(0).cloneContents();}else{p=n.cloneNode();}}r=a.createElement('div');r.appendChild(p);l.setData('text/x-iri-selected-text',r.textContent.trim());l.setData('text/x-iri-selected-html',r.innerHTML);},false);})();";
-    },
-    /* Shortens text to the required length then adds ellipsis */
-    shortenText = function(_text, _maxlength) {
-        return (_text.length > _maxlength ? (_text.substr(0,_maxlength) + '…') : _text);
-    },
-    /* Drawing an edit box with an arrow and positioning the edit box according to the position of the node/edge being edited
-     * Called by Rkns.Renderer.NodeEditor and Rkns.Renderer.EdgeEditor */
-    drawEditBox = function(_options, _coords, _path, _xmargin, _selector) {
-        _selector.css({
-            width: ( _options.tooltip_width - 2* _options.tooltip_padding )
-        });
-        var _height = _selector.outerHeight() + 2* _options.tooltip_padding,
-        _isLeft = (_coords.x < paper.view.center.x ? 1 : -1),
-        _left = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length ),
-        _right = _coords.x + _isLeft * ( _xmargin + _options.tooltip_arrow_length + _options.tooltip_width ),
-        _top = _coords.y - _height / 2;
-        if (_top + _height > (paper.view.size.height - _options.tooltip_margin)) {
-            _top = Math.max( paper.view.size.height - _options.tooltip_margin, _coords.y + _options.tooltip_arrow_width / 2 ) - _height;
-        }
-        if (_top < _options.tooltip_margin) {
-            _top = Math.min( _options.tooltip_margin, _coords.y - _options.tooltip_arrow_width / 2 );
-        }
-        var _bottom = _top + _height;
-        _path.segments[0].point
-        = _path.segments[7].point
-        = _coords.add([_isLeft * _xmargin, 0]);
-        _path.segments[1].point.x
-        = _path.segments[2].point.x
-        = _path.segments[5].point.x
-        = _path.segments[6].point.x
-        = _left;
-        _path.segments[3].point.x
-        = _path.segments[4].point.x
-        = _right;
-        _path.segments[2].point.y
-        = _path.segments[3].point.y
-        = _top;
-        _path.segments[4].point.y
-        = _path.segments[5].point.y
-        = _bottom;
-        _path.segments[1].point.y = _coords.y - _options.tooltip_arrow_width / 2;
-        _path.segments[6].point.y = _coords.y + _options.tooltip_arrow_width / 2;
-        _path.closed = true;
-        _path.fillColor = new paper.GradientColor(new paper.Gradient([_options.tooltip_top_color, _options.tooltip_bottom_color]), [0,_top], [0, _bottom]);
-        _selector.css({
-            left: (_options.tooltip_padding + Math.min(_left, _right)),
-            top: (_options.tooltip_padding + _top)
-        });
-        return _path;
-    };
+    var Renderer = Rkns.Renderer = {};
 
     /* Rkns.Renderer._BaseRepresentation Class */
 
@@ -261,7 +174,7 @@
         },
         redraw: function(_dontRedrawEdges) {
             var _model_coords = new paper.Point(this.model.get("position")),
-            _baseRadius = this.options.node_size_base * Math.exp((this.model.get("size") || 0) * _NODE_SIZE_STEP);
+            _baseRadius = this.options.node_size_base * Math.exp((this.model.get("size") || 0) * Rkns.Utils._NODE_SIZE_STEP);
             if (!this.is_dragging || !this.paper_coords) {
                 this.paper_coords = this.renderer.toPaperCoords(_model_coords);
             }
@@ -314,7 +227,7 @@
             this.circle.opacity = this.options.show_node_circles ? opacity : .01;
 
             var _text = this.model.get("title") || this.renkan.translate(this.options.label_untitled_nodes) || "";
-            _text = shortenText(_text, this.options.node_label_max_length);
+            _text = Rkns.Utils.shortenText(_text, this.options.node_label_max_length);
 
             if (typeof this.highlighted === "object") {
                 this.title.html(this.highlighted.replace(_(_text).escape(),'<span class="Rk-Highlighted">$1</span>'));
@@ -327,7 +240,7 @@
                 top: this.paper_coords.y + this.circle_radius * this.h_ratio + this.options.node_label_distance,
                 opacity: opacity
             });
-            var _color = this.model.get("color") || (this.model.get("created_by") || _USER_PLACEHOLDER(this.renkan)).get("color");
+            var _color = this.model.get("color") || (this.model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color");
             this.circle.strokeColor = _color;
             var _pc = this.paper_coords;
             this.all_buttons.forEach(function(b) {
@@ -694,7 +607,7 @@
             _a = _v.angle,
             _textdelta = _ortho.multiply(this.options.edge_label_distance),
             _handle = _v.divide(3),
-            _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || _USER_PLACEHOLDER(this.renkan)).get("color"),
+            _color = this.model.get("color") || this.model.get("color") || (this.model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
             opacity = 1;
 
             if (this.model.get("delete_scheduled") || this.from_representation.model.get("delete_scheduled") || this.to_representation.model.get("delete_scheduled")) {
@@ -740,7 +653,7 @@
                 _textdelta = _textdelta.multiply(-1);
             }
             var _text = this.model.get("title") || this.renkan.translate(this.options.label_untitled_edges) || "";
-            _text = shortenText(_text, this.options.node_label_max_length);
+            _text = Rkns.Utils.shortenText(_text, this.options.node_label_max_length);
             this.text.text(_text);
             var _textpos = this.paper_coords.add(_textdelta);
             this.text.css({
@@ -853,7 +766,7 @@
             this.renderer.edge_layer.activate();
             this.type = "Temp-edge";
 
-            var _color = (this.project.get("users").get(this.renkan.current_user) || _USER_PLACEHOLDER(this.renkan)).get("color");
+            var _color = (this.project.get("users").get(this.renkan.current_user) || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color");
             this.line = new paper.Path();
             this.line.strokeColor = _color;
             this.line.dashArray = [4, 2];
@@ -988,7 +901,7 @@
         ),
         draw: function() {
             var _model = this.source_representation.model,
-            _created_by = _model.get("created_by") || _USER_PLACEHOLDER(this.renkan),
+            _created_by = _model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan),
             _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate ),
             _image_placeholder = this.options.static_url + "img/image-placeholder.png",
             _size = (_model.get("size") || 0);
@@ -998,7 +911,7 @@
                     has_creator: !!_model.get("created_by"),
                     title: _model.get("title"),
                     uri: _model.get("uri"),
-                    short_uri:  shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
+                    short_uri:  Rkns.Utils.shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
                     description: _model.get("description"),
                     image: _model.get("image") || "",
                     image_placeholder: _image_placeholder,
@@ -1010,7 +923,7 @@
                 },
                 renkan: this.renkan,
                 options: this.options,
-                shortenText: shortenText
+                shortenText: Rkns.Utils.shortenText
             }));
             this.redraw();
             var _this = this,
@@ -1104,7 +1017,7 @@
                         },
                         function(_e) {
                             _e.preventDefault();
-                            _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || _USER_PLACEHOLDER(_this.renkan)).get("color"));
+                            _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(_this.renkan)).get("color"));
                         }
                 ).click(function(_e) {
                     _e.preventDefault();
@@ -1151,7 +1064,7 @@
         },
         redraw: function() {
             var _coords = this.source_representation.paper_coords;
-            drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * .75, this.editor_$);
+            Rkns.Utils.drawEditBox(this.options, _coords, this.editor_block, this.source_representation.circle_radius * .75, this.editor_$);
             this.editor_$.show();
             paper.view.draw();
         }
@@ -1191,7 +1104,7 @@
             var _model = this.source_representation.model,
             _from_model = _model.get("from"),
             _to_model = _model.get("to"),
-            _created_by = _model.get("created_by") || _USER_PLACEHOLDER(this.renkan),
+            _created_by = _model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan),
             _template = (this.renderer.isEditable() ? this.template : this.readOnlyTemplate);
             this.editor_$
             .html(_template({
@@ -1199,18 +1112,18 @@
                     has_creator: !!_model.get("created_by"),
                     title: _model.get("title"),
                     uri: _model.get("uri"),
-                    short_uri:  shortenText((_model.get("uri") || "").replace(/^(https?:\/\/)?(www\.)?/,'').replace(/\/$/,''),40),
+                    short_uri:  Rkns.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"),
                     to_title: _to_model.get("title"),
-                    from_color: _from_model.get("color") || (_from_model.get("created_by") || _USER_PLACEHOLDER(this.renkan)).get("color"),
-                    to_color: _to_model.get("color") || (_to_model.get("created_by") || _USER_PLACEHOLDER(this.renkan)).get("color"),
+                    from_color: _from_model.get("color") || (_from_model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
+                    to_color: _to_model.get("color") || (_to_model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(this.renkan)).get("color"),
                     created_by_color: _created_by.get("color"),
                     created_by_title: _created_by.get("title")
                 },
                 renkan: this.renkan,
-                shortenText: shortenText,
+                shortenText: Rkns.Utils.shortenText,
                 options: this.options
             }));
             this.redraw();
@@ -1295,7 +1208,7 @@
                         },
                         function(_e) {
                             _e.preventDefault();
-                            _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || _USER_PLACEHOLDER(_this.renkan)).get("color"));
+                            _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Utils._USER_PLACEHOLDER(_this.renkan)).get("color"));
                         }
                 ).click(function(_e) {
                     _e.preventDefault();
@@ -1311,7 +1224,7 @@
         },
         redraw: function() {
             var _coords = this.source_representation.paper_coords;
-            drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$);
+            Rkns.Utils.drawEditBox(this.options, _coords, this.editor_block, 5, this.editor_$);
             this.editor_$.show();
             paper.view.draw();
         }
@@ -1330,7 +1243,7 @@
                 }
                 this.sector = this.renderer.drawSector(
                         this, 1 + sectorInner,
-                        _NODE_BUTTON_WIDTH + sectorInner,
+                        Rkns.Utils._NODE_BUTTON_WIDTH + sectorInner,
                         this.startAngle,
                         this.endAngle,
                         1,
@@ -1496,7 +1409,7 @@
     _(EdgeEditButton.prototype).extend({
         _init: function() {
             this.type = "Edge-edit-button";
-            this.sector = this.renderer.drawSector(this, _EDGE_BUTTON_INNER, _EDGE_BUTTON_OUTER, -270, -90, 1, "edit", this.renkan.translate("Edit"));
+            this.sector = this.renderer.drawSector(this, Rkns.Utils._EDGE_BUTTON_INNER, Rkns.Utils._EDGE_BUTTON_OUTER, -270, -90, 1, "edit", this.renkan.translate("Edit"));
         },
         mouseup: function() {
             if (!this.renderer.is_dragging) {
@@ -1512,7 +1425,7 @@
     _(EdgeRemoveButton.prototype).extend({
         _init: function() {
             this.type = "Edge-remove-button";
-            this.sector = this.renderer.drawSector(this, _EDGE_BUTTON_INNER, _EDGE_BUTTON_OUTER, -90, 90, 1, "remove", this.renkan.translate("Remove"));
+            this.sector = this.renderer.drawSector(this, Rkns.Utils._EDGE_BUTTON_INNER, Rkns.Utils._EDGE_BUTTON_OUTER, -90, 90, 1, "remove", this.renkan.translate("Remove"));
         },
         mouseup: function() {
             this.renderer.click_target = null;
@@ -1542,7 +1455,7 @@
     _(EdgeRevertButton.prototype).extend({
         _init: function() {
             this.type = "Edge-revert-button";
-            this.sector = this.renderer.drawSector(this, _EDGE_BUTTON_INNER, _EDGE_BUTTON_OUTER, -135, 135, 1, "revert", this.renkan.translate("Cancel deletion"));
+            this.sector = this.renderer.drawSector(this, Rkns.Utils._EDGE_BUTTON_INNER, Rkns.Utils._EDGE_BUTTON_OUTER, -135, 135, 1, "revert", this.renkan.translate("Cancel deletion"));
         },
         mouseup: function() {
             this.renderer.click_target = null;
@@ -1646,10 +1559,10 @@
             img.src = _renkan.options.static_url + 'img/' + imgname + '.png';
             _this.icon_cache[imgname] = img;
         });
-
+        
         var throttledMouseMove = _.throttle(function(_event, _isTouch) {
             _this.onMouseMove(_event, _isTouch);
-        }, _MOUSEMOVE_RATE);
+        }, Rkns.Utils._MOUSEMOVE_RATE);
 
         this.canvas_$.on({
             mousedown: function(_event) {
@@ -1677,8 +1590,8 @@
                 var _touches = _event.originalEvent.touches[0];
                 if (
                         _renkan.options.allow_double_click
-                        && new Date() - _lastTap < _DOUBLETAP_DELAY
-                        && ( Math.pow(_lastTapX - _touches.pageX, 2) + Math.pow(_lastTapY - _touches.pageY, 2) < _DOUBLETAP_DISTANCE )
+                        && new Date() - _lastTap < Rkns.Utils._DOUBLETAP_DELAY
+                        && ( Math.pow(_lastTapX - _touches.pageX, 2) + Math.pow(_lastTapY - _touches.pageY, 2) < Rkns.Utils._DOUBLETAP_DISTANCE )
                 ) {
                     _lastTap = 0;
                     _this.onDoubleClick(_touches);
@@ -1820,7 +1733,7 @@
         bindClick(".Rk-Save-Button", "save");
         bindClick(".Rk-Open-Button", "open");
         this.$.find(".Rk-Bookmarklet-Button")
-        .attr("href","javascript:" + _BOOKMARKLET_CODE(_renkan))
+        .attr("href","javascript:" + Rkns.Utils._BOOKMARKLET_CODE(_renkan))
         .click(function(){
             _this.notif_$
             .text(_renkan.translate("Drag this button to your bookmark bar. When on a third-party website, click it to enable drag-and-drop from the website to Renkan."))
@@ -2201,7 +2114,7 @@
             this.redrawUsers();
         },
         setScale: function(_newScale, _offset) {
-            if ((_newScale/this.initialScale) > _MIN_SCALE && (_newScale/this.initialScale) < _MAX_SCALE) {
+            if ((_newScale/this.initialScale) > Rkns.Utils._MIN_SCALE && (_newScale/this.initialScale) < Rkns.Utils._MAX_SCALE) {
                 this.scale = _newScale;
                 if (_offset) {
                     this.offset = _offset;
@@ -2272,6 +2185,8 @@
         },
         addRepresentation: function(_type, _model) {
             var _repr = new Renderer[_type](this, _model);
+            console.log("REPR RENKAN",_repr);
+            console.log("REPR RENKAN",Renderer[_type]);
             this.representations.push(_repr);
             return _repr;
         },
@@ -2426,7 +2341,7 @@
                                       ]),
                                       _delta = _point.subtract(this.last_point);
             this.last_point = _point;
-            if (!this.is_dragging && this.mouse_down && _delta.length > _MIN_DRAG_DISTANCE) {
+            if (!this.is_dragging && this.mouse_down && _delta.length > Rkns.Utils._MIN_DRAG_DISTANCE) {
                 this.is_dragging = true;
             }
             var _hitResult = paper.project.hitTest(_point);
@@ -2458,7 +2373,7 @@
                     this.click_target.mousedown(_event, _isTouch);
                 } else {
                     this.click_target = null;
-                    if (this.isEditable() && this.click_mode === _CLICKMODE_ADDNODE) {
+                    if (this.isEditable() && this.click_mode === Rkns.Utils._CLICKMODE_ADDNODE) {
                         var _coords = this.toModelCoords(_point),
                         _data = {
                             id: Rkns.Utils.getUID('node'),
@@ -2474,10 +2389,10 @@
                 }
             }
             if (this.click_mode) {
-                if (this.isEditable() && this.click_mode === _CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") {
+                if (this.isEditable() && this.click_mode === Rkns.Utils._CLICKMODE_STARTEDGE && this.click_target && this.click_target.type === "Node") {
                     this.removeRepresentationsOfType("editor");
                     this.addTempEdge(this.click_target, _point);
-                    this.click_mode = _CLICKMODE_ENDEDGE;
+                    this.click_mode = Rkns.Utils._CLICKMODE_ENDEDGE;
                     this.notif_$.fadeOut(function() {
                         $(this).html(this.renkan.translate("Click on a second node to complete the edge")).fadeIn();
                     });
@@ -2716,21 +2631,21 @@
             this.setScale( _newScale, _offset );
         },
         addNodeBtn: function() {
-            if (this.click_mode === _CLICKMODE_ADDNODE) {
+            if (this.click_mode === Rkns.Utils._CLICKMODE_ADDNODE) {
                 this.click_mode = false;
                 this.notif_$.hide();
             } else {
-                this.click_mode = _CLICKMODE_ADDNODE;
+                this.click_mode = Rkns.Utils._CLICKMODE_ADDNODE;
                 this.notif_$.text(this.renkan.translate("Click on the background canvas to add a node")).fadeIn();
             }
             return false;
         },
         addEdgeBtn: function() {
-            if (this.click_mode === _CLICKMODE_STARTEDGE || this.click_mode === _CLICKMODE_ENDEDGE) {
+            if (this.click_mode === Rkns.Utils._CLICKMODE_STARTEDGE || this.click_mode === Rkns.Utils._CLICKMODE_ENDEDGE) {
                 this.click_mode = false;
                 this.notif_$.hide();
             } else {
-                this.click_mode = _CLICKMODE_STARTEDGE;
+                this.click_mode = Rkns.Utils._CLICKMODE_STARTEDGE;
                 this.notif_$.text(this.renkan.translate("Click on a first node to start the edge")).fadeIn();
             }
             return false;