<%--
  Class Name : EgovUserInsert.jsp
  Description : 사용자등록View JSP
  Modification Information
 
      수정일         수정자                   수정내용
    -------    --------    ---------------------------
     2009.03.03   JJY              최초 생성
     2011.08.31   JJY       경량환경 버전 생성
 
    author   : 공통서비스 개발팀 JJY
    since    : 2009.03.03
--%>
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>
<%@ taglib prefix="double-submit" uri="http://www.egovframe.go.kr/tags/double-submit/jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="ko" >
	<link rel="stylesheet" href="/direct/css/font.css">
	<link rel="stylesheet" href="/direct/css/reset.css">
	<link rel="stylesheet" href="/direct/css/index.css">
	<script src="/direct/js/jquery.nice-select.js"></script>
	<script src="/direct/js/script.js"></script>
<script type="text/javascript" src="<c:url value="/validator.do"/>"></script>
<validator:javascript formName="userManageVO" staticJavascript="false" xhtml="true" cdata="false"/>
<script src="<c:url value='/js/jquery.js' />"></script>
<script type="text/javaScript" language="javascript" defer="defer">
$( document ).ready(function(){
	// showMask를 클릭시 작동하며 검은 마스크 배경과 레이어 팝업을 띄웁니다.
    $('.showMask').click(function(e){
        // preventDefault는 href의 링크 기본 행동을 막는 기능입니다.
        e.preventDefault();
        wrapWindowByMask();
    });

    // 닫기(close)를 눌렀을 때 작동합니다.
    $('.window .close').click(function (e) {
        e.preventDefault();
        $('.mask, .window').hide();
        $("input[name=emplyrId]").val("");
    });

    // 뒤 검은 마스크를 클릭시에도 모두 제거하도록 처리합니다.
    $('.mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });
});

function validatePassword(character) {
    return /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$/.test(character);
}

function fnListPage(){
	document.searchForm.submit();
}

function fnInsert(){
    if(validateUserManageVO(document.userManageVO)){
        if(document.userManageVO.password.value != document.userManageVO.password2.value){
            alert("<spring:message code="fail.user.passwordUpdate2" />");
            return;
        }
        if(!validatePassword(document.userManageVO.password.value)){
        	alert("비밀번호 최소 하나의 문자 + 하나의 숫자 + 하나의 특수 문자 포함, 최소 8자리, 최대 20자리입니다.");
        	return;
        }
        
        if($('#emplyrNm').val() == ''){
        	alert("이름은 필수 값입니다.");
        	return;
        }
        
        if($('#ofcpsNm').val() == ''){
        	alert("부서는 필수 값입니다.");
        	return;
        }
        
        if($('#offmTelno').val() != ''){
        	var regExp = /^\d{2,3}-\d{3,4}-\d{4}$/;
            if ( !regExp.test( $('#offmTelno').val()) ) {
                alert("잘못된 사무실 전화번호입니다. 숫자, - 를 포함한 숫자만 입력하세요.");
                return false
          	}	
        }
        
        document.userManageVO.submit();
    }
}

/*********************************************************
 * 아이디 체크 AJAX 
 ******************************************************** */
function fn_id_check(){
	if($("#checkIdModal").val()==''){
		alert("사용할 아이디를 넣어주세요.");
		return;
	}
	$.ajax({
		type:"POST",
		url:"<c:url value='/uss/umt/user/EgovIdDplctCnfirmAjax.do' />",
		data:{
			"checkId": $("#checkIdModal").val()			
		},
		dataType:'jsonp',
		timeout:(1000*30),
		success:function(returnData, status){
			if(status == "success") {
				if(returnData.usedCnt > 0 ){
					alert("사용할수 없는 아이디입니다");
				}else{
					$("input[name=emplyrId]").val(returnData.checkId);
					$('.mask, .window').hide();
				}
			}else{ alert("ERROR!");return;} 
		},
		error:function(request , status, error){
			alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
		}
	});
}

//직원 상세 - 부서 선택박스 변경 시
function fn_select_emp_part(obj) {
	var selectId = $(obj).children("option:selected").val();
	var selectDepth = $(obj).children("option:selected").attr("depth")*1+1;
	
	if(selectId == "" && selectDepth =="2"){
		$('#partIdx').val(selectId) ;
		$("#depth_2").remove();
		$("#depth_3").remove();
		return;
	}
	
	if(selectId == "" && selectDepth =="3"){
		$('#partIdx').val($('#depth_1').val());
		$("#depth_3").remove();
		return;
	}
	
	if(selectDepth =="4"){
		if(selectId == ""){
			$('#partIdx').val($('#depth_2').val());
		}else{
			$('#partIdx').val(selectId) ;	
		}
		return;
	}
	
	if(selectDepth =="2"){
		$("#depth_2").remove();
		$("#depth_3").remove();
	}
	if(selectDepth =="3"){
		$("#depth_3").remove();
	}
	$('#partIdx').val(selectId) ;
	ajaxGetChartDepth( selectId, selectDepth );
}

function ajaxGetChartDepth(upperIdx , depth){
	$.ajax({
		type:"POST",
		url:"<c:url value='/uss/umt/user/ajaxGetChartDepth.do' />",
		data:{ "depth": depth ,	"upperIdx": upperIdx},
		dataType:'jsonp',
		success:function(returnData, status){
			if(status == "success") {
				var str = "<select id='depth_"+depth+"' depth='"+depth+"' onchange='fn_select_emp_part(this);'>";
				str += "<option value='' depth='"+depth+"'>선택</option>";
				$.each(returnData.orgChartDepth , function(idx, val){
					str += "<option value='"+val.id+"' depth='"+depth+"'>"+val.text+"</option>";
	           });
				str += "</select>"; 
	           $("#orgChartDepth").append(str); 
			}else{ alert("ERROR!");return;}
		},
		error:function(request , status, error){
			alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
		}
	});
}

function wrapWindowByMask(){
    // 화면의 높이와 너비를 변수로 만듭니다.
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    // 마스크의 높이와 너비를 화면의 높이와 너비 변수로 설정합니다.
    $('.mask').css({'width':maskWidth,'height':maskHeight});

    // fade 애니메이션 : 1초 동안 검게 됐다가 80%의 불투명으로 변합니다.
    $('.mask').fadeIn(1000);
    $('.mask').fadeTo("slow",0.8);

    // 레이어 팝업을 가운데로 띄우기 위해 화면의 높이와 너비의 가운데 값과 스크롤 값을 더하여 변수로 만듭니다.
    var left = ( $(window).scrollLeft() + ( $(window).width() - $('.window').width()) / 2 );
    var top = ( $(window).scrollTop() + ( $(window).height() - $('.window').height()) / 2 );

    // css 스타일을 변경합니다.
    $('.window').css({'left':left,'top':top, 'position':'absolute'});

    // 레이어 팝업을 띄웁니다.
    $('.window').show();
}

function press() {
    if (event.keyCode==13) {
    	fn_id_check();
    	event.preventDefault();
    }
}

</script>
</head>
<body>
<div class="cont_area">
	<form:form commandName="userManageVO" action="${pageContext.request.contextPath}/uss/umt/user/EgovUserInsert.do" name="userManageVO" method="post" >
	<double-submit:preventer tokenKey="someKey" />
		<div class="cont_main_title">
			<img src="/direct/img/home_icon.png" alt=""><span id="cnt_cate_list"></span>
		</div>
		<div class="list_wrap setting_list_wrap">
			<table>
				<tr>
					<th><span class="star_t"></span>관리자아이디</th>
					<td>
						<form:input class="showMask" path="emplyrId" id="emplyrId" title="사용자아이디" style="width:79.7%;margin-right:10px;" size="20" maxlength="20" readonly="true" />
						<a href="#" class="showMask"><button class="id_check_btn"><img src="/img/post/id_check_btn.png">중복아이디 검색</button></a>
						<form:errors path="emplyrId" cssClass="error"/>
					</td>
				</tr>
				<tr>
					<th><span class="star_t"></span>비밀번호</th>
					<td>
						<form:password path="password" id="password" title="비밀번호" size="20" maxlength="20" />
						<form:errors path="password" cssClass="error" />
						<br/>
						<span style="color:red;font-size:12px;">
						비밀번호  문자 + 숫자 + 특수 문자 포함, 최소 8~20자리
						</span>
					</td>
				</tr>
				<tr>
					<th><span class="star_t"></span>비밀번호확인</th>
					<td>
						<input name="password2" id="password2" title="비밀번호확인" type="password" size="20" maxlength="20" />
					</td>
				</tr>
				<tr>
					<th><span class="star_t"></span>이름</th>
					<td>
						<input name="emplyrNm" id="emplyrNm" title="이름" type="text" size="20" value="" maxlength="60" />
						<form:errors path="emplyrNm" cssClass="error" />
					</td>
				</tr>
<!-- 				<tr> //부서 등록 제외
					<th><span class="star_t"></span>부서</th>
					<td id="orgChartDepth">
						<input type="text" name="ofcpsNm" id="ofcpsNm" />
					</td>
				</tr> -->
				<tr>
					<th>이메일주소</th>
					<td>
						<form:input path="emailAdres" id="emailAdres" title="이메일주소" cssClass="txaIpt" size="20" maxlength="50" />
						<form:errors path="emailAdres" cssClass="error" />
					</td>
				</tr>
				<%-- <tr> //최고관리자만 등록되도록 선택 창 주석
					<th><span class="star_t"></span>권한</th>
					<td>
						<select name="authorCode" title="권한">
			            <c:forEach var="authorResult" items="${authorList}" varStatus="status">
			                	<option value="<c:out value="${authorResult.authorCode}"/>" <c:if test="${authorResult.authorCode eq 'ROLE_USER_MEMBER' }">selected</c:if>> <c:out value="${authorResult.authorNm}"/></option>
			       		 </c:forEach>
				   		 </select>
					</td>
				</tr> --%>
				<tr>
					<th><span class="star_t"> </span>사무실전화번호</th>
					<td>
						<form:input path="offmTelno" id="offmTelno" title="사무실전화번호" cssClass="txaIpt" size="20" maxlength="15"  placeholder="예시 : 02-123-4567"/>
			      	 	<form:errors path="offmTelno" cssClass="error" />
					</td>
				</tr>
			</table>
		</div>
		<div class="setting_btn">
			<input type="button" value="목록" class="list_btn" onclick="fnListPage(); return false;" >
			<input type="button" value="저장" class="edit_btn" onclick="fnInsert(); return false;">
		</div>
		</form:form>
		<form name="searchForm" id="searchForm" method="get" action="<c:url value='/uss/umt/user/EgovUserManage.do'/>" ></form>
</div>
<div class="setDiv">
	<div class="mask"></div>
	<div class="window">
		<div class="id_check1">
			<input type="button" href="#" class="close">
			<span>아이디 중복 확인</span>
		</div>
		<div class="id_check2">
		<span>사용할 아이디</span><input type="text" id="checkIdModal"  onkeypress="press();" >
		</div>
		<div class="id_check3">
			<span>중복확인을 실행하십시오</span><button onclick="fn_id_check(); return false;">중복확인조회</button>
		</div>
	</div>
</div>
		
</body>
</html>			

