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);
}