var socket = io();
var cssMap, utilMap;
var ownId;
socket.on('connect', function () {
	ownId = socket.io.engine.id;
	console.log("connect!");
	socket.emit("getmap");
});

socket.on('disconnect', function () {
	$(".player").remove();
});

socket.on('getmap', function (conent) {
	cssMap = conent["cssMap"];
	utilMap = conent["utilMap"];
	//console.log(map);
	var domMap = $("#map");

	domMap.empty();

	for(var w=0;w<cssMap.length;w++) {
		for(var h=0;h<cssMap[w].length;h++) {
			domMap.append('<img style="top:'+(w*32)+'px; left:'+(h*32)+'px; z-index:1;" src="./img/plain.png" i="'+w+'-'+h+'" class="sprite '+cssMap[w][h]+'">');
		}
	}

	for(var w=0;w<utilMap.length;w++) {
		for(var h=0;h<utilMap[w].length;h++) {
			var utilTitle = utilMap[w][h];
			if(utilTitle!="") {
				domMap.append('<img style="top:'+(w*32)+'px; left:'+(h*32)+'px; z-index:2;" src="./img/plain.png" i="'+utilTitle+'" class="spriteUtils '+utilTitle+'">');
			}
		}
	}

	var allPlayers = conent["allPlayers"];
	console.log(allPlayers);
	for(var id in allPlayers) {
		addNewPlayer(allPlayers[id], id);
	}
});

function addNewPlayer(player, id) {
	if($("#"+id).length==0)
		$("body").append('<div class="player" id="'+id+'" style="position:absolute; top:'+player["y"]+'px; left:'+player["x"]+'px; width:5px; height:5px; background:red; z-index:100;"><img class="default_ship" src="./img/default_ship.png"></div>');
}

socket.on('setpos', function (allPlayers) {
	window.requestAnimationFrame(function() {
		for(var id in allPlayers) {
			var player = allPlayers[id];
			if(ownId === id) {
				window.scrollTo(player["x"]-$(window).width()/2, player["y"]-$(window).height()/3);
			}
			var playerElement = $("#"+id);
			if(playerElement.length==1) {
				var oldPosY = Math.floor(parseFloat($("#"+id).css("top").split("px")[0]));
				var oldPosX = Math.floor(parseFloat($("#"+id).css("left").split("px")[0]));
				var playerX = Math.floor(player["x"]);
				var playerY = Math.floor(player["y"]);
				
				if(oldPosY != playerY || oldPosX != playerX) {
					var top2Btn = 0;
					var left2right = 0;
					if(oldPosY > playerY) {
						top2Btn = -1;
					} else if(oldPosY < playerY) {
						top2Btn = 1;
					}
					if(oldPosX > playerX) {
						left2right = -1;
					} else if(oldPosX < playerX) {
						left2right = 1;
					}
					var angle = Math.atan2(top2Btn, left2right);
					playerElement.css({"top":player["y"],"left":player["x"], "-webkit-transform" : "rotate("+angle+"rad)"});
				}
			}
		}
	});
});

socket.on('newPlayer', function (newPlayer) {
	var player = newPlayer["player"];
	var id = newPlayer["id"];
	addNewPlayer(player, id);
});	

socket.on('playerDisc', function (id) {
	$("#"+id).remove();
});	


$(document).ready(function() {
	var viewportmeta = document.querySelector('meta[name="viewport"]');
    viewportmeta.content = 'user-scalable=NO, width=device-width, initial-scale=1.0';
    window.scrollTo(0, 0);
    var keys = {};
	
	$(document).keydown(function(event) {
		if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109'  || event.which == '187'  || event.which == '189'  ) ) {
		        event.preventDefault();
		} 
		var key = event.which;
		if(key==37||key==38||key==39||key==40)
			event.preventDefault();
		if(!keys[key]) {
			socket.emit("keyDown",  key);
			keys[key] = true;
		}		
	});

	$( document ).keyup(function( event ) {
		var key = event.which;
		socket.emit("keyUp", key );
		keys[key] = false;
	});

	$(window).bind('mousewheel DOMMouseScroll', function (event) {
	       if (event.ctrlKey == true) {
	       		event.preventDefault();
	       }
	});

});