<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" session="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="ko">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
	<meta http-equiv="content-language" content="ko">
	<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1" />
	<title><spring:message code="sys.name" /></title>
   	<script type="text/javascript" src="/js/lib/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="/js/lib/jquery-ui.min.js"></script>
	<link type="text/css" rel="stylesheet" href="/css/login_new.css">
	<link type="text/css" rel="stylesheet" href="/css/common.css">
	<link type="text/css" rel="stylesheet" href="/css/lib/jquery-ui.css">
	<link type="text/css" rel="stylesheet" href="/css/style.css">
</head>

<body>
<form:form name="detailForm" action="/j_spring_security_check" onsubmit="return fn_egov_login();">
    <div id="wrap">
    <input type="hidden" name="os" id="os">
    <input type="hidden" name="browser" id="browser">
    <input type="hidden" name="browser-version" id="browser-version">
    
 	<div id="dialog-confirm" style="display: none;">
            <p style="margin-top : 10px">- 국제해양정보시스템 홈페이지는 IE 8버전 이상에 최적화 되어있습니다.</p>
            <p style="margin-top : 10px">- 홈페이지의 내용이 깨지는 현상이 발생하신다면, 아래 'Internet Explorer 9-32bit'또는<br /> 'Internet Explorer 9-64bit' 를 클릭하여 설치하여 주시기 바랍니다.</p>
            <p style="margin-top : 10px">- 1. 개인컴퓨터 운영체제 버전 확인하기.</p>
            <p style="margin-top : 10px">- 2. 설치방법'을 확인하시고 다운을 받기 바랍니다.</p>
            <p style="margin-top : 10px">- 감사합니다</p>
            <p style="margin-top : 30px"><a href="#" id="first-confirm" style="font-weight : 600; text-decoration : underline;">1. 개인컴퓨터 운영체제 버전 확인하기</a></p>
            <p style="margin-top : 10px"><a href="#" id="second-confirm" style="font-weight : 600; text-decoration : underline;">2. 설치방법</a></p>

            <ol>
                <li><a href="/images/IE9-Windows7-x86-kor.exe">Internet Explorer 9-32bit</a></li>
                <li><a href="/images/IE9-Windows7-x64-kor.exe" class="bordernone">Internet Explorer 9-64bit</a></li>
            </ol>
            <div id="first-confirm-popup" style="display : none;">
                    <img src="/images/new/popup01.jpg" alt="">
            </div>
            <div id="second-confirm-popup" style="display : none;">
                <img src="/images/new/popup02.jpg" alt="">
            </div>

        </div><!--end of popuplayer-->
        
        <h2 class="sr_only">통합홈페이지입니다.</h2>
        <div class="mVisual_img">
            <ul>
                <li class="img01">img1</li>
                <li class="img02">img2</li>
            </ul>
        </div><!--end of mVisual -->
        <div class="inner">
            <div class="loginBox">
                <div class="loginBox_TopBar"><!--상단 버튼-->
                    <ul class="clearfix">
                        <li><a href="http://10.29.9.40" >외사정보시스템</a></li>
                        <li class="on"><a class="on">국제해양정보시스템</a></li>
                    </ul>
                </div><!-- end of loginBox_TopBar -->
                <div class="loginBox_BotBar">
                <input type=hidden name=login_error value="${login_error}" />
                    <div class="ocean">
                        <div class="hellow">
                            <h3>반갑습니다</h3>
                            <p class="hellow_name">이곳은 국제해양정보시스템입니다</p>
                        </div><!--end of hellow -->
                        <div class="id_pw">
                            <div class="id_section"><!--아이디 input-->
                                <ul class="clearfix">
                                    <li>
                                        아이디
                                    </li>
                                    <li class="id_val">
                                        <input type="text" name="j_username" maxlength="16" title="id" placeholder="아이디를 입력하세요."/>
                                    </li>
                                </ul>
                            </div><!--end of id_section-->
                            <div class="pw_section"><!--패스워드 input-->
                                <ul class="clearfix">
                                    <li>
                                        패스워드
                                    </li>
                                    <li>
                                        <input type="password" class="PW_val" name="j_password" placeholder="패스워드를 입력하세요.">
                                    </li>
                                </ul>
                            </div><!--end of pw_section-->
                        </div><!--end of id_pw-->
                        <div class="remember_id"> <!--아이디 저장하기 버튼-->
                            <input type="checkbox" class="check_id" name="remember_id" value="">
                            <label for="c1">
                                <span>아이디 저장하기</span>
                            </label>
                        </div><!--end of remember_id -->
                        <div class="login_Sign"> <!--로그인, 회원가입 버튼-->
                            <div class="login">
                                <!-- <a href="#">로그인</a> -->
                                <input type="submit" title="submit" class="login-btn" value="<spring:message code="member.login" />"/>
                            </div><!-- end of login -->
                            <div class="login">
                                <!-- <a href="#">로그인</a> -->
                                <input type="button" title="submit" class="login-btn" value="회원가입" onclick="regist();"/>
                            </div><!-- end of login -->
                        </div><!--end of login_Sign-->
                        <p style ="text-align : right; padding-right : 15px;  line-height : 1.5em;">
                        	접속장애 발생시(패스워드)<br />
                        	관리자(7-2689)에게 문의 바랍니다
                        </p>
                        <p class="logo" style="margin-top : 15px;">logo</p><!--하단 로고 deco-->
                    </div><!-- end of ocean -->

                </div><!-- end of loginBox_BotBar -->

            </div><!--end of loginBox-->

        </div><!--end of inner -->
        <div id="footer">
            <div class="inner clearfix">
                <h1>logo</h1>
                <address>
                    <div class="topic">
                        외사 및 국제 정보시스템
                    </div>
                    <div class="f_info">
                        <ul>
                            <li>
                                21995 인천광역시 연수구 해돋이로 130 해양경찰청
                            </li>
                            <li>
                                COPYRIGHT(C)2011 MINISTRY OF REPUBLIC ADMINISTRATION AND SECURITY. ALL RIGHT RESERVED
                            </li>
                        </ul>
                    </div><!--end of f_info -->
                    <div class="w3c">w3c</div>
                </address>
            </div><!--end of inner -->
        </div>
        

  <div id="memberAdd"  style="display:none;" title="회원 가입">
		<table class="tbl_add" width="100%" border="0" cellpadding="0" cellspacing="0">
			<colgroup>
	   			<col width="150"/>
	   			<col width="*"/>
	   		</colgroup>
	   		<tr>
   				<th>소속</th>
   				<td>
   					<select name="place1" id="place1" onchange="createPlace2()">
   					</select>
					<select name="place2" id="place2">
   					</select>
   				</td>
			</tr>
			<tr>
				<th>아이디</th>
				<td>
                    <input type="text" name="userid"  id="userid" >
					<button type="button" class="ui-button ui-corner-all ui-widget" onclick="checkId()">아이디확인</button>
				</td>
			</tr>
			<tr>
				<th>비밀번호</th>
				<td>
					<input class="txt" type="password" name="passwd" id="passwd">
				</td>
			</tr>
	   		<tr>
	   			<th>
	   				비밀번호 확인
	   			</th>
	   			<td>
	   				<input class="txt" type="password" id="passwd2">
	   			</td>
	   		</tr>
	   		<tr>
	   			<th>성명</th>
	            <td>
					<input class="txt" type="text" name="name" id="name">
	            </td>
			</tr>
			<tr>
				<th>
					계급
				</th>
				<td>
	   				<select name="duty" id="duty" >
						<option>치안정감</option>
	   				</select>
				</td>
			</tr>
	   	</table>
