<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>即时信息 - <!--#include project_name--></title>
<link type="text/css" href="/css/base.css" rel="stylesheet" />	
<link type="text/css" href="/css/cleditor.css" rel="stylesheet" />	
<script src="/jquery/jquery.min.js" type="text/javascript"></script>
<script src="/jquery/jquery-ui.min.js" type="text/javascript"></script>
<script src="/jquery/jquery.cleditor.min.js" type="text/javascript"></script>
<script src="/jquery/common.min.js" type="text/javascript"></script>

<script type="text/javascript">
	function isIE6()
	{
    	if ($.browser.msie){
        	if ($.browser.version == "6.0") return true;
	      }
    	return false;
	}
	function adjust_layout()
	{
		var work_height = $(window).height()-32-28-6;
		$("#navigator").height(work_height);
		$("#content").height(work_height + 5);
		$("#userlist").height(work_height);
		if (work_height > 170){
			$("#text_panel").height(work_height - 170);
		  }
	}
	function update_message()
	{
		$.ajax({
			type: "GET",
			url: "/get_new_message",
			async: false,
			data:{group:current_group, last_message:last_message_id, last_state:last_user_state},
			dataType: "json",
			success: function(data){
				var new_message = data["message"];
				if (new_message != null){
					var content = '';
					$.each(new_message, function(i, item){
						if (last_message_date != item["date"]){
							last_message_date = item["date"];
							content += "<div class='date'><span>日期: " + last_message_date + "</span></div>";
						  }
						content += "<div class='info'><span>" + item["username"] + "</span><span>" + item["time"] + "</span></div><div class='text'>" + item["content"] + "</div>";
					  });
					if (content.length > 0){
						$("#text_panel").append(content);
						$("#text_panel").scrollTop($("#text_panel")[0].scrollHeight);
					  }
					last_message_id = data["last_message"];
				  }
				var userlist = data["userlist"];
				if (userlist != null){
					var content = '';
					$.each(userlist, function(i, item){
						content += "<li>";
						content += item["name"];
						content += "</li>";
					  });
					$("#userlist ul").html(content);
					last_user_state = data["last_state"];
				  }
			}
		});
	}
	function on_timer()
	{
		timer_click = timer_click + 1;
		if (timer_click >= 3){
			update_message();
			timer_click = 0;
		  }
		// next
		setTimeout("on_timer()", 1000);
	}

	$(function(){
		// note: 1em = 16px, 100%, 12pt
		var work_height = $(window).height()-32-28-8;
		$("#navigator").height(work_height + "px");
		$("#content").height(work_height + "px");

		// disable cache
		$.ajaxSetup({cache: false});

		// function to resize content areas when window is resized
		$(window).resize(function(){
			adjust_layout();
	    });

		// load navigator
		$("#navigator").load("/navigator?id=5");
		$("#user").load("/user_panel", function(){$("#login").click(function(){login();});$("#logout").click(function(){logout();});});
		
		$("#collapse").click(function(){
			var $nav = $("#navigator");
			var $link = $("#collapse a");
			if ($nav.is(":visible")){
				$nav.hide();
				$link.html("&gt;&gt;&gt;").attr("title","展开导航窗口");
			  }else{
				$nav.show();
				$link.html("&lt;&lt;&lt;").attr("title","折叠导航窗口");
			  }
			adjust_layout();
			$(window).resize();
			return false;
		});

		// buttons
		$("button", ".button_panel").button();
		$("#send_message").click(function(){
			var content = $.trim($("#input").val());
			if (content.length > 0){
				$.ajax({
					type: "POST",
					url: "/send_message",
					async: false,
					data: {group:current_group, content:content},
					dataType: "text",
					success: function(data, status){
						// check result
						if (data.substr(0,1) == ">"){
							update_message();
					      	$("#input").val("").blur();
					      	editor.focus();
						  }else{
							alert(data);
							editor.focus();
						  }
					  },
					error: function(){
						alert("无法发送信息。");
						editor.focus();
					  }
				  });
			  }
		});
		$("#show_history").click(function(){
			location.href="/message/history/"+current_group;
		});

		// editor
		if (isIE6()){
			document.execCommand("BackgroundImageCache",false,true);
		  }
		editor = $('#input').cleditor({
				width:		'100%',
				height:     128,
				controls:   'bold italic underline strikethrough subscript superscript | font size style | color highlight removeformat | bullets numbering | alignleft center alignright justify | rule icon image link unlink | source',
				colors:     'FFF FCC FC9 FF9 FFC 9F9 9FF CFF CCF FCF CCC F66 F96 FF6 FF3 6F9 3FF 6FF 99F F9F BBB F00 F90 FC6 FF0 3F3 6CC 3CF 66C C6C 999 C00 F60 FC3 FC0 3C0 0CC 36F 63F C3C 666 900 C60 C93 990 090 399 33F 60C 939 333 600 930 963 660 060 366 009 339 636 000 300 630 633 330 030 033 006 309 303',
				fonts:      '宋体,楷体,黑体,幼圆,隶书,Arial,Arial Black,Comic Sans MS,Courier New,Narrow,Garamond,Georgia,Impact,Sans Serif,Serif,Tahoma,Trebuchet MS,Verdana',
				sizes:      '1,2,3,4,5,6,7',
				styles:     [['Paragraph', '<p>'], ['Header 1', '<h1>'], ['Header 2', '<h2>'], ['Header 3', '<h3>'],  ['Header 4','<h4>'],  ['Header 5','<h5>'], ['Header 6','<h6>']],
				useCSS:   	false,
				bodyStyle:  'margin:4px; font:10pt Arial,Verdana; cursor:text'
		});
		
		// initialize variables
		last_message_id = 0, last_user_state = 0;
		last_message_date = '';
		<!--#include init_variables-->

		// initialize timer
		timer_click = 2;
		setTimeout("on_timer()", 100);
		
		// adjust layout
		adjust_layout();
		
		// set focus
		editor.focus();
	});
