var socket = io();

socket.on('connect', function () {
	console.log("connect!");
	socket.emit("getmap", 100, 100);
});

socket.on('getmap', function (conent) {
	var cssMap = conent["cssMap"];
	var 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++) {
			if(utilMap[w][h]!="") {
				console.log("FLOWER");
				domMap.append('<img style="top:'+(w*32)+'px; left:'+(h*32)+'px; z-index:2;" src="./img/plain.png" i="'+utilMap[w][h]+'" class="spriteUtils '+utilMap[w][h]+'">');
			}
		}
	}
});