<%@ 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="/webjars/"/>"
		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="/webjars/image/favicon.ico"/>" />
	<!-- Fonts -->
	<link rel="stylesheet" href="<c:url value="/webjars/applib/font/notoSansKr/fontface.css"/>" />
	<!-- Icons. Uncomment required icon fonts -->
	<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/fonts/boxicons.css"/>" />
	<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/fonts/fontawesome.css"/>" />
	<link rel="stylesheet" href="<c:url value="/webjars/applib/font/bootstrap-icons.css"/>" />
	<link rel="stylesheet" href="<c:url value="/webjars/applib/font/material-icons.css"/>" />
	<link rel="stylesheet" href="<c:url value="/resources/fonts/xit-icon.css"/>" />
	<!-- Core CSS -->
	<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/css/rtl/core.css"/>" class="template-customizer-core-css" />
	<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/css/rtl/theme-default.css"/>" class="template-customizer-theme-css" />
	<link rel="stylesheet" href="<c:url value="/webjars/css/styles.css"/>" />

	<link rel="stylesheet" href="<c:url value="/webjars/applib/css/overwrite.css?${ver}"/>" />
	<link rel="stylesheet" href="<c:url value="/webjars/applib/css/applib.css?${ver}"/>" />

	<link rel="stylesheet" href="<c:url value="/resources/css/fims.css?${ver}"/>" />

	<!-- Vendors CSS -->
	<link rel="stylesheet" href="<c:url value="/webjars/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.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 w-100 h-px-75">

	<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 h-px-70">
    		<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 h-px-70">
			<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 h-px-70">
			<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 w-px-1400 h-px-850 p-2 border-card bg-bordergray">
		<div class="d-flex justify-content-center align-items-center w-100 h-100 border-label-dark">
			<video id="video" class="mh-px-700 mw-px-1200" controls="true" hidden>
			</video>
		</div>
	</div>
	<div class="card d-inline-flex align-items-center ms-1 min-w-px-300 w-px-300 h-px-850 p-2">
		<div class="card m-1 bg-program-popup cleanparking capture-output align-items-center w-100 h-px-150">

		</div>
		<div class="card m-1 bg-program-popup cleanparking capture-output align-items-center w-100 h-px-150">

		</div>
		<div class="card m-1 bg-program-popup cleanparking capture-output align-items-center w-100 h-px-150">

		</div>
		<div class="card m-1 bg-program-popup cleanparking capture-output align-items-center w-100 h-px-150">

		</div>
	</div>
</div>

<!-- Core JS -->
<script src="<c:url value="/webjars/3rd-party/sneat/libs/popper/popper.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/js/bootstrap.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/libs/jquery/jquery.js"/>"></script>

<script src="<c:url value="/webjars/3rd-party/sneat/js/config.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/js/helpers.js"/>"></script>
<script src="<c:url value="/webjars/3rd-party/sneat/js/menu.js"/>"></script>

<!-- base -->
<script src="<c:url value="/webjars/js/base/base.js"/>"></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"){
		$("#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>