Merge remote-tracking branch 'upstream/master'

.gitignore

@@ -3,3 +3,4 @@ rsync.sh
 *.swp
 *.log
 .monitor
+node_modules/

README.markdown

@@ -40,22 +40,14 @@ how to install and run on your own computer (linux/osx)
 -------------------------------------------------------
 
 - install redis v2.2.2
-- install node.js >= 0.4.1
+- install node.js >= 0.4.7
 - install npm 
-- install these npm packages:
-	- async
-	- express
-	- jade
-	- redis-client
-	- redis
-	- sanitizer
-	- socket.io
-	- simplesets
-	- connect-redis
-	- (and perhaps more which you will notice when you try to start it)
-- now start redis ($ redis-server)
-- now start ($ node server.js 80) where "80" is the port you want it to run on. 
-
+- cd to the scrumblr directory; you should see server.js and config.js and other files.
+- run `npm install`
+- If you get errors about express, you may need to change in package.json to have "express":  ">=2.4.x", 
+- run redis `redis-server`
+- run scrumblr `node server.js 80` where "80" is the port you have opened in your firewall and want scrumblr to run on. 
+- open a browser to `http://localhost:80` where "80" is the port you chose in the previous step.
 license
 -------
 

client/css/smallcards.css

@@ -46,11 +46,34 @@
 	display: block;
 	width: 79px; 
 	height: 45px;
-	margin: 3px 10px 0px 19px;
+	margin: 1px 10px 0px 19px;
 	
 	font-family: "Arial Rounded MT Bold" , arial, serif;
 	font-size: 10px;
 	letter-spacing: 0px;
+	line-height: 9px;	
+	
+	xtext-shadow: 0px 0px 1px #444;
+	
+	opacity: 1;
+	
+	color: #333;
+	text-align: center;
+	padding-top: 8px;
+}
+
+
+.xcontent { 
+	overflow: hidden;
+	display: block;
+	width: 79px; 
+	height: 45px;
+	margin: 0px 10px 0px 19px;
+	
+	font-family: "Arial Rounded MT Bold", "Arial" , arial, serif;
+	xfont-size: 10px;
+	letter-spacing: 0px;
+	line-height: 8px;	
 
 	xtext-shadow: 0px 0px 1px #444;
 	

client/css/style.css

@@ -12,6 +12,17 @@ body {
 	
 	xheight: 1400px;
 	xwidth: 2000px;
+	
+	
+	
+	user-select: none;
+	-o-user-select:none;
+	-moz-user-select: none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+	
+	background-image: url('/css/bg/concrete_wall_2_2.png');
+	
 }
 
 #board {
@@ -46,8 +57,8 @@ body {
 	xmargin-left: auto;
 	xmargin-right: auto;
 	
-	-webkit-box-shadow: 1px 1px 2px #aaa;
-	-moz-box-shadow: 1px 1px 2px #aaa;
+	-webkit-box-shadow: 1px 3px 2px #aaa;
+	-moz-box-shadow: 1px 3px 2px #999;
 	
 	x-webkit-transform:rotate(0.3deg); /*"is that a little off-level? i feel like it is off-level"*/
 }
@@ -57,8 +68,8 @@ body {
 	height: 100%;
 	position: absolute;
 	display: inline;
-	opacity: .08;
-	background-image: url('nexum_whiteboard.jpg');
+	opacity: 0.035;
+	background-image: url('scribbles2.png');
 }
 
 
@@ -81,7 +92,7 @@ width: 16px; height: 16px;
 }
 
 .card-edit-form, .card-edit-form input, .card-edit-form textarea {
-	border:none;
+	border: none;
 	font-size:inherit;
 	font-weight:inherit;
 	background-color:inherit;
@@ -95,6 +106,8 @@ width: 16px; height: 16px;
 	overflow: hidden;
 	resize: none;
 	width: 100%;
+	color: #330066;
+	color: #666;
 	
 }
 
@@ -466,6 +479,17 @@ input:hover {
 	color: #333;
 }
 
+#marker {
+	position: absolute; bottom: 0; right: 200px;
+	z-index: 1;
+}
+
+#eraser {
+	position: absolute; bottom: 0; right: 70px;
+	z-index: 1;
+}
+
+
 
 
 

client/lib/jquery-ui/development-bundle/ui/jquery-ui-1.8.9.custom.js

