<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>发件箱</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 adjust_content_width()
	{
    	if ($.browser.msie){
        	if ($.browser.version != "6.0"){
				var content_parent = document.getElementById("mail").parentNode;
				$("#mail").width(content_parent.offsetHeight > content_parent.scrollHeight ? '100%' : parseInt(content_parent.clientWidth) - 20);
			  }
		  }
	}

	function send_mail(dialog_title, receiver, message_title)
	{
		if (dialog_title.length == 0) dialog_title = "发送邮件";
		$("#edit_dialog").dialog({
			modal: true,
			resizable:false,
			width: 700,
			height: 450,
			title: dialog_title,
			buttons:{
				"确定": function(){
					var receiver = $.trim($("#receiver").val());
					if (receiver.length > 0){
						var new_title = $.trim($("#title").val());
						if (new_title.length > 0){
							var content = $.trim($("#edit_dialog #text_editor").val());
							if (content.length > 0){
								$.ajax({
									type: "POST",
									url: "/send_mail",
									async: false,
									data: {user_name:receiver, title:new_title, content: content},
									dataType: "text",
									success: function(data, status){
										// check result
										if (data.substr(0,1) == ">"){
											// refresh
											window.location.reload();
						  				  }else{
											alert(data);
											$("#input").focus();
							  			  }
					  				},
									error: function(){
										alert("无法发送邮件。");
					  				}
					  			});
							  }else{
								alert("内容未输入。");
								$("#edit_dialog #text_editor").focus();
							  }
						  }else{
							alert("标题未输入。");
							$("#title").focus();
						  }
					  }else{
						alert("收件人未输入。");
						$("#receiver").focus();
					  }
				  }
			},
			open: function(){
				$(this).html('<div class="ui-widget"><table cellpadding="0" cellspacing="0" border="0" width="100%" style="margin:0 0 5px 0;"><tr><td width="50px">收件人:</td><td width="21%"><input id="receiver" type="text" style="width:90%"/></td><td width="60px">邮件标题:</td><td width="*"><input id="title" type="text" style="width:408px"/></td></tr></table></div><textarea id="text_editor" name="text_editor"></textarea>');
				var editor = $("#edit_dialog #text_editor").cleditor({
					width:		660,
   					height:     320,
	        	  	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, // use CSS to style HTML when possible (not supported in ie)
   					bodyStyle:  "margin:4px; font:10pt Arial,Verdana; cursor:text"
		      	});
				if (receiver.length > 0){
					$("#receiver").val(receiver);
				  }
				if (message_title.length > 0){
					$("#title").val(message_title);
				  }
				if (receiver.length > 0){
					if (message_title.length > 0){
						editor.focus();
					  }else{
					  	$("#title").focus();
					  }
				  }else{
					$("#receiver").focus();
				  }
			}
		});
	}
	function show_mail(record, message_id)
	{
		var current = record.parent().parent().parent();
		if (!current.hasClass('expanded')){
			$.ajax({
				type: "GET",
				url: "/get_mail",
				async: false,
  				data: {id: message_id},
				dataType: "json",
				success: function(data){
					// show content
					$("<tr><td>&nbsp;</td><td colspan='3'>" + data["content"] + "</td></tr>").insertAfter(current);
					current.addClass('expanded');
					// update state
					if ((data["state"] & 0x100) != 0){
						if (record.parent().parent().children().hasClass("ui-icon-mail-closed")){
							record.parent().parent().children().removeClass('ui-icon-mail-closed').addClass('ui-icon-mail-open');
						  }
					  }
				}
			});
		  }
	}
	function remove_mail(message_id)
	{
		if (confirm("确认删除所选的邮件?") == true){
			$.ajax({
				type: "GET",
				url: "/remove_mail",
				async: false,
	  			data: {id: message_id},
				dataType: "text",
				success: function(data, status){
					// check result
					if (data.substr(0,1) == ">"){
						// refresh
						window.location.reload();
  					  }else{
						alert(data);
	  				  }
				},
				error: function(){
					alert("无法删除邮件。");
				}
			});
		  }
	}
	
	$(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(){
			var work_height = $(window).height()-32-28-8;
			$("#navigator").height(work_height + "px");
			$("#content").height(work_height + "px");
			adjust_content_width();
	    });

		// 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","折叠导航窗口");
			  }
			return false;
		});

		// buttons
		$("button", ".button_panel").button();
		$('#new_mail').click(function(){
			send_mail("", "", "");
			return false;
		});

		//initalize page nav
		pageNav.pre="上一页";
		pageNav.next="下一页";
		<!--#include page_nav-->

		// adjust content width
		adjust_content_width();
	});
</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:0 5px; margin:0;overflow:auto;}
	
	.button_panel{font:80% 宋体; margin: 5px 2px; float: left; clear: both;}

	.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;}

	.ui-icon-red{ width: 16px; height: 16px; background-image: url(/css/images/ui-icons_cc0000_256x240.png);}

	#dialog{font-size:70%;margin:0}
	#dialog label{ float:left; width:7em; text-align:right;}
	#dialog input, select{ padding:1px 1px; border:1px solid #ccc; width:65%;}

	table#mail{border-top: 1px solid #aaa;clear:both;}
	#mail thead th{font-weight:normal;line-height:1.6em;border-bottom: 1px solid #aaa;background-color:#eee;padding-top:2px;}
	#mail td{border-bottom:1px dotted #aaa;}
	#mail td{padding-top: 3px;padding-bottom: 3px;}
	#mail tbody tr:hover{background-color:#f8f8f8;}
	#mail tbody a{text-decoration:none;color:#000;}
	#mail tbody .op a{color:#00c;}
	#mail tbody span{vertical-align:middle;}

	#footer #page{float:right;}
	#footer .ui-button {position: static;}

	.pageNum{border: 1px solid #aaa;padding:2px 5px;display: inline-block;}
	.cPageNum{font-weight: bold;padding:2px 5px;}
	#pageNav{font-size:90%; margin: 5px 0;}
	#pageNav a{text-decoration:none;color:#333;}
	#pageNav a:hover{text-decoration:none;background:#fff4d8;}
</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 id='mail'>
		<table id='topic_list' width='100%' cellspacing='0'>
			<thead>
				<tr>
					<th width="10%">收件人</th>
					<th width="*">标题</th>
					<th width="18%">时间</th>
					<th width="80px">操作</th>
				</tr>
			</thead>
			<tbody>
				<!--#include topic_list-->
			</tbody>
		</table>
	</div>
	<div id='footer'>
		<div class="button_panel">
			<button id="new_mail">发送邮件</button>
		</div>
		<div id='page'>
			<div id="pageNav"></div>
		</div>
	</div>
</div>
<div id="dialog"></div>
<div id="edit_dialog"></div>
</body>
</html>
