<!DOCTYPE html>
<html class="login-bg">
<head>
<title><?=$title?></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />

<!-- bootstrap -->
<link href="View/public/css/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="View/public/css/bootstrap/bootstrap-responsive.css"
	rel="stylesheet" />
<link href="View/public/css/bootstrap/bootstrap-overrides.css"
	type="text/css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="View/public/css/layout.css" />
<link rel="stylesheet" type="text/css"
	href="View/public/css/elements.css" />
<link rel="stylesheet" type="text/css" href="View/public/css/icons.css" />
<link rel="stylesheet" type="text/css"
	href="View/public/css/lib/font-awesome.css" />
<link rel="stylesheet" href="View/public/css/compiled/signup.css"
	type="text/css" media="screen" />
<style type="text/css">
#wizard {
	border: 5px solid transparent;
	font-size: 12px;
	height: 450px;
	margin: 20px auto;
	width: 88%;
	overflow: hidden;
	position: relative;
}

#wizard .items {
	width: 100000px;
	clear: both;
	position: absolute;
}

#wizard .right {
	float: right;
}

#wizard #status {
	height: 35px;
	background: transparent;
	padding-left: 25px !important;
}

#status li {
	float: right;
	color: #fff;
	padding: 10px 30px;
	color: black
}

#status li.active {
	background-color: transparent;
	font-weight: normal;
	color: black
}

.input {
	width: 1200px;
	height: 28px;
	margin: 10px auto;
	line-height: 20px;
	border: 1px solid #d3d3d3;
	padding: 2px
}

.page {
	padding: 20px 30px;
	width: 500px;
	float: left;
}

.page p {
	line-height: 24px;
}

.page p label {
	font-size: 14px;
	display: block;
}

.btn_nav {
	height: 36px;
	line-height: 36px;
	margin: 20px auto;
}

.yz {
	display: none;
}
</style>
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div class="header">
		<a href="index.html"> <img src="View/public/img/logo.png" class="logo" />
		</a>
	</div>
	<div class="row-fluid login-wrapper col-xs-12 col-md-12 col-lg-12">
		<div class="box">
			<div class="content-wrap">
				<h6>找回密码</h6>
				<form method="post" name="from1"
					class=" col-xs-12 col-md-12 col-lg-12">
					<div id="wizard">
						<div class="items">
							<div class="page">
								<h6>
									第一步<br />
									<em>填写验证码来确认这个是否你所绑定的邮箱</em>
								</h6>
								<input class="span12" type="text" placeholder="邮箱地址" id="email" />
								<div class="btn_nav">
									<div id="text">
										<input type="button" id="send" class="right btn  btn-primary"
											style="float: left" value="发送验证码" />
									</div>
									<input type="button" id="step"
										class="next yz right btn  btn-primary" value="下一步&raquo;" />
								</div>
								<div id="yz"></div>
								<div id="status"></div>
								<div id="bt"></div>
							</div>
							<div class="page">
								<h6>
									第二步<br />
									<em>请填写你所要设定的新密码</em>
								</h6>
								<input class="span12" type="text" placeholder="玩家账号"
									id="username" disabled='disabled' name='user'> <input
									class="span12" type="text" placeholder="新的密码" id="pass1"
									name='pass' /> <input class="span12" type="text"
									placeholder="重复输入密码" id="pass2" />
								<div class="btn_nav">
									<!--
                  <input type="button" class="prev btn  btn-primary" style="float:left" value="&laquo;上一步" />-->
									<input type="button" class="next right btn  btn-primary"
										value="下一步&raquo;" />
								</div>
							</div>
							<div class="page">
								<h6>
									第三步<br />
									<em>点击确定完成密码更换操作。</em>
								</h6>
								<br />
								<div id="info"></div>
								<br />
								<div class="btn_nav">
									<!--
                  <input type="button" class="btn  btn-primary prev" style="float:left" value="&laquo;上一步" />-->
									<input type="button" class="btn  btn-primary " id="sub"
										onclick="updatepass()" value="确定" />
								</div>
							</div>
						</div>
					</div>
				</form>

			</div>
		</div>

		<div class="span4 already">
			<p>已经有了帐号?</p>
			<a href="signin.html">点击这里登陆</a>
		</div>
	</div>

	<!-- scripts -->
	<script src="View/public/js/jquery-1.7.2.min.js"></script>
	<script src="View/public/js/bootstrap.min.js"></script>
	<script src="View/public/js/theme.js"></script>
	<script src="View/public/js/scrollable.js"></script>
	<script type="text/javascript">