@@ -656,7 +656,8 @@ $.widget("ui.mouse", {
 			.bind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
 			.bind('mouseup.'+this.widgetName, this._mouseUpDelegate);
 
-		event.preventDefault();
+		//ali: fixing this http://bugs.jqueryui.com/ticket/4261
+		//event.preventDefault();
 		event.originalEvent.mouseHandled = true;
 		return true;
 	},

client/lib/jquery-ui/development-bundle/ui/jquery.ui.mouse.js

@@ -86,7 +86,7 @@ $.widget("ui.mouse", {
 			.bind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
 			.bind('mouseup.'+this.widgetName, this._mouseUpDelegate);
 
-		event.preventDefault();
+		//event.preventDefault();
 		event.originalEvent.mouseHandled = true;
 		return true;
 	},

client/lib/jquery.jeditable.js

@@ -285,16 +285,16 @@
                 } else if ('submit' == settings.onblur) {
                     input.blur(function(e) {
                         /* prevent double submit if submit was clicked */
-                        //t = setTimeout(function() {
+                        t = setTimeout(function() {
                             form.submit();
-                        //}, 200);
+                        }, 200);
                     });
 						//ali here: i hacked this in so that submit happens on mouseout too
-						input.mouseout(function(e) {
+						input.blur(function(e) {
                         /* prevent double submit if submit was clicked */
-                        //t = setTimeout(function() {
+                        t = setTimeout(function() {
                             form.submit();
-                        //}, 200);
+                        }, 200);
                     });
                 } else if ($.isFunction(settings.onblur)) {
                     input.blur(function(e) {

client/script.js

@@ -5,9 +5,7 @@ var currentTheme = "bigcards";
 var boardInitialized = false;
 
 
-var socket = new io.Socket(  );
-socket.connect();
-
+var socket = io.connect();
 
 //an action has happened, send it to the
 //server
@@ -20,7 +18,7 @@ function sendAction(a, d)
 		data: d
 	}
 	
-	socket.send ( message );
+	socket.json.send ( message );
 }
 
 socket.on('connect', function(){ 
@@ -89,10 +87,7 @@ function getMessage( m )
 			break;
 			
 		case 'moveCard':
-			$("#" + data.id).animate({
-				left: data.position.left+"px",
-				top: data.position.top+"px" 
-			}, 500);
+                        moveCard($("#" + data.id), data.position);
 			break;
 			
 		case 'initCards':
@@ -101,7 +96,7 @@ function getMessage( m )
 		
 		case 'createCard':
 			//console.log(data);
-		   drawNewCard(data.id, data.text, data.x, data.y, data.rot, data.colour, null);
+                        drawNewCard(data.id, data.text, data.x, data.y, data.rot, data.colour, null);
 			break;
 			
 		case 'deleteCard':
@@ -170,9 +165,22 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 	<img class="card-image" src="/images/' + colour + '-card.png">\
 	<div id="content:' + id + '" class="content stickertarget droppable">' + text + '</div>\
 	</div>';
-	$(h).appendTo('#board');
 
-	$( ".card" ).draggable(
+        var card = $(h);
+	card.appendTo('#board');
+	
+	//@TODO
+	//Draggable has a bug which prevents blur event
+	//http://bugs.jqueryui.com/ticket/4261
+	//So we have to blur all the cards and editable areas when
+	//we click on a card
+	//The following doesn't work so we will do the bug
+	//fix recommended in the above bug report
+	// card.click( function() { 
+	// 	$(this).focus();
+	// } );
+	
+	card.draggable(
 		{ 
 			snap: false,
 			snapTolerance: 5,
@@ -182,7 +190,8 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 	);
 	
 	//After a drag:
-	$( "#" + id ).bind( "dragstop", function(event, ui) {
+	card.bind( "dragstop", function(event, ui) {
+
 		var data = {
 			id: this.id,
 			position: ui.position,
@@ -192,7 +201,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 		sendAction('moveCard', data);
 	});
 	
-	$( ".droppable" ).droppable(
+	card.children(".droppable").droppable(
 		{ 
 			accept: '.sticker',
 			drop: function( event, ui ) {
@@ -202,7 +211,6 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 							addSticker( cardId, stickerId );
 							
 							var data = { cardId: cardId, stickerId: stickerId };
-							
 							sendAction('addSticker', data);
 						}
 	 	}
@@ -211,12 +219,13 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 	var speed = Math.floor(Math.random() * 1000);
 	if (typeof(animationspeed) != 'undefined') speed = animationspeed;
 
-	$("#" + id).animate({
+	
+	card.animate({
 		left: x + "px",
 		top: y + "px" 
 	}, speed);
 	
-	$("#" + id).hover( 
+	card.hover( 
 		function(){ 
 			$(this).addClass('hover');
 			$(this).children('.card-icon').fadeIn(10);
@@ -227,7 +236,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 		}
 	 );
 	
-	$("#" + id).children('.card-icon').hover(
+	card.children('.card-icon').hover(
 		function(){
 			$(this).addClass('card-icon-hover');
 		},
@@ -236,7 +245,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 		}
 	);
 	
-	$("#" + id).children('.delete-card-icon').click(
+	card.children('.delete-card-icon').click(
 		function(){
 			$("#" + id).remove();
 			//notify server of delete
@@ -244,7 +253,7 @@ function drawNewCard(id, text, x, y, rot, colour, sticker, animationspeed)
 		}
 	);
 	
-	$("#" + id).children('.content').editable( "/edit-card/" + id,
+	card.children('.content').editable( "/edit-card/" + id,
 		{
 			style   : 'inherit',
 			cssclass   : 'card-edit-form',
@@ -274,6 +283,13 @@ function onCardChange( text, result )
 	
 }
 
+function moveCard(card, position) {
+        card.animate({
+                left: position.left+"px",
+                top: position.top+"px" 
+        }, 500);
+}
+
 function addSticker ( cardId , stickerId ) 
 {
 	
@@ -593,6 +609,66 @@ function resizeBoard (size) {
 //////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////
 
+function calcCardOffset() {
+        var offsets = {};
+        $(".card").each(function() {
+                var card = $(this);
+                $(".col").each(function(i) {
+                        var col = $(this);
+                        if(col.offset().left + col.outerWidth() > card.offset().left + card.outerWidth() || i === $(".col").size() - 1) {
+                                offsets[card.attr('id')] = {
+                                        col: col,
+                                        x: ( (card.offset().left - col.offset().left) / col.outerWidth() )
+                                } 
+                                return false;
+                        }
+                });
+        });
+        return offsets;
+}
+
+
+//moves cards with a resize of the Board
+//doSync is false if you don't want to synchronize
+//with all the other users who are in this room
+function adjustCard(offsets, doSync) {
+        $(".card").each(function() {
+				var card = $(this);
+				var offset = offsets[this.id];
+				if(offset) {
+						var data = {
+								id: this.id,
+								position: {
+									left: offset.col.position().left + (offset.x * offset.col.outerWidth()),
+									top: parseInt(card.css('top').slice(0,-2))
+								},
+								oldposition: {
+									left: parseInt(card.css('left').slice(0,-2)),
+									top: parseInt(card.css('top').slice(0,-2))
+								}
+						}; //use .css() instead of .position() because css' rotate
+						//console.log(data);
+						if (!doSync)
+						{
+							card.css('left',data.position.left);
+							card.css('top',data.position.top);
+						}
+						else
+						{
+							//note that in this case, data.oldposition isn't accurate since
+							//many moves have happened since the last sync
+							//but that's okay becuase oldPosition isn't used right now
+							moveCard(card, data.position);
+							sendAction('moveCard', data);
+						}
+
+				}
+		});
+}
+
+//////////////////////////////////////////////////////////
+//////////////////////////////////////////////////////////
+
 $(function() {
 	
 	if (boardInitialized == false)
@@ -729,11 +805,42 @@ $( ".board-outline" ).resizable( {
 	minHeight: 400 ,
 	maxWidth: 3200,
 	maxHeight: 1800,
-	stop: function(event, ui) { 
-		boardResizeHappened(event, ui);
-	}
 } );
 
+//A new scope for precalculating
+(function() {
+        var offsets;
+        
+        $(".board-outline").bind("resizestart", function() {
+                offsets = calcCardOffset();
+        });
+		$(".board-outline").bind("resize", function(event, ui) {
+                adjustCard(offsets, false);
+        });
+        $(".board-outline").bind("resizestop", function(event, ui) {
+                boardResizeHappened(event, ui);
+                adjustCard(offsets, true);
+        });
+})();
+
+
+
+$('#marker').draggable(
+	{
+		axis: 'x',
+		containment: 'parent'
+	}
+);
+
+$('#eraser').draggable(
+	{
+		axis: 'x',
+		containment: 'parent'
+	}
+);
+
+
+
 
 
 });

lib/data/mongodb.js

@@ -150,6 +150,25 @@ db.prototype = {
 			{name:room},
 			{$set:doc}
 		);
+	},
+	getBoardSize: function(room, callback) {
+		this.rooms.findOne(
+			{name:room},
+			function(err, room) {
+				if(room) {
+					callback(room.size);
+				} else {
+					callback();
+				}
+			}
+		);		
+	},
+	setBoardSize: function(room, size) {
+		this.room.findOne({name:room})
+		this.rooms.update(
+			{name:room},
+			{$set:{'size':size}}
+		);
 	}
 };
 exports.db = db;

lib/rooms.js

@@ -22,10 +22,10 @@ var sid_rooms = {};
 
 // Add a client to a room and return the sid:client mapping.
 exports.add_to_room = function (client, room, callback) {
-    //console.log('Client ' + client.username + ' (' + client.sessionId + ') added to room ' + room);
+    //console.log('Client ' + client.username + ' (' + client.id + ') added to room ' + room);
 
-    if (!(sid_rooms.hasOwnProperty(client.sessionId))) sid_rooms[client.sessionId] = new sets.Set();
-    sid_rooms[client.sessionId].add(room);
+    if (!(sid_rooms.hasOwnProperty(client.id))) sid_rooms[client.id] = new sets.Set();
+    sid_rooms[client.id].add(room);
 
     if (!(rooms.hasOwnProperty(room))) rooms[room] = new sets.Set();
     rooms[room].add(client);
@@ -40,8 +40,8 @@ exports.add_to_room = function (client, room, callback) {
 // mapping for everybody in those rooms.
 exports.remove_from_all_rooms = function (client, callback) {
     var affected_clients = new sets.Set();
-    if (sid_rooms.hasOwnProperty(client.sessionId)) {
-	var client_rooms = sid_rooms[client.sessionId].array();
+    if (sid_rooms.hasOwnProperty(client.id)) {
+	var client_rooms = sid_rooms[client.id].array();
 	for (var i = 0; i < client_rooms.length; i++) {
 	    var room = client_rooms[i];
 	    if (rooms.hasOwnProperty(room)) {
@@ -61,8 +61,8 @@ exports.remove_from_all_rooms = function (client, callback) {
 	    }
 	}
     }
-    console.log('Client ' + client.username + ' (' + client.sessionId + ') disconnected.');
-    delete sid_rooms[client.sessionId];
+    console.log('Client ' + client.username + ' (' + client.id + ') disconnected.');
+    delete sid_rooms[client.id];
     callback(affected_clients.array());
 }
 
@@ -122,9 +122,9 @@ exports.room_clients_other_than_me = function(room, client) {
 
 //gets the current room of the client (assumes one room -- will select first one if in multiple)
 exports.get_room = function (client) {	
-   if (sid_rooms.hasOwnProperty(client.sessionId))
+   if (sid_rooms.hasOwnProperty(client.id))
 	{
-		var client_rooms = sid_rooms[client.sessionId].array();
+		var client_rooms = sid_rooms[client.id].array();
 	}
 	
 	if ( typeof(client_rooms) != undefined )
@@ -143,8 +143,8 @@ exports.add_to_room_and_announce = function (client, room, msg) {
 		    // Broadcast new-user notification
 		    for (var i = 0; i < clients.length; i++)
 			{
-				if (clients[i].sessionId != client.sessionId)
-					clients[i].send(msg);
+				if (clients[i].id != client.id)
+					clients[i].json.send(msg);
 			}
 		});
 }
@@ -170,8 +170,8 @@ exports.remove_from_all_rooms_and_announce = function (client, msg) {
 	exports.remove_from_all_rooms(client, function(clients) {
 	    for (var i = 0; i < clients.length; i++)
 		{
-			if (clients[i].sessionId != client.sessionId)
-				clients[i].send(msg);
+			if (clients[i].id != client.id)
+				clients[i].json.send(msg);
 		}
 	});
 }
@@ -192,16 +192,16 @@ exports.broadcast = function(msg) {
 exports.broadcast_room = function(room, msg) {
     var clients = exports.room_clients(room);
     for (var i = 0; i < clients.length; i++)
-	clients[i].send(msg);
+	clients[i].json.send(msg);
 };
 
 // Broadcast message to all the other clients that are in rooms with this client
 exports.broadcast_to_roommates = function (client, msg) {
 	var roommates = new sets.Set();
 	
-   if (sid_rooms.hasOwnProperty(client.sessionId))
+   if (sid_rooms.hasOwnProperty(client.id))
 	{
-		var client_rooms = sid_rooms[client.sessionId].array();
+		var client_rooms = sid_rooms[client.id].array();
 		for (var i = 0; i < client_rooms.length; i++)
 		{
 		   var room = client_rooms[i];
@@ -218,12 +218,12 @@ exports.broadcast_to_roommates = function (client, msg) {
 	roommates.remove(client);
 	roommates = roommates.array();
 	
-	console.log('client: ' + client.sessionId + " is broadcasting to: ");
+	console.log('client: ' + client.id + " is broadcasting to: ");
 	
    
    for (var i = 0; i < roommates.length; i++)
 	{
-		console.log('  - ' + roommates[i].sessionId);
-		roommates[i].send(msg);
+		console.log('  - ' + roommates[i].id);
+		roommates[i].json.send(msg);
 	}
 }

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "scrumblr",
+  "description": "Web-based simulation of a physical agile sprint board that supports real-time collaboration.",
+  "version": "0.1.0",
+  "repository": {
+    "url": "http://github.com/aliasaria/scrumblr"
+  },
+  "author": "Ali Asaria",
+  "main": "server.js",
+  "directories": {
+    "lib": "lib/"
+  },
+  "engines": {
+    "node": "0.4.7"
+  },
+  "dependencies": {
+    "async":        "0.1.x",
+    "connect":      "1.7.x",
+    "redis-client": "0.3.x",
+    "redis":        "0.6.x",
+    "sanitizer":    "0.0.x",
+    "socket.io":    "0.8.x",
+    "simplesets":   "1.1.x",
+    "connect-redis":"1.0.x",
+    "express":      "2.4.x",
+    "jade":         "0.14.x"
+  }
+}

server.js

@@ -1,5 +1,4 @@
 var	http = require('http'),
-		io = require('socket.io'), // for npm, otherwise use require('./path/to/socket.io')
 		express = require('express'),
 		connect = require('connect');
 
@@ -37,8 +36,11 @@ app.configure( function(){
 });
 
 app.get('/', function(req, res) {
+	console.log(req.header('host'));
+	url = req.header('host');
 	res.render('home.jade', {
-		 layout: false
+		 layout: false,
+		 locals: {url: url}
 	});
 });
 
@@ -66,17 +68,25 @@ app.post('/edit-column', function(req, res) {
 	res.send(req.body.value);
 });
 
-app.listen(process.argv[2]);
+app.listen(process.argv[2] || 8124);
 
 //I limit the number of potential transports because xhr was causing trouble
 //with frequent disconnects
 var socketio_options = {
 	transports: ['websocket', 'flashsocket', 'htmlfile', 'jsonp-polling']
 };
-
 // socket.io SETUP
-var socket = io.listen(app, socketio_options);
-socket.on('connection', function(client){
+var io = require('socket.io').listen(app);
+io.configure(function () {
+  io.set('transports', [
+      'websocket'
+    , 'flashsocket'
+    , 'htmlfile'
+//    , 'xhr-polling'
+    , 'jsonp-polling'
+  ]);
+});
+io.sockets.on('connection', function (client) {
 	// new client is here!
 	//console.dir(client.request.headers);
 		//
@@ -127,7 +137,7 @@ function scrub( text ) {
 
 				joinRoom(client, message.data, function(clients) {
 
-						client.send( { action: 'roomAccept', data: '' } );
+						client.json.send( { action: 'roomAccept', data: '' } );
 
 				});
 
@@ -278,7 +288,7 @@ function scrub( text ) {
 
 				var msg = {};
 				msg.action = 'nameChangeAnnounce';
-				msg.data = { sid: client.sessionId, user_name: clean_message.data };
+				msg.data = { sid: client.id, user_name: clean_message.data };
 				broadcastToRoom( client, msg );
 				break;
 
@@ -333,7 +343,7 @@ function initClient ( client )
 
 		db.getAllCards( room , function (cards) {
 
-			client.send(
+			client.json.send(
 				{
 					action: 'initCards',
 					data: cards
@@ -344,7 +354,7 @@ function initClient ( client )
 
 
 		db.getAllColumns ( room, function (columns) {
-			client.send(
+			client.json.send(
 				{
 					action: 'initColumns',
 					data: columns
@@ -357,7 +367,7 @@ function initClient ( client )
 
 			if (theme == null) theme = 'bigcards';
 
-			client.send(
+			client.json.send(
 				{
 					action: 'changeTheme',
 					data: theme
@@ -368,7 +378,7 @@ function initClient ( client )
 		db.getBoardSize( room, function(size) {
 
 			if (size != null) {
-				client.send(
+				client.json.send(
 					{
 						action: 'setBoardSize',
 						data: size
@@ -383,18 +393,18 @@ function initClient ( client )
 		var j = 0;
 		for (i in roommates_clients)
 		{
-			if (roommates_clients[i].sessionId != client.sessionId)
+			if (roommates_clients[i].id != client.id)
 			{
 				roommates[j] = {
-					sid: roommates_clients[i].sessionId,
-					user_name:  sids_to_user_names[roommates_clients[i].sessionId]
+					sid: roommates_clients[i].id,
+					user_name:  sids_to_user_names[roommates_clients[i].id]
 					};
 				j++;
 			}
 		}
 
 		console.log('initialusers: ' + roommates);
-		client.send(
+		client.json.send(
 			{
 				action: 'initialUsers',
 				data: roommates
@@ -409,7 +419,7 @@ function joinRoom (client, room, successFunction)
 {
 	var msg = {};
 	msg.action = 'join-announce';
-	msg.data		= { sid: client.sessionId, user_name: client.user_name };
+	msg.data		= { sid: client.id, user_name: client.user_name };
 
 	rooms.add_to_room_and_announce(client, room, msg);
 	successFunction();
@@ -417,13 +427,13 @@ function joinRoom (client, room, successFunction)
 
 function leaveRoom (client)
 {
-	console.log (client.sessionId + ' just left');
+	console.log (client.id + ' just left');
 	var msg = {};
 	msg.action = 'leave-announce';
-	msg.data	= { sid: client.sessionId };
+	msg.data	= { sid: client.id };
 	rooms.remove_from_all_rooms_and_announce(client, msg);
 
-	delete sids_to_user_names[client.sessionId];
+	delete sids_to_user_names[client.id];
 }
 
 function broadcastToRoom ( client, message ) {
@@ -457,7 +467,7 @@ function roundRand( max )
 function getRoom( client , callback )
 {
 	room = rooms.get_room( client );
-	//console.log( 'client: ' + client.sessionId + " is in " + room);
+	//console.log( 'client: ' + client.id + " is in " + room);
 	callback(room);
 }
 
@@ -465,7 +475,7 @@ function getRoom( client , callback )
 function setUserName ( client, name )
 {
 	client.user_name = name;
-	sids_to_user_names[client.sessionId] = name;
+	sids_to_user_names[client.id] = name;
 	console.log('sids to user names: ');
 	console.dir(sids_to_user_names);
 }

views/home.jade

@@ -28,7 +28,7 @@ body
 							a#go(onclick="return go();")  go.
 						<br><br>
 						p.home example board:
-						p.home <a href="http://scrumblr.ca/demo">http://scrumblr.ca/demo</a>
+						p.home!= '<a href="http://' + locals.url + '/demo">' + locals.url + '/demo</a>'
 						<br><br><br>
 						p.home.small sourcecode at <a href="https://github.com/aliasaria/scrumblr">github</a>
 				

views/index.jade

@@ -6,6 +6,8 @@ h1 <a href="http://scrumblr.ca">scrumblr</a> by <a href="http://aliasaria.ca">al
 div.board-outline
 	div#board
 		div#board-doodles
+		image#marker(src='/images/marker.png')
+		image#eraser(src='/images/eraser.png')
 	
 		
 		table#board-table.board-table

views/layout.jade

@@ -6,7 +6,9 @@ html(lang="en")
 		
 		<script src="/socket.io/socket.io.js"></script>
 
-		<script src="/lib/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>
+		<!-- <script src="/lib/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script> -->
+		<script src="/lib/jquery-ui/development-bundle/ui/jquery-ui-1.8.9.custom.js"></script>
+		
 		
 		<script src="/lib/jquery.jeditable.js"></script>