</div>
    </div><!--end of wrap-->
    </form:form>
  <script type="text/javascript">
	  var $img = $(".mVisual_img ul li");
	  var nowIdx = 0;
	  var oldIdx = nowIdx;
	
	   function nextFnc() {
	       $img.eq(nowIdx).stop().fadeIn(600);
	       $img.eq(oldIdx).stop().fadeOut(600);
	       oldIdx = nowIdx;
	   }
	
	   function nextIdx() {
	       if(nowIdx == $img.length-1) {
	           nowIdx = 0
	       }else {
	           nowIdx++
	       }
	   }
	
	   function start() {
	       setInterval(function(){
	           nextFnc();
	           nextIdx();
	       },4000)
	   }
   
     function regist(){
    	 createPlace1();
    	 createDuty();
    	 initMemberModel();
    	 
		$( "#memberAdd" ).dialog({
		  resizable: true,
		  height: 445,
		  width: 850,
		  modal: true,
		  buttons: {
		    "가입": function() {
		    	registSubmit();
		    }
			 ,"닫기": function() {
				 $( this ).dialog( "close" );
			 }
		  }
		});
     }
     
     function registSubmit(){
    	 
    	 if(!registValidation())
    		 return;
    	 
    	 $.ajax({
				url: '<c:url value="/member/regist.json" />',
				type: 'get',
				cache: false,
				data: {
					userid : $("#userid").val()
					, passwd : $("#passwd").val()
					, place1 : $("#place1").val()
					, place2 : $("#place2").val()
					, name : $("#name").val()
					, duties : $("#duty").val()
					},
				dataType: 'json',
				success: function(data){
					if(data.result == 1){
						alert("성공적으로 가입하셨습니다.");
						$("#memberAdd" ).dialog( "close");
					}
				}
			}); 
     }
   	/* 로그인 function */
		function fn_egov_login() {
			mberId = document.detailForm.j_username.value;
			password = document.detailForm.j_password.value;
			
			if(mberId == "" && password == ""){
				alert("<spring:message code="member.blankBoth" />");
				return false;
			}else if(mberId != "" && password == ""){
				document.detailForm.j_password.focus();
				alert("<spring:message code="member.blankPass" />");
				return false;
			}else if(password != "" && mberId == ""){
				document.detailForm.j_username.focus();
				alert("<spring:message code="member.blankId" />");
				return false;
			}
			
			return true;
		}
   	
		function get_version_of_IE() { 
			 var word; 
			 var agent = navigator.userAgent.toLowerCase(); 
			 // IE old version ( IE 10 or Lower ) 
			 if ( navigator.appName == "Microsoft Internet Explorer" ) word = "msie "; 
			 // IE 11 
			 else if ( agent.search( "trident" ) > -1 ) word = "trident/.*rv:"; 
			 // Microsoft Edge  
			 else if ( agent.search( "edge/" ) > -1 ) word = "edge/"; 
			 // 그외, IE가 아니라면 ( If it's not IE or Edge )  
			 else return -1; 
			 var reg = new RegExp( word + "([0-9]{1,})(\\.{0,}[0-9]{0,1})" ); 
			 if (  reg.exec( agent ) != null  ) return parseFloat( RegExp.$1 + RegExp.$2 ); 
			 return -1; 
		}
		
	function createPlace1(){
		$("#place1").empty();
		$(getCode('PLA1')).each(function(idx, item){
			$("#place1").append('<option value="'+item.code+'">'+item.name+'</option>')
		});
		createPlace2();
	}
	
	function createPlace2(){
		$("#place2").empty();
		var place1Val = $("#place1").val();
		$(getCode(place1Val)).each(function(idx, item){
			$("#place2").append('<option value="'+item.code+'">'+item.name+'</option>')
		});
	}
	
	function createDuty(){
		$("#duty").empty();
		$(getCode('DUTY')).each(function(idx, item){
			$("#duty").append('<option value="'+item.code+'">'+item.name+'</option>')
		});
	}
	
	function getCode(group){
		return $(codeList).filter(function(idx, item){
			return item.group === group;
		});
	}
	
  $(document).ready(function(){
         
   	   nowIdx = $img.index($(this));
          $img.hide().eq(0).show();
          start();

          // ContextMenu 방지 코드
		$(document).contextmenu(function(){
			return false;
		});
           
           document.detailForm.j_username.focus();
           
   	   	var error = document.detailForm.login_error.value;
   		if(error == 1){
   			alert('${sessionScope["SPRING_SECURITY_LAST_EXCEPTION"].message}');
   		}
   		
   		$(".clse").on("click", function(){
               $("#popuplayer").hide();
           })
           
           var version = get_version_of_IE();
           if(version > -1 && version < 8){
           	 $( "#dialog-confirm" ).dialog({
                    resizable: false,
                    height: "auto",
                    width: 650,
                    modal: true,
                    buttons: {
                      "닫기": function() {
                        $( this ).dialog( "close" );
                      }
                    }
                  });
           }
        	   
             $("#first-confirm").on("click", function() {
                 $( "#first-confirm-popup" ).dialog({
                   resizable: false,
                   height: 800,
                   width: 850,
                   modal: true,
                   buttons: {
                     "닫기": function() {
                       $( this ).dialog( "close" );
                     }
                   }
                 });
             })
             
              $("#second-confirm").on("click", function(){
                $( "#second-confirm-popup" ).dialog({
                  resizable: false,
                  height: 750,
                  width: 850,
                  modal: true,
                  buttons: {
                    "닫기": function() {
                      $( this ).dialog( "close" );
                    }
                  }
                });
            })
      });
  
  	function checkId(){
  		 $.ajax({
				url: '<c:url value="/member/checkId.json" />',
				type: 'get',
				cache: false,
				data: {
					userid : $("#userid").val()
					},
				dataType: 'json',
				success: function(data){
					if(data.cnt > 0){
						alert("사용중인 아이디입니다.");
						$("#userid").val('');
						$("#userid").focus();
					}else{
						$("#userid").prop("disabled", true);
					}
				}
			}); 
  	}

  	function registValidation(){
  		
  		if($("#userid").val() == ""){
  			alert("아이디를 입력하세요.");
  			$("#userid").focus();
  			return false;
  		}
  		
  		if($("#userid").val().lenth < 4){
  			alert("아이디는 최소 4자 이상으로 입력하세요.");
  			$("#userid").focus();
  			return false;
  		}
  		
  		if($("#userid").prop("disabled") == false){
  			alert("아이디중복을 확인하세요.");
  			return false;	  			
  		}
  		
  		if($("#passwd").val() == ""){
  			alert("비밀번호를 입력하세요.");
  			$("#passwd").focus();
  			return false;
  		}
  		
  		if($("#passwd2").val() == ""){
  			alert("비밀번호확인을 입력하세요.");
  			$("#passwd2").focus();
  			return false;
  		}
  		
  		if($("#passwd").val() != $("#passwd2").val()){
  			alert("비밀번호와 비밀번호 확인이 다릅니다.");
  			$("#passwd").val('');
  			$("#passwd2").val('');
  			$("#passwd").focus();
  			return false;
  		}
  		

  		if($("#name").val() == ""){
  			alert("이름을 입력하세요.");
  			$("#name").focus();
  			return false;
  		}
  		
  		
  		return true;
  	}
  	
  	function initMemberModel(){
  		$("#userid").prop("disabled", false);
  		$("#userid").val('');
  		$("#passwd").val('');
  		$("#passwd2").val('');
  		$("#name").val('');
  	}
  	
	var codeList = [
		<c:forEach var="item" items="${code}">
		{
			group : '<c:out value="${item.group}"></c:out>',
			code : '<c:out value="${item.code}"></c:out>',
			name : '<c:out value="${item.name}"></c:out>'
		},
		</c:forEach>
	];

	$(document).ready(function() {
		
		  var os, ua = navigator.userAgent;
		  console.log("ua  : " + navigator.userAgent);
		  
		  if (ua.match(/Win(dows )?NT 6\.0/)) {
		    os = "Windows Vista";
		  } else if (ua.match(/Win(dows )?(NT 5\.1|XP)/)) {
		    os = "Windows XP";
		  } else {
		    if ((ua.indexOf("Windows NT 5.1") != -1) || (ua.indexOf("Windows XP") != -1)) {
		      os = "Windows XP";
		    } else if ((ua.indexOf("Windows NT 7.0") != -1) || (ua.indexOf("Windows NT 6.1") != -1)) {
		      os = "Windows 7";
		    } else if ((ua.indexOf("Windows NT 8.0") != -1) || (ua.indexOf("Windows NT 6.2") != -1)) {
		      os = "Windows 8";
		    } else if ((ua.indexOf("Windows NT 8.1") != -1) || (ua.indexOf("Windows NT 6.3") != -1)) {
		      os = "Windows 8.1";
		    } else if ((ua.indexOf("Windows NT 10.0") != -1) || (ua.indexOf("Windows NT 6.4") != -1)) {
		      os = "Windows 10";
		    } else if ((ua.indexOf("iPad") != -1) || (ua.indexOf("iPhone") != -1) || (ua.indexOf("iPod") != -1)) {
		      os = "Apple iOS";
		    } else if (ua.indexOf("Android" != -1)) {
		      os = "Android Phone";
		    } else if (ua.match(/Win(dows )?NT( 4\.0)?/)) {
		      os = "Windows NT";
		    } else if (ua.match(/Mac|PPC/)) {
		      os = "Mac OS";
		    } else if (ua.match(/Linux/)) {
		      os = "Linux";
		    } else if (ua.match(/(Free|Net|Open)BSD/)) {
		      os = RegExp.$1 + "BSD";
		    } else if (ua.match(/SunOS/)) {
		      os = "Solaris";
		    }
		  }
		  if (os.indexOf("Windows") != -1) {
		    if (navigator.userAgent.indexOf('WOW64') > -1 || navigator.userAgent.indexOf('Win64') > -1) {
		      os += ' 64bit';
		    } else {
		      os += ' 32bit';
		    }
		  }
		  console.log("OS 정보  : " + os);
		  
		  
		  
		  var agent = navigator.userAgent, match;
		  var app, version;

		  if((match = agent.match(/MSIE ([0-9]+)/)) || (match = agent.match(/Trident.*rv:([0-9]+)/))) app = 'Internet Explorer';
		  else if(match = agent.match(/Edge\/([0-9]+)/)) app = 'Edge';
		  else if(match = agent.match(/Chrome\/([0-9]+)/)) app = 'Chrome';
		  else if(match = agent.match(/Firefox\/([0-9]+)/)) app = 'Firefox';
		  else if(match = agent.match(/Safari\/([0-9]+)/)) app = 'Safari';
		  else if((match = agent.match(/OPR\/([0-9]+)/)) || (match = agent.match(/Opera\/([0-9]+)/))) app = 'Opera';
		  else app = 'Unknown';

		  if(app !== 'Unknown') version = match[1];

		  $("#os").val(os);
		  $("#browser").val(app);
		  $("#browser-version").val(version);
		  
		  console.log('Browser: ' + app);
		  console.log('Browser Version: ' + version);
		});
   </script>
       
</body>

</html>
