chat interface added, config option changed from showchatballoons:

ture/false to showchat: balloons/modal

web/chat_style.css

@@ -0,0 +1,58 @@
+#chat {
+	position:absolute;
+	bottom:14px;
+	left:14px;
+	border: 1px solid rgba(0,0,0,0.5);
+	background: rgba(0, 0, 0, 0.6);
+}
+#chatcursor {
+	position:absolute;
+	left:5px;
+	bottom:5px;
+	font-size:10px;
+	color: white;
+	padding:0px;
+}
+#chatinput {
+	margin:4px;
+	width:608px;
+	height:12px;
+	font-family:sans-serif;
+	font-size:10px;
+	padding:1px;
+	padding-left:15px;
+	color: white;
+	border: 0px;
+	background: rgba(0, 0, 0, 0.6);
+}
+#messagelist {
+	margin:4px 4px 0px 4px;
+	width:622px;
+	max-height:198px;
+	font-family:sans-serif;
+	font-size: 10px;
+	padding:1px;
+	color: white;
+	background: rgba(0, 0, 0, 0.6);
+	overflow:hidden;
+	display:none;
+}
+#messagerow {
+	position:relative;
+	left:0px;
+	bottom:0px;
+	max-height:200px;
+	font-family:sans-serif;
+	font-size: 10px;
+	color: white;
+}
+.messageicon {
+	position:relative;
+	left:0px;
+	top:1px;
+}
+.messagetext {
+	position:relative;
+	left:0px;
+	top:-3px;
+}

web/index.html

@@ -12,6 +12,7 @@
 	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 	<link rel="stylesheet" type="text/css" href="dynmap_style.css" media="screen" />
 	<link rel="stylesheet" type="text/css" href="clock_style.css" media="screen" />
+	<link rel="stylesheet" type="text/css" href="chat_style.css" media="screen" />
 	<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
 	<script type="text/javascript" src="jquery.json.js"></script>
 	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
@@ -21,6 +22,7 @@
 	<script type="text/javascript" src="kzedmaps.js"></script>
 	<script type="text/javascript" src="clock.timeofday.js"></script>
 	<script type="text/javascript" src="clock.digital.js"></script> 
+	<script type="text/javascript" src="chat.js"></script> 
 	<script type="text/javascript" src="config.js"></script>
 	<script type="text/javascript">
 	$(document).ready(function() {

web/map.js

@@ -195,6 +195,30 @@ DynMap.prototype = {
 		);
 		compass.initialize();
 		
+		// The chat
+		if (me.options.showchat == 'modal') {
+			var chat = me.chat = $('<div/>')
+				.addClass('chat')
+				.attr({ id: 'chat' })
+				.appendTo(container);
+			var messagelist = me.messagelist = $('<div/>')
+				.addClass('messagelist')
+				.attr({ id: 'messagelist' })
+				.appendTo(chat);
+			var chatinput = me.chatinput = $('<input/>')
+				.addClass('chatinput')
+				.attr({
+					id: 'chatinput',
+					type: 'text',
+					value: 'not working yet'
+				})
+				.appendTo(chat);
+			var chatcursor = me.chatcursor = $('<span/>')
+				.attr({ id: 'chatcursor'})
+				.text('>_')
+				.appendTo(chat);
+		}
+		
 		// TODO: Enable hash-links.
 		/*
 		var link;
@@ -263,7 +287,7 @@ DynMap.prototype = {
 							me.onTileUpdated(update.name);
 						},
 						chat: function() {
-						    if (!me.options.showchatballoons)
+							if (!me.options.showchat)
 						    	return;
 							me.onPlayerChat(update.playerName, update.message);
 						}
@@ -333,6 +357,7 @@ DynMap.prototype = {
 		var map = me.map;
 		var mid = "player_" + playerName;
 		var playerMarker = markers[mid];
+		if (me.options.showchat == 'balloons') {
 			if (playerMarker)
 			{
 				var popup = chatPopups[playerName];
@@ -365,6 +390,51 @@ DynMap.prototype = {
 				popup.infoWindow.open(map, playerMarker);
 				this.chatPopups[playerName] = popup;
 			}
+		} else if (me.options.showchat == 'modal') {
+			var me = this;
+			var messagelist = me.messagelist;
+
+			var messageRow = $('<div/>')
+				.addClass('messagerow')
+
+			var playerIconContainer = $('<span/>')
+				.addClass('messageicon')
+
+				if (me.options.showplayerfacesinmenu) {
+					getMinecraftHead(playerName, 16, function(head) {
+						messageRow.icon = $(head)
+							.addClass('playerIcon')
+							.appendTo(playerIconContainer);
+					});
+				}
+
+			if (playerName != 'Server') {
+				var playerWorldContainer = $('<span/>')
+				 .addClass('messagetext')
+				 .text('['+me.world+']')
+	
+				var playerGroupContainer = $('<span/>')
+				 .addClass('messagetext')
+				 .text('[Group]')
+			}
+
+			var playerNameContainer = $('<span/>')
+				.addClass('messagetext')
+				.text(' '+playerName+': ')
+
+			var playerMessageContainer = $('<span/>')
+				.addClass('messagetext')
+				.text(message)
+
+			messageRow.append(playerIconContainer,playerNameContainer,playerMessageContainer);
+			//messageRow.append(playerIconContainer,playerWorldContainer,playerGroupContainer,playerNameContainer,playerMessageContainer);
+			messagelist.append(messageRow);
+			
+			me.messagelist.show();
+			//var scrollHeight = jQuery(me.messagelist).attr('scrollHeight');
+			var scrollHeight = me.messagelist[0].scrollHeight;
+			messagelist.scrollTop(scrollHeight);
+		}
 	},
 	onTileUpdated: function(tileName) {
 		var me = this;