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(id){
		}

	},
	
};

// 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.
var UI = {};
UI[ State.WAITING ] = {
	load: function(data){
		$("#current-state").html("Waiting");
		$("#drawing").show();
	},
	unload: function(){
		$("#drawing").hide();
	}
}

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

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

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

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


$(Game.init);