refactor

7 files changed, 592 insertions, 573 deletions

diff --git a/app.js b/app.js
index 8b037b6..cab9f7a 100644
--- a/app.js
+++ b/app.js
@@ -204,7 +204,9 @@ io.sockets.on('connection', function (socket) {
 		var now = Date.now();
 		updateTime(socket.user, now, socket.connected);
 		socket.connected = now;
-		users[socket.user.id].active = false;
+		if (socket.user.id in users) {
+			users[socket.user.id].active = false;
+		}
 		io.sockets.emit('blur', data);
 	});
 	
diff --git a/public/javascripts/game.js b/public/javascripts/game.js
new file mode 100644
index 0000000..be86b86
--- /dev/null
+++ b/public/javascripts/game.js
@@ -0,0 +1,134 @@
+
+var cursor = "https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif";
+
+var socket = io.connect();
+
+var start = 0;
+var afk = false, blurTime = 0, delay = 0;
+var users = {};
+
+var game = {
+	cursor: null,
+	init: function (){
+		game.bindSocket();
+		if (window._id) {
+			game.bindEvents();
+		}
+		game.loop();
+	},
+	
+	loop: function (){
+		requestAnimFrame(game.loop);
+		ui.updateWait(Date.now());
+	},
+	
+	bindSocket: function(){
+		socket.on('count', function(data){
+			UI.updateUsers(data);
+		});
+		socket.on('scores', function(data){
+			UI.updateScores(data);
+		});
+		socket.on('mouse', function(data){
+			if (data.id != _id) {
+				users[data.id].cursor.el.css({ 'margin-right': -data.x, 'margin-bottom': -data.y });
+			}
+		});
+		socket.on('focus', function(data) {
+			if (data.id != _id && _id in users && users[data.id].cursor) {
+				users[data.id].cursor.removeClass('idle');
+			}
+		});
+		socket.on('blur', function(data){
+			if (data.id != _id && _id in users && users[data.id].cursor) {
+				users[data.id].cursor.addClass('idle');
+			}
+		})
+	},
+	
+	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.." );
+			}
+		}
+		window.onmousemove = $.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 });
+				own_cursor.el.css({ 'margin-right': -data.x, 'margin-bottom': -data.y });
+		});
+	}
+};
+
+var UI = {
+
+	updateWait: function(now) {
+		if (! afk) {
+			if (start == 0) {
+				start = now;
+			}
+			var howlong =  Math.floor( (now - start) ) - delay;
+			$("#waiting").html( timeInWords( howlong ) );
+		} else {
+			if (blurTime) {
+				$("#reset").html( "You left the page for " + timeInWords(now - blurTime) + ", counting it against your score.." );
+			}
+		}
+	}
+	
+	updateUsers: function(data) {
+		console.log(data.users);
+		$("#count").html(Object.keys(data.users).length);
+		for (var i in users) {
+			if (!( i in data.users )) {
+				if (users[i].cursor) {
+					$( users[i].cursor ).remove();
+				}
+				delete users[i];
+			}
+		}
+		for (var i in data.users) {
+			if (!( i in users )) {
+				users[i] = data.users[i];
+			}
+			if (i != _id && ! users[i].cursor) {
+				var cursor = new Cursor( users[i] );
+				users[i].cursor = cursor;
+				cursors.push(cursor);
+			}			
+		}
+	},
+	
+	updateScores: function(data){
+		var scores = data.scores;
+		$("#scores").html("");
+		for (var i = 0; i < scores.length; i++) {
+			var s = scores[i];
+			var $li = $("<li>");
+			$li.html("<b>" + s.firstname + " " + s.lastname + "</b> &mdash; " + timeInWords(s.count));
+			$("#scores").append($li);
+		}
+	}
+}
+
+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>")
+	$("#cursors").append(this.el);
+}
diff --git a/public/javascripts/util.js b/public/javascripts/util.js
index df29b7e..cd1e0c9 100644
--- a/public/javascripts/util.js
+++ b/public/javascripts/util.js
@@ -11,7 +11,7 @@ window.requestAnimFrame = (function(){
 function pluralize (n, s) {
 	return n + " " + (n == 1 ? s : s + "s");
 }
-function toTime (time) {
+function timeInWords (time) {
 	var str = [];
 	time /= 1000;
 	if (time > 86400) {
diff --git a/public/javascripts/jquery-1.9.0.min.js b/public/javascripts/vendor/jquery-1.9.0.min.js
index 50d1b22..50d1b22 100644
--- a/public/javascripts/jquery-1.9.0.min.js
+++ b/public/javascripts/vendor/jquery-1.9.0.min.js
diff --git a/public/javascripts/jquery-ba-throttle.js b/public/javascripts/vendor/jquery-ba-throttle.js
index fa30bdf..fa30bdf 100644
--- a/public/javascripts/jquery-ba-throttle.js
+++ b/public/javascripts/vendor/jquery-ba-throttle.js
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 30e047d..5f1e9a9 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -5,4 +5,433 @@ body {
 
 a {
   color: #00B7FF;
+}
+
+@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);
+
+@-webkit-keyframes a {
+	0% {
+		opacity: 0;
+		-o-transform: translate3d(0, -60px, 0);
+		-ms-transform: translate3d(0, -60px, 0);
+		-moz-transform: translate3d(0, -60px, 0);
+		-webkit-transform: translate3d(0, -60px, 0);
+		transform: translate3d(0, -60px, 0);
+		color:transparent;
+		
+	}
+
+	30% {
+		opacity: 1;
+		-o-transform: translate3d(0, 5px, 0);
+		-ms-transform: translate3d(0, 5px, 0);
+		-moz-transform: translate3d(0, 5px, 0);
+		-webkit-transform: translate3d(0, 5px, 0);
+		transform: translate3d(0, 5px, 0);
+		text-shadow:0 0 30px #888;
+		color:transparent;
+	}
+
+	60% {
+		-o-transform: translate3d(0, -2px, 0);
+		-ms-transform: translate3d(0, -2px, 0);
+		-moz-transform: translate3d(0, -2px, 0);
+		-webkit-transform: translate3d(0, -2px, 0);
+		transform: translate3d(0, -2px, 0);
+		
+		
+	}
+
+	100% {
+		-o-transform: translate3d(0, 0px, 0);
+		-ms-transform: translate3d(0, 0px, 0);
+		-moz-transform: translate3d(0, 0px, 0);
+		-webkit-transform: translate3d(0, 0px, 0);
+		transform: translate3d(0, 0px, 0);
+	}
+
+}
+@-webkit-keyframes b {
+	0% {
+		opacity: 0;
+		-o-transform: translate3d(0, -40px, 0);
+		-ms-transform: translate3d(0, -40px, 0);
+		-moz-transform: translate3d(0, -40px, 0);
+		-webkit-transform: translate3d(0, -40px, 0);
+		transform: translate3d(0, -40px, 0);
+		color:transparent;
+		
+	}
+
+	30% {
+		opacity: 1;
+		-o-transform: translate3d(0, 5px, 0);
+		-ms-transform: translate3d(0, 5px, 0);
+		-moz-transform: translate3d(0, 5px, 0);
+		-webkit-transform: translate3d(0, 5px, 0);
+		transform: translate3d(0, 5px, 0);
+		text-shadow:0 0 30px #888;
+		color:transparent;
+	}
+	
+	60%{
+		color:transparent;
+	}
+
+	100% {
+		opacity: 1;
+		-o-transform: translate3d(0, 0px, 0);
+		-ms-transform: translate3d(0, 0px, 0);
+		-moz-transform: translate3d(0, 0px, 0);
+		-webkit-transform: translate3d(0, 0px, 0);
+		transform: translate3d(0, 0px, 0);
+		
+	}
+
+}
+
+@-webkit-keyframes c {
+	0% {
+		opacity: 0;
+		-o-transform: translate3d(0, 40px, 0);
+		-ms-transform: translate3d(0, 40px, 0);
+		-moz-transform: translate3d(0, 40px, 0);
+		-webkit-transform: translate3d(0, 40px, 0);
+		transform: translate3d(0, 40px, 0);
+	}
+
+	30% {
+		opacity: 1;
+		-o-transform: translate3d(0, 45px, 0);
+		-ms-transform: translate3d(0, 45px, 0);
+		-moz-transform: translate3d(0, 45px, 0);
+		-webkit-transform: translate3d(0, 45px, 0);
+		transform: translate3d(0, 45px, 0);
+	}
+
+	100% {
+		opacity: 1;
+		-o-transform: translate3d(0, 0px, 0);
+		-ms-transform: translate3d(0, 0px, 0);
+		-moz-transform: translate3d(0, 0px, 0);
+		-webkit-transform: translate3d(0, 0px, 0);
+		transform: translate3d(0, 0px, 0);
+	}
+
+}
+
+
+@-moz-keyframes a {
+	0% {
+		opacity: 0;
+		-o-transform: translate3d(0, -60px, 0);
+		-ms-transform: translate3d(0, -60px, 0);
+		-moz-transform: translate3d(0, -60px, 0);
+		-webkit-transform: translate3d(0, -60px, 0);
+		transform: translate3d(0, -60px, 0);
+	}
+
+	30% {
+		opacity: 1;
+		-o-transform: translate3d(0, 5px, 0);
+		-ms-transform: translate3d(0, 5px, 0);
+		-moz-transform: translate3d(0, 5px, 0);
+		-webkit-transform: translate3d(0, 5px, 0);
+		transform: translate3d(0, 5px, 0);
+	}
+
+	60% {
+		-o-transform: translate3d(0, -2px, 0);
+		-ms-transform: translate3d(0, -2px, 0);
+		-moz-transform: translate3d(0, -2px, 0);
+		-webkit-transform: translate3d(0, -2px, 0);
+		transform: translate3d(0, -2px, 0);
+	}
+
+	100% {
+		-o-transform: translate3d(0, 0px, 0);
+		-ms-transform: translate3d(0, 0px, 0);
+		-moz-transform: translate3d(0, 0px, 0);
+		-webkit-transform: translate3d(0, 0px, 0);
+		transform: translate3d(0, 0px, 0);
+	}
+
+}
+@-moz-keyframes b {
+	0% {
+		opacity: 0;
+		-o-transform: translate3d(0, -40px, 0);
+		-ms-transform: translate3d(0, -40px, 0);
+		-moz-transform: translate3d(0, -40px, 0);
+		-webkit-transform: translate3d(0, -40px, 0);
+		transform: translate3d(0, -40px, 0);
+	}
+
+	30% {
+		opacity: 1;
+		-o-transform: translate3d(0, 5px, 0);
+		-ms-transform: translate3d(0, 5px, 0);
+		-moz-transform: translate3d(0, 5px, 0);
+		-webkit-transform: translate3d(0, 5px, 0);
+		transform: translate3d(0, 5px, 0);
+	}
+
+	100% {
+		opacity: 1;
+		-o-transform: translate3d(0, 0px, 0);
+		-ms-transform: translate3d(0, 0px, 0);
+		-moz-transform: translate3d(0, 0px, 0);
+		-webkit-transform: translate3d(0, 0px, 0);
+		transform: translate3d(0, 0px, 0);
+	}
+
+}
+
+@-webkit-keyframes c {
+	0% {
+		opacity: 0;
+
+	}
+	
+	60% {
+		opacity:0.2;
+	}
+
+	90% {
+		opacity: 1;
+
+	}
+
+}
+
+@-webkit-keyframes d {
+	40% {
+		opacity: 0.4;
+
+	}
+
+	60% {
+		color: #999;
+
+	}
+
+}
+
+ol li:nth-child(1){
+	-webkit-animation-name: b;
+	-webkit-animation-duration: 2.2s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+}
+ol li:nth-child(2){
+	-webkit-animation-name: b;
+	-webkit-animation-duration: 2.4s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+}
+ol li:nth-child(3){
+	-webkit-animation-name: b;
+	-webkit-animation-duration: 2.6s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+}
+ol li:nth-child(4){
+	-webkit-animation-name: b;
+	-webkit-animation-duration: 2.8s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+}
+ol li:nth-child(5){
+	-webkit-animation-name: b;
+	-webkit-animation-duration: 3s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+}
+ol li:nth-child(6){
+	-webkit-animation-name: b;
+	-webkit-animation-duration: 3.2s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+}
+ol li:nth-child(7){
+	-webkit-animation-name: b;
+	-webkit-animation-duration: 3.4s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+}
+ol li:nth-child(8){
+	-webkit-animation-name: b;
+	-webkit-animation-duration: 3.6s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+}
+ol li:nth-child(9){
+	-webkit-animation-name: b;
+	-webkit-animation-duration: 3.8s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+}
+ol li:nth-child(10){
+	-webkit-animation-name: b;
+	-webkit-animation-duration: 4s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+}
+
+h1 {
+	font-family: 'Julius Sans One', sans-serif;
+	-webkit-animation-name: a;
+	-webkit-animation-duration: 2s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+	-moz-animation-name: a;
+	-moz-animation-duration: 2s;
+	-moz-animation-iteration-count: 1;
+	-moz-animation-delay: 0s;
+	font-weight:500;
+	font-size:50px;
+	margin:20px 0 0 0;
+	letter-spacing: 12px;
+
+}
+
+h2 {
+	font-family: 'Julius Sans One', sans-serif;
+	-webkit-animation-name: b;
+	-webkit-animation-duration: 2s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+	-moz-animation-name: b;
+	-moz-animation-duration: 2s;
+	-moz-animation-iteration-count: 1;
+	-moz-animation-delay: 0s;
+	font-weight:500;
+	margin:7px 0 0 0;
+	letter-spacing: 8px;
+	font-size:18px;
+}
+
+h3 {
+	font-family: 'Julius Sans One', sans-serif;
+	-webkit-animation-name: b;
+	-webkit-animation-duration: 2s;
+	-webkit-animation-iteration-count: 1;
+	-webkit-animation-delay: 0s;
+	-moz-animation-name: b;
+	-moz-animation-duration: 2s;
+	-moz-animation-iteration-count: 1;
+	-moz-animation-delay: 0s;
+	font-weight: 500;
+	margin: 0;
+	font-size: 33px;
+	border-bottom: 1px solid;
+	padding: 7px 0;
+	margin-bottom: 10px;
+	letter-spacing: 12px;
+	display: inline-block;
+}
+
+html,body {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	text-align: center;
+	background-attachment: fixed;
+	background-size: cover;
+}
+header {
+	position:relative;
+	z-index:2;
+
+}
+.cursor {
+	position: absolute;
+	bottom: 50%;
+	right: 50%;
+	width: 32px;
+	height: 32px;
+	margin-bottom: -9999px;
+	margin-right: -9999px;
+	z-index:0;
+	-webkit-transform: translateZ(0);
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	-webkit-transition: all .1s ease-out;
+	-moz-transition: all .1s ease-out;
+	-ms-transition: all .1s ease-out;
+	-o-transition: all .1s ease-out;
+	transition: all .1s ease-out;
+}
+.cursor.idle {
+	background-image: url(/images/cursor-gray.png) !important;
+	text-shadow: 0 0 2px #333;
+	color: transparent;
+	opacity:0.8;
+}
+
+.cursor span {
+	position: relative;
+	left: 25px;
+	top: 0;
+	font-size: 12px;
+	color: #333;
+	font-family: 'Julius Sans One', sans-serif;
+	z-index:2;
+}
+.cursor span:after {
+	content: "15:33";
+	margin-left: 25px;
+	color: black;
+	display: block;
+	float: left;
+}
+.cursor.idle span {
+	color: transparent;
+}
+.cursor.idle span:after {
+	color: transparent;
+}
+
+ol {
+	list-style:none;
+	padding:0;
+	margin:0;
+}
+
+.fbutton {
+		background: url('https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png') no-repeat -2px -53px;
+		display:inline-block;
+		width: 223px;
+		height: 34px;
+		margin:10px 0;
+		-webkit-animation-name: c;
+		-webkit-animation-duration: 4s;
+		-webkit-animation-iteration-count: 1;
+		opacity:1;
+		-webkit-animation-delay: 0s;
+}
+
+.fbutton:hover {
+		background-position: -2px -97px;					
+}
+
+.fbutton:focus {
+		background: url(https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png) no-repeat -2px -97px;
+}
+.okfocus {
+	text-align:center;
+	position:fixed;
+	bottom:10px;
+	left:0;
+	width:100%;
+	
+}
+.okfocus img {
+	width:100px;
 }
\ No newline at end of file
diff --git a/views/index.ejs b/views/index.ejs
index 3f2a7b5..aa959fa 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -7,586 +7,40 @@
     <script src="/javascripts/jquery-1.9.0.min.js"></script>
     <script src="/javascripts/jquery-ba-throttle.js"></script>
     <script src="/javascripts/util.js"></script>
-    <script>
+    <script src="/javascripts/game.js"></script>
 
-
-			var cursor = "https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif";
-
-			var socket = io.connect();
-			
-			<% if (currentUser) { %>
-				_id = "<%= currentUser._id %>";
-				socket.emit('joined', JSON.stringify({ "id": _id }));
-			<% } else { %>
-				_id = null;
-			<% } %>
-			
-			var start = 0;
-			var afk = false, blurTime = 0, delay = 0;
-			var users = {};
-	
-			function updateWait(now) {
-				if (! afk) {
-					if (start == 0) {
-						start = now;
-					}
-					var howlong =  Math.floor( (now - start) ) - delay;
-					$("#waiting").html( toTime( howlong ) );
-				} else {
-					if (blurTime) {
-						$("#reset").html( "You left the page for " + toTime(now - blurTime) + ", counting it against your score.." );
-					}
-				}
-			}
-			
-			(function loop (){
-				requestAnimFrame(loop);
-				updateWait(Date.now());
-			})();
-			
-			function updateUsers(data) {
-				console.log(data.users);
-				$("#count").html(Object.keys(data.users).length);
-				for (var i in users) {
-					if (!( i in data.users )) {
-						if (users[i].cursor) {
-							$( users[i].cursor ).remove();
-						}
-					 	delete users[i];
-					}
-				}
-				for (var i in data.users) {
-					console.log(" . . . " + i)
-					if (!( i in users )) {
-						users[i] = data.users[i];
-					}
-					if (i != _id && ! users[i].cursor) {
-						console.log("new cursor: " + i);
-						var $cursor = $("<div>");
-						$cursor.addClass("cursor");
-						$cursor.css('background-image', 'url(' + cursor + '?' + Math.floor(Math.random() * 1000) + ')');
-						$cursor.html("<span>" + users[i].firstname + "</span>")
-						$("#cursors").append($cursor);
-						users[i].cursor = $cursor;
-					}
-				}
-			}
-			
-			socket.on('count', function(data){
-				// updateWait(data);
-				updateUsers(data);
-			});
-				
-			socket.on('update', function(data){
-				// updateWait(data);
-			});
-			
-			socket.on('mouse', function(data){
-				if (data.id != _id) {
-					users[data.id].cursor.css({ 'margin-right': -data.x, 'margin-bottom': -data.y });
+		<% if (currentUser) { %>
+			<style>
+				body {
+		/*
+					cursor:url(https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif), default;
+		*/
+					cursor: none;
 				}
-			});
-			
-			socket.on('scores', function(data){
-				var scores = data.scores;
-				$("#scores").html("");
-				for (var i = 0; i < scores.length; i++) {
-					var s = scores[i];
-					var $li = $("<li>");
-					$li.html("<b>" + s.firstname + " " + s.lastname + "</b> &mdash; " + toTime(s.count));
-					$("#scores").append($li);
-				}
-			});
-
-			socket.on('focus', function(data) {
-				if (data.id != _id && _id in users && users[data.id].cursor) {
-					users[data.id].cursor.removeClass('idle');
-				}
-			});
-
-			socket.on('blur', function(data){
-				if (data.id != _id && _id in users && users[data.id].cursor) {
-					users[data.id].cursor.addClass('idle');
-				}
-			})
-			
-			if (_id) {
-
-				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 " + toTime(delay) + ", counting it against your score.." );
-					}
-				}
-
-				window.onmousemove = $.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 });
+			</style>
+			<script type="text/javascript">
+				$(function(){
+					window._id = "<%= currentUser._id %>";
+					socket.emit('joined', JSON.stringify({ "id": window._id }));
+					init();
 				});
-			}
-			
-    </script>
-    <style type="text/css">
-
-
-		@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One);
-
-
-		@-webkit-keyframes a {
-			0% {
-				opacity: 0;
-				-o-transform: translate3d(0, -60px, 0);
-				-ms-transform: translate3d(0, -60px, 0);
-				-moz-transform: translate3d(0, -60px, 0);
-				-webkit-transform: translate3d(0, -60px, 0);
-				transform: translate3d(0, -60px, 0);
-				color:transparent;
-				
-			}
-
-			30% {
-				opacity: 1;
-				-o-transform: translate3d(0, 5px, 0);
-				-ms-transform: translate3d(0, 5px, 0);
-				-moz-transform: translate3d(0, 5px, 0);
-				-webkit-transform: translate3d(0, 5px, 0);
-				transform: translate3d(0, 5px, 0);
-				text-shadow:0 0 30px #888;
-				color:transparent;
-			}
-
-			60% {
-				-o-transform: translate3d(0, -2px, 0);
-				-ms-transform: translate3d(0, -2px, 0);
-				-moz-transform: translate3d(0, -2px, 0);
-				-webkit-transform: translate3d(0, -2px, 0);
-				transform: translate3d(0, -2px, 0);
-				
-				
-			}
-
-			100% {
-				-o-transform: translate3d(0, 0px, 0);
-				-ms-transform: translate3d(0, 0px, 0);
-				-moz-transform: translate3d(0, 0px, 0);
-				-webkit-transform: translate3d(0, 0px, 0);
-				transform: translate3d(0, 0px, 0);
-			}
-
-		}
-		@-webkit-keyframes b {
-			0% {
-				opacity: 0;
-				-o-transform: translate3d(0, -40px, 0);
-				-ms-transform: translate3d(0, -40px, 0);
-				-moz-transform: translate3d(0, -40px, 0);
-				-webkit-transform: translate3d(0, -40px, 0);
-				transform: translate3d(0, -40px, 0);
-				color:transparent;
-				
-			}
-
-			30% {
-				opacity: 1;
-				-o-transform: translate3d(0, 5px, 0);
-				-ms-transform: translate3d(0, 5px, 0);
-				-moz-transform: translate3d(0, 5px, 0);
-				-webkit-transform: translate3d(0, 5px, 0);
-				transform: translate3d(0, 5px, 0);
-				text-shadow:0 0 30px #888;
-				color:transparent;
-			}
-			
-			60%{
-				color:transparent;
-			}
-
-			100% {
-				opacity: 1;
-				-o-transform: translate3d(0, 0px, 0);
-				-ms-transform: translate3d(0, 0px, 0);
-				-moz-transform: translate3d(0, 0px, 0);
-				-webkit-transform: translate3d(0, 0px, 0);
-				transform: translate3d(0, 0px, 0);
-				
-			}
-
-		}
-
-		@-webkit-keyframes c {
-			0% {
-				opacity: 0;
-				-o-transform: translate3d(0, 40px, 0);
-				-ms-transform: translate3d(0, 40px, 0);
-				-moz-transform: translate3d(0, 40px, 0);
-				-webkit-transform: translate3d(0, 40px, 0);
-				transform: translate3d(0, 40px, 0);
-			}
-
-			30% {
-				opacity: 1;
-				-o-transform: translate3d(0, 45px, 0);
-				-ms-transform: translate3d(0, 45px, 0);
-				-moz-transform: translate3d(0, 45px, 0);
-				-webkit-transform: translate3d(0, 45px, 0);
-				transform: translate3d(0, 45px, 0);
-			}
-
-			100% {
-				opacity: 1;
-				-o-transform: translate3d(0, 0px, 0);
-				-ms-transform: translate3d(0, 0px, 0);
-				-moz-transform: translate3d(0, 0px, 0);
-				-webkit-transform: translate3d(0, 0px, 0);
-				transform: translate3d(0, 0px, 0);
-			}
-
-		}
-
-
-		@-moz-keyframes a {
-			0% {
-				opacity: 0;
-				-o-transform: translate3d(0, -60px, 0);
-				-ms-transform: translate3d(0, -60px, 0);
-				-moz-transform: translate3d(0, -60px, 0);
-				-webkit-transform: translate3d(0, -60px, 0);
-				transform: translate3d(0, -60px, 0);
-			}
-
-			30% {
-				opacity: 1;
-				-o-transform: translate3d(0, 5px, 0);
-				-ms-transform: translate3d(0, 5px, 0);
-				-moz-transform: translate3d(0, 5px, 0);
-				-webkit-transform: translate3d(0, 5px, 0);
-				transform: translate3d(0, 5px, 0);
-			}
-
-			60% {
-				-o-transform: translate3d(0, -2px, 0);
-				-ms-transform: translate3d(0, -2px, 0);
-				-moz-transform: translate3d(0, -2px, 0);
-				-webkit-transform: translate3d(0, -2px, 0);
-				transform: translate3d(0, -2px, 0);
-			}
-
-			100% {
-				-o-transform: translate3d(0, 0px, 0);
-				-ms-transform: translate3d(0, 0px, 0);
-				-moz-transform: translate3d(0, 0px, 0);
-				-webkit-transform: translate3d(0, 0px, 0);
-				transform: translate3d(0, 0px, 0);
-			}
-
-		}
-		@-moz-keyframes b {
-			0% {
-				opacity: 0;
-				-o-transform: translate3d(0, -40px, 0);
-				-ms-transform: translate3d(0, -40px, 0);
-				-moz-transform: translate3d(0, -40px, 0);
-				-webkit-transform: translate3d(0, -40px, 0);
-				transform: translate3d(0, -40px, 0);
-			}
-
-			30% {
-				opacity: 1;
-				-o-transform: translate3d(0, 5px, 0);
-				-ms-transform: translate3d(0, 5px, 0);
-				-moz-transform: translate3d(0, 5px, 0);
-				-webkit-transform: translate3d(0, 5px, 0);
-				transform: translate3d(0, 5px, 0);
-			}
-
-			100% {
-				opacity: 1;
-				-o-transform: translate3d(0, 0px, 0);
-				-ms-transform: translate3d(0, 0px, 0);
-				-moz-transform: translate3d(0, 0px, 0);
-				-webkit-transform: translate3d(0, 0px, 0);
-				transform: translate3d(0, 0px, 0);
-			}
-
-		}
-
-		@-webkit-keyframes c {
-			0% {
-				opacity: 0;
-
-			}
-			
-			60% {
-				opacity:0.2;
-			}
-
-			90% {
-				opacity: 1;
-
-			}
-
-		}
-		
-		@-webkit-keyframes d {
-			40% {
-				opacity: 0.4;
-
-			}
-
-			60% {
-				color: #999;
-
-			}
-
-		}
-				ol li:nth-child(1){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 2.2s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(2){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 2.4s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(3){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 2.6s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(4){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 2.8s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(5){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 3s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(6){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 3.2s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(7){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 3.4s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(8){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 3.6s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(9){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 3.8s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-				ol li:nth-child(10){
-					-webkit-animation-name: b;
-					-webkit-animation-duration: 4s;
-					-webkit-animation-iteration-count: 1;
-					-webkit-animation-delay: 0s;
-				}
-
-
-
-		h1 {
-			font-family: 'Julius Sans One', sans-serif;
-			-webkit-animation-name: a;
-			-webkit-animation-duration: 2s;
-			-webkit-animation-iteration-count: 1;
-			-webkit-animation-delay: 0s;
-			-moz-animation-name: a;
-			-moz-animation-duration: 2s;
-			-moz-animation-iteration-count: 1;
-			-moz-animation-delay: 0s;
-			font-weight:500;
-			font-size:50px;
-			margin:20px 0 0 0;
-			letter-spacing: 12px;
-
-		}
-
-		h2 {
-			font-family: 'Julius Sans One', sans-serif;
-			-webkit-animation-name: b;
-			-webkit-animation-duration: 2s;
-			-webkit-animation-iteration-count: 1;
-			-webkit-animation-delay: 0s;
-			-moz-animation-name: b;
-			-moz-animation-duration: 2s;
-			-moz-animation-iteration-count: 1;
-			-moz-animation-delay: 0s;
-			font-weight:500;
-			margin:7px 0 0 0;
-			letter-spacing: 8px;
-			font-size:18px;
-		}
-			
-			h3 {
-				font-family: 'Julius Sans One', sans-serif;
-				-webkit-animation-name: b;
-				-webkit-animation-duration: 2s;
-				-webkit-animation-iteration-count: 1;
-				-webkit-animation-delay: 0s;
-				-moz-animation-name: b;
-				-moz-animation-duration: 2s;
-				-moz-animation-iteration-count: 1;
-				-moz-animation-delay: 0s;
-				font-weight: 500;
-				margin: 0;
-				font-size: 33px;
-				border-bottom: 1px solid;
-				padding: 7px 0;
-				margin-bottom: 10px;
-				letter-spacing: 12px;
-				display: inline-block;
-				
-			}
-
-    	html,body {
-    		width: 100%;
-    		height: 100%;
-    		margin: 0;
-    		padding: 0;
-				overflow: hidden;
-				text-align: center;
-				background-attachment: fixed;
-				background-size: cover;
-    	}
-			header {
-				position:relative;
-				z-index:2;
-
-			}
-    	.cursor {
-    		position: absolute;
-    		bottom: 50%;
-    		right: 50%;
-    		width: 32px;
-    		height: 32px;
-    		margin-bottom: -9999px;
-    		margin-right: -9999px;
-				z-index:0;
-				-webkit-transform: translateZ(0);
-				-webkit-touch-callout: none;
-				-webkit-user-select: none;
-				-khtml-user-select: none;
-				-moz-user-select: none;
-				-ms-user-select: none;
-				user-select: none;
-				-webkit-transition: all .1s ease-out;
-				-moz-transition: all .1s ease-out;
-				-ms-transition: all .1s ease-out;
-				-o-transition: all .1s ease-out;
-				transition: all .1s ease-out;
-    	}
-			.cursor.idle {
-				background-image: url(/images/cursor-gray.png) !important;
-				text-shadow: 0 0 2px #333;
-				color: transparent;
-				opacity:0.8;
-			}
-			
-			.cursor span {
-				position: relative;
-				left: 25px;
-				top: 0;
-				font-size: 12px;
-				color: #333;
-				font-family: 'Julius Sans One', sans-serif;
-				z-index:2;
-			}
-			.cursor span:after {
-				content: "15:33";
-				margin-left: 25px;
-				color: black;
-				display: block;
-				float: left;
-			}
-			.cursor.idle span {
-				color: transparent;
-			}
-			.cursor.idle span:after {
-				color: transparent;
-			}
+			</script>
+		<% } else { %>
+			<script type="text/javascript">
+				$(function(){
+					window._id = null;
+					init();
+				});
+			</script>
+		<% } %>
 
-			ol{
-				list-style:none;
-				padding:0;
-				
-				margin:0;
 
-			}
-	
-			.fbutton {
-					background: url('https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png') no-repeat -2px -53px;
-					display:inline-block;
-					width: 223px;
-					height: 34px;
-					margin:10px 0;
-					-webkit-animation-name: c;
-					-webkit-animation-duration: 4s;
-					-webkit-animation-iteration-count: 1;
-					opacity:1;
-					-webkit-animation-delay: 0s;
-			}
-			
-			.fbutton:hover {
-					background-position: -2px -97px;					
-			}
-			
-			.fbutton:focus {
-					background: url(https://s3.amazonaws.com/luckyplop/cf8dc6647202296b7c84c906dbf43c6d46e04958.png) no-repeat -2px -97px;
-			}
-			.okfocus {
-				text-align:center;
-				position:fixed;
-				bottom:10px;
-				left:0;
-				width:100%;
-				
-			}
-			.okfocus img {
-				width:100px;
-			}
-    </style>
   </head>
   <body>
     <h1>WAIT SITE</h1>
 		<h2>Waiting Alone Together</h2>
-
-   <% if (currentUser) { %>
-	<style>
-	body{
-		cursor:url(https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif), default;
-	}
-	</style>
-	<% } %>
-	<!--	<div>You've been waiting for <span id="waiting">0 seconds</span><br>
+<!--
+		<div>You've been waiting for <span id="waiting">0 seconds</span><br>
 		<span id="reset"></span></div>
 		<div><span id="count">0</span> ppl online now!!</div>