/*
 * dextupload X5(https://www.dextsolution.com) Common Java Script written by gagamel.
 *
 * Copyright (c) 2019 gagamel
 * Dual licensed under GPL (GPL-LICENSE.txt) licenses.
 *
 * $Date: 2019-06-26 $
 * 
 * 사용 예)
 * 		// HTML 태그는 다음과 같은 구조로 되어 있어야 하며
 * 		// id 명칭은 dextIndex, dext5-container 가 필요하다.
 * 		<ul class="dexterTable">
 * 			<li class="dexterNo" id="dx5Index">
 * 				<div>1</div>
 * 				<div>2</div>
 * 			</li>
 * 			<li>
 * 				<div id="dext5-container" style="width: 100%; height: 450px;"></div>
 * 			</li>
 * 		</ul>
 * 
 * 		<button type="button" class="btn btn-base btn-sm" id="btnAddFiles">파일 추가</button>
 * 		<button type="button" class="btn btn-default btn-sm" onclick="gagaDx5.deleteChooseFile();">선택 삭제</button>
 * 		<button type="button" class="btn btn-default btn-sm" onclick="gagaDx5.deleteAllFiles();">전체 삭제</button>
 * 		<button type="button" class="btn btn-info btn-sm" onclick="gagaDx5.moveFile(true);">위로 이동</button>
 * 		<button type="button" class="btn btn-info btn-sm" onclick="gagaDx5.moveFile(false);">아래로 이동</button>
 * 		<button type="button" class="btn btn-base btn-sm" onclick="gagaDx5.previewImage();">이미지 보기</button>
 * 		<button type="button" class="btn btn-base btn-sm" onclick="gagaDx5.uploadFiles();">업로드/수정</button>
 *
 * 		// Import할 자바스크립트 파일
 * 		<script type="text/javascript" src="/dx5/dextuploadx5-configuration.js"></script>
 *		<script type="text/javascript" src="/dx5/dextuploadx5.js"></script>
 * 		<script type="text/javascript" src="/ux/plugins/gaga/gaga.dx5.js"></script>
 * 
 * 		<script type="text/javascript">
 * 			// Dextupload X5 생성. 파일추가 버튼 ID는 22라인에 정의된 btnAddFiles과 동일해야 함
 * 			$(function() { gagaDx5.createDX5("dext5", "btnAddFiles"); });
 * 
 * 			// Dextupload X5 생성 후 호출되는 이벤트
 * 
 * 			var onDX5Created = function(id) {
 * 				var actionUrl = '/dextupload/goods/thumbnail/image/save'
 * 						+ '/' + $('#goodsImgForm input[name=goodsCode]').val()
 * 						+ '/' + $('#goodsImgForm input[name=goodsColor]').val();
 * 				gagaDx5.onDX5Created(actionUrl, goodsImgList);
 * 			}
 * 
 * 			// Dextupload X5 에러 시 호출되는 이벤트
 * 			var onDX5Error = function(id, code, msg) {
 * 				alert(id + " => " +  code + "\n" + msg);
 * 			}
 * 
 * 			// Dextupload X5 업로드 성공 시 호출되는 이벤트
 * 			var onDX5UploadCompleted = function(id) {
 * 				
 * 			}
 * 
 * 			// Dextupload X5 이미지 등록이 완료된 후 호출되는 이벤트
 * 			var onDX5ItemsAdded = function(id, count) {
 * 				gagaDx5.resortDX5FileList();
 * 			}
 *		</script>
 */

