<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>포토 에디터</title>

	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="/publish/css/reset.css">
	<link rel="stylesheet" href="/publish/css/jquery.mCustomScrollbar.css">
	<link rel="stylesheet" href="/publish/css/common.css">
	<link rel="stylesheet" href="/publish/css/button.css">
	<link rel="stylesheet" href="/publish/css/content.css">
	<link rel="stylesheet" href="/publish/css/popup.css">
	<link rel="stylesheet" href="/publish/css/font.css">
	<link rel="stylesheet" href="/css/tui-color-picker.css" />
	<link rel="stylesheet" href="/css/service-basic.css" />
	
	
	<script>var errorLogs=[];window.onerror=function(o,r,e,n){errorLogs.push({message:o,source:r,lineno:e,colno:n})};</script>
	<script type="text/javascript">
		var totalResultPhoListLength = parseInt(0);
		function linkPhoPage(pageNo){
			$('#pageIndex').val(pageNo);
			var form = document.letterForm;
			var data = new FormData(form);
			$.ajax({
	            cache : false,
	            url : "<c:url value='/web/mjon/msgdata/selectPhotoDataList2Ajax.do'/>", 
	            async:false,
	            type : 'POST', 
	            data : data,
	            dataType:'json',
	            processData: false,
	   	     	contentType: false,
	            success : function(returnData, status){
	    			if(status == "success") {
	    				
	    				var html = "";
	    				for(var i=0; i<returnData.resultPhoList.length; i++) {
	    					
	    					var strImgPath = returnData.resultPhoList[i].fileStreCours+"/"+returnData.resultPhoList[i].streFileNm + "." +returnData.resultPhoList[i].fileExtsn;
	    					var imgId = returnData.resultPhoList[i].attachFileId;
	    					var fileSn = returnData.resultPhoList[i].fileSn;
	    					var letterId = returnData.resultPhoList[i].letterId;
	    					html += "<li onclick='selectTemplate("+parseInt(i+totalResultPhoListLength)+",\""+ letterId + "\");'>";
	    					html += 	"<img id='img"+parseInt(i+totalResultPhoListLength)+"' src='<c:url value='/cmm/fms/getImage2.do'/>?atchFileId="+imgId+"&fileSn="+fileSn+"' class='"+imgId+"'>";
	    					html += "</li>";
	    				}
	    				
	    				totalResultPhoListLength += returnData.resultPhoList.length;
	    				
	    				$("#scrollPaging").append(html);
	    				$('#pageIndex').val(pageNo);
	    				console.log('page:'+pageNo)
	    			}else{ alert("ERROR!");return;} 
	    		},
	    
	            error : function(request , status, error){
	    			alert("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
	    			
	            }
	        });
		}
		
		function fontSizeView(obj){
			var target=$('#input-font-size-range');
			var txt=$(obj).children('option:selected').val();
			target.val(txt);
		}
	</script>
</head>
<body oncontextmenu="return false;">
	<form id="letterForm" name="letterForm" method="post">
		<input type="hidden" id="letterType" name="letterType" value=""/>
		<input type="hidden" id="memberType" name="memberType" value=""/>
		<input type="hidden" id="categoryCode" name="categoryCode" value=""/>
		<input type="hidden" id="searchKeyword" name="searchKeyword" value=""/>
		<input type="hidden" id="pageIndex" name="pageIndex" value="<c:out value='${letterVO.pageIndex}' default='1' /> "/>
	</form>
	<div class="ptEditer_wrap body-container">
		<!-- photo editer header -->
		<div class="ptEditer_header tui-image-editor-controls">
			<!-- tab button -->
			<ul class="tabType3">
				<li class="tab input-wrapper"><a href="#"><i class="myPhoto"></i><span>내 사진<br>불러오기</span><input type="file" accept=".jpg" class="input-image-file" multiple /></a></li>
				<li class="tab active"><a href="#" onclick="TabType3(this,'2');"><i class="recomTemplate"></i><span>추천 템플릿</span></a></li>
				<li class="tab disable"><a href="#"><i class="sticker"></i><span>스티커</span></a></li>
				<li class="tab disable"><a href="#"><i class="editPhoto"></i><span>포토편집</span></a></li>
			</ul><!--// tab button -->
			<!-- tab content2 추천 템플릿  -->
			<div class="header_cont recomTem_cont current" id="tab3_2">
				<h3>추천 템플릿</h3>
				<p>템플릿 선택 시, 기존 포토는<br>삭제되고 선택한 포토로<br>변경됩니다.</p>
				<div class="search_box">
					<label for="" class="label">추천 템플릿 검색 입력</label>
					<input type="text" name="templateSearching" id="templateSearching" placeholder="템플릿 검색" onfocus="this.placeholder=''" onblur="this.placeholder='템플릿 검색'">
					<label for="" class="label">추천 템플릿 검색</label>
					<button onclick="searchTemplate();"><img src="/publish/images/popup/search.png" alt="검색"></button>
					<label for="" class="label">추천 템플릿 선택</label>
					<select name="recommendTemplate" id="recommendTemplate" onchange="searchTemplate();">
						<option value="">전체</option>
						<c:forEach var="cateList" items="${cateCodeList}" varStatus="status">
								<option value="<c:out value='${cateList.cateCode}'/>"><c:out value="${cateList.cateNm}"/></option>
						</c:forEach>
					</select>
				</div>
				
				<div class="contWrap_scroll" id="scrollPagingWrap">
					<ul class="contWrap" id="scrollPaging"></ul>
				</div>
				
			</div><!--// tab content2 추천 템플릿  -->
			<!-- tab content3 스티커  -->
			<div class="header_cont sticker_cont" id="tab3_3">
				<h3>스티커</h3>
				<p>이미지에 스티커를 활용하여<br>꾸밀 수 있습니다.</p>
				<div class="contWrap_scroll" id="icon-sub-menu">
					<ul class="contWrap menu">
						<!-- <li class="menu-item icon-text" data-icon-type="arrow"><img src="/publish/images/svg/arrow0.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="cancel">✖</li>
						<li class="menu-item icon-text" data-icon-type="clock">clock</li>
						<li class="menu-item icon-text" data-icon-type="idea">idea</li>
						<li class="menu-item icon-text" data-icon-type="phone">phone</li>
						<li class="menu-item icon-text" data-icon-type="1">1</li>
						<li class="menu-item icon-text" data-icon-type="2">2</li> -->
						<li class="menu-item icon-text" data-icon-type="arrow1"><img src="/publish/images/svg/arrow1.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow2"><img src="/publish/images/svg/arrow2.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow9"><img src="/publish/images/svg/arrow9.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow10"><img src="/publish/images/svg/arrow10.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow11"><img src="/publish/images/svg/arrow11.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow12"><img src="/publish/images/svg/arrow12.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow13"><img src="/publish/images/svg/arrow13.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow14"><img src="/publish/images/svg/arrow14.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow15"><img src="/publish/images/svg/arrow15.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow16"><img src="/publish/images/svg/arrow16.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow17"><img src="/publish/images/svg/arrow17.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow18"><img src="/publish/images/svg/arrow18.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow19"><img src="/publish/images/svg/arrow19.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow20"><img src="/publish/images/svg/arrow20.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="arrow21"><img src="/publish/images/svg/arrow21.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="figure1"><img src="/publish/images/svg/figure1.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="figure2"><img src="/publish/images/svg/figure2.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="figure3"><img src="/publish/images/svg/figure3.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="figure4"><img src="/publish/images/svg/figure4.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="figure5"><img src="/publish/images/svg/figure5.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="figure6"><img src="/publish/images/svg/figure6.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="figure7"><img src="/publish/images/svg/figure7.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="label1"><img src="/publish/images/svg/label1.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="label2"><img src="/publish/images/svg/label2.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="label3"><img src="/publish/images/svg/label3.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="label4"><img src="/publish/images/svg/label4.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="label5"><img src="/publish/images/svg/label5.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="label6"><img src="/publish/images/svg/label6.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="label7"><img src="/publish/images/svg/label7.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="label12"><img src="/publish/images/svg/label12.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="label13"><img src="/publish/images/svg/label13.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="label14"><img src="/publish/images/svg/label14.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc1"><img src="/publish/images/svg/etc1.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc2"><img src="/publish/images/svg/etc2.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc3"><img src="/publish/images/svg/etc3.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc4"><img src="/publish/images/svg/etc4.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc5"><img src="/publish/images/svg/etc5.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc10"><img src="/publish/images/svg/etc10.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc11"><img src="/publish/images/svg/etc11.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc7"><img src="/publish/images/svg/etc7.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc8"><img src="/publish/images/svg/etc8.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc9"><img src="/publish/images/svg/etc9.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc22"><img src="/publish/images/svg/etc22.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc23"><img src="/publish/images/svg/etc23.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc24"><img src="/publish/images/svg/etc24.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc12"><img src="/publish/images/svg/etc12.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc13"><img src="/publish/images/svg/etc13.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc14"><img src="/publish/images/svg/etc14.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc15"><img src="/publish/images/svg/etc15.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc16"><img src="/publish/images/svg/etc16.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc17"><img src="/publish/images/svg/etc17.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc18"><img src="/publish/images/svg/etc18.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc19"><img src="/publish/images/svg/etc19.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc20"><img src="/publish/images/svg/etc20.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc21"><img src="/publish/images/svg/etc21.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc25"><img src="/publish/images/svg/etc25.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc26"><img src="/publish/images/svg/etc26.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc27"><img src="/publish/images/svg/etc27.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc28"><img src="/publish/images/svg/etc28.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc29"><img src="/publish/images/svg/etc29.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc30"><img src="/publish/images/svg/etc30.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc31"><img src="/publish/images/svg/etc31.svg" alt="" /></li>
						<li class="menu-item icon-text" data-icon-type="etc32"><img src="/publish/images/svg/etc32.svg" alt="" /></li>
					</ul>
				</div>
			</div><!--// tab content3 스티커  -->
			<!-- tab content4 포토편집  -->
			<div class="header_cont photoEdit_cont" id="tab3_4">
				<div>
					<h3>텍스트</h3>
					<p>텍스트 입력하기를 클릭하시면<br>텍스트창이 생성됩니다.</p>
					<div class="search_box2">
						<button type="button" id="btn-text" class="edit_btn"><i class="put_text"></i>텍스트 입력하기</button>
						<label for="" class="label">폰트 타입 선택</label>
						<select class="font_type btn-text-family" >
							<option value="notoSans">Noto Sans</option>
							<option value="tmonMonsori">티몬 몬소리</option>
							<option value="cafe24Dangdanghae">Cafe24당당해</option>
							<option value="cafe24Ohsquare">Cafe24아네모네</option>
							<option value="cafe24Simplehae">Cafe24심플해</option>
							<option value="nanumMyeongjoEB">나눔명조 EB</option>
							<option value="nanumSquareEB">나눔스퀘어 EB</option>
							<option value="nanumBarunGothicR">나눔바른고딕R</option>
							<option value="nanumBarunGothicB">나눔바른고딕B</option>
							<option value="nanumBarunGothicL">나눔바른고딕L</option>
						</select>
						<div class="font_size_wrap">
							<label for="input-font-size-range" class="label">폰트 크기 선택</label>
							<input type="text" id="input-font-size-range" class="font_size" autocomplete="off">
							<select name="fontSize" id="font_size_list" class="font_size_list" onchange="fontSizeView(this);">
								<option value="10px">10px</option>
								<option value="11px">11px</option>
								<option value="12px">12px</option>
								<option value="13px">13px</option>
								<option value="14px">14px</option>
								<option value="15px">15px</option>
								<option value="16px">16px</option>
								<option value="18px">18px</option>
								<option value="20px">20px</option>
								<option value="24px">24px</option>
								<option value="32px">32px</option>
								<option value="48px">48px</option>
								<option value="72px">72px</option>
								<option value="112px">112px</option>
								<option value="127px">127px</option>
								<option value="254px">254px</option>
								<option value="500px">500px</option>
							</select>
							<%-- <input type="text" id="input-font-size-range" list="font_size_list" class="font_size">
							<datalist id="font_size_list">
								<option value="10px"></option>
								<option value="11px"></option>
								<option value="12px"></option>
								<option value="13px"></option>
								<option value="14px"></option>
								<option value="15px"></option>
								<option value="16px"></option>
								<option value="18px"></option>
								<option value="20px"></option>
								<option value="24px"></option>
								<option value="32px"></option>
								<option value="48px"></option>
								<option value="72px"></option>
								<option value="112px"></option>
								<option value="127px"></option>
								<option value="254px"></option>
								<option value="500px"></option>
							</datalist> --%>
						</div>
					</div>
					<ul class="editContWrap text">
						<li class="btn-text-style" data-style-type="b"><a href="#"><i></i><span>굵게</span></a></li>
						<li class="btn-text-style" data-style-type="i"><a href="#"><i></i><span>기울임</span></a></li>
						<li class="btn-text-style" data-style-type="u"><a href="#"><i></i><span>밑줄</span></a></li>
					</ul>
					<div class="color_palette">
						<span id="tui-text-color-picker">텍스트/스티커 색상</span>
					</div>
					
				</div>
				<div>
					<h3>자르기</h3>
					<button type="button" class="menu-item edit_btn" id="btn-crop"><i class="cut_img"></i>이미지 자르기</button>
				 	<div class="set_btn" id="crop-sub-menu" style="display:none;">
						<button type="button" class="set_app" id="btn-apply-crop"><i></i>적용</button>
						<button type="button" class="set_cancel" id="btn-cancel-crop"><i></i>취소</button>
					</div>
				</div>
				
				<div>
					<h3>회전 및 밝기</h3>
					<input type="hidden" id="input-range-brightness-value1" value="0">
				   	<input type="hidden" id="input-range-brightness-value2" value="0">
				   	<input type="hidden" id="input-range-brightness-value3" value="0">
					<ul class="editContWrap2">
						<li id="btn-rotate-counter-clockwise"><a href="#"><i></i><span>왼쪽<br>회전</span></a></li>
						<li id="btn-rotate-clockwise"><a href="#"><i></i><span>오른쪽<br>회전</span></a></li>
						<li id="btn-flip-x"><a href="#"><i></i><span>좌우<br>반전</span></a></li>
						<li id="btn-flip-y"><a href="#"><i></i><span>상하<br>반전</span></a></li>
						<li id="input-check-brightness-dark"><a href="#"><i></i><span>어둡게</span></a></li>
						<li id="input-check-brightness-light"><a href="#"><i></i><span>밝게</span></a></li>
						<li id="input-check-grayscale" value="1"><a href="#"><i></i><span>흑백</span></a></li>
						<li id="input-check-invert" value="1"><a href="#"><i></i><span>음영</span></a></li>
					</ul>
				</div>
			</div><!--// tab content4 포토편집  -->
		</div><!--// photo editer header -->
		<!-- photo editer body -->
		
		<div class="ptEditer_body clearfix">
			<div class="image_preview">
				<div class="preview drag_img input-wrapper on" id="preview1" onclick="canvasTab(1)">
					<div class="preview_img_wrap no_img preview1">
						<div class="img_number"><span></span></div>
						<img src="" alt="" style="display:none;">
						<button type="button" class="img_close" title="이미지 삭제 버튼" onclick="deleteImage(1);" style="display:none;"><i></i></button>
						<button type="button" class="img_add" title="이미지 추가 버튼" onclick="$('#input-file1').click();"><i></i></button>
						<input type="file" accept=".jpg" class="input-image-file" multiple id="input-file1" style="width:0px !important;height:0px !important"/>
					</div>
				</div>
				<div class="preview drag_img input-wrapper" id="preview2" onclick="canvasTab(2)">
					<div class="preview_img_wrap no_img preview2">
						<div class="img_number"><span></span></div>
						<img src="" alt="" style="display:none;">
						<button type="button" class="img_close" title="이미지 삭제 버튼" onclick="deleteImage(2);" style="display:none;"><i></i></button>
						<button type="button" class="img_add" title="이미지 추가 버튼" onclick="$('#input-file2').click();"><i></i></button>
						<input type="file" accept=".jpg" class="input-image-file" multiple id="input-file2" style="width:0px !important;height:0px !important"/>
					</div>
				</div>
				<div class="preview drag_img input-wrapper" id="preview3" onclick="canvasTab(3)">
					<div class="preview_img_wrap no_img preview3">
						<div class="img_number"><span></span></div>
						<img src="" alt="" style="display:none;">
						<button type="button" class="img_close" title="이미지 삭제 버튼" onclick="deleteImage(3);" style="display:none;"><i></i></button>
						<button type="button" class="img_add" title="이미지 추가 버튼" onclick="$('#input-file3').click();"><i></i></button>
						<input type="file" accept=".jpg" class="input-image-file" multiple id="input-file3" style="width:0px !important;height:0px !important"/>
					</div>
				</div>
			</div>
			<p class="req_text">+ 버튼클릭 또는,<br>파일 끌어오기로<br>첨부 가능합니다.</p>
			<div class="edit_area">
				<div class="edit_area_wrap">
					<div class="tui-image-editor" id="tui-image-editor1"></div>
					<div class="tui-image-editor" id="tui-image-editor2" style="display:none;"></div>
					<div class="tui-image-editor" id="tui-image-editor3" style="display:none;"></div>
					<span class="imageSize" id="imageSize1" style="display:none;"></span>
					<span class="imageSize" id="imageSize2" style="display:none;"></span>
					<span class="imageSize" id="imageSize3" style="display:none;"></span>
				</div>
			</div>
		</div>
		<!--// photo editer body -->
		<!-- photo editer footer -->
		<div class="ptEditer_footer clearfix">
			<div class="footer_left">
				<button type="button" class="menu-item disabled" id="btn-undo"><i class="footer_prev"></i>이전</button>
				<button type="button" class="menu-item disabled" id="btn-redo"><i class="footer_next"></i>다음</button>
				<button type="button" class="menu-item" id="btn-reset"><i class="footer_replay"></i>초기화</button>
			</div>
			<div class="footer_right">
				<button type="button" onclick="canvasToImg()">제작완료</button>
				<button type="button" onclick="window.close();"><i class="footer_close"></i>닫기</button>
			</div>
			
		</div><!--// photo editer footer -->
	</div>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/tui-code-snippet.min.js"></script>
	<script src="/js/FileSaver.min.js"></script>
	<script src="/js/fabric.min.js"></script>
	<script src="/js/tui-image-editor.js"></script>
	<script src="/js/tui-color-picker.min.js"></script>
	
	<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
	<script src="/js/service-basic.js"></script>
	
	<script src="/publish/js/jquery-3.5.0.js"></script>
	<script src="/publish/js/jquery.mCustomScrollbar.concat.min.js"></script>
	<script src="/publish/js/common.js"></script>
	<script src="/publish/js/content.js"></script>
	<script src="/publish/js/popup.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	
	<script>
	
	$(document).ready(function(){ 
		linkPhoPage(1);
	});
	

	function searchTemplate() {
		$("#scrollPaging").html("");
		
		$("#searchKeyword").val($("#templateSearching").val());
		$("#categoryCode").val($("#recommendTemplate option:selected").val());
		
		
		linkPhoPage(1);
	}
	
	function canvasToImg() {
		//제작완료 시 크롭모드일 때, 적용 버튼 눌러주기
		if(activeCropEnter == true) {
			activeCropEnter = false;
			$btnApplyCrop.trigger("click"); 
		}

		//초록 점 제거
		imageEditor1.deactivateAll();
		imageEditor2.deactivateAll();
		imageEditor3.deactivateAll();
		
		var openerImgCnt = $(opener.document).find("#imgCnt").val();	//부모창의 이미지 갯수
		
		var imgCount = $('.preview_img_wrap').not('.no_img').length;	// 이미지에디터에서 업로드 할 이미지 갯수
		
		//부모창의 이미지 + 에디터에서 넘기는 이미지 갯수
		if((imgCount + Number(openerImgCnt)) > 3) {
			alert("메시지에 첨부할 수 있는 이미지는 최대 3장입니다.");
			return;
		}
		setTimeout(function() {
			$('.preview_img_wrap').each(function(idx, el) {
				if( !$(el).hasClass('no_img') ) {
					var imageName = window['imageEditor'+(idx+1)].getImageName();
					var pId = $(el).parent().attr('id').replace('preview', '');	// preview[번호] 아이디에서 번호만 추출
					var canvas = $("#tui-image-editor"+ pId +" > div > .lower-canvas");	//작업된 이미지의 캔버스
					var imgSrc = canvas.get(0).toDataURL("image/jpeg");	//img src 에 들어갈 데이터로 추출
					var imgId = $('.preview'+(idx+1)).find("img").attr("class");
					opener.imageControl($('<img src="' + imgSrc + '" />'), "edit_y", imageName, imgId);	//object로 만들어 함수 호출
				}
			});
			self.close();
		}, 500);
		
	}
	
	
	</script>
	</body>
</html>
