<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src = "js/jquery-1[1].3.2.js"></script>
	<style type="text/css">
		body{
			margin: 0;
			padding:0;
			font-size: 12px;			
		}
		#messagewindow{
			height: :250px;
			border: 1px solid;
			padding:5px;
			overflow:quto;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			timestamp = 0;
			updateMsg();
			$("#chatform").submit(function(){			
				$.post("MessageServlet",{
				
					message:$("#msg").val(),
					name:$("#author").val(),
					action:"postmsg",
					time:timestamp
				},function(xml){
					$("msg").val("");
					addMessages(xml);
					});
				return false;					
			
			});
		});
		function updateMsg(){
			$.post("MessageServlet",{time:timestamp},function(xml){
				$("#loading").remove();
				addMessages(xml);				
			});
			setTimeout('updateMsg()',4000);			
		}
		function addMessages(xml){
			if($("status",xml).text()=="2")
				return;
			timestamp = $("time",xml).text();
			$("message",xml).each(function(){
				var author = $("user",this).text();
				var content = $("text",this).text();
				var htmlcode = "<strong>"+author+"</strong>:"+content+"<br>";
				$("#messagewindow").append(htmlcode);
			});
		}
	</script>
  </head>
  
  <body>
    <div id = "wrapper">
    	<p id = "messagewindow"><span id = "loading">加载中。。。</span></p>
    	<form id="chatform" method="post">
    		姓名：<input type="text" id = "author" size="50"/><br>
			内容：<input type = "text" id = "msg" size="50"/><br>
			<input type = "submit" value="发送"/><br>
    	</form>
    </div>
  </body>
</html>