var gagaDx5 = {
	dxId : "",
	previewUrl : "",
	dxProdGbn : "",
	obj : {
		dx5Index : $('#dx5Index'),
		dx5CardArea: $('#dx5CardArea')
	},
	
	/**
	 * Create a dx5
	 * @param dx5Id - dx5 ID
	 * @param fileAddBtnId - 파일추가버튼 ID
	 * @author gagamel
	 * @since 2019. 6. 26
	 */
	createDX5 : function(dx5Id, fileAddBtnId, previewDomain, prodGbn) {
		dxId = dx5Id;
		previewUrl = previewDomain;
		dxProdGbn = prodGbn;
		dx5.create({
			mode: "multi", id: dx5Id, parentId: dx5Id + "-container",
			btnFile: fileAddBtnId/*, btnFolder: "btnAddFolder"*/
		});
	},
	
	/**
	 * Dextupload X5 생성 후 호출되는 이벤트
	 * @param dx5Id - dx5 ID
	 * @param actionUrl - Upload URL
	 * @author gagamel
	 * @since 2019. 6. 26
	 */
	onDX5Created : function(actionUrl, imgList) {
		var dx = dx5.get(dxId);
		
		dx.setUploadURL(dx5.canonicalize(actionUrl));
		
		// 기존 업로드된 파일을 dx5에 그리기
		$.each(imgList, function(idx, item) {
			//if (item.extmallImgYn == 'Y'){	//외부몰이미지구분용
			//	dx.addVirtualFile({ vindex : item.sysImgNm, name : item.sysImgNm, size : 20000});
			//}else{
				dx.addVirtualFile({ vindex : item.sysImgNm, name : item.sysImgNm, size : 10000, url : item.sysImgUrl});
			//}
		});
		
		// 이미지 항목 높이 조절
		dx.setUIStyle({ itemHeight: parseInt(24, 10) });
		
		// 헤더 높이 조절
		dx.setUIStyle({ headerHeight: parseInt(28, 10) });
		
		// 이미지 미리보기 세팅
		var totCnt = dx.getTotalVirtualFileCount();
		
		// DX5 파일 리스트 순번 재정렬
		gagaDx5.resortDX5FileList();
		
		// DX5 이미지 미리보기 영역 리스트 재정렬
		gagaDx5.drawDX5ImagePreview();
		
		// 이미지 미리보기 적용
		dx.setPreviewEnable(true);
		
		// 이미지 미리보기 이벤트로 적용
		dx.setPreviewMethod(2);
	},
	
	// 파일 선택 삭제
	deleteChooseFile : function() {
		var dx = dx5.get(dxId);
		
		dx.removeSelected();
		
		// DX5 파일 리스트 순번 재정렬
		gagaDx5.resortDX5FileList();
		
		// DX5 이미지 미리보기 영역 리스트 재정렬
		gagaDx5.drawDX5ImagePreview(dxId);
	},
	
	// 파일 전체 삭제
	deleteAllFiles : function() {
		var dx = dx5.get(dxId);
		
		dx.removeAll();
		
		// DX5 파일 리스트 순번 재정렬
		gagaDx5.resortDX5FileList();
		
		// DX5 이미지 미리보기 영역 리스트 재정렬
		gagaDx5.drawDX5ImagePreview();
	},
	
	// 파일 위/아래로 이동
	moveFile : function(isUp) {
		var dx = dx5.get(dxId);
		
		var totCnt = dx.getTotalItemCount();
		var selCnt = 0;
		var selIdx = 0;
		
		// 2개 이상 선택했는지 확인
		for (var i = 0; i < totCnt; i++) {
			if (dx.isSelectedByIndex(i)) {
				selIdx = i;
				selCnt++;
			}
		}
		
		if (selCnt > 1) {
			alert("파일이 2개 이상 선택되었습니다.");
			return;
		}
		
		var ti = parseInt(selIdx, 10);
		
		if (isNaN(ti)) {
			alert("파일의 인덱스(순서)가 필요합니다.");
			return;
		}
		
		if (isUp)
			dx.moveItemUp(ti);
		else
			dx.moveItemDown(ti);
		
		// DX5 이미지 미리보기 영역 리스트 재정렬
		gagaDx5.drawDX5ImagePreview(dxId);
	},
	
	// 이미지 미리보기
	previewImage : function() {
		var dx = dx5.get(dxId);
		
		var indices = dx.getSelectedIndices();
		
		if (indices.length > 1 || indices.length == 0) {
			alert("이미지 파일을 한 개만 선택해 주세요.");
			return;
		}
		
		var idx = indices[0];
		ti = parseInt(idx, 10);
		
		if (isNaN(ti)) {
			alert("파일의 인덱스(순서)가 필요합니다.");
			return;
		}

		dx.preview(ti);
	},
	
	// DX5 파일 리스트 순번 재정렬
	resortDX5FileList : function() {
		var dx = dx5.get(dxId);
		
		this.obj.dx5Index.html('');
		
		var totCnt = dx.getTotalItemCount();
		var tag = "";
		
		for (var i = 0; i < totCnt; i++) {
			if (i < 16) {
				tag += '<div>' + (i + 1) + '</div>';
			} else {
				break;
			}
		}
		
		this.obj.dx5Index.html(tag);
	},
	
	// DX5 이미지 미리보기 영역 리스트 재정렬
	drawDX5ImagePreview : function() {
		var dx = dx5.get(dxId);
		
		this.obj.dx5CardArea.html('');
		
		var totCnt = dx.getTotalItemCount();
		
		var tag = '';
		
		for (var i = 0 ; i < totCnt; i++) {
			var item = dx.getItemByIndex(i);
			//console.log("dx.item=>" + item);
			//console.log("dx.item.name=>" + item.name);
			//console.log("dx.item.extmallImgYn=>" + item.extmallImgYn);
			if (item.type == "FILE") {
				continue;
			}
			if (dxProdGbn =="goods"){
				tag += '<div class="imgCard">\n';
				//if (item.size > 10000){
				//	tag += '<div class="imgCard"  style="border:2px solid #8597eb">\n';	
				//}else{
				//	tag += '<div class="imgCard">\n';
				//}
				tag += '	<button type="button" class="cardClose" onclick="gagaDx5.deletePreviewImage(\'' + i + '\');">닫기</button>\n';
				tag += '	<ul>\n';
				tag += '		<li>\n';
				tag += '			<img src="' + previewUrl + '/' + item.url + '/' + item.name + '" width="70" height="70"/>\n';
				//if (item.size > 10000){
				//	tag += '			<img src="' + previewUrl + '/upload/goods/type5/' + item.name + '" width="70" height="70"/>\n';
				//}else{
				//	tag += '			<img src="' + previewUrl + '/upload/goods/type4/' + item.name + '" width="70" height="70"/>\n';
				//}
				tag += '		</li>\n';
				tag += '		<li>이미지' + (i + 1) + '</li>\n';
				tag += '	</ul>\n';
				tag += '	<p>' + item.name + '</p>\n';
				tag += '</div>\n';
			//}else if (dxProdGbn =="magazine"){
			//	tag += '<div class="imgCard">\n';
			//	tag += '	<button type="button" class="cardClose" onclick="gagaDx5.deletePreviewImage(\'' + i + '\');">닫기</button>\n';
			//	tag += '	<ul>\n';
			//	tag += '		<li>\n';
			//	tag += '			<img src="' + previewUrl + '/upload/michaa/magazine/' + item.name + '" width="70" height="70"/>\n';
			//	tag += '		</li>\n';
			//	tag += '		<li>이미지' + (i + 1) + '</li>\n';
			//	tag += '	</ul>\n';
			//	tag += '	<p>' + item.name + '</p>\n';
			//	tag += '</div>\n';
			}else if (dxProdGbn =="lookbook"){
				tag += '<div class="imgCard">\n';
				tag += '	<button type="button" class="cardClose" onclick="gagaDx5.deletePreviewImage(\'' + i + '\');">닫기</button>\n';
				tag += '	<ul>\n';
				tag += '		<li>\n';
				tag += '			<img src="' + previewUrl + '/lookbook/' + item.name + '" width="70" height="70"/>\n';
				tag += '		</li>\n';
				tag += '		<li>이미지' + (i + 1) + '</li>\n';
				tag += '	</ul>\n';
				tag += '	<p>' + item.name + '</p>\n';
				tag += '</div>\n';	
			//}else if (dxProdGbn =="collection"){
			//	tag += '<div class="imgCard">\n';
			//	tag += '	<button type="button" class="cardClose" onclick="gagaDx5.deletePreviewImage(\'' + i + '\');">닫기</button>\n';
			//	tag += '	<ul>\n';
			//	tag += '		<li>\n';
			//	tag += '			<img src="' + previewUrl + '/upload/michaa/collection/COLLECTION_AD/' + item.name + '" width="70" height="70"/>\n';
			//	tag += '		</li>\n';
			//	tag += '		<li>이미지' + (i + 1) + '</li>\n';
			//	tag += '	</ul>\n';
			//	tag += '	<p>' + item.name + '</p>\n';
			//	tag += '</div>\n';
			//}else if (dxProdGbn =="mdlookbook"){
			//	tag += '<div class="imgCard">\n';
			//	tag += '	<button type="button" class="cardClose" onclick="gagaDx5.deletePreviewImage(\'' + i + '\');">닫기</button>\n';
			//	tag += '	<ul>\n';
			//	tag += '		<li>\n';
			//	tag += '			<img src="' + previewUrl + '/michaa/campaign/md/' + item.name + '" width="70" height="70"/>\n';
			//	tag += '		</li>\n';
			//	tag += '		<li>이미지' + (i + 1) + '</li>\n';
			//	tag += '	</ul>\n';
			//	tag += '	<p>' + item.name + '</p>\n';
			//	tag += '</div>\n';		
			}
		}
		
		this.obj.dx5CardArea.html(tag);
	},
	
	// 파일 업로드
	uploadFiles : function() {
		var dx = dx5.get(dxId);
		
		var totCnt = dx.getTotalItemCount(); // 모든 항목 개수
		
		// 업로드 할 때 필요한  데이터를 보내지 못해 MetaData로 세팅 후 보냄
		for (var i = 0; i < totCnt; i++) {
			var item = dx.getItemByIndex(i);
			if (item.type == "FILE") { // MetaData는 FILE type만 등록 가능
				dx.setMetaDataByIndex(i, "name", item.name);
			}
		}
		
		if (dx.hasUploadableItems()) { // 업로드할 파일이 있으면
			dx.upload("AUTO");
		} else {
			gagaDx5.uploadAfterProcess(dxId);
		}
	},
	
	// 업로드 후처리
	uploadAfterProcess : function() {
		var dx = dx5.get(dxId);
		
		// Biz단에서 반드시 구현해야 함
		fnUploadAfterProcess(dxId, dx.getResponses()[0]);
	},
	
	// 미리보기 영역에서 삭제 시
	deletePreviewImage : function(idx) {
		var dx = dx5.get(dxId);
		
		var ti = parseInt(idx, 10);
		
		if (isNaN(ti)) {
			alert("파일의 인덱스(순서)가 필요합니다.");
			return;
		}
		
		dx.removeByIndex(ti);
		
		// DX5 파일 리스트 순번 재정렬
		gagaDx5.resortDX5FileList();
		
		// DX5 이미지 미리보기 영역 리스트 재정렬
		gagaDx5.drawDX5ImagePreview();
	}
	
}
