var cursor_image = "https://s3.amazonaws.com/luckyplop/52d5f60fde3d8562ad566838e0e09ca52725bb09.gif";
var own_cursor;

var socket = io.connect();

var users = {}, cursors = [];

var game = {
	cursor: null,
	init: function (){
		game.bindSocket();
		if (window._id) {
			socket.emit('joined', JSON.stringify({ "id": window._id }));
			var now = Date.now();
			own_cursor = new Cursor({
				firstname: "you",
				score: 0,
				current: 0,
				active: true,
				connected: now
			}, now);
			own_cursor.own = true;
			own_cursor.el.addClass("own");
			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.updateUsers(data);
			UI.updateScores(data);
		});
		socket.on('mouse', function(data){
			if (data.id != _id && data.id in users) {
				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.focus();
			}
		});
		socket.on('blur', function(data){
			if (data.id != _id && _id in users && users[data.id].cursor) {
				users[data.id].cursor.blur();
			}
		})
	},
	
	bindEvents: function(){
		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).bind({
			blur: function (e) {
				$("#really_waiting").html("BLUR");
				socket.emit('blur', { id: _id });
				own_cursor.blur();
			},
			focus: function (e) {
				$("#really_waiting").html("FOCUS");
				socket.emit('focus', { id: _id });
				own_cursor.focus();
			},
			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();
			}
		});
	}
};

var UI = {

	updateWait: function(now) {
		for (var i = 0, _len = cursors.length; i < _len; i++) {
			if (! cursors[i].afk) {
				cursors[i].update(now);
			}
		}
	},
	
	updateUsers: function(data) {
		console.log(data.users);
		var now = data.now;
		$("#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) {
			var user = data.users[i];
			if (!( i in users )) {
				users[i] = user;
			}
			if (i != _id && ! user.cursor) {
				var cursor = new Cursor( user, now );
				user.cursor = cursor;
				user.cursor.el.css({ 'margin-right': -user.x, 'margin-bottom': -user.y });
			}
			else if (i == _id) {
				own_cursor.name.html( users[i].firstname );
			}
		}
	},
	
	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, now ) {
	var base = this;

	base.start = Date.now();
	base.initial = user.current || 0;
	base.delay = 0;
	base.blurStart = 0;
	base.afk = false;
	base.own = false;

	base.add = function(){
		base.el = $("<div>");
		base.el.addClass("cursor");
		base.el.css('background-image', 'url(' + cursor_image + '?' + Math.floor(Math.random() * 1000) + ')');
	
		base.name = $("<div>");
		base.name.addClass('name');
		base.name.html( user.firstname );
	
		base.time = $("<div>");
		base.time.addClass('time');
		base.time.html( "0:00" );
	
		base.el.append(base.name);
		base.el.append(base.time);
		
		$("#cursors").append(base.el);
		cursors.push(base);
		
		if (user.active) {
			base.initial += now - user.connected;
		} else {
			base.blur();
		}

		// console.log(now, base.start, base.initial, base.delay);
	}

	base.update = function(now){
		var howlong = Math.floor( (now - base.start) ) + base.initial - base.delay;
		base.time.html( timeInSecs( howlong ) );
	}

	base.blur = function(){
		base.blurStart = Date.now();
		base.afk = true;
		base.el.addClass('idle');
	}

	base.focus = function(){
		base.afk = false;
		base.el.removeClass('idle').show();
		if (base.blurStart) {
			base.delay += (Date.now() - base.blurStart);
		}
	}
	
	base.remove = function(){
		base.el.remove();
		cursors.splice( cursors.indexOf(base), 1 )
	}

	base.add();
}