1 files changed, 52 insertions, 26 deletions

diff --git a/public/javascripts/game.js b/public/javascripts/game.js
index dc69682..2ddc432 100644
--- a/public/javascripts/game.js
+++ b/public/javascripts/game.js
@@ -15,7 +15,7 @@ var game = {
 		if (window._id) {
 			socket.emit('joined', JSON.stringify({ "id": window._id }));
 			own_cursor = new Cursor({
-				firstName: "you"
+				firstname: "you"
 			});
 			own_cursor.el.addClass("own");
 			game.bindEvents();
@@ -53,33 +53,43 @@ var game = {
 	},
 	
 	bindEvents: function(){
-		game.cursor = new Cursor ({
-			firstname: "you",
-		});
-		window.onblur = function () {
-			$("#really_waiting").html("BLUR");
-			socket.emit('blur', { id: _id });
-			blurTime = Date.now();
-			afk = true;
-		}
-		window.onfocus = function () {
-			$("#really_waiting").html("FOCUS");
-			socket.emit('focus', { id: _id });
-			afk = false;
-			if (blurTime) {
-				delay += (Date.now() - blurTime);
-				$("#reset").html( "You left the page for " + timeInWords(delay) + ", counting it against your score.." );
-			}
-		}
 		var emit_mouse_movement = $.throttle(50, function (e) {
 			var y = Math.floor( e.pageY - window.innerHeight / 2 );
 			var x = Math.floor( e.pageX - window.innerWidth / 2 );
 			socket.emit('mouse', { x: x, y: y, id: _id });
 		});
-		window.onmousemove = function(e){
-			emit_mouse_movement(e);
-			own_cursor.el.css({ 'left': e.pageX, 'top': e.pageY });
-		}
+		$(window).bind({
+			blur: function () {
+				$("#really_waiting").html("BLUR");
+				socket.emit('blur', { id: _id });
+				blurTime = Date.now();
+				afk = true;
+				own_cursor.el.addClass('idle');
+			},
+			focus: function () {
+				$("#really_waiting").html("FOCUS");
+				socket.emit('focus', { id: _id });
+				afk = false;
+				own_cursor.el.removeClass('idle').show();
+				if (blurTime) {
+					delay += (Date.now() - blurTime);
+					$("#reset").html( "You left the page for " + timeInWords(delay) + ", counting it against your score.." );
+				}
+			},
+			mousemove: function(e){
+				emit_mouse_movement(e);
+				own_cursor.el.css({ 'left': e.pageX, 'top': e.pageY });
+			}
+		});
+		
+		$(".okfocus").bind({
+			mouseover: function(){
+				own_cursor.el.hide();
+			},
+			mouseout: function(){
+				own_cursor.el.show();
+			}
+		});
 	}
 };
 
@@ -91,7 +101,9 @@ var UI = {
 				start = now;
 			}
 			var howlong =  Math.floor( (now - start) ) - delay;
-			$("#waiting").html( timeInWords( howlong ) );
+			if (own_cursor) {
+				own_cursor.time.html( timeInSecs( howlong ) );
+			}
 		} else {
 			if (blurTime) {
 				$("#reset").html( "You left the page for " + timeInWords(now - blurTime) + ", counting it against your score.." );
@@ -118,7 +130,10 @@ var UI = {
 				var cursor = new Cursor( users[i] );
 				users[i].cursor = cursor;
 				cursors.push(cursor);
-			}			
+			}
+			else if (i == _id) {
+				own_cursor.name.html( users[i].firstname );
+			}
 		}
 	},
 	
@@ -138,6 +153,17 @@ function Cursor ( user ) {
 	this.el = $("<div>");
 	this.el.addClass("cursor");
 	this.el.css('background-image', 'url(' + cursor_image + '?' + Math.floor(Math.random() * 1000) + ')');
-	this.el.html("<span>" + user.firstname + "</span>")
+
+	this.name = $("<div>");
+	this.name.addClass('name');
+	this.name.html( user.firstname );
+
+	this.time = $("<div>");
+	this.time.addClass('time');
+	this.time.html( "0:00" );
+
+	this.el.append(this.name);
+	this.el.append(this.time);
+
 	$("#cursors").append(this.el);
 }