Index: binary-improvements/webserver/js/index.js
===================================================================
--- binary-improvements/webserver/js/index.js	(revision 157)
+++ binary-improvements/webserver/js/index.js	(revision 163)
@@ -3,4 +3,10 @@
 var TILESIZE = 128;
 var MAXZOOM = 4;
+
+var BAG_COLS = 8;
+var BAG_ROWS = 4;
+var BELT_COLS = 8;
+var INV_ITEM_WIDTH = 58;
+var INV_ITEM_HEIGHT = 40;
 
 SDTD_Projection = {
@@ -148,4 +154,65 @@
 var playersMappingList = {};
 
+var showInv = function(steamid) {
+	$.getJSON( "../api/getplayerinventory", { steamid: steamid  })
+	.done(function(data) {
+		$("#invPlayerName").text(playersMappingList[steamid].name);
+		for (var y = 0; y < BAG_ROWS; y++) {
+			for (var x = 0; x < BAG_COLS; x++) {
+				if (data.bag[y*BAG_COLS+x].count > 0) {
+					$("#bagField"+x+"_"+y).attr("style", "background-image: url(itemimages/" + data.bag[y*BAG_COLS+x].name + ".png);");
+					$("#bagFieldText"+x+"_"+y).text(data.bag[y*BAG_COLS+x].count);
+				} else {
+					$("#bagField"+x+"_"+y).attr("style", "background-image: none;");
+					$("#bagFieldText"+x+"_"+y).text("");
+				}
+			}
+		}
+
+		for (var x = 0; x < BELT_COLS; x++) {
+			if (data.belt[x].count > 0) {
+				$("#beltField"+x).attr("style", "background-image: url(itemimages/" + data.belt[x].name + ".png);");
+				$("#beltFieldText"+x).text(data.belt[x].count);
+			} else {
+				$("#beltField"+x).attr("style", "background-image: none;");
+				$("#beltFieldText"+x).text("");
+			}
+		}
+
+		$( "#dialog-message" ).dialog({
+			modal: true,
+			width: BAG_COLS*INV_ITEM_WIDTH + 60,
+			buttons: {
+				Ok: function() {
+					$( this ).dialog( "close" );
+				}
+			}
+		});
+	})
+	.fail(function() {
+		console.log("Error fetching player inventory");
+	})
+	.always(function() {
+	});
+};
+
+for (var y = 0; y < BAG_ROWS; y++) {
+	$("#bagTable").append("<tr id=\"bagRow"+y+"\"></tr>");
+	for (var x = 0; x < BAG_COLS; x++) {
+		$("#bagRow"+y).append(
+			"<td class=\"invField\" id=\"bagField"+x+"_"+y+"\">" +
+			"<span class=\"invFieldText\" id=\"bagFieldText"+x+"_"+y+"\"></span>" +
+			"</td>");
+	}
+}
+
+$("#beltTable").append("<tr id=\"beltRow0\"></tr>");
+for (var x = 0; x < BELT_COLS; x++) {
+	$("#beltRow0").append(
+		"<td class=\"invField\" id=\"beltField"+x+"\">" +
+		"<span class=\"invFieldText\" id=\"beltFieldText"+x+"\"></span>" +
+		"</td>");
+}
+
 var setPlayerMarkers = function(data) {
 	var online = 0;
@@ -157,5 +224,8 @@
 			marker.setLatLng([val.position.z, val.position.x]);
 		} else {
-			marker = L.marker([val.position.z, val.position.x]).bindPopup(val.name);
+			marker = L.marker([val.position.z, val.position.x]).bindPopup(
+				"Player: " + val.name + "<br/>" +
+				"<a onClick='showInv(\""+val.steamid+"\")'>Show inventory</a>" 
+			);
 			playersMappingList[val.steamid] = { online: !val.online };
 		}