var socket = io.connect(window.location.hostname);

var State = {
 	WAITING: 0,
	DRAWING: 1,
	VOTING: 2,
	WINNING: 3,
	RESET: -1,
}

var Game = {
	nick: null,
	state: State.WAITING,
		
	init: function(){

		// Bind events from the server
		socket.on('event-welcome', Events.receive.welcome);
		socket.on('event-join', Events.receive.join);
		socket.on('event-part', Events.receive.part);
		socket.on('event-message', Events.receive.message);
		socket.on('event-state', Events.receive.state);
		socket.on('event-image', Events.receive.image);
		socket.on('event-vote', Events.receive.vote);
		Auth.init();
		Chat.init();
	}
}

var Events = {

	receive: {
		
		// Player connects to the game
		welcome: function(data){
			for (var i in data.messages) {
				Chat.add( data.messages[i] );
			}
			for (var i in data.players) {
				Roster.add( data.players[i] );
			}
		},
		
		// Another player joins the room
		join: function(data){
			Roster.add( data );
		},
		
		// Another player leaves the room
		part: function(data){
			Roster.remove( data );
		},
		
		// Game state changes
		state: function(data){
			if (Game.state == data.state) return;
			UI[ Game.state ].unload();
			UI[ data.state ].load(data);
			Game.state = data.state;
		},
		
		// Incoming chat
		message: function(msg) {
			Chat.add(msg);
		},
		
		// Incoming image
		image: function(data) {
			// preload the image
			var img = new Image();
			img.src = data.url;
		},

		// Another player votes on an image
		vote: function(data){
		}

	},

	send: {

		// Joining the game
		join: function(data) {
			socket.emit('event-join', data);
		},

		// Sending a message
		message: function(msg) {
			socket.emit('event-message', msg);
		},
		
		// Sending a vote
		vote: function(user){
			socket.emit('event-vote', user);
		}

	},
	
};

// Explicit changes to the UI when moving from one state to another.
// This is for things like moving divs off the screen, changing bindings, etc.
// Anything a load method does should be undone by the unload method.. for now.
// These are all functions so they can have their own weirdo scope..
// I should have started doing it like this a long time ago!
var UI = {};
UI[ State.WAITING ] = new function() {
	this.load = function(data){
		$("#current-state").html("Waiting");
		$("#drawing").show();
	}
	this.unload = function(){
		$("#drawing").hide();
	}
}

UI[ State.DRAWING ] = new function(){
	this.load = function(data){
		$("#current-state").html("Draw!");
		$("#drawing").show();
	},
	this.unload = function(){
		$("#drawing").hide();
	}
}

UI[ State.VOTING ] = new function(){
	var voted = false;
	this.load = function(data){
		console.log(data);
		$("#current-state").html("Vote!");
		this.build( data );
		$("#voting").show();
	}
	this.build = function(data){
		$("#voting").empty();
		for (var i in data.images) {
			var image = data.images[i];
			var $li = $("<li>");
			$li.data("nick", image.nick);
			$li.html("<img src='" + image.url + "'> " + image.nick );
			$li.click( this.click );
			$("#voting").append($li);
		}
	}
	this.unload = function(){
		$("#voting").hide();
	}
	this.click = function(){
		voted = true;
		var nick = $(this).data("nick");
		Events.send.vote({ nick: nick });
	}
}

UI[ State.WINNING ] = new function(){
	this.load = function(data){
		$("#current-state").html("Win!");
		$("#winning").show();
	}
	this.unload = function(){
		$("#winning").hide();
	}
}

UI[ State.RESET ] = new function() {
	this.load = function(data){
		$("#current-state").html("whoahao RESET!");
	}
	this.unload = function(){
	}
}


$(Game.init);