Added some sparkle in the form of MochaUI.

Also updated the websocket server to send utf8 properly.
Resizing of the browser should be handled reasonably well :)

app.js

@@ -1,5 +1,5 @@
 var sys= require('sys');
 
-require('./lib/express_server').startServer(__dirname, 8080); // Pull in and start the express http server
+require('./lib/express_server').startServer(__dirname, 8080, null); // Pull in and start the express http server
 require('./lib/ws_server'); // Pull in and start the web socket server
 sys.puts( 'Server Started' )

lib/ws.js

@@ -111,7 +111,9 @@ exports.createServer = function (websocketListener) {
 
     emitter.write = function (data) {
       try {
-        socket.write('\u0000' + data + '\uffff','binary');
+        socket.write('\u0000', 'binary')
+        socket.write( data, 'utf8')
+        socket.write( '\uffff','binary');
       } catch(e) { 
         // Socket not open for writing, 
         // should get "close" event just before.

lib/ws_server.js

@@ -100,6 +100,11 @@ ws.createServer(function (websocket) {
       var disconnect_reason = reason || 'Unknown Reason';
       delete control_messages;
       this.close();
+    }
+
+    /** Tells the client to redraw everything! */
+    websocket.refresh= function() {
+      websocket.operationsSeen= 0;  
     }        
 
      /**
@@ -147,7 +152,12 @@ ws.createServer(function (websocket) {
 
      try {
        packet = JSON.parse(data);
-       operations[operations.length] = packet;
+       if( packet[0] == Protocol.REFRESH ) {
+        websocket.refresh(); 
+       } 
+       else {
+         operations[operations.length] = packet;
+       }
      } catch(e) {
        sys.debug('Malformed message recieved');
        sys.debug(sys.inspect(data));

public/javascripts/clientapp.js

@@ -1,4 +1,41 @@
-window.addEvent('domready', function() {
+function domReady() { 
+  var canvas, context;
+  var canvaso, contexto;
+  var canvasr, contextr;
+
+	MochaUI.Desktop = new MochaUI.Desktop();
+	MochaUI.Dock = new MochaUI.Dock();
+
+	new MochaUI.Column({
+	  id: 'mainColumn',
+		placement: 'main',	
+		width: null,
+		resizeLimit: [100, 300]
+	});
+
+	var column=new MochaUI.Column({
+		id: 'sideColumn2',
+		placement: 'right',	
+		width: 220,		
+		resizeLimit: [195, 300]
+	});
+
+	var panel= new MochaUI.Panel({
+		id: 'doodle-panel',
+		title: 'Doodle',
+		contentURL: 'pages/file-view.html',
+		column: 'mainColumn',
+		content: document.getElementById('container'),
+		padding: { top: 0, right: 0, bottom: 0, left: 0 }  
+	});
+
+    MochaUI.NewWindowsFromHTML = new MochaUI.NewWindowsFromHTML();
+
+  	MochaUI.Modal = new MochaUI.Modal();
+  	MochaUI.Desktop.desktop.setStyles({
+  		'background': '#fff',
+  		'visibility': 'visible'
+  	});
   var clientConfig = {
     id: 0,
     ready: false,
@@ -13,7 +50,9 @@ window.addEvent('domready', function() {
       return -1; 
     }
   }
-  var dispatcher = new EventsDispatcher("ws://localhost:8081");
+  var ws_address= window.location.host;
+  ws_address= "ws://"+ ws_address.replace(/:8080/, ":8081");
+  var dispatcher = new EventsDispatcher( ws_address );
 
   // bind to server events
   dispatcher
@@ -62,9 +101,7 @@ window.addEvent('domready', function() {
 
   /* Borrowing heavily from: http://dev.opera.com/articles/view/html5-canvas-painting/ */
 
-    var canvas, context;
-    var canvaso, contexto;
-    var canvasr, contextr;
+
 
      // The active tool instance.
     var tool = false;
@@ -302,4 +339,35 @@ window.addEvent('domready', function() {
       }
     }
     init();
-});
+
+    var resizeFunction= function(noRefresh) {
+      var newWidth= panel.panelEl.getSize().x - 1;
+      var newHeight= panel.panelEl.getSize().y - 1;
+      if( newWidth > canvas.width ) {
+        canvaso.width= newWidth;
+        canvasr.width= newWidth;
+         canvas.width= newWidth;
+      }
+  	  if( newHeight > canvas.height ) {
+  	    canvaso.height= newHeight;
+  	    canvasr.height= newHeight;
+  	     canvas.height= newHeight;
+	    }
+	    if( noRefresh !== false )  {
+	      dispatcher.trigger( Protocol.REFRESH );
+	    }
+    }
+    resizeFunction(false); // Call initially.
+  	window.addEvent( 'resize',   resizeFunction );
+  	column.addEvent( 'resize',   resizeFunction );
+  	column.addEvent( 'collapse', resizeFunction );
+}
+(function(){
+  if(document.body && document.body.lastChild) {
+    domReady();
+  } 
+  else {
+    return setTimeout(arguments.callee,0);
+  }
+})();
+

public/stylesheets/index.css

@@ -1,4 +1,4 @@
 #container { position: relative; }
-#imageView { border: 1px solid #000; }
-#imageTemp { position: absolute; top: 1px; left: 1px; } 
-#imageRemote { position: absolute; top: 1px; left: 1px; }
+/*#imageView { border: 1px solid #000; }*/
+#imageTemp { position: absolute; top: 0px; left: 0px; } 
+#imageRemote { position: absolute; top: 0px; left: 0px; }

shared/socket_protocol.js

@@ -6,6 +6,7 @@
   /* Control packet operations */
   CLIENT_ID: 3,  // Sent from the server, data will be the id the client should take,  
   WIPE: 4,        // Sent from the server, will clear the local slate,
+  REFRESH: 5,     // Client requested a full refresh.
 
   /* Operation packet operations */
   NEW_PRIMITIVE: 100

views/board.html.haml

@@ -11,15 +11,17 @@
     %link{ rel:"stylesheet",href:"public/stylesheets/ui.css"}
     %link{ rel:"stylesheet",href:"public/stylesheets/content.css"}
   %body
-    %p
-      %label
-        Drawing tool:    
-        %select{ id:"dtool" }
-          %option{ value:"line" } Line  
-          %option{ value:"rect" } Rectangle  
-          %option{ value:"pencil" } Pencil
+    #desktop
+      #pageWrapper
+        #toolbox.mocha{ style: "width:120px;height:255px;top:50px;left:350px"}
+          %h3.mochaTitle Toolbox
+          %select{ id:"dtool" }
+            %option{ value:"line" } Line  
+            %option{ value:"rect" } Rectangle  
+            %option{ value:"pencil" } Pencil
+      #desktopFooter
     #container
-      %canvas#imageView{ width:400, height: 300}
+      %canvas#imageView
         %p
           Unfortunately, your browser is currently unsupported by our web application.  We are sorry for the inconvenience. Please use one of the supported browsers listed below, or draw the image you want using an offline tool.
         %p
@@ -35,10 +37,4 @@
           ,
           %a{ href:"http://www.konqueror.org" }
             Konqueror
-          .
-    %p
-      Please be aware that the board is auto-wiping every 5 minutes.
-    %p
-      Please also note that any diagrams currently displayed do not represent my views or opinions.
-    %p
-      And I might as well apologise now if someone has *inevitably* drawn some genitalia *sigh*
+          .