<%@ 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"/>" />

	<link rel="stylesheet" href="<c:url value="/resources/lib/fims/biz/paintweb/style/style.css"/>?${ver}" />
</head>
<body>
<c:set var="pageKorName" scope="request">사진 편집</c:set>

<img id="editableImage" />
<div id="paintWebTarget"></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/lib/fims/framework/jquery-ui/1.13.2/jquery-ui.js?${ver}"/>"></script>

<!-- json, xhtml -->
<script src="<c:url value='/resources/lib/fims/biz/paintweb/korean.js'/>?${ver}"></script>
<script src="<c:url value='/resources/lib/fims/biz/paintweb/paintweb-config.js'/>?${ver}"></script>
<script src="<c:url value='/resources/lib/fims/biz/paintweb/layout.js'/>?${ver}"></script>
<!-- init -->
<script src="<c:url value='/resources/lib/fims/biz/paintweb/pwlib.js'/>?${ver}"></script>
<script src="<c:url value='/resources/lib/fims/biz/paintweb/guiScript.js'/>?${ver}"></script>

<script src="<c:url value='/resources/lib/fims/biz/paintweb/paintweb.js'/>?${ver}"></script>
<script src="<c:url value='/resources/lib/fims/biz/paintweb/html2canvas.min.js'/>?${ver}"></script>



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

    //FIXME: pw instance 변수명 변경시 paintweb.js의 imageSaveTo() 내의 2564 line if(pw.image.modified) 변경 필요
    var pw;
    var originalInfomation = {};
    var editableImage = null;
	var isNumberPlate = false;
    
    const initEditor = () => {
    	
        pw = new PaintWeb();
        pw.config.imageLoad = editableImage;
        pw.config.guiPlaceholder = document.getElementById('paintWebTarget');
        pw.config.imageSave = fnImageSaveTo;
        pw.config.afterImageSave = fnAfterImageSave;

        pw.init();
    };
    
    function fnImageSaveTo(file, imgWidth, imgHeight, doc, _self){
    	
    	console.log(doc);
    	console.log(_self);
        
        if(isNumberPlate){
            if(!confirm('번호판 이미지를 추가하시겠습니까?'))  return;
        }else{
            if(!confirm('편집한 단속이미지를 저장하시겠습니까?'))  return;
        }

        window.opener.pageObject[openerPageName].editPhotoCallback(file, originalInfomation, isNumberPlate);
        return true;
    };

    function fnAfterImageSave(){
        window.close();
    };

    $(document).ready(function(){

    	var fileInfo = [${fileInfo}];
    	
    	if(fileInfo.length > 0){
    		originalInfomation = fileInfo[0];
    		
    		var fileUrl = fileInfo[0].URL;
    		var fullSrc = "${pageContext.request.contextPath}" + "/" + fileUrl;
 		
    		editableImage = document.getElementById('editableImage');
    		editableImage.src = fullSrc;
    		editableImage.onload = function () {
                initEditor();
                editableImage.style.display = 'none';
            }
            
            
    	} else {
    		alert("사진 파일이 없습니다.");
    	}

    });
</script>

</body>
</html>