--- a/client/js/paper-renderer.js	Thu Aug 30 18:11:25 2012 +0200
+++ b/client/js/paper-renderer.js	Mon Sep 03 17:21:35 2012 +0200
@@ -869,6 +869,51 @@
         _this.setScale( _this.scale * Math.SQRT2 );
         _this.redraw();
     });
+    this.$.find(".Rk-Users").mouseenter(function() {
+        _this.$.find(".Rk-UserList").slideDown();
+    }).mouseleave(function() {
+        _this.$.find(".Rk-UserList").slideUp();
+    });
+    this.$.find(".Rk-FullScreen-Button").click(function() {
+        var _isFull = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
+            _el = _this.renkan.$[0],
+            _requestMethods = ["requestFullScreen","mozRequestFullScreen","webkitRequestFullScreen"],
+            _cancelMethods = ["cancelFullScreen","mozCancelFullScreen","webkitCancelFullScreen"];
+        if (_isFull) {
+            for (var i = 0; i < _cancelMethods.length; i++) {
+                if (typeof document[_cancelMethods[i]] === "function") {
+                    document[_cancelMethods[i]]();
+                    break;
+                }
+            }
+        } else {
+            for (var i = 0; i < _requestMethods.length; i++) {
+                if (typeof _el[_requestMethods[i]] === "function") {
+                    _el[_requestMethods[i]]();
+                    break;
+                }
+            }
+        }
+    });
+    this.$.find(".Rk-AddNode-Button").click(function() {
+        var _coords = _this.toModelCoords(paper.view.center),
+            _data = {
+                id: Rkns.Utils.getUID('node'),
+                created_by: _this.renkan.current_user,
+                position: {
+                    x: _coords.x,
+                    y: _coords.y
+                }
+            };
+            _node = _this.renkan.project.addNode(_data);
+        _this.getRepresentationByModel(_node).openEditor();
+    });
+    this.$.find(".Rk-TopBar-Button").mouseover(function() {
+        Rkns.$(this).find(".Rk-TopBar-Tooltip").show();
+    }).mouseout(function() {
+        Rkns.$(this).find(".Rk-TopBar-Tooltip").hide();
+    });
+    
     paper.view.onResize = function(_event) {
         _this.offset = _this.offset.add(_event.delta.divide(2));
         _this.redraw();
@@ -880,7 +925,13 @@
     
     this.addRepresentations("Node", this.renkan.project.get("nodes"));
     this.addRepresentations("Edge", this.renkan.project.get("edges"));
+    this.renkan.project.get("users").each(function(_user) {
+        _this.addUser(_user);
+    })
     
+    this.renkan.project.on("add:users", function(_user) {
+        _this.addUser(_user);
+    });
     this.renkan.project.on("add:nodes", function(_node) {
         _this.addRepresentation("Node", _node);
         _thRedraw();
@@ -894,7 +945,12 @@
 }
 
 Rkns.Renderer.Scene.prototype.template = Rkns._.template(
-    '<canvas class="Rk-Canvas" resize></canvas><div class="Rk-Editor">'
+    '<div class="Rk-TopBar"><h3 class="Rk-PadTitle">Untitled Project</h3>'
+    + '<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>'
+    + '<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>'
+    + '<canvas class="Rk-Canvas" resize></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>'
 );
@@ -974,6 +1030,26 @@
     });
 }
 
+Rkns.Renderer.Scene.prototype.userTemplate = Rkns._.template(
+    '<li class="Rk-User"><span class="Rk-UserColor" style="background:<%=background%>;"></span><%=name%></li>'
+);
+
+Rkns.Renderer.Scene.prototype.addUser = function(_user) {
+    if (_user.get("_id") === this.renkan.current_user) {
+        this.$.find(".Rk-CurrentUser-Name").text(_user.get("title"));
+        this.$.find(".Rk-CurrentUser-Color").css("background", _user.get("color"));
+    } else {
+        this.$.find(".Rk-UserList").append(
+            Rkns.$(
+                this.userTemplate({
+                    name: _user.get("title"),
+                    background: _user.get("color")
+                })
+            )
+        );
+    }
+}
+
 Rkns.Renderer.Scene.prototype.removeRepresentation = function(_representation) {
     _representation.destroy();
     this.representations = Rkns._(this.representations).reject(