<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" session="false"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<!DOCTYPE html>
<html
		lang="kr"
		class="light-style layout-navbar-fixed layout-menu-fixed"
		dir="ltr"
		data-theme="theme-default"
		data-assets-path="<c:url value="/resources/"/>"
		data-template="vertical-menu-template-starter">
<head>
	<meta charset="UTF-8">
	<title>과태료통합관리시스템</title>

	<!-- Favicon -->
	<link rel="icon" type="image/x-icon" href="<c:url value="/resources/image/favicon.ico"/>" />

	<!-- Fonts -->
	<link rel="stylesheet" href="<c:url value="/resources/font/publicsans/fontface.css"/>" />
	
	<!-- Icons. Uncomment required icon fonts -->
	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/fonts/boxicons.css"/>" />
	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/fonts/fontawesome.css"/>" />
	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/fonts/flag-icons.css"/>" />
	<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/xit-icon.css"/>" />
	<!-- Core CSS -->
	<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/xit-core.css"/>" />
	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/css/theme-default.css"/>" />
	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/css/docs.css"/>" />
	<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/xit-core-extend.css"/>" />

	<!-- Vendors CSS -->
	<link rel="stylesheet" href="<c:url value="/resources/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.css"/>" />
	<link rel="stylesheet" href="<c:url value="/resources/css/styles.css"/>" />

	<link rel="stylesheet" href="<c:url value="/resources/css/fims/framework/common/common.css"/>"/>
	<link rel="stylesheet" href="<c:url value="/resources/lib/fims/framework/jquery-ui/1.13.2/themes/redmond/jquery-ui.css"/>" />
	<link rel="stylesheet" href="<c:url value="/resources/lib/fims/framework/datepicker/datepicker.css"/>" />

</head>
<body>

<c:set var="pageKorName" scope="request">동영상 재생</c:set>
<input type="file" id="file" name="file" hidden accept="video/*" />

<div class="container-page-btn px-5 bg-program-title green cleanparking" style="width:100%;height:75px;">

	<h2 class="text-white modal-title">동영상 캡쳐</h2>
	<span class="container-window-btn-right">
    	<button id="btnLoad" class="btn p-0 d-block w-px-100" style="height:70px;">
    		<i class='bx bx-lg bx-folder-open' ></i><br/><span class="text-black">동영상 오픈</span>
    	</button>
    	<button id="btnCapture" class="btn p-0 d-block w-px-100" style="height:70px;">
			<i class='bx bx-lg bxs-camera'></i><br/><span class="text-black">캡처</span>
		</button>
		<button id="btnSave" class="btn p-0 d-block w-px-100" style="height:70px;">
			<i class='bx bx-lg bxs-save'></i><br/><span class="text-black">캡처 이미지 저장</span>
		</button>
    </span>
	
</div>

<div class="d-flex justify-content-center">
	<div class="card d-inline-flex" 
	style="width:1400px;height:850px;padding: 10px;background-color: #E2E6E9;border: solid 1px #ccc;">
		<div class="d-flex justify-content-center align-items-center" style="border-style: solid;width:100%;height: 100%">
			<video id="video" style="max-width:1200px;max-height:700px;" controls="true" hidden>
			</video>
		</div>
	</div>
	<div class="card d-inline-flex ms-1" style="width:290px;height:850px;padding: 10px;">
		<div class="card m-1 bg-program-popup cleanparking capture-output" style="width:261px;height:144px;">
			
		</div>
		<div class="card m-1 bg-program-popup cleanparking capture-output" style="width:261px;height:144px;">
			
		</div>
		<div class="card m-1 bg-program-popup cleanparking capture-output" style="width:261px;height:144px;">
			
		</div>
		<div class="card m-1 bg-program-popup cleanparking capture-output" style="width:261px;height:144px;">
			
		</div>
	</div>
</div>

