Renkan updates
authorveltr
Fri, 07 Sep 2012 18:18:47 +0200
changeset 955 5055aa35340f
parent 954 71a8438be150
child 956 7c1d08cf6956
Renkan updates
src/js/libs/renkan-publish.js
src/widgets/Renkan.css
src/widgets/Renkan.js
test/json/renkan-2.json
test/json/renkan.json
test/renkan.htm
--- a/src/js/libs/renkan-publish.js	Wed Sep 05 11:30:01 2012 +0200
+++ b/src/js/libs/renkan-publish.js	Fri Sep 07 18:18:47 2012 +0200
@@ -27,7 +27,8 @@
 Rkns.i18n = {
     en: {
         zoom_in: "Zoom In",
-        zoom_out: "Zoom Out"
+        zoom_out: "Zoom Out",
+        see_in_project: 'See also <b>"{node}"</b> in <b>"{project}"</b>'
     }
 }
 
@@ -57,13 +58,13 @@
 Rkns.Models.RenkanModel = Backbone.RelationalModel.extend({
     idAttribute : "_id",
     constructor: function(options) {
-        
+
         if (typeof options !== "undefined") {
             options._id = options._id || options.id || Rkns.Models.getUID(this);
             options.title = options.title || "(untitled " + this.type + ")";
             options.description = options.description || "";
             options.uri = options.uri || "";
-            
+
             if(typeof this.prepare === "function") {
                 options = this.prepare(options);
             }
@@ -125,6 +126,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")
         }
     },
@@ -263,25 +265,74 @@
     if (typeof _opts.search !== "object" || !_opts.search) {
         _opts.search = [];
     }
-    this.project = new Rkns.Models.Project();
+    this.projects = [];
     this.l10n = Rkns.i18n[_opts.language];
     this.$ = Rkns.$("#" + _opts.container);
     this.$.html(this.template());
-    this.renderer = new Rkns.Renderer.Scene(this);
+    this.uris = {};
+    this.active_project = null;
+    this.renderer = null;
 }
+
 Rkns.Renkan.prototype.template = Rkns._.template(
-    '<div class="Rk-Render Rk-Render-Full"></div>'
+    '<div class="Rk-Render"></div><ul class="Rk-Project-List"></ul>'
 );
 
-Rkns.jsonImport = function(_renkan, _opts) {
-    var _proj = _renkan.project;
+Rkns.Renkan.prototype.addProject = function(_opts) {
+    var _proj = new Rkns.Models.Project(),
+        _li = Rkns.$("<li>").addClass("Rk-Project").text("Untitled #" + (1+this.projects.length));
+    this.$.find(".Rk-Project-List").append(_li);
+    Rkns.loadJson(_proj, _opts);
+    var _this = this;
+    _li.click(function() {
+        _this.renderProject(_proj);
+    });
+    _proj.on("change:title", function() {
+        _li.html(_proj.get("title"));
+    });
+    _proj.on("select", function() {
+        _this.$.find(".Rk-Project").removeClass("active");
+        _li.addClass("active");
+    });
+    _proj.on("add:nodes", function(_node) {
+        var _uri = _node.get("uri");
+        if (_uri) {
+            if (typeof _this.uris[_uri] === "undefined") {
+                _this.uris[_uri] = [];
+            }
+            _this.uris[_uri].push(_node);
+        }
+    });
+    this.projects.push(_proj);
+    return _proj;
+}
+
+Rkns.Renkan.prototype.renderProject = function(_project) {
+    if (_project) {
+        if (this.renderer) {
+            this.renderer.destroy();
+        }
+        this.active_project = _project;
+        this.renderer = new Rkns.Renderer.Scene(this, _project);
+        this.renderer.autoScale();
+        _project.trigger("select");
+    }
+}
+
+Rkns.Renkan.prototype.renderProjectAt = function(_index) {
+    this.renderProject(this.projects[_index]);
+}
+
+Rkns.loadJson = function(_proj, _opts) {
     if (typeof _opts.http_method == "undefined") {
         _opts.http_method = 'PUT';
     }
     var _load = function() {
         Rkns.$.getJSON(_opts.url, function(_data) {
             _proj.set(_data);
-            _renkan.renderer.autoScale();
+            if (typeof _opts.callback === "function") {
+                _opts.callback(_proj);
+            }
         });
     }
     _load();
@@ -291,7 +342,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,
@@ -358,31 +409,49 @@
 Rkns.Renderer._BaseRepresentation = function(_renderer, _model) {
     if (typeof _renderer !== "undefined") {
         this.renderer = _renderer;
-        this.project = _renderer.renkan.project;
+        this.project = _renderer.project;
         this.model = _model;
-        if (_model) {
+        if (this.model) {
             var _this = this;
-            _model.on("select", function() {
+            this._selectBinding = function() {
                 _this.select();
-            });
-            _model.on("unselect", function() {
+            };
+            this._unselectBinding = function() {
                 _this.unselect();
-            });
+            }
+            this._changeBinding = function() {
+                _this.redraw();
+            }
+            this._removeBinding = function() {
+                _renderer.removeRepresentation(_this);
+                _renderer.redraw();
+            }
+            this.model.on("change", this._changeBinding );
+            this.model.on("remove", this._removeBinding );
+            this.model.on("select", this._selectBinding );
+            this.model.on("unselect", this._unselectBinding );
         }
     }
 }
 
+Rkns.Renderer._BaseRepresentation.prototype.super = function(_func) {
+    Rkns.Renderer._BaseRepresentation.prototype[_func].apply(this, Array.prototype.slice.call(arguments, 1));
+}
+
 Rkns.Renderer._BaseRepresentation.prototype.select = function() {}
 
 Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {}
 
-Rkns.Renderer._BaseRepresentation.prototype.highlight = function() {}
-
-Rkns.Renderer._BaseRepresentation.prototype.unhighlight = function() {}
-
 Rkns.Renderer._BaseRepresentation.prototype.mouseup = function() {}
 
-Rkns.Renderer._BaseRepresentation.prototype.destroy = function() {}
+Rkns.Renderer._BaseRepresentation.prototype.destroy = function() {
+    if (this.model) {
+        this.model.off("change", this._changeBinding );
+        this.model.off("remove", this._removeBinding );
+        this.model.off("select", this._selectBinding);
+        this.model.off("unselect", this._unselectBinding);
+    }
+}
 
 Rkns.Renderer.Node = Rkns.Utils.inherit(Rkns.Renderer._BaseRepresentation);
 
@@ -408,6 +477,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 = _this.selected ? .5 : .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 +521,27 @@
     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.selected = true;
     this.circle.strokeWidth = 3;
-    this.circle.fillColor = "#ffffc0";
+    this.openTooltip();
+    this.circle.fillColor = "#ffff80";
+    if (this.node_image) {
+        this.node_image.opacity = .5;
+    }
     paper.view.draw();
 }
 
 Rkns.Renderer.Node.prototype.unselect = function() {
+    this.selected = false;
     this.circle.strokeWidth = 1;
     this.circle.fillColor = "#ffffff";
+    if (this.node_image) {
+        this.node_image.opacity = .9;
+    }
     paper.view.draw();
 }
 
@@ -439,8 +549,12 @@
 }
 
 Rkns.Renderer.Node.prototype.destroy = function(_event) {
+    this.super("destroy");
     this.circle.remove();
     this.title.remove();
+    if (this.node_image) {
+        this.node_image.remove();
+    }
 }
 
 /* */
@@ -510,7 +624,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() {
@@ -534,6 +648,7 @@
 }
 
 Rkns.Renderer.Edge.prototype.destroy = function() {
+    this.super("destroy");
     this.line.remove();
     this.arrow.remove();
     this.text.remove();
@@ -568,12 +683,12 @@
 
 Rkns.Renderer.NodeTooltip.prototype.template = Rkns._.template(
     '<h2><span class="Rk-CloseX">&times;</span><%=a%></h2>'
-    + '<p><%=description%></p>'
+    + '<p><%-description%></p>'
+    + '<ul class="Rk-Related-List"></ul>'
 );
 
-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 +696,36 @@
             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_$);
-    var _this = this;
+    var _this = this,
+        _renkan = this.renderer.renkan,
+        _uris = _renkan.uris[_uri];
+    Rkns._(_uris).each(function(_othernode) {
+        if (_othernode !== _model && _othernode.get("project") !== _this.project) {
+            var _otherproj = _othernode.get("project"),
+                _nodetitle = _othernode.get("title") || "Untitled node"
+                _projtitle = _otherproj.get("title") || "Untitled node",
+                _html = _renkan.l10n.see_in_project.replace('{node}',Rkns._.escape(_nodetitle)).replace('{project}',Rkns._.escape(_projtitle)),
+                _li = Rkns.$("<li>").addClass("Rk-Related").html(_html);
+            _li.click(function() {
+                _renkan.renderProject(_otherproj);
+                Rkns._.defer(function() {
+                    _othernode.trigger("select");
+                });
+            });
+            _this.tooltip_$.append(_li);
+        }
+    });
     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();
+    this.redraw();
+}
+
+Rkns.Renderer.NodeTooltip.prototype.redraw = function() {
+    var _coords = this.node_representation.paper_coords;
+    Rkns.Renderer.Utils.drawTooltip(_coords, this.tooltip_block, 250, 15, this.tooltip_$);
+    this.tooltip_$.show();
 }
 
 Rkns.Renderer.NodeTooltip.prototype.destroy = function() {
@@ -624,26 +758,30 @@
 
 Rkns.Renderer.EdgeTooltip.prototype.template = Rkns._.template(
     '<h2><span class="Rk-CloseX">&times;</span><%=a%></h2>'
-    + '<p><%=description%></p>'
+    + '<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();
 }
 
@@ -654,8 +792,9 @@
 
 /* */
 
-Rkns.Renderer.Scene = function(_renkan) {
+Rkns.Renderer.Scene = function(_renkan, _project) {
     this.renkan = _renkan;
+    this.project = _project;
     this.$ = Rkns.$(".Rk-Render");
     this.representations = [];
     this.$.html(this.template({
@@ -718,24 +857,26 @@
         _this.redraw();
     },50);
     
-    this.addRepresentations("Node", this.renkan.project.get("nodes"));
-    this.addRepresentations("Edge", this.renkan.project.get("edges"));
+    this.addRepresentations("Node", this.project.get("nodes"));
+    this.addRepresentations("Edge", this.project.get("edges"));
     
-    this.renkan.project.on("add:nodes", function(_node) {
+    this._addNodesBinding = function(_node) {
         _this.addRepresentation("Node", _node);
         _thRedraw();
-    });
-    this.renkan.project.on("add:edges", function(_edge) {
+    }
+    this._addEdgesBinding = function(_edge) {
         _this.addRepresentation("Edge", _edge);
         _thRedraw();
-    });
+    }
     
+    this.project.on("add:nodes", this._addNodesBinding );
+    this.project.on("add:edges", this._addEdgesBinding );
     this.redraw();
 }
 
 Rkns.Renderer.Scene.prototype.template = Rkns._.template(
-    '<canvas class="Rk-Canvas" width="<%=width%>" height="<%=height%>"></canvas><div class="Rk-Editor">'
-    + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
+    '<canvas class="Rk-Canvas" width="<%-width%>" height="<%-height%>"></canvas><div class="Rk-Editor">'
+    + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%-l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%-l10n.zoom_out%>"></div></div>'
     + '</div>'
 );
 
@@ -764,9 +905,9 @@
 }
 
 Rkns.Renderer.Scene.prototype.autoScale = function() {
-    if (this.renkan.project.get("nodes").length) {
-        var _xx = this.renkan.project.get("nodes").map(function(_node) { return _node.get("position").x }),
-            _yy = this.renkan.project.get("nodes").map(function(_node) { return _node.get("position").y }),
+    if (this.project.get("nodes").length) {
+        var _xx = this.project.get("nodes").map(function(_node) { return _node.get("position").x }),
+            _yy = this.project.get("nodes").map(function(_node) { return _node.get("position").y }),
             _minx = Math.min.apply(Math, _xx),
             _miny = Math.min.apply(Math, _yy),
             _maxx = Math.max.apply(Math, _xx),
@@ -789,16 +930,6 @@
 Rkns.Renderer.Scene.prototype.addRepresentation = function(_type, _model) {
     var _repr = new Rkns.Renderer[_type](this, _model);
     this.representations.push(_repr);
-    if (_model) {
-        var _this = this;
-        _model.on("change", function() {
-            _repr.redraw();
-        });
-        _model.on("remove", function() {
-            _this.removeRepresentation(_repr);
-            _this.redraw();
-        });
-    }
     return _repr;
 }
 
@@ -863,9 +994,6 @@
                 this.selected_target.model.trigger("unselect");
             }
             _newTarget.model.trigger("select");
-            if (typeof _newTarget.openTooltip === "function") {
-                _newTarget.openTooltip();
-            }
             this.selected_target = _newTarget;
         }
     } else {
@@ -938,3 +1066,14 @@
         this.redraw();
     }
 }
+
+Rkns.Renderer.Scene.prototype.destroy = function() {
+    this.project.off("add:nodes", this._addNodesBinding );
+    this.project.off("add:edges", this._addEdgesBinding );
+    Rkns._(this.representations).each(function(_repr) {
+        _repr.destroy();
+    });
+    this.$.html("");
+    paper.remove();
+}
+
--- a/src/widgets/Renkan.css	Wed Sep 05 11:30:01 2012 +0200
+++ b/src/widgets/Renkan.css	Fri Sep 07 18:18:47 2012 +0200
@@ -3,11 +3,47 @@
     position: relative;
 }
 
-.Rk-Render-Full, .Rk-Canvas {
+.Ldt-Renkan a {
+    color: #303080;
+}
+
+.Rk-ProjectList {
+    position: absolute; left: 0; top: 0; list-style: none; padding: 0; margin: 0;
+}
+
+.Rk-Project {
+    list-style: none; margin-right: 5px; padding: 5px; height: 15px; font-size: 13px; font-weight: bold;
+    float: left; border-top-left-radius: 8px; border-top-right-radius: 8px;
+    background: #505050; color: #E0E0E0; cursor: pointer;
+    background: -moz-linear-gradient(top, #333333 20%, #666666 80%);
+}
+
+.Rk-Project:hover {
+    background: -moz-linear-gradient(bottom, #333333 20%, #666666 80%);
+}
+
+.Rk-Project.active {
+    background: #505080;
+    color: #ffffc0;
+    background: -moz-linear-gradient(bottom, #333366 20%, #666699 80%);
+}
+.Rk-Render, .Rk-Canvas {
     position: absolute; left: 0; top: 0; width: 600px; height: 500px;
     overflow: hidden;
 }
 
+.Rk-Render {
+    top: 25px;
+    background: -moz-linear-gradient(top, rgba(180,180,180,.2) 0, rgba(255,255,255,.2) 30%, rgba(255,255,255,.2) 70%, rgba(180,180,180,.2) 100%);
+    background: -webkit-linear-gradient(top, rgba(180,180,180,.2) 0, rgba(255,255,255,.2) 30%, rgba(255,255,255,.2) 70%, rgba(180,180,180,.2) 100%);
+}
+
+.Rk-Canvas {
+    top: 0;
+    background: -moz-linear-gradient(left, rgba(180,180,180,.2) 0, rgba(255,255,255,.2) 30%, rgba(255,255,255,.2) 70%, rgba(180,180,180,.2) 100%);
+    background: -webkit-linear-gradient(left, rgba(180,180,180,.2) 0, rgba(255,255,255,.2) 30%, rgba(255,255,255,.2) 70%, rgba(180,180,180,.2) 100%);
+}
+
 .Rk-Editor {
     position: absolute; left: 0; top: 0;
 }
@@ -24,8 +60,24 @@
     margin: 5px 0; font-size: 12px;
 }
 
+.Rk-RelatedList {
+    list-style: none; padding: 0; margin: 0;
+}
+
+.Rk-Related {
+    list-style: none; color: #a000c0; cursor: pointer; margin: 5px 0;
+}
+
+.Rk-Related b {
+    font-weight: bolder;
+}
+
+.Rk-Related:hover {
+    text-decoration: underline;
+}
+
 .Rk-ZoomIn, .Rk-ZoomOut {
-    width: 21px; height: 20px; background: url(img/zoombuttons.png); margin: 5px;
+    width: 21px; height: 20px; background: url(img/zoombuttons.png); margin: 5px; cursor: pointer;
 }
 
 .Rk-ZoomIn:hover {
@@ -38,4 +90,4 @@
 
 .Rk-ZoomOut:hover {
     background-position: -21px -20px;
-}
\ No newline at end of file
+}
--- a/src/widgets/Renkan.js	Wed Sep 05 11:30:01 2012 +0200
+++ b/src/widgets/Renkan.js	Fri Sep 07 18:18:47 2012 +0200
@@ -27,67 +27,78 @@
     this.renkan = new Rkns.Renkan({
         container: _id
     });
+    if (typeof this.data === "string") {
+        this.data = [ this.data ];
+    }
     var _this = this,
         _list = this.getWidgetAnnotations();
     this.node_times = [];
-    this.renkan.project.on("add:nodes", function(_node) {
-        var _uri = _node.get("uri"),
-            _annmatch = _uri.match(_this.annotation_regexp);
-        if (_annmatch) {
-            var _annotations = _list.filter(function(_ann) {
-                return _ann.getMedia().id == _annmatch[1] && _ann.id == _annmatch[2];
-            });
-            _annotations.forEach(function(_ann) {
-                var _duration = _ann.getDuration(),
-                    _preroll = + ( _duration < _this.min_duration ) * ( _this.min_duration / 2);
-                var _nt = {
-                    selected: false,
-                    node: _node,
-                    begin: _ann.begin - _preroll,
-                    end: _ann.end + _preroll
-                }
-                _this.node_times.push(_nt);
-                _ann.on("select", function(_stop) {
-                    if (!_stop) {
-                        _node.trigger("select",true);
-                    }
-                });
-                _node.on("select", function(_stop) {
-                    if (!_stop) {
-                        _ann.trigger("select",true);
-                    }
+    Rkns._(this.data).each(function(_url, _key) {
+        var _opts = {
+            url: _url
+        }
+        if (!_key) {
+            _opts.callback = function(_p) {
+                _this.renkan.renderProject(_p);
+            }
+        }
+        var _proj = _this.renkan.addProject(_opts);
+        _proj.on("add:nodes", function(_node) {
+            var _uri = _node.get("uri"),
+                _annmatch = _uri.match(_this.annotation_regexp);
+            if (_annmatch) {
+                var _annotations = _list.filter(function(_ann) {
+                    return _ann.getMedia().id == _annmatch[1] && _ann.id == _annmatch[2];
                 });
-                _ann.on("unselect", function(_stop) {
-                    if (!_stop) {
-                        _node.trigger("unselect",true);
+                _annotations.forEach(function(_ann) {
+                    var _duration = _ann.getDuration(),
+                        _preroll = + ( _duration < _this.min_duration ) * ( _this.min_duration / 2);
+                    var _nt = {
+                        selected: false,
+                        node: _node,
+                        begin: _ann.begin - _preroll,
+                        end: _ann.end + _preroll
                     }
-                });
-                _node.on("unselect", function(_stop) {
-                    _nt.selected = false;
-                    if (!_stop) {
-                        _ann.trigger("unselect",true);
-                    }
-                });
-                _node.on("click", function() {
-                    _this.player.popcorn.currentTime(_ann.begin.getSeconds());
-                    _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _ann.id);
+                    _this.node_times.push(_nt);
+                    _ann.on("select", function(_stop) {
+                        if (!_stop) {
+                            _node.trigger("select",true);
+                        }
+                    });
+                    _node.on("select", function(_stop) {
+                        if (!_stop) {
+                            _ann.trigger("select",true);
+                        }
+                    });
+                    _ann.on("unselect", function(_stop) {
+                        if (!_stop) {
+                            _node.trigger("unselect",true);
+                        }
+                    });
+                    _node.on("unselect", function(_stop) {
+                        _nt.selected = false;
+                        if (!_stop) {
+                            _ann.trigger("unselect",true);
+                        }
+                    });
+                    _node.on("click", function() {
+                        _this.player.popcorn.currentTime(_ann.begin.getSeconds());
+                        _this.player.popcorn.trigger("IriSP.Mediafragment.setHashToAnnotation", _ann.id);
+                    });
                 });
-            });
-        }
-        var _tagmatch = _uri.match(_this.tag_regexp);
-        if (_tagmatch) {
-            _node.on("select", function() {
-                _this.player.popcorn.trigger("IriSP.search.triggeredSearch",_tagmatch[1]);
-            })
-            _node.on("unselect", function() {
-                _this.player.popcorn.trigger("IriSP.search.cleared");
-            })
-        }
-    });
-    Rkns.jsonImport(this.renkan, {
-        url: this.data
-    });
-    this.bindPopcorn("timeupdate","onTimeupdate")
+            }
+            var _tagmatch = _uri.match(_this.tag_regexp);
+            if (_tagmatch) {
+                _node.on("select", function() {
+                    _this.player.popcorn.trigger("IriSP.search.triggeredSearch",_tagmatch[1]);
+                })
+                _node.on("unselect", function() {
+                    _this.player.popcorn.trigger("IriSP.search.cleared");
+                })
+            }
+        });
+    })
+    this.bindPopcorn("timeupdate","onTimeupdate");
 }
 
 IriSP.Widgets.Renkan.prototype.onTimeupdate = function() {
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/test/json/renkan-2.json	Fri Sep 07 18:18:47 2012 +0200
@@ -0,0 +1,328 @@
+{
+    "title": "Discussion Stiegler-Renucci",
+    "users": [
+        {
+            "_id": "u-anonymous",
+            "title": "anonymous",
+            "uri": "",
+            "description": "",
+            "color": "#dd00dd"
+        }, {
+            "_id": "u-cybunk",
+            "title": "Samuel",
+            "uri": "http://twitter.com/cybunk",
+            "description": "",
+            "color": "#e00000"
+        }, {
+            "_id": "u-raphv",
+            "title": "Raphael",
+            "uri": "http://twitter.com/raphv",
+            "description": "",
+            "color": "#00a000"
+        }
+    ],
+    "nodes": [
+        {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-0001",
+            "title": "Robin Renucci : Conversation avec Bernard Stiegler",
+            "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=s_569B4FC3-C84E-4527-8999-4102A11BFA0A",
+            "description": "ロバン・ルヌッチによるプレゼンテーション(ベルナール・スティグレールとの対談)\n (langue française フランス語)",
+            "position": {
+                "x": -65,
+                "y": -123.5
+            },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/ldt-segment.png",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-0002",
+            "title": "Wikipedia: Robin Renucci",
+            "uri": "http://fr.wikipedia.org/wiki/Robin_Renucci",
+            "description": "Daniel Robin-Renucci, connu sous le nom de scène de Robin Renucci, est un acteur  et un réalisateur  français , né le 11 juillet  1956  au  ... ",
+            "position": {
+                "x": -280,
+                "y": -251.5
+            },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-0004",
+            "title": "Wikipedia: Bernard Stiegler",
+            "uri": "http://fr.wikipedia.org/wiki/Bernard_Stiegler",
+            "description": "Bernard Stiegler, né le 1 | avril | 1952, est un philosophe  français  qui axe sa réflexion sur les enjeux des mutations actuelles —  ... ",
+            "position": {
+                "x": -343,
+                "y": 78.5
+            },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-0006",
+            "title": "Tweet",
+            "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=8ec66540-cb76-4c82-a6a5-d6d8c92962f2-127762445681967104",
+            "description": "Vincent Puig: #tfcem Robin Renucci, membre Ars Idustrialis, prône la reconnaissance de la valeur de l'individu au coté de l'artiste (Education populaire)",
+            "position": {
+                "x": -155,
+                "y": 140
+            },
+            "image": "http://a1.twimg.com/profile_images/379424006/PortaitVP120Ko_normal.jpg",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-0007",
+            "title": "Tweet",
+            "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=5cabe2c8-fbbc-4e14-b1a9-3e8954a3c3c2-127765207803101185",
+            "description": "Vincent Puig: #tfcem Stiegler relance la polémique sur la démocratisation cuturelle, Culture pour tous ou Culture pour chacun. Un enjeu électroral 2012==",
+            "position": {
+                "x": 176,
+                "y": 59
+            },
+            "image": "http://a1.twimg.com/profile_images/379424006/PortaitVP120Ko_normal.jpg",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-0008",
+            "title": "Tweet",
+            "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=db404779-04ca-4c9e-9329-9d6dddbdaf7c-127773107187499009",
+            "description": "Vincent Puig: #tfcem L'origine de la démocratie ? L'écriture qui est dans le numérique dans un processus de profonde mutation??",
+            "position": {
+                "x": 1,
+                "y": 102
+            },
+            "image": "http://a1.twimg.com/profile_images/379424006/PortaitVP120Ko_normal.jpg",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-0009",
+            "title": "Introduction de Renucci par Stiegler",
+            "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=s_D19F89A3-21CE-C53A-79E4-40F3839CBF17",
+            "description": "ベルナール・スティグレールによるロバン・ルヌッチの紹介(langue française フランス語)",
+            "position": {
+                "x": -304,
+                "y": -89
+            },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/ldt-segment.png",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-000b",
+            "title": "Stiegler : Chocs technologiques ...",
+            "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=s_6C326EED-B91A-AEDF-032D-40D9A60AAD7E",
+            "description": "ベルナール・スティグレールによるプレゼンテーション『テクノロジーの衝撃と大学の諸課題――デジタル・スタディーズの時代』 (langue française フランス語)",
+            "position": {
+                "x": -505,
+                "y": -123
+            },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/ldt-segment.png",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-0010",
+            "title": "Introduction de Fujihata par Ishida",
+            "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=s_048BB538-83E9-58D6-18B2-411A24D12FEA",
+            "description": "石田英敬による藤幡正樹の紹介(langue française フランス語)",
+            "position": {
+                "x": 128,
+                "y": -198
+            },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/ldt-segment.png",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-0015",
+            "title": "Wikipedia: Culture",
+            "uri": "http://fr.wikipedia.org/wiki/Culture",
+            "description": "En philosophie , le mot culture désigne ce qui est différent de la nature , c'est-à-dire ce qui est de l'ordre de l'acquis et non de l'inné ... ",
+            "position": {
+                "x": 329,
+                "y": -78
+            },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-0017",
+            "title": "Wikipedia: Démocratie",
+            "uri": "http://fr.wikipedia.org/wiki/D%C3%A9mocratie",
+            "description": "La démocratie (du grec ancien. δημοκρατία / grc-Latn | dēmokratía souveraineté du peuple », de grec ancien | δῆμος / Lang | grc-Latn |  ... ",
+            "position": {
+                "x": 72,
+                "y": 268
+            },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-001a",
+            "title": "Wikipedia: Démocratisation",
+            "uri": "http://fr.wikipedia.org/wiki/D%C3%A9mocratisation",
+            "description": "Le terme démocratisation est équivoque.  Il peut désigner le:  Renforcement du caractère démocratique  d’un régime politique (par exemple en ... ",
+            "position": {
+                "x": 250,
+                "y": 234
+            },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-001d",
+            "title": "Wikipedia: Politique culturelle française",
+            "uri": "http://fr.wikipedia.org/wiki/Politique_culturelle_fran%C3%A7aise",
+            "description": "De la démocratisation à la démocratie culturelle: Image:Bibliotheque nationale de France-fr. jpg | La Très grande bibliothèque, décidée par  ... ",
+            "position": {
+                "x": 358,
+                "y": 69
+            },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "node-2012-09-07-7e8a09d3a0309d08-0020",
+            "title": "Wikipedia: Éducation populaire",
+            "uri": "http://fr.wikipedia.org/wiki/%C3%89ducation_populaire",
+            "description": "L éducation populaire est un vaste courant de pensée qui cherche principalement à promouvoir en dehors des structures traditionnelles  ... ",
+            "position": {
+                "x": -264,
+                "y": 256
+            },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
+            "created_by": "u-anonymous"
+        }
+    ],
+    "edges": [
+        {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-0003",
+            "title": "participant",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0002",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0001",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-0005",
+            "title": "participant",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0004",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0001",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-000a",
+            "title": "introduction à",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0009",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0001",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-000c",
+            "title": "précède",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-000b",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0009",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-000d",
+            "title": "(untitled edge)",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0002",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0009",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-000e",
+            "title": "participant",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0009",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0004",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-000f",
+            "title": "participant",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0004",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-000b",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-0011",
+            "title": "suit",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0010",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0001",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-0012",
+            "title": "(untitled edge)",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0008",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0001",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-0013",
+            "title": "(untitled edge)",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0006",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0001",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-0014",
+            "title": "(untitled edge)",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0007",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0001",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-0016",
+            "title": "(untitled edge)",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0015",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0007",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-0018",
+            "title": "(untitled edge)",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0017",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0008",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-001b",
+            "title": "(untitled edge)",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-001a",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0007",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-001c",
+            "title": "(untitled edge)",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0017",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-001a",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-001e",
+            "title": "(untitled edge)",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0015",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-001d",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-001f",
+            "title": "(untitled edge)",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-001a",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-001d",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-07-7e8a09d3a0309d08-0021",
+            "title": "(untitled edge)",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-09-07-7e8a09d3a0309d08-0020",
+            "to": "node-2012-09-07-7e8a09d3a0309d08-0006",
+            "created_by": "u-anonymous"
+        }
+    ]
+}
\ No newline at end of file
--- a/test/json/renkan.json	Wed Sep 05 11:30:01 2012 +0200
+++ b/test/json/renkan.json	Fri Sep 07 18:18:47 2012 +0200
@@ -1,19 +1,20 @@
 {
+    "title": "Intervention de Stiegler",
     "users": [
         {
-            "id": "u-anonymous",
+            "_id": "u-anonymous",
             "title": "anonymous",
             "uri": "",
             "description": "",
             "color": "#dd00dd"
         }, {
-            "id": "u-cybunk",
+            "_id": "u-cybunk",
             "title": "Samuel",
             "uri": "http://twitter.com/cybunk",
             "description": "",
             "color": "#e00000"
         }, {
-            "id": "u-raphv",
+            "_id": "u-raphv",
             "title": "Raphael",
             "uri": "http://twitter.com/raphv",
             "description": "",
@@ -22,7 +23,7 @@
     ],
     "nodes": [
         {
-            "id": "node-2012-08-22-9da6eef6c6391d05-0001",
+            "_id": "node-2012-08-22-9da6eef6c6391d05-0001",
             "title": "Chocs technologiques et tâches de l’université...",
             "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=s_6C326EED-B91A-AEDF-032D-40D9A60AAD7E",
             "description": "Bernard Stiegler:\nChocs technologiques et tâches de l’université. L'époque des digital studies\nベルナール・スティグレールによるプレゼンテーション『テクノロジーの衝撃と大学の諸課題――デジタル・スタディーズの時代』 (langue française フランス語)",
@@ -30,39 +31,43 @@
                 "x": 35.50145330596697,
                 "y": -79.8809523809524
             },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/ldt-segment.png",
             "created_by": "u-cybunk"
         }, {
-            "id": "node-2012-08-22-9da6eef6c6391d05-0002",
+            "_id": "node-2012-08-22-9da6eef6c6391d05-0002",
             "title": "Wiki: ベルナール・スティグレール",
             "uri": "http://ja.wikipedia.org/wiki/%E3%83%99%E3%83%AB%E3%83%8A%E3%83%BC%E3%83%AB%E3%83%BB%E3%82%B9%E3%83%86%E3%82%A3%E3%82%B0%E3%83%AC%E3%83%BC%E3%83%AB",
             "description": "|image_name = Bernard-Stiegler.jpg\n'''ベルナール・スティグレール'''('''Bernard Stiegler''',[[1952年]][[4月1日]] - )は、[[フランス]]の[[哲学者]]。\n",
             "position": {
-                "x": -196.21861947454883,
-                "y": -149.00697345010028
+                "x": -212.89325104742056,
+                "y": -142.05921029473706
             },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
             "created_by": "u-raphv"
         }, {
-            "id": "node-2012-08-22-9da6eef6c6391d05-0003",
+            "_id": "node-2012-08-22-9da6eef6c6391d05-0003",
             "title": "Wiki: Bernard Stiegler",
             "uri": "http://fr.wikipedia.org/wiki/Bernard_Stiegler",
             "description": "Bernard Stiegler, né le 1 | avril | 1952, est un philosophe  français  qui axe sa réflexion sur les enjeux des mutations actuelles —  ... ",
             "position": {
-                "x": -203.78187077358191,
-                "y": -298.3662919065874
+                "x": -199.613212880364,
+                "y": -297.6715155910511
             },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
             "created_by": "u-raphv"
         }, {
-            "id": "node-2012-08-22-9da6eef6c6391d05-0004",
+            "_id": "node-2012-08-22-9da6eef6c6391d05-0004",
             "title": "Tag: Stiegler",
             "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/search/?search=Stiegler&field=all",
             "description": "Tag 'Stiegler'",
             "position": {
-                "x": -82.30326393358813,
-                "y": -220.3518547582561
+                "x": -68.40773762286169,
+                "y": -205.76155213199334
             },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/ldt-tag.png",
             "created_by": "u-raphv"
         }, {
-            "id": "node-2012-08-22-9da6eef6c6391d05-0009",
+            "_id": "node-2012-08-22-9da6eef6c6391d05-0009",
             "title": "Wiki: Humanités numériques",
             "uri": "http://fr.wikipedia.org/wiki/Humanit%C3%A9s_num%C3%A9riques",
             "description": "une proposition de définition a été élaborée lors du THATCamp des 18 et 19 mai 2010 sous la forme d'un « Manifeste des digital humanities : ... ",
@@ -70,9 +75,10 @@
                 "x": -227.84295519248332,
                 "y": 91.1816115015538
             },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
             "created_by": "u-raphv"
         }, {
-            "id": "node-2012-08-22-9da6eef6c6391d05-000a",
+            "_id": "node-2012-08-22-9da6eef6c6391d05-000a",
             "title": "Wiki: デジタル・ヒューマニティーズ",
             "uri": "http://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%83%BB%E3%83%92%E3%83%A5%E3%83%BC%E3%83%9E%E3%83%8B%E3%83%86%E3%82%A3%E3%83%BC%E3%82%BA",
             "description": "...(digital humanities)は、コンピューティングと人文科学(humanities)諸分野と間の接点に関して調査、研究、教育、および�\n* Centre for Computing in the Humanities\n",
@@ -80,19 +86,20 @@
                 "x": -221.48701615763574,
                 "y": 242.80740052545508
             },
+            "image": "http://www.iri.centrepompidou.fr/dev/~veltr/hitachi-tests/img/wikipedia.png",
             "created_by": "u-raphv"
         }, {
-            "id": "node-2012-08-22-9da6eef6c6391d05-000b",
+            "_id": "node-2012-08-22-9da6eef6c6391d05-000b",
             "title": "Digital studies",
             "uri": "",
             "description": "",
             "position": {
-                "x": -55.85113246487888,
-                "y": 51.55194408866958
+                "x": -62.798895620242085,
+                "y": 32.09820725365255
             },
             "created_by": "u-raphv"
         }, {
-            "id": "node-2012-08-22-9da6eef6c6391d05-000c",
+            "_id": "node-2012-08-22-9da6eef6c6391d05-000c",
             "title": "Digital Humanities",
             "uri": "",
             "description": "",
@@ -102,7 +109,7 @@
             },
             "created_by": "u-raphv"
         }, {
-            "id": "node-2012-08-22-b778a9fc31296d6b-0008",
+            "_id": "node-2012-08-22-b778a9fc31296d6b-0008",
             "title": "Les rétentions (Tweet)",
             "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=a924b90c-46a1-4f0a-9e13-bcf69f7b5de0-127750274034049024",
             "description": "Tweet by Vincent Puig: #tfcem Les rétentions primaires (perception) s'aggrégent et forment des rétentions secondaires (mémoire), gravées sur rétentions tertiaires",
@@ -110,52 +117,57 @@
                 "x": 186.15055288633457,
                 "y": -184.66836073709257
             },
+            "image": "http://a1.twimg.com/profile_images/379424006/PortaitVP120Ko_normal.jpg",
             "created_by": "u-cybunk"
         }, {
-            "id": "node-2012-08-22-b778a9fc31296d6b-0009",
+            "_id": "node-2012-08-22-b778a9fc31296d6b-0009",
             "title": "L'origine de la géométrie (Tweet)",
             "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=5b34ae61-ffb1-4535-a479-007cb0ef57e8-127752118743474177",
             "description": "Tweet by Vincent Puig: #tfcem L'origine de la géométrie: l'écriture est processus long de transindividuation. Nos tweets quasi temps réel sont de même nature++",
             "position": {
-                "x": 109.36171738186508,
-                "y": -322.7405203211109
+                "x": 87.82365160023906,
+                "y": -280.3591650733953
             },
+            "image": "http://a1.twimg.com/profile_images/379424006/PortaitVP120Ko_normal.jpg",
             "created_by": "u-cybunk"
         }, {
-            "id": "node-2012-08-22-b778a9fc31296d6b-000a",
+            "_id": "node-2012-08-22-b778a9fc31296d6b-000a",
             "title": "Polemictweet : un outil Digital Studies (Tweet)",
             "uri": "http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/front/player/e328e188-ff2f-11e0-b9e1-00145ea49a02/#id=4b34e895-221b-467b-a0f2-8ff4ae87cae4-127758736415666177",
             "description": "Tweet by Vincent Puig:\n#tfcem Polemictweet : un outil Digital Studies pensé à l'IRI comme rétention tertiaire numérique avec les même armes que l'industrie",
             "position": {
-                "x": 174.8441677339912,
-                "y": 69.79052957489553
+                "x": 168.59118089416432,
+                "y": 57.97933221077804
             },
+            "image": "http://a1.twimg.com/profile_images/379424006/PortaitVP120Ko_normal.jpg",
             "created_by": "u-cybunk"
         }, {
-            "id": "node-2012-08-22-b778a9fc31296d6b-000f",
+            "_id": "node-2012-08-22-b778a9fc31296d6b-000f",
             "title": "Rétention (Définition AI)",
             "uri": "http://arsindustrialis.org/vocabulaire-ars-industrialis/r%C3%A9tention",
             "description": "Les rétentions sont ce qui est retenu ou recueilli par la conscience. Ce terme est emprunté à Husserl ; mais les rétentions tertiaires sont propres à la philosophie de Bernard Stiegler.\n\nLes rétentions sont des sélections : dans le flux de conscience que vous êtes vous ne pouvez pas tout retenir, ce que vous retenez est ce que vous êtes, mais ce que vous retenez dépend ce que vous avez déjà retenu.\n\nL’espèce humaine, étant originairement constituée par sa prothéticité, dispose d’une troisième mémoire, ni génétique, ni épigénétique : le milieu épiphylogénétique, comme ensemble des rétentions tertiaires formant des dispositifs rétentionels.",
             "position": {
-                "x": 240.98461723225768,
-                "y": -53.794373087027985
+                "x": 276.41820932461013,
+                "y": -62.82646518900019
             },
+            "image": "http://www.arsindustrialis.org/sites/default/files/userfiles/user3/Logovocabulairenoir.JPG",
             "created_by": "u-cybunk"
         }, {
-            "id": "node-2012-08-22-5b349e49066c1b01-0001",
+            "_id": "node-2012-08-22-5b349e49066c1b01-0001",
             "title": "Polemic Tweet",
             "uri": "http://polemictweet.com/",
             "description": "Polemic Tweet Web Site",
             "position": {
-                "x": 220.27339862010322,
-                "y": 209.95821750254615
+                "x": 220.96817493563964,
+                "y": 196.75746750735607
             },
+            "image": "http://www.polemictweet.com/images/ENMI_2010_logo.gif",
             "created_by": "u-cybunk"
         }
     ],
     "edges": [
         {
-            "id": "edge-2012-08-22-9da6eef6c6391d05-0005",
+            "_id": "edge-2012-08-22-9da6eef6c6391d05-0005",
             "title": "is about",
             "uri": "",
             "description": "",
@@ -163,7 +175,7 @@
             "to": "node-2012-08-22-9da6eef6c6391d05-0004",
             "created_by": "u-raphv"
         }, {
-            "id": "edge-2012-08-22-9da6eef6c6391d05-0006",
+            "_id": "edge-2012-08-22-9da6eef6c6391d05-0006",
             "title": "is about",
             "uri": "",
             "description": "",
@@ -171,7 +183,7 @@
             "to": "node-2012-08-22-9da6eef6c6391d05-0004",
             "created_by": "u-raphv"
         }, {
-            "id": "edge-2012-08-22-9da6eef6c6391d05-0007",
+            "_id": "edge-2012-08-22-9da6eef6c6391d05-0007",
             "title": "speech by",
             "uri": "",
             "description": "",
@@ -179,7 +191,7 @@
             "to": "node-2012-08-22-9da6eef6c6391d05-0004",
             "created_by": "u-raphv"
         }, {
-            "id": "edge-2012-08-22-b778a9fc31296d6b-0001",
+            "_id": "edge-2012-08-22-b778a9fc31296d6b-0001",
             "title": "is about",
             "uri": "",
             "description": "",
@@ -187,23 +199,7 @@
             "to": "node-2012-08-22-9da6eef6c6391d05-000b",
             "created_by": "u-raphv"
         }, {
-            "id": "edge-manual-001",
-            "title": "theme of",
-            "uri": "",
-            "description": "",
-            "from": "node-2012-08-22-9da6eef6c6391d05-000b",
-            "to": "node-2012-08-22-9da6eef6c6391d05-0001",
-            "created_by": "u-cybunk"
-        }, {
-            "id": "edge-manual-002",
-            "title": "example of",
-            "uri": "",
-            "description": "",
-            "from": "node-2012-08-22-b778a9fc31296d6b-000a",
-            "to": "node-2012-08-22-9da6eef6c6391d05-000b",
-            "created_by": "u-cybunk"
-        }, {
-            "id": "edge-2012-08-22-b778a9fc31296d6b-0002",
+            "_id": "edge-2012-08-22-b778a9fc31296d6b-0002",
             "title": "Are related to",
             "uri": "",
             "description": "",
@@ -211,7 +207,7 @@
             "to": "node-2012-08-22-9da6eef6c6391d05-000c",
             "created_by": "u-raphv"
         }, {
-            "id": "edge-2012-08-22-b778a9fc31296d6b-0003",
+            "_id": "edge-2012-08-22-b778a9fc31296d6b-0003",
             "title": "is about",
             "uri": "",
             "description": "",
@@ -219,7 +215,7 @@
             "to": "node-2012-08-22-9da6eef6c6391d05-000c",
             "created_by": "u-raphv"
         }, {
-            "id": "edge-2012-08-22-b778a9fc31296d6b-0004",
+            "_id": "edge-2012-08-22-b778a9fc31296d6b-0004",
             "title": "is about",
             "uri": "",
             "description": "",
@@ -227,7 +223,7 @@
             "to": "node-2012-08-22-9da6eef6c6391d05-000c",
             "created_by": "u-raphv"
         }, {
-            "id": "edge-2012-08-22-b778a9fc31296d6b-000b",
+            "_id": "edge-2012-08-22-b778a9fc31296d6b-000b",
             "title": "is about",
             "uri": "",
             "description": "",
@@ -235,7 +231,7 @@
             "to": "node-2012-08-22-9da6eef6c6391d05-000b",
             "created_by": "u-raphv"
         }, {
-            "id": "edge-2012-08-22-b778a9fc31296d6b-000c",
+            "_id": "edge-2012-08-22-b778a9fc31296d6b-000c",
             "title": "tweeted during",
             "uri": "",
             "description": "",
@@ -243,7 +239,7 @@
             "to": "node-2012-08-22-9da6eef6c6391d05-0001",
             "created_by": "u-cybunk"
         }, {
-            "id": "edge-2012-08-22-b778a9fc31296d6b-000d",
+            "_id": "edge-2012-08-22-b778a9fc31296d6b-000d",
             "title": "tweeted during",
             "uri": "",
             "description": "",
@@ -251,7 +247,7 @@
             "to": "node-2012-08-22-9da6eef6c6391d05-0001",
             "created_by": "u-cybunk"
         }, {
-            "id": "edge-2012-08-22-b778a9fc31296d6b-000e",
+            "_id": "edge-2012-08-22-b778a9fc31296d6b-000e",
             "title": "tweeted during",
             "uri": "",
             "description": "",
@@ -259,7 +255,7 @@
             "to": "node-2012-08-22-9da6eef6c6391d05-0001",
             "created_by": "u-cybunk"
         }, {
-            "id": "edge-2012-08-22-b778a9fc31296d6b-0011",
+            "_id": "edge-2012-08-22-b778a9fc31296d6b-0011",
             "title": "is about",
             "uri": "",
             "description": "",
@@ -267,7 +263,7 @@
             "to": "node-2012-08-22-b778a9fc31296d6b-000f",
             "created_by": "u-cybunk"
         }, {
-            "id": "edge-2012-08-22-b778a9fc31296d6b-0012",
+            "_id": "edge-2012-08-22-b778a9fc31296d6b-0012",
             "title": "is about",
             "uri": "",
             "description": "",
@@ -275,13 +271,29 @@
             "to": "node-2012-08-22-b778a9fc31296d6b-000f",
             "created_by": "u-cybunk"
         }, {
-            "id": "edge-2012-08-22-5b349e49066c1b01-0002",
+            "_id": "edge-2012-08-22-5b349e49066c1b01-0002",
             "title": "is about",
             "uri": "",
             "description": "",
             "from": "node-2012-08-22-b778a9fc31296d6b-000a",
             "to": "node-2012-08-22-5b349e49066c1b01-0001",
             "created_by": "u-cybunk"
+        }, {
+            "_id": "edge-2012-09-06-70cc0c2d5e1112d3-0001",
+            "title": "is an example of",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-08-22-b778a9fc31296d6b-000a",
+            "to": "node-2012-08-22-9da6eef6c6391d05-000b",
+            "created_by": "u-anonymous"
+        }, {
+            "_id": "edge-2012-09-06-70cc0c2d5e1112d3-0002",
+            "title": "tool used",
+            "uri": "",
+            "description": "",
+            "from": "node-2012-08-22-5b349e49066c1b01-0001",
+            "to": "node-2012-08-22-b778a9fc31296d6b-000a",
+            "created_by": "u-anonymous"
         }
     ]
 }
\ No newline at end of file
--- a/test/renkan.htm	Wed Sep 05 11:30:01 2012 +0200
+++ b/test/renkan.htm	Fri Sep 07 18:18:47 2012 +0200
@@ -17,7 +17,6 @@
             width: 600px;
             height: 500px;
             margin: 5px;
-            background: #fff;
         }
         </style>
     </head>
@@ -60,7 +59,7 @@
                 {
                     type: "Renkan",
                     container: "RenkanContainer",
-                    data: "json/renkan.json"
+                    data: [ "json/renkan.json", "json/renkan-2.json" ]
                 },
                 { type: "Mediafragment"}
             ]