</script>
<style type="text/css">
	html,body{margin:0; padding:0;}
	html{overflow:visible;}
	body{font-size:11pt;min-width:500px;overflow-y:hidden !important; overflow-x:auto !important;}
	
	#banner #logo{font:200% 黑体; float:left; padding:3px 5px 0}
	#banner #user{font:80% 宋体; float:right; padding:5px 8px}

	#user a{text-decoration:none;}
	#user span{margin:2px 0 0 5px;}

	#menubar{background-color:#555; clear:both; height:28px}
	#menubar #collapse{padding:3px 0 0 0; float:left; color:#fff;}
	#menubar a:link, #menubar a:visited{color:white; text-decoration:none; vertical-align:middle;}
	#menubar a:hover{color:red;}
	#menubar #collapse a{font-weight:bold;}
	#menubar ul{padding:3px 10px 3px 5px; margin:0; text-align: right}
	#menubar li{padding:0 5px; font:90% "黑体"; color:#fff; display:inline}
	
	#navigator{font:宋体; width:160px; float:left; margin:5px; padding:5px;}
	#navigator a{display:block; width:125px; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:2.5px;}
	#navigator a:link, #navigator a:visited{font:80% "宋体";padding:0;}
	
	#content{font-size:80%;padding-left:5px; margin:0; overflow:hidden; display:block;}
	#text_panel{font:10pt Arial,Verdana;width:100%;padding:1px;border: 1px solid #888;}
	
	#text_panel .date span{font:90% 宋体;font-weight:bold;color:#39f;margin-left:3px;}
	#text_panel .date{margin:5px 10px 5px 0;border-bottom:1px solid #39f;}
	#text_panel .info span{font:95% 宋体;margin:0 3px;color:#33f;}
	#text_panel .text{margin-bottom:5px;margin-left:1em;}
	
	.button_panel{font:75% 宋体;margin:5px 2px;}
	.button_panel .ui-button {position: static;}
	
	#userlist ul{margin:5px 0 0 0;padding-left:8px;}
	#userlist li{list-style-type:none; margin-bottom:1px;}

	.ui-dialog-title{font-size:80%;padding:0;}
	.ui-dialog fieldset { padding:0; border:0; margin-top:10px; }
	.ui-dialog form div { margin:5px 0;}
	.ui-dialog .ui-dialog-buttonpane{margin:0.2em 0 0; padding:0.2em 1em 0.1em 0.4em;}
	.ui-dialog .ui-dialog-buttonpane button{margin:0.2em 0.4em 0.1em 0; padding:0;}
	.ui-widget .ui-widget{ font-size: 0.7em;}
</style>
</head>
<body id="home">
<div id="banner">
	<div id="logo">雪人CAT网络协同翻译平台</div>
	<div id="user">
	</div>
</div>
<div id="menubar">
	<ul>
		<li id="collapse"><a href="#" title="折叠导航窗口">&lt;&lt;&lt;</a></li>
		<li><a href="/index.htm" id="homepage">首页</a></li>
		<li><a href="/project.htm" id="project">项目</a></li>
		<li><a href="/articles/all/list" id="document">文档</a></li>
		<li><a href="/forum.htm" id="discuss">论坛</a></li>
		<li><a href="/message.htm" id="message">通讯</a></li>
		<li><a href="/help.htm" id="help">帮助</a></li>
	</ul>
</div>
<div class="ui-widget ui-state-default ui-corner-all" id="navigator"></div>
<div id="content">
	<div style="float:right;width:120px;height:0px;">
		<div id='userlist' style='border-left:1px solid #ccc;'>
			<div style='font-weight:bold;padding:5px 10px;background-color:#39f;color:white;'>在线用户</div>
			<ul/>
		</div>
	</div>
	<div id='discuss' style='margin-right:128px;clear:none;'>
		<div id='text_panel' style='overflow:auto;'>
		</div>
		<textarea id='input' name='input'></textarea>
		<div>
			<div class="button_panel" style="float:left;">
				<button id="send_message">发送</button>
			</div>
			<div class="button_panel" style="float:right;">
				<button id="show_history">历史记录</button>
			</div>
		</div>
	</div>
</div>
<div id="dialog"></div>
</body>
</html>