<script src="<c:url value="/resources/3rd-party/sneat/js/helpers.js"/>"></script>
<script src="<c:url value="/resources/3rd-party/sneat/libs/jquery/jquery.js"/>"></script>
<script src="<c:url value="/resources/3rd-party/sneat/libs/popper/popper.js"/>"></script>
<script src="<c:url value="/resources/3rd-party/sneat/js/bootstrap.js"/>"></script>
<script src="<c:url value="/resources/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.js"/>"></script>
<script src="<c:url value="/resources/3rd-party/sneat/libs/hammer/hammer.js"/>"></script>
<script src="<c:url value="/resources/3rd-party/sneat/libs/i18n/i18n.js"/>"></script>
<script src="<c:url value="/resources/3rd-party/sneat/js/menu.js"/>"></script>
<script src="<c:url value="/resources/3rd-party/sneat/libs/jstree/jstree.js"/>"></script>
<script src="<c:url value="/resources/3rd-party/jstree/jstree-support.js"/>"></script>
<script src="<c:url value='/resources/3rd-party/sneat/js/config.js'/>"></script>
<script src="<c:url value='/resources/3rd-party/sneat/libs/chartjs/chartjs.js'/>"></script>
<script src="<c:url value="/resources/3rd-party/lib/fims/framework/1.13.2/jquery-ui.js?${ver}"/>"></script>

<script>
var openerPageName = "${openerPageName}";

var snapshots = [];

document.getElementById("file").addEventListener('change', function () {
	document.getElementById("video").focus();
});

document.getElementById("video").addEventListener('play', function () { 
	document.getElementById("btnCapture").focus();
});


function capture(video, scaleForCanvasStyle) {

    var originalW = video.videoWidth;
    var originalH = video.videoHeight;
    
    var canvas = document.createElement('canvas');
    
	canvas.width = originalW;
	canvas.height = originalH;
	
    canvas.style = "width:"+($(video).width() * scaleForCanvasStyle)+"px;"+ "height:"+($(video).height() * scaleForCanvasStyle)+"px;";

    
    var ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, originalW, originalH);
    return canvas;
} 
 

$("#btnLoad").on("click",function(){
	 $("#file").trigger("click");
});
$("#file").on("change", function(){
	
	var files = this.files,
		length = files.length;
	
	snapshots = [];
	$(".capture-output").html = "";
	
	if(files.length > 0){
		var file = files[0];
		file.url = (window.URL || window.webkitURL).createObjectURL(file);
		
		$("#video").removeAttr("hidden");
		$("#video").html("<source src='"+file.url+"'>");
	} else {
		$("#video").attr("hidden","hidden");
		$("#video").html("");
	}
	
});

$("#btnCapture").on("click",function(){
	if($("#video").is(":hidden")){
		return;
	}
	
	var video = document.getElementById("video");
	var videoStyleW = $(video).width();
	var videoStyleH = $(video).height();
	
	var scaleForCanvasStyleW = 1;
	if(videoStyleW > 259){
		scaleForCanvasStyleW = 259/videoStyleW;
	}
	var scaleForCanvasStyleH = 1;
	if(videoStyleH > 142){
		scaleForCanvasStyleH = 142/videoStyleH;
	}
	
	var scaleForCanvasStyle = scaleForCanvasStyleW < scaleForCanvasStyleH ? scaleForCanvasStyleW : scaleForCanvasStyleH;
	
    var canvas = capture(video, scaleForCanvasStyle);
    canvas.ondblclick = function(){
        window.open(this.toDataURL());
    };
    if(snapshots.length >= 4){
    	return;
    }

  	snapshots.push(canvas);
  	
  	$(".capture-output").html = "";
  	var outputs = $(".capture-output");
    for(var i=0; i<snapshots.length; i++){
        outputs[i].appendChild(snapshots[i]);
    }
});

$("#btnSave").on("click",function(){
	if(snapshots.length > 0){
		
		window.opener.pageObject[openerPageName].videoCallback(snapshots);
		window.close();
	}
});


$(document).ready(function(){
	if(openerPageName == "cvlc01020-info"){
		$("#btnLoad").removeClass("d-block");
		$("#btnLoad").addClass("d-none");
		
		var fileInfo = [${fileInfo}];
		
		if(fileInfo.length > 0){
			var fileUrl = fileInfo[0].URL;
			
			$("#video").removeAttr("hidden");

			$("#video").html("<source src='" + "${pageContext.request.contextPath}" + "/" + fileUrl +"'>");
						
		} else {
			alert("동영상 파일이 없습니다.");
		}
	}
});

</script>
</body>
</html>