<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript"  src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#frmSubmit').click(function(){
        if(!$('#answer').val()){
        	alert('이미지에 보이는 숫자 또는 스피커를 통해 들리는 숫자를 입력해 주세요.');
        }else{
        	$.ajax({
        		type:"POST",
        		url:"/captcha/captchaSubmit.do",
        		data:{
        			"answer":  $('#answer').val()			
        		},
        		dataType:'json',
        		success:function(returnData, status){
        			if(status == "success") {
        				alert(returnData.message)
        			}else{ alert("ERROR!");return;} 
        		},
        		error:function(request , status, error){
        			alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
        		}
        	});
        }
  });
});	
	
function audio(){
          var rand = Math.random();
          var url = '/captchaAudio.do';
          $.ajax({
              url: url,
              type: 'POST',
              dataType: 'text',
              data: 'rand=' + rand,
              async: false,
              success: function(resp) {
                  var uAgent = navigator.userAgent;
                  var soundUrl = '/captchaAudio.do?rand=' + rand;
                  
                  if(uAgent.indexOf('Trident') > -1 || uAgent.indexOf('MSIE') > -1) {
                      winPlayer(soundUrl);
                  } else if (!!document.createElement('audio').canPlayType) {
                      try{
                          new Audio(soundUrl).play();
                      } catch(e) {
                          winPlayer(soundUrl);
                      }
                  }else {
                      window.open(soundUrl, '', 'width=1, height=1');
                  }
              }    
              
          });
          
      }
      
      function refreshBtn(type){
          var rand = Math.random();
          var url = "/captchaImg.do?rand=" + rand;
          $('#captchaImg').attr("src", url);
      }
      function winPlayer(objUrl){
          $('#captchaAudio').html('<vgsound src="' + objUrl + '">');
      }

</script>
<form name="frmSubmit" method="post" action="/">
<div class="form-group">
     <label for="captcha" style="display:block;">자동 로그인 방지</label>
     <div class="captcha">
         <div class="form-group">
             <img id="captchaImg" title="캡차 이미지" src="/captchaImg.do" alt="캡차 이미지" />
             <div id="captchaAudio" style="display:none;"></div>
         </div>
         <div class="form-group">
             <a onclick="javascript:refreshBtn()" class="refreshBtn">
                 <input type="button" value="새로고침" />
             </a>
             <a onclick="javascript:audio()" class="refreshBtn">
                 <input type="button" value="음성듣기" />
             </a>
         </div>
         <div class="form-group">
             <input type="text" name="answer" id="answer"  class="form-control" />
             <input type="button" id="frmSubmit" value="확인" />
         </div>   
     </div>
 </div>
 </form>

 