<?

	include"inc_top.php";

	$MENU_CLASS1 = "li_first_on";
	$MENU_CLASS2 = "li_second";
	$MENU_CLASS3 = "li_second";
	$MENU_CLASS4 = "li_second";
	$MENU_CLASS5 = "li_second";

	require"inc_mypage_menu.php";  //마이페이지 메뉴

	//특별한 상황!! 아이디와 member_code 가 같다면 id 수정해줄수 있어야힘.
	if($row[userid] == $row[member_code]){
		$useridForm = "<button type='button' class='submitIn' onclick='IDFORMCHK();'>登録</button>";
	}else{
		$useridForm = "";
	}


?>

<link rel="stylesheet" type="text/css" href="../sys_css_js/css_mypage.css"/>

<script>

function IDFORMCHK()
{
		$("#id_form2").show();
		$('#user_id').val("<?=$row[userid]?>");
		$("#id_form1").hide();

}

function IDFORMCANCEL()
{
		$("#id_form2").hide();
		$('#user_id').val("");
		$('#notice_id').text("");
		$('#idchk').val("");

		$("#id_form1").show();
}

function emailcheck(strValue)
{
    var regExp =  /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
    //입력을 안했으면
    if(strValue.lenght == 0)
    {return false;}
    //이메일 형식에 맞지않으면
    //if (!strValue.match(regExp))
    //{return false;}
    return true;
}
  //반각 영문으로 사용
  function checkIsZenkaku(value) {
    for (var i = 0; i < value.length; ++i) {
      var c = value.charCodeAt(i);
  //  半角カタカナは不許可
  if (c < 256 || (c >= 0xff61 && c <= 0xff9f)) {
    return false;
  }
}
return true;
}

$(document).ready(function()
{

		//EMAIL 여부 버튼 ======================================
		$("#send_email_ok").click(function(){
				$("#send_email_ok").css({"display":"none"});
				$("#send_email_no").css({"display":"inline-block"});
				$("#emailsend").val("N");
		});

		$("#send_email_no").click(function(){
				$("#send_email_no").css({"display":"none"});
				$("#send_email_ok").css({"display":"inline-block"});
				$("#emailsend").val("Y");
		});

		//여백 클릭시 focus
		$(".int_id").click( function(){ $("#user_id").focus(); })
		$(".int_pw").click( function(){ $("#user_pw").focus(); })
		$(".int_repw").click( function(){ $("#user_repw").focus(); })
		$(".int_nick").click( function(){ $("#user_nick_name").focus(); })
		$(".int_en").click( function(){ $("#en_name").focus(); })
		$(".int_email").click( function(){ $("#email").focus(); })

		//아이디 검사
		$('#user_id').change( function(){
			//alert("vdsdvsd");
			checkUserId();
		});

		function checkUserId(){

			var userID = $('#user_id'), notice = $('#notice_id') ,userIDCHK =  $('#idchk');
			//userIDCHK.val("");
			var str= userID.val();
			var err = 0;
			var ReturnChk;

				if(userID.val() ==""){
					notice.css('color','#E35D63');
					notice.text("必須情報です。");
					userID.focus();
					return false;
				}
				//alert(str.length);
				for (var i=0; i<str.length; i++)  {
					var chk = str.substring(i,i+1);
					if(!chk.match(/[0-9]|[a-z]/)) {
						err = err + 1;
					}
				}
				//alert(err);
				if (err > 0) {
					notice.css('color','#E35D63');
					notice.text("アルファベット(半角小文字）・数字のみ入力可能です。");
					userID.focus();
					return false;
				}
				if (checkIsZenkaku(str)) {
					notice.css('color','#E35D63');
					notice.text("半角小文字でご入力頂きます様お願い致します。");
					userID.focus();
					return false;
				}
				if(str.length >=6){

					$.ajax({
						url:'./idChk.php',
						type:'POST',
						data:({id:userID.val()}),
						dataType:'html',
						async: false,
						success:function(data){
							if(jQuery.trim(data) == '0'){
								notice.css('color','#349DF3');
								notice.text("ステキなIDですね。");//아이디 사용 가능
								userIDCHK.val("1");
								ReturnChk = true;
							}else{
								notice.css('color','#E35D63');
								notice.text("既に使用されているID、または脱退したIDです。"); //아이디를 사용할수 없다.
								userIDCHK.val("");
								userID.focus();
								ReturnChk = false;

								//return false;
							}

						}
					});
					return ReturnChk;
				}else{
					notice.css('color','#E35D63');
					notice.text("IDは6文字以上で入力してください。");
					userIDCHK.val("");
					userID.focus();
					return false;
				}
		}

		function checkPassword(){
				//alert(password);
				var password=$('#user_pw'), notice = $('#pw_notice') , pw_span = $('#pw_span'), pw_img = $('#pw_img');
				var checkNumber = password.val().search(/[0-9]/g);
				var checkEnglish = password.val().search(/[a-z]/ig);
				if(password.val() == "" ){
					password.focus();
					notice.css('color','#E35D63');
					notice.text("必須情報です。");
					return false;
				}
				if(checkNumber <0 || checkEnglish <0){
						notice.css('color','#E35D63');
						pw_span.text('リスク');
						pw_span.css('color','#E35D63');
						pw_img.attr("src","/images/sub/bg_pass4.jpg");
						notice.text("8文字以上の半角英数字、特殊文字を含む");
						//notice.text("숫자와 영문자를 혼용하여야 합니다。");
						password.focus();
						return false;
				}
				if(/(\w)\1\1\1/.test(password.val())){
						notice.css('color','#E35D63');
						pw_span.text('リスク');
						pw_span.css('color','#E35D63');
						pw_img.attr("src","/images/sub/bg_pass4.jpg");
						notice.text("8文字以上の半角英数字、特殊文字を含む");
						//notice.text("같은 문자를 4번 이상 사용하실 수 없습니다。");
						password.focus();
						return false;
				}
				/*
				if(password.search(id) > -1){
						notice.css('color','#E35D63');
						pw_span.text('위험');
						pw_span.css('color','#E35D63');
						pw_img.attr("src","/images/sub/bg_pass4.jpg");
						notice.text("비밀번호에 아이디가 포함되었습니다.");
						$('#user_pw').focus();
						return false;
				}
				*/
				if(!/^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{8,16}$/.test(password.val())){
						notice.css('color','#FF9800');
						pw_span.text('通常'); //보통
						pw_span.css('color','#FF9800');
						pw_img.attr("src","/images/sub/bg_pass3.jpg");
						notice.text("");
						//notice.text("숫자+영문자+특수문자 조합으로 8자리 이상 사용해야 합니다.");
						//$('#user_pw').focus();
						return true;
				}

				notice.css('color','#369EF5');
				pw_span.text('安全');
				pw_span.css('color','#369EF5');
				pw_img.attr("src","/images/sub/bg_pass2.jpg");
				notice.text("");
				return true;
		}

		// re password

		$("#user_repw").change(function(){
				checkRePassword();
		})

		function checkRePassword(){
			var notice = $('#repw_notice');
				if($('#user_repw').val() != $('#user_pw').val()){
						$('#repw_img').attr("src","/images/sub/bg_pass_ck1.jpg");
						notice.css('color','#E35D63');
						notice.text("パスワードが一致しません。");
						$('#user_repw').val('').focus();
						return false;
				}
						notice.text("");
						$('#repw_img').attr("src","/images/sub/bg_pass_ck2.jpg");
		}

		// nick name
		$("#user_nick_name").change(function(){
			checkNickName();
		})

		function checkNickName(){
			var notice = $('#nick_notice'),userNick= $('#user_nick_name');
			var str = userNick.val();
			var ReturnChk;
			if(str ==""){
				notice.css('color','#E35D63');
				notice.text("必須情報です。");
				userNick.focus();
				return false;
			}
			if(str.length >=2){
				$.ajax({
						url:'./nickChk.php',
						type:'POST',
						data:({id:str}),
						dataType:'html',
						async: false,
						success:function(data){
								if(jQuery.trim(data) == '0'){
										notice.css('color','#369EF5');
										notice.text("ご使用可能なニックネームです。");
										$('#nick_img').attr("src","/images/sub/bg_pass_ck2.jpg");
										$('#nickchk').val("1");
										ReturnChk = true;
								}else{
										notice.css('color','#E35D63');
										notice.text("既に使用されているニックネームまたは脱退したニックネームです。");
										$('#nick_img').attr("src","/images/sub/bg_pass_ck1.jpg");
										$('#nickchk').val("");
										userNick.focus();
										ReturnChk = false;
								}
						}
				});
				return ReturnChk;
			}else{
				notice.css('color','#E35D63');
				notice.text("ニックネームは2文字以上で入力してください。");
				$('#nick_img').attr("src","/images/sub/bg_pass_ck1.jpg");
				$('#nickchk').val("");
				userNick.focus();
				return false;
			}
		}

		// 性名(카나)
		$("#kana_name").change(function(){
			checkKanaName();
		})

		function checkKanaName(){
			var notice = $("#kana_notice"),userEn = $("#kana_name");
			var str = userEn.val();
			if(str == "" ){
				notice.css('color','#E35D63');
				notice.text("必須情報です。");
				userEn.focus();
				return false;
			}

				notice.css('color','#369EF5');
				notice.text("");


		}

		// EMAIL
		$("#email").change(function(){
			checkEmail();
		})

		function checkEmail(){
			var userEmail= $("#email"), notice_e=$('#notice_email');
			var str = userEmail.val();
			var ReturnChk;
			if(str == "" ){
				notice_e.css('color','#E35D63');
				notice_e.text("必須情報です。");
				userEmail.focus();
				return false;
			}
			if(emailcheck(str) != false){
				$.ajax({
						url:'./join_email_check.php',
						type:'POST',
						data:({id:str}),
						dataType:'html',
						async: false,
						success:function(data){
								if(jQuery.trim(data) == '0'){
										notice_e.css('color','#369EF5');
										notice_e.text("ご使用可能なメールアドレスです。");
										$('#emailchk').val("1");
										ReturnChk = true;
								}else{
										notice_e.css('color','#E35D63');
										notice_e.text("使用中のメールアドレスです。");
										$('#emailchk').val("");
										userEmail.focus();
										ReturnChk = false;
										return false;

								}
						}
				});
				return ReturnChk;
			}else{
				notice_e.css('color','#E35D63');
				notice_e.text("有効でないメールアドレスです。");
				$('#emailchk').val("");
				userEmail.focus();
				return false;
			}
		}

		$("#btn_join").click(function(){
				joinAction(validateForm());
		})
		function joinAction(val){
			//alert(val);
			if(val != false) {
				$('#form').attr('action','mypage_member_proc.php').submit();
			}
		}

		function validateForm() {

			if(checkNickName() == false){
				//alert("nick : "+checkNickName());
				return false;
			}
			if(checkKanaName() == false){
				//alert("en : "+checkEnName());
				return false;
			}
			if(checkEmail() == false){
				//alert("email : "+checkEmail());
				return false;
			}
		}

		//엔터치면 다음 포커스
		$('input').keydown(function(e) {
			var idx = $('input').index(this);
			if (e.keyCode === 13) {
				$('input').eq(idx+1).focus();
				return false;
			}
		});

					$("#mode").val("A");
					$("#idx").val("<?=$sessionIDX?>");
					$("#user_nick_name").val("<?=$nickName?>");
					$("#kana_name").val("<?=$kana_name?>");
					$("#email").val("<?=$email?>");
					validateForm();
					$("#emailsend").val("<?=$row[email_chk]?>");

					if($("#emailsend").val() == "Y"){
							$("#send_email_no").css({"display":"none"});
							$("#send_email_ok").css({"display":"inline-block"});
					}else{
							$("#send_email_ok").css({"display":"none"});
							$("#send_email_no").css({"display":"inline-block"});
					}





}); //ready funtion



</script>



<SECTION>
 <ARTICLE>

  <div class="article_news_area">

  	<!-- LEFT -->
  	<?=$MYPAGE_LEFT ?>
   <!-- RIGHT -->
   <div class="myp_right">
    <h2>マイページ</h2>

    <div class="myp_right_menu_area">
     <div class="myp_right_menu">
      <?=$MYPAGE_MENU ?>
     </div>
    </div>

    <form id="form" name="form" method="post" enctype="multipart/form-data">
    <input type='hidden' id='mode' name='mode'>
		<input type='hidden' id='idx' name='idx'>
    <input type='hidden' id='idchk' name='idchk'>
    <input type='hidden' id='nickchk' name='nickchk'>
		<input type='hidden' id='emailchk' name='emailchk'>
		<input type='hidden' id='emailsend' name='emailsend'>

    <div id="join_area">

					<div class="join_box_title">
						<h2>会員基本情報</h2>
      <span>パスワードおよびニックネームを変更できます。</span>
     </div>

     <div class="join_box">
      <div class="account_area" >
       <div class="title"><span style="font-size:1.2em; color:#349DF3;">会員基本情報</span> <span style="font-size:1.2em; color:#E35D63;">(必須)</span></div>
      </div>

      <div class="account_area" >
				<div class="title">会員ID</div>
				<div class="input_box int_id">
					<span  id="id_form1" ><?=$row[userid]?> <?=$useridForm?></span>
					<span  id="id_form2" style="display:none;"><input type='text' name='user_id' id='user_id' maxlength='18' style='ime-mode:diable' class='text' placeholder='6〜18文字の半角英数字（小文字のみ可能）' value='<?=$row[userid]?>'/><button type='button' class='submitIn' onclick='IDFORMCANCEL();'>キャンセル</button></span>
				</div>
				<p class="check" id="notice_id" style="font-size:0.9em;"></p>
      </div>

     <div class="account_area" >
     	<div class="title">パスワード</div>
      <div class="input_box int_pw">
				<input type="password" name="user_pw" id="user_pw" size="30" maxlength="30" style="ime-mode:disabled" class="text" style="ime-mode:diable" placeholder="8文字以上の半角英数字、特殊文字を含む"/>
				<div style="position:relative; float:right; top:0px; left:-7px;  z-index:3; width:56px; height:21px;" ><span id='pw_span'style='color:#E35D66;vertical-align:top;line-height:25px;font-size:11px'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><img  id='pw_img'src="../images/sub/bg_pass1.jpg" width="21" height="21" /></div></div>
      <p class="check" id="pw_notice" style="font-size:0.9em;"></p>
     </div>

     <div class="account_area" >
     	<div class="title">パスワード確認</div>
				<div class="input_box int_repw">
					<input type="password" name="user_repw" id="user_repw" size="30" maxlength="30" style="ime-mode:disabled" class="text" style="ime-mode:diable" placeholder="8文字以上の半角英数字、特殊文字を含む"/>
					<div style="position:relative; float:right; top:0px; left:-20px;  z-index:3; width:21px; height:21px;" >
					<img id='repw_img' src="../images/sub/bg_pass_ck1.jpg" width="21" height="21" />
					</div>
				</div>
				<p class="check" id="repw_notice" style="font-size:0.9em;"></p>
     </div>

     <div class="account_area" >
     	<div class="title">ニックネーム</div>
				<div class="input_box int_nick"><input type="text" name="user_nick_name" id="user_nick_name" size="30" maxlength="30" style="ime-mode:diable" class="text" placeholder="2〜14文字の半角英数字（小文字のみ可能）"/><div style="position:relative; float:right; top:0px; left:-20px;  z-index:3; width:21px; height:21px;" ><img id='nick_img' src="../images/sub/bg_pass_ck1.jpg" width="21" height="21" /></div></div>
				<p class="check" id="nick_notice" style="font-size:0.9em;"></p>
     </div>

     <div class="account_area" >
     		<div class="title">氏名(カナ) ※フルネーム</div>
      <div class="input_box int_kana"><input type="text" name="kana_name" id="kana_name" size="30" maxlength="30" style="ime-mode:diable" class="text" placeholder="カタカナで入力してください。"  /></div>
			<p class="check" id="kana_notice" style="font-size:0.9em;"></p>
     </div>

     <div class="account_area" >
     	<div class="title" style="height:30px;">Eメール &nbsp;
      	<div id="send_email_ok" class="send_email"	><img src="../images/sub/btn_mail_ok.jpg" width="15" height="20" style="vertical-align:text-bottom"  /> イベントなどのメール受信に同意</div>
				<div id="send_email_no" 	class="face_ok_off" style="display:none;"><img src="../images/sub/btn_mail_no2.jpg" width="15" height="20" style="vertical-align:text-bottom;"  /> イベントなどのメール受信に同意しません。</div>
      </div>
      <div class="input_box int_email"><input type="text" name="email" id="email" size="30" class="text" style="ime-mode:inactive" placeholder="ローマ字で入力してください" /></div>
			<p class="check" id="notice_email" style="font-size:0.9em;"></p>
      <div class="input_annotation">イベントや公演などの特典、サイトからの通知を受けるために入力する必要があります。<div style="position:absolute; top:-9px; left:0;"><img src="../images/sub/annotation_dir.png" width="14" height="9"  /></div></div>
     </div>

     <div class="account_area" >
	     <div style="display:block; width:100%; height:3px;  border-style:solid; border-width:1px 0 0 0; border-color:#d3d3d3;" >&nbsp;</div>
     </div>

     <div class="account_area" >
      <button type="button" class="btn_left" tabindex="5" onclick="location.href='./mypage.php'">キャンセル</button>
      <button type="button" id="btn_join" class="btn_right" tabindex="5">確認</button>
     </div>

					</div>
			 </div>
   </form>

			</div><!--div class="myp_right"-->
			<!-- RIGHT -->


	</ARTICLE>
</SECTION>






<?

	include"inc_bottom.php";

?>
 <!-- MOUSE ACTION -->
 </body>
 </html>