<%--
  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" >
<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="ad_content">
	<div class="ad_con_head">
		<div class="ad_head_text">
			<p class="today_txt">관리자 등록</p>
			<div class="ad_head_ment">
				<p class="today_last_txt"><span id="cnt_cate_list"></span></p>
			</div>
		</div>
	</div>
	<div class="ad_subcon">
		<form:form commandName="userManageVO" action="${pageContext.request.contextPath}/uss/umt/user/EgovUserInsert.do" name="userManageVO" method="post" >
		<double-submit:preventer tokenKey="someKey" />
		<div class="main1_div2">
		<table class="main1_table">
			<colgroup>
			<col />
			<col style="width:410px;"/>
			<col />
			<col />
		</colgroup>
			<tr>
				<th><span class="star_t">* </span>관리자아이디</th>
				<td colspan="3">
					<form:input class="showMask" path="emplyrId" id="emplyrId" title="사용자아이디" 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">
					비밀번호  문자 + 숫자 + 특수 문자 포함, 최소 8~20자리
					</span>
				</td>
				<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 colspan="3">
					<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 colspan="3" id="orgChartDepth">
					<%-- <input type="hidden" name="partIdx" id="partIdx" value="" />
					<select id="depth_1" depth="1" onchange="fn_select_emp_part(this);">
                        	<option value="" depth="1">-선택하세요-</option>
                        	<c:forEach items="${orgChartDepth1}" var="orgChartDepth1" varStatus="status">
							<option value="${orgChartDepth1.partIdx}" depth="1">${orgChartDepth1.partTitle}</option>
						</c:forEach>
                    </select> --%>
					<input type="text" name="ofcpsNm" id="ofcpsNm" />
				</td>
			</tr>
			<tr>
				<th>이메일주소</th>
				<td colspan="3">
					<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 colspan="3">
					<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>사무실전화번호</th>
				<td colspan="3">
					<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>
		<ul class="btn_li2">
			<li><button class="main1_btn" onclick="fnListPage(); return false;" >목 록</button></li>
			<li><button class="main1_btn main1_save_btn" onclick="fnInsert(); return false;" >저 장</button></li>
		</ul>
		</form:form>
		<form name="searchForm" id="searchForm" method="get" action="<c:url value='/uss/umt/user/EgovUserManage.do'/>" ></form>
	</div>
</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>			