function check(){
	var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;
	var email = $("#email").val();
	if(email==""){
		alert("请输入邮箱地址！");
		return false;
		}else if(!Regex.test(email)){
                alert("邮箱格式不对");
                $('#email').val("");
                return false;
    }
	$.ajax({type:"GET", data:{mail:email}, dataType:"json", url:"<?=Url('retrieve','checkmail')?>", cache:false,
		success:function(i){
			switch(i.status){
				case "success":
                $.each(i.info,function(c,b){
					    $.ajax({ type:"GET", data:{mail:email}, dataType:"json", url:"<?=Url('retrieve','send')?>",  
                        success:function(t){
						  switch(t.status){
							  case "success" :;
                                $("#username").val(b.username);
								$("#yz").html('<input type="button" id="statu" onclick="statu_mail()" class="right btn  btn-primary" style="float:left" value="验证邮箱"/>');
								$("#send").eq(0).addClass('yz');
								$("#email").attr("disabled","disabled");
								$('div#status').eq(0).html($('div#status').html()+"邮件已发送").clearQueue().fadeIn().fadeOut(2000);
								$("#text").html($("#text").html()+'<input name="key" class="span12" type="text" placeholder="验证码" id="key" />')
								//$("#status").html("邮箱验证成功<br>当前邮箱绑定帐号:<div id='account'>"+b.username+"</div>");
							  break;
							  case "error" : alert("验证邮件发送失败"); return; break;
						    }  
					    }					   
				    })
				})
				break;
				case "error": alert(i.info); return; break;
			}
		}
	})	
}
function statu_mail(){
	if($("#key").val() == ""){
		alert("验证码不能为空");
		return;
	}
	$.ajax({ url:"<?=Url('retrieve','status')?>", type:"POST", data:{mail:$("#email").val(), key:$("#key").val()}, dataType:"json",
		success:function(r){
			switch(r.status){
			   case "success": 
			        alert(r.info);
					$("#statu").eq(0).addClass('yz'); 
					$("#step").eq(0).removeClass("yz").clearQueue().fadeIn(2000);
					$("#key").attr("disabled","disabled");
				break;
               case "error": alert(r.info); return; break;			   
			}			
		}
	})
}
function load(){
	var serialize = document.forms['from1'];
    var html = '<div style="float:center">游戏账号:<div id="name">'+serialize.user.value+'<input type="hidden" id="hidden_name" value="'+serialize.user.value+'"></div><br>'+
	           '更改后的密码:<div id="password">'+serialize.pass.value+'<input type="hidden" id="hidden_pass" value="'+serialize.pass.value+'"></div></div>';
	$("#info").append(html);

}
function updatepass(){
		$.ajax({
    	   type:"POST",
    	   data:{user:$("#hidden_name").val(),mail:$("#email").val(),type:"forge",pass:$("#hidden_pass").val()},
    	   dataType:"json",
    	   url:'<?=Url('user_public','forge')?>',
    	   success:function(data){
			   switch(data.status){
				   case "success": alert(data.info);  window.location.href = "<?=Url('index','login')?>"; break;
				   case "error": alert(data.info); return false; break;
		        }
            }
		})
}
$(function(){
	$("#wizard").scrollable({
		onBeforeSeek:function(event,i){
			switch(i){
				case 1 : 
	              var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;
	              var email = $("#email").val();
				  var from = document.forms['from1'];
	              if(email==""){ alert("请输入邮箱地址！"); return false;}
				  else if(!Regex.test(email)){ alert("邮箱格式不对");  $('#email').val(""); return false; }
				  else if(from.key == null){ alert("请先验证邮箱才能执行下一步"); return false;}else{ 
				       if($("#key").val() == ""){ alert("请输入验证码！"); return false; }}		
				break;
				case 2 :
				   var pass = $("#pass1").val();
				   var pass1 = $("#pass2").val();
				    if(pass==""){ alert("请输入密码！"); return false;
				    }else if(pass1 != pass){ alert("两次密码不一致！"); return false;
				    }else if(pass.length < 6){ alert("密码长度不能低于6位"); return false;}
					load();
				break;
				case 3 :

				break;
			}
		}
	});
	$("#send").click(function(){
		check();
	})
});
	   
  </script>
</body>
</html>