﻿<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="ui/common/header.xsl"?>
<html>
	<head>
		<title>用户注册</title>
		<style type="text/css">
		<![CDATA[
			div#form_container {
				clear:both;
			}
			form#reg_form {
				margin:16px 0;
				width:100%；
			}
			div.reg_form_body {
				margin-left:auto;
				margin-right:auto;
				padding:9px;
				width:700px;
				border:1px solid #efefef;
			}
			div.reg_pop {
				text-align:right;
			}
			div.reg_pop span {
				color:#f00;
			}
			div.list {
				line-height:18px;
				margin-top:8px;
				padding-top:8px;
				clear:both;
				border-top:1px solid #efefef;
			}
			div.list img {
				vertical-align:top;
			}
			div.fieldcontainer {
				width:300px;
				float:left;
			}
			div.fieldcontainer div {
				height:28px;
			}
			div.fieldname {
				width:100px;
				float:left;
				text-align:right;
				line-height:24px;
			}
			div.fieldname span {
				width:100px;
				color:#f00;
			}
			div.fieldbox {
				text-align:left;
				float:left;
				padding:0 5px;
			}
			div.fieldpop {
				float:left;
			}
			div.fieldpop div {
				border:1px solid #999;
				background:#f8f8f8;
				overflow:visible;
				width:360px;
				padding:3px;
				clear:both;
			}
			div.fieldpop span {
				color:#09C;
			}
			div.fieldpop a {
				display:block;
				margin-top:3px;
			}
			div.clear {
				clear: both;
			}
			img#reg_check {
				border:0px;
				cursor:pointer;		
			}
			span#check_pop {
				display:block;
			}
			input#question {
				display:block;
				visibility:hidden;
			}
			div.reg_button {
				text-align:center;
			}
			div#reg_result {
				clear:both;
				text-align:center;
				display:none;
			}
			div.reg_result {
				margin-left:auto;
				margin-right:auto;
				padding:9px;
				width:720px;
				padding:200px 0px;
				border:1px solid #efefef;
			}
			div.reg_result div {
				font-size:14px;
				text-align:left;
				width:300px;
				white-space:nowrap;
				margin-left:auto;
				margin-right:auto;
			}
			p.reg_result_link {
				text-align:center;
			}
			p.reg_result_link a {
				margin:6px;
				clear:both;
			}
		]]>
		</style>
		<script type="text/javascript">
		<![CDATA[
			function checkAccount() {
				var ac = $id("account").value.toLowerCase().trim();
				if(ac.length > 2 && ac.length < 21 && Validator.Account.test(ac)) {
					if(this.lastChecked != ac) {
						this.lastChecked = ac;
						var xmlhttp = new HTTPRequest();
						xmlhttp.send("CheckAccount.aspx","account=" + ac,function(r) {
							if(r.getText().length > 0) {
								checkResult("很遗憾，用户名 " + this.lastChecked + " 已经有人使用", "#f00");
							}
							else {
								checkResult("用户名 " + this.lastChecked + " 可以使用", "#090");
							}
						}.bind(this));
					}
				}
				else {
					checkResult("用户名 " + ac + " 无效", "#f00");
				}
			}
			function checkResult(info,colr) {
				with($id("check_pop")) {
					style.color = colr;
					innerHTML = info;
				}
			}
			function selectQuestion() {
				var question = $id("question");
				question.value = "";
				question.style.visibility = "hidden";
				with(question.form.elements["question1"])
				switch(selectedIndex) {
					case 0:
						break;
					case options.length - 1:
						question.style.visibility = "visible";
						question.focus();
						break;
					default:
						question.value = options[selectedIndex].text;
						break;
				}
			}
			function register(f) {
				var account = f.elements["account"].value;
				$(f).post(function(r) {
					$id("form_container").style.display = "none";
					$id("reg_result").style.display = "block";
					$id("reg_result_link").href = ($id("reg_result_url").innerHTML = host + account + "/") + "#../ui/common/manager.htm";
				});
			}
			window.onload = function() {
        			$id("crc_img").src="CRCImage.aspx?mod=reg&" + (new Date()).getTime();
				selectQuestion;
			}		
			window.focus();
		]]>
		</script>
	</head>
	<body>
	<![CDATA[
	<div id="form_container">
		<form id="reg_form" action="register.aspx" method="post" onsubmit="return false">
			<div class="reg_form_body">
				<div class="reg_pop">带有<span>*</span>的项目必须填写。</div>
				<div class="list">
					<div class="fieldcontainer">
						<div class="fieldname"><span>*</span>用户名：</div>
						<div class="fieldbox">
							<input type="text" id="account" maxlength="20" name="account" onblur="checkAccount()" style="ime-mode:disabled" dataType="Account" min="3" max="20" msg="用户名必须是3到20个字母、数字、点号、减号或下划线！" />
							<span id="check_pop"></span>
						</div>
					</div>
					<div class="fieldpop">
						<div>
							1.由 <span>字母a～z</span> (不区分大小写)、 <span>数字0～9</span> 、<span>减号</span> 或 <span>下划线</span> 组成 <br />
							2. 只能以 <span>字母</span> 或 <span>数字</span> 开头和结尾<br />
			  		  		3.用户名长度为 <span>3～20</span> 个字符
			  		  	</div>
			  		</div>
					<div class="clear"></div>
				</div>
				<div class="list">
					<div class="fieldcontainer">
						<div class="fieldname"><span>*</span>登录密码：</div>
						<div class="fieldbox">
							<input type="password" name="pwd" min="6" max="32" msg="密码长度必须是 6～32位" />
						</div>
						<div class="fieldname"><span>*</span>确认密码：</div>
						<div class="fieldbox">
							<input type="password" name="Repeat" dataType="Repeat" to="pwd" msg="两次输入的密码不一致" />
						</div>
					</div>
					<div class="fieldpop">
						<div>
							密码长度必须是<span>6～32</span>位，字母区分大小写
						</div>
				  	</div>
					<div class="clear"></div>
				</div>
				<div class="list">
					<div class="fieldcontainer">
						<div class="fieldname"><span>*</span>博客名称：</div>
						<div class="fieldbox">
							<input type="text" name="name" min="1" max="16" msg="必须输入博客名称" />
						</div>
					</div>
					<div class="fieldpop">
						<div>
							1.博客名称可以是任意 <span>字符</span> 或 <span>符号</span><br />
					  		2.博客名称长度为 <span>1～16</span> 个字符	
						</div>
				  	</div>
					<div class="clear"></div>
				</div>
				<div class="list">
					<div class="fieldcontainer">
						<div class="fieldname"><span>*</span>密码保护问题：</div>
						<div class="fieldbox">
							<select name="question1" class="text" title="密码保护问题" onchange="selectQuestion(this)">
								<option selected="selected">请选择一个问题</option>
								<option>我的座右铭是？</option>
								<option>我就读的小学名称？</option>
								<option>我就读的中学名称？</option>
								<option>我就读的大学名称？</option>
								<option>我爸爸的生日？</option>
								<option>我妈妈的生日？</option>
								<option>我最爱的人是谁？</option>
								<option>我最喜欢的运动？</option>	
								<option>我最喜欢的运动员？</option>
								<option>我最喜爱的东西？</option>	
								<option>我最喜爱的电影？</option>
								<option>我最喜爱的歌曲？</option>
								<option>我最喜爱的食物？</option>
								<option>我最喜欢的小说？</option>
								<option>我的自定义问题</option>
							</select>
						</div>
						<div class="fieldname"></div>
						<div class="fieldbox">
							<input type="text" id="question" name="question" min="1" max="20" msg="请选择或输入密码保护问题，密码保护问题长度必须为5～20个字" />
						</div>
						<div class="fieldname"><span>*</span>您的答案：</div>
						<div class="fieldbox">
						  <input type="text" name="answer" min="2" max="32" msg="答案长度必须是2～20位" />
						</div>
					</div>
					<div class="fieldpop">
					 	<div>
							1.自定义密码保护问题长度必须为<span>5～20</span>个字<br/>
							2.答案长度<span>2～20位</span>，字母<span>区分大小写</span>
						</div>
				  	</div>
					<div class="clear"></div>
				</div>
				<div class="list">
					<div class="fieldcontainer">
						<div class="fieldname"><span>*</span>保密邮箱：</div>
						<div class="fieldbox">
							<input type="text" name="email" maxlength="100" style="ime-mode:disabled" min="1" dataType="Email" msg="邮箱地址不正确！" />
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="list">
					<div class="fieldcontainer">
						<div class="fieldname"><span>*</span>请输入验证码：</div>
						<div class="fieldbox">
							<input type="text" name="crc" style="ime-mode:disabled" dataType="ASCII" min="5" maxlength="5" size="9" msg="必须输入验证码" />
							<img id="crc_img" onclick="this.src='CRCImage.aspx?mod=reg&' + (new Date()).getTime()" />
						</div>
					</div>
					<div class="fieldpop">
						<a href="#" onclick="$id('crc_img').src='CRCImage.aspx?mod=reg&' + (new Date()).getTime();return false;">看不清？</a>
				  	</div>
					<div class="clear"></div>
				</div>
				<div class="list">
					<div class="fieldcontainer">
						<div class="fieldname">
							<input id="agree" name="agree" title="是否同意服务条款" type="checkbox" dataType="Group" msg="您必须同意《用户服务条款》" />
						</div>
						<div class="fieldbox">
							<label for="agree">看过并同意</label>《<a href="agreement.xml" target="_blank"><xsl:value-of select="document('../../host.xml')//configuration/name"/>服务条款</a>》
						</div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="list">
					<div class="reg_button">
						<input type="button" value="注册帐号" onclick="register(this.form)"/>
				  	</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
		</form>
	</div>
	<div id="reg_result">
		<div class="reg_result">
			<div>
				<p>感谢您使用<xsl:value-of select="document('../../host.xml')//configuration/name"/>！</p>
				<p>您的blog地址是：<span id="reg_result_url"></span></p>
				<p class="reg_result_link">
					<a target="_self" href="" id="reg_result_link">立即进入管理</a>
					<a target="_self" href=".">返回博客首页</a>
				</p>
			</div>
		</div>
	</div>
	]]>
	</body>
</html>