--- a/client/js/paper-renderer.js	Thu Feb 14 12:25:58 2013 +0100
+++ b/client/js/paper-renderer.js	Thu Feb 14 17:39:52 2013 +0100
@@ -218,6 +218,12 @@
     Rkns.Renderer._BaseRepresentation.prototype[_func].apply(this, Array.prototype.slice.call(arguments, 1));
 }
 
+Rkns.Renderer._BaseRepresentation.prototype.moveTo = function() {}
+
+Rkns.Renderer._BaseRepresentation.prototype.show = function() {}
+
+Rkns.Renderer._BaseRepresentation.prototype.hide = function() {}
+
 Rkns.Renderer._BaseRepresentation.prototype.select = function() {}
 
 Rkns.Renderer._BaseRepresentation.prototype.unselect = function() {}
@@ -253,12 +259,19 @@
         fontSize: Rkns.Renderer._NODE_FONT_SIZE,
         fillColor: 'black'
     };
-    this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, null);
-    this.edit_button.node_representation = this;
-    this.remove_button = new Rkns.Renderer.NodeRemoveButton(this.renderer, null);
-    this.remove_button.node_representation = this;
-    this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, null);
-    this.link_button.node_representation = this;
+    if (this.renderer.renkan.read_only) {
+        this.edit_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
+        this.remove_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
+        this.link_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
+    } else {
+        this.edit_button = new Rkns.Renderer.NodeEditButton(this.renderer, null);
+        this.edit_button.node_representation = this;
+        this.remove_button = new Rkns.Renderer.NodeRemoveButton(this.renderer, null);
+        this.remove_button.node_representation = this;
+        this.link_button = new Rkns.Renderer.NodeLinkButton(this.renderer, null);
+        this.link_button.node_representation = this;
+    }
+    
     this.title.paragraphStyle.justification = 'center';
 }
 
@@ -342,6 +355,9 @@
             _el.addClass("selected");
         }
     });
+    if (this.renderer.renkan.read_only) {
+        this.openEditor();
+    }
 }
 
 Rkns.Renderer.Node.prototype.unselect = function(_newTarget) {
@@ -380,11 +396,13 @@
 }
 
 Rkns.Renderer.Node.prototype.mouseup = function(_event) {
-    if (this.renderer.is_dragging) {
-        this.saveCoords();
-    }
-    else {
-        this.openEditor();
+    if (!this.renderer.renkan.read_only) {
+        if (this.renderer.is_dragging) {
+            this.saveCoords();
+        }
+        else {
+            this.openEditor();
+        }
     }
     this.renderer.click_target = null;
     this.renderer.is_dragging = false;
@@ -427,10 +445,15 @@
     this.text.paragraphStyle.justification = 'center';
     this.text_angle = 0;
     this.arrow_angle = 0;
-    this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, null);
-    this.edit_button.edge_representation = this;
-    this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this.renderer, null);
-    this.remove_button.edge_representation = this;
+    if (this.renderer.renkan.read_only) {
+        this.edit_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
+        this.remove_button = new Rkns.Renderer._BaseRepresentation(this.renderer, null);
+    } else {
+        this.edit_button = new Rkns.Renderer.EdgeEditButton(this.renderer, null);
+        this.edit_button.edge_representation = this;
+        this.remove_button = new Rkns.Renderer.EdgeRemoveButton(this.renderer, null);
+        this.remove_button.edge_representation = this;
+    }
 }
 
 Rkns.Renderer.Edge.prototype.redraw = function() {
@@ -482,6 +505,9 @@
     this.line.strokeWidth = 4;
     this.edit_button.show();
     this.remove_button.show();
+    if (this.renderer.renkan.read_only) {
+        this.openEditor();
+    }
 }
 
 Rkns.Renderer.Edge.prototype.unselect = function(_newTarget) {
@@ -493,11 +519,13 @@
 }
 
 Rkns.Renderer.Edge.prototype.mouseup = function(_event) {
-    if (this.renderer.is_dragging) {
-        this.from_representation.saveCoords();
-        this.to_representation.saveCoords();
-    } else {
-        this.openEditor();
+    if (!this.renderer.renkan.read_only) {
+        if (this.renderer.is_dragging) {
+            this.from_representation.saveCoords();
+            this.to_representation.saveCoords();
+        } else {
+            this.openEditor();
+        }
     }
     this.renderer.click_target = null;
     this.renderer.is_dragging = false;
@@ -627,11 +655,19 @@
     + '<p><label><%=l10n.created_by%></label> <span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>'
 );
 
+Rkns.Renderer.NodeEditor.prototype.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>'
+    + '<p><%-node.description%></p>'
+    + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=node.created_by_color%>;"></span><%=node.created_by_title%></p>'
+);
+
 Rkns.Renderer.NodeEditor.prototype.draw = function() {
     var _model = this.node_representation.model,
-        _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER;
+        _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,
+        _template = (this.renderer.renkan.read_only ? this.readOnlyTemplate : this.template);
     this.editor_$
-        .html(this.template({
+        .html(_template({
             node: {
                 title: _model.get("title"),
                 uri: _model.get("uri"),
@@ -649,34 +685,36 @@
         _this.renderer.removeRepresentation(_this);
         paper.view.draw();
     });
-    this.editor_$.find("input, textarea").bind("keyup change", function() {
-        var _uri = _this.editor_$.find(".Rk-Edit-URI").val(),
-            _image = _this.editor_$.find(".Rk-Edit-Image").val();
-        _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image);
-        _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri);
-        var _data = {
-            title: _this.editor_$.find(".Rk-Edit-Title").val(),
-            description: _this.editor_$.find(".Rk-Edit-Description").val(),
-            uri: _uri,
-            image: _image
-        }
-        _model.set(_data);
-        _this.redraw();
-    });
+    if (!this.renderer.renkan.read_only) {
+        this.editor_$.find("input, textarea").bind("keyup change", function() {
+            var _uri = _this.editor_$.find(".Rk-Edit-URI").val(),
+                _image = _this.editor_$.find(".Rk-Edit-Image").val();
+            _this.editor_$.find(".Rk-Edit-ImgPreview").attr("src", _image);
+            _this.editor_$.find(".Rk-Edit-Goto").attr("href",_uri);
+            var _data = {
+                title: _this.editor_$.find(".Rk-Edit-Title").val(),
+                description: _this.editor_$.find(".Rk-Edit-Description").val(),
+                uri: _uri,
+                image: _image
+            }
+            _model.set(_data);
+            _this.redraw();
+        });
+        this.editor_$.find(".Rk-Edit-Title")[0].focus();
+        this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
+            function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
+            function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
+        );
+        this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
+            function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
+            function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")) }
+        ).click(function() {
+            _model.set("color", $(this).attr("data-color"));
+            _this.redraw();
+        });
+    }
     this.editor_$.find("img").load(function() {
         _this.redraw();
-    })
-    this.editor_$.find(".Rk-Edit-Title")[0].focus();
-    this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
-        function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
-        function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
-    );
-    this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
-        function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
-        function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")) }
-    ).click(function() {
-        _model.set("color", $(this).attr("data-color"));
-        _this.redraw();
     });
 }
 
@@ -726,13 +764,23 @@
     + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by_color%>;"></span><%=edge.created_by_title%></p>'
 );
 
+Rkns.Renderer.EdgeEditor.prototype.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>'
+    + '<p><%-edge.description%></p>'
+    + '<p><label><%=l10n.edit_from%></label><span class="Rk-UserColor" style="background:<%=edge.from_color%>;"></span><%=edge.from_title%></p>'
+    + '<p><label><%=l10n.edit_to%></label><span class="Rk-UserColor" style="background:<%=edge.to_color%>;"></span><%=edge.to_title%></p>'
+    + '<p><label><%=l10n.created_by%> </label><span class="Rk-UserColor" style="background:<%=edge.created_by_color%>;"></span><%=edge.created_by_title%></p>'
+);
+
 Rkns.Renderer.EdgeEditor.prototype.draw = function() {
     var _model = this.edge_representation.model,
         _from_model = _model.get("from"),
         _to_model = _model.get("to"),
-        _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER;
+        _created_by = _model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER,
+        _template = (this.renderer.renkan.read_only ? this.readOnlyTemplate : this.template);
     this.editor_$
-        .html(this.template({
+        .html(_template({
             edge: {
                 title: _model.get("title"),
                 uri: _model.get("uri"),
@@ -753,27 +801,30 @@
         _this.renderer.removeRepresentation(_this);
         paper.view.draw();
     });
-    this.editor_$.find("input, textarea").bind("keyup change", function() {
-        _this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val());
-        var _data = {
-            title: _this.editor_$.find(".Rk-Edit-Title").val(),
-            uri: _this.editor_$.find(".Rk-Edit-URI").val()
-        }
-        _model.set(_data);
-        _this.redraw();
-    });
-    this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
-        function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
-        function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
-    );
-    this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
-        function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
-        function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")); }
-    ).click(function() {
-        _model.set("color", $(this).attr("data-color"));
-        _this.redraw();
-    });
+    if (!this.renderer.renkan.read_only) {
+        this.editor_$.find("input, textarea").bind("keyup change", function() {
+            _this.editor_$.find(".Rk-Edit-Goto").attr("href",_this.editor_$.find(".Rk-Edit-URI").val());
+            var _data = {
+                title: _this.editor_$.find(".Rk-Edit-Title").val(),
+                uri: _this.editor_$.find(".Rk-Edit-URI").val()
+            }
+            _model.set(_data);
+            _this.redraw();
+        });
+        this.editor_$.find(".Rk-Edit-ColorPicker-Wrapper").hover(
+            function() { _this.editor_$.find(".Rk-Edit-ColorPicker").show(); },
+            function() { _this.editor_$.find(".Rk-Edit-ColorPicker").hide(); }
+        );
+        this.editor_$.find(".Rk-Edit-ColorPicker li").hover(
+            function() { _this.editor_$.find(".Rk-Edit-Color").css("background", $(this).attr("data-color")); },
+            function() { _this.editor_$.find(".Rk-Edit-Color").css("background", _model.get("color") || (_model.get("created_by") || Rkns.Renderer._USER_PLACEHOLDER).get("color")); }
+        ).click(function() {
+            _model.set("color", $(this).attr("data-color"));
+            _this.redraw();
+        });
+    }
 }
+
 Rkns.Renderer.EdgeEditor.prototype.redraw = function() {
     var _coords = this.edge_representation.paper_coords;
     Rkns.Renderer.Utils.drawEditBox(_coords, this.editor_block, 250, 5, this.editor_$);
@@ -1143,18 +1194,31 @@
         _this.addRepresentation("Edge", _edge);
         _thRedraw();
     });
+    this.renkan.project.on("change:title", function(_model, _title) {
+        var el = $(".Rk-PadTitle");
+        if (el.is("input")) {
+            if (el.val() !== _title) {
+                el.val(_title);
+            }
+        } else {
+            el.text(_title);
+        }
+    });
     
     this.redraw();
 }
 
 Rkns.Renderer.Scene.prototype.template = Rkns._.template(
-    '<div class="Rk-TopBar"><input type="text" class="Rk-PadTitle" value="<%- project.get("title") || "" %>" placeholder="<%=l10n.untitled_project%>" />'
+    '<div class="Rk-TopBar"><% if (read_only) { %><h2 class="Rk-PadTitle"><%- project.get("title") || l10n.untitled_project%></h2>'
+    + '<% } else { %><input type="text" class="Rk-PadTitle" value="<%- project.get("title") || "" %>" placeholder="<%=l10n.untitled_project%>" /><% } %>'
     + '<div class="Rk-Users"><div class="Rk-CurrentUser"><span class="Rk-CurrentUser-Color"></span><span class="Rk-CurrentUser-Name">&lt;unknown user&gt;</span></div><ul class="Rk-UserList"></ul></div>'
     + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-FullScreen-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.full_screen%></div></div></div>'
+    + '<% if (!read_only) { %>'
     + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddNode-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.add_node%></div></div></div>'
     + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-AddEdge-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.add_edge%></div></div></div>'
     + '<div class="Rk-TopBar-Separator"></div><div class="Rk-TopBar-Button Rk-Save-Button"><div class="Rk-TopBar-Tooltip"><div class="Rk-TopBar-Tooltip-Tip"></div><div class="Rk-TopBar-Tooltip-Contents"><%=l10n.save_project%></div></div></div>'
     + '<div class="Rk-TopBar-Separator"></div></div>'
+    + '<% } %>'
     + '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor"><div class="Rk-Notifications"></div>'
     + '<div class="Rk-ZoomButtons"><div class="Rk-ZoomIn" title="<%=l10n.zoom_in%>"></div><div class="Rk-ZoomOut" title="<%=l10n.zoom_out%>"></div></div>'
     + '</div>'
@@ -1331,7 +1395,7 @@
 Rkns.Renderer.Scene.prototype.onMouseMove = function(_event) {
     var _hitResult = paper.project.hitTest(_event.point);
     if (this.is_dragging) {
-        if (this.click_target && typeof this.click_target.paperShift === "function") {
+        if (this.click_target && typeof this.click_target.paperShift === "function" && !this.renkan.read_only) {
             this.click_target.paperShift(_event.delta);
         } else {
             this.offset = this.offset.add(_event.delta);
@@ -1345,6 +1409,7 @@
 
 Rkns.Renderer.Scene.prototype.onMouseDown = function(_event) {
     if (!this.click_target || this.click_target.type !== "temp-edge") {
+        this.removeRepresentationsOfType("editor");
         this.is_dragging = false;
         var _hitResult = paper.project.hitTest(_event.point);
         if (_hitResult && typeof _hitResult.item.__representation !== "undefined") {
@@ -1428,6 +1493,9 @@
 }
 
 Rkns.Renderer.Scene.prototype.onDoubleClick = function(_event) {
+    if (this.renkan.read_only) {
+        return;
+    }
     var _off = this.canvas_$.offset(),
         _point = new paper.Point([
             _event.pageX - _off.left,
@@ -1452,7 +1520,7 @@
 
 Rkns.Renderer.Scene.prototype.onMouseEnter = function(_event) {
     var _newEl = this.renkan.selected_bin_item;
-    if (_newEl) {
+    if (_newEl && !this.renkan.read_only) {
         var _off = this.canvas_$.offset(),
             _point = new paper.Point([
                 _event.pageX - _off.left,