if(window.help !== undefined){
	help.prototype.list.push("FimsComponentization 클래스 : 특정 HTML요소에 기능을 추가할 수 있다.");
}

class FimsComponentization {
	
	static help(){
		console.log("fnMakeSpinnerSelect(셀렉트박스,이전버튼,다음버튼) : 특정 셀렉트박스를 버튼클릭으로 옵션 선택 가능한 셀렉트박스로 만든다.");
		console.log("fnMakeOptionStyleSelect(셀렉트박스) : 특정 셀렉트박스를 선택된 옵션의 스타일이 적용된 셀렉트박스로 만든다.");
		console.log("fnMakeRowSpinner(테이블row,up버튼,down버튼,스크롤컨테이너,validator) : 특정 테이블을 행 위치 이동이 가능한 테이블로 만든다.");
		console.log("fnMakeSingleImageViewer(img태그,fileInput태그,파일경로속성명,파일이름속성명) : 특정 이미지 태그를 단일 업로드 이미지 뷰어로 만든다.");
	}
	
	/**************************************************************************
	* 특정 셀렉트박스를 버튼클릭으로 옵션 선택 가능한 셀렉트박스로 만든다.
	**************************************************************************/
	static fnMakeSpinnerSelect(selectEl, prevBtnEl, nextBtnEl){

		$(selectEl).on("animationend", function(){
			$(selectEl).removeClass("highlight-once");
		});
		$(prevBtnEl).on("click", function(){
			var selected = $(selectEl).find("option:selected");
			var prev = selected.prev();
			if(prev.length >= 1){
				$(selectEl).val(prev.val());
			} else {
				$(selectEl).addClass("highlight-once");
			}
		});
		$(nextBtnEl).on("click", function(){
			var selected = $(selectEl).find("option:selected");
			var next = selected.next();
			if(next.length >= 1){
				$(selectEl).val(next.val());
			} else {
				$(selectEl).addClass("highlight-once");
			}
		});
	}
	
	/**************************************************************************
	* 특정 셀렉트박스를 선택된 옵션의 스타일이 적용된 셀렉트박스로 만든다.
	**************************************************************************/
	static fnMakeOptionStyleSelect(selectEl){
		$(selectEl).addClass("option-style-select");

		selectEl.changeUI = function(){
			
			var selected = $(this).find("option:selected");
			
			if(selected.length <= 0){
				selectEl.dataset.optionStyle = "";
				selectEl.title = "";
				return;
			}

			selectEl.dataset.optionStyle = selected.val();
			selectEl.title = selected[0].title;
		};
		
		$(selectEl).on("change", function(){
			selectEl.changeUI();
		});

		selectEl.changeUI();
	}
	
	/**************************************************************************
	* 특정 테이블을 행 위치 이동 가능한 테이블로 만든다.
	**************************************************************************/
	static fnMakeRowSpinner(tableRowEl, upBtnEl, downBtnEl, scrollEl, validFunc){

		if(validFunc != undefined && validFunc != null){
			tableRowEl.validForComponent = validFunc;
		} else {
			tableRowEl.validForComponent = function(eventInfo){
				return true;
			};
		}

		$(upBtnEl).on("click", function(){
			var tbody = $(tableRowEl).parent();
			
			var theadHeight = $(scrollEl).find("thead").outerHeight();
			var scrollElStart = $(scrollEl).offset().top + theadHeight;
			var scrollElHeight = $(scrollEl).height() - theadHeight - VERTICAL_SCROLL_HEIGHT;
			var scrollMiddle = scrollElStart + (scrollElHeight/2);
			
			if($(tableRowEl).index() == 0){
				return;
			}
			
			var beforeIndex = $(tableRowEl).index() - 1;
			var beforeTr = $(tbody).find("tr").eq(beforeIndex);
			

			var eventInfo = {
				clickedButtonType : "up",
				currentRow : tableRowEl,
				siblingRow : beforeTr
			};
			if(!tableRowEl.validForComponent(eventInfo)){
				return;
			}
			
			
			var rowStart = beforeTr.offset().top;
			var rowHeight = beforeTr.outerHeight();
			var rowMiddle = rowStart+(rowHeight/2);
			
			beforeTr.before(tableRowEl);

			if(rowMiddle < scrollMiddle){
				var move = scrollMiddle - rowMiddle;
				$(scrollEl).scrollTop($(scrollEl).scrollTop() - move);
			}

			$(tbody).find("tr").removeClass("current-row");
			$(tableRowEl).addClass("current-row");
		});
		
		$(downBtnEl).on("click", function(){
			var tbody = $(tableRowEl).parent();
			
			var theadHeight = $(scrollEl).find("thead").outerHeight();
			var scrollElStart = $(scrollEl).offset().top + theadHeight;
			var scrollElHeight = $(scrollEl).height() - theadHeight - VERTICAL_SCROLL_HEIGHT;
			var scrollMiddle = scrollElStart + (scrollElHeight/2);
			
			if($(tableRowEl).index() == ($(tbody).children().length) - 1){
				return;
			}

			var afterIndex = $(tableRowEl).index() + 1;
			var afterTr = $(tbody).find("tr").eq(afterIndex);
			
			
			var eventInfo = {
				clickedButtonType : "down",
				currentRow : tableRowEl,
				siblingRow : afterTr
			};
			if(!tableRowEl.validForComponent(eventInfo)){
				return;
			}
			
			
			var rowStart = afterTr.offset().top;
			var rowHeight = afterTr.outerHeight();
			var rowMiddle = rowStart+(rowHeight/2);
			
			afterTr.after(tableRowEl);
			
			if(rowMiddle > scrollMiddle){
				var move = rowMiddle - scrollMiddle;
				$(scrollEl).scrollTop($(scrollEl).scrollTop() + move);
			}
			
			$(tbody).find("tr").removeClass("current-row");
			$(tableRowEl).addClass("current-row");
		});
		
		
	}
	
	/**************************************************************************
	* 특정 이미지 태그를 단일 업로드 이미지 뷰어로 만든다.
	**************************************************************************/
	static fnMakeSingleImageViewer(imgEl, fileInputEl, dataAttributeForFilePath, dataAttributeForFileName){
		
		$(imgEl).on("click", function(){
			$(fileInputEl).click();
		});
		
		$(fileInputEl).on("change", function(){
			
			if(this.files != null && this.files.length > 0){
				$(imgEl).attr("alt", this.files[0].name);
				$(imgEl).attr("src", (window.URL || window.webkitURL).createObjectURL(this.files[0]));

			} else {
				
				var orgnName = $(imgEl).attr("data-"+dataAttributeForFileName);
				var orgnPath = $(imgEl).attr("data-"+dataAttributeForFilePath);
				
				if(orgnPath != undefined && orgnPath != null && orgnPath != ""){
					$(imgEl).attr("alt", orgnName);
					$(imgEl).attr("src", orgnPath);
				} else {
					$(imgEl).attr("alt", "파일이 없습니다.");
					$(imgEl).attr("src", "/webjars/applib/img/no-image.svg");
				}
				
			}
			
		});
	}
	
	static getBrowserName() {
	    var agent = navigator.userAgent.toUpperCase();
	    if (agent.indexOf('TRIDENT') >= 0) {
	        return 'IE';
	    } else if (agent.indexOf('FIREFOX') >= 0) {
	        return 'FIREFOX';
	    } else if (agent.indexOf('EDG') >= 0) {
	        return 'EDGE';
	    } else if (agent.indexOf('CHROME') >= 0) {
	        return 'CHROME';
	    } else if (agent.indexOf('SAFARI') >= 0) {
	        return 'SAFARI';
	    } else {
	        return '';
	    }
	}
}

const BROWSER_NAME = FimsComponentization.getBrowserName();
var VERTICAL_SCROLL_HEIGHT = 14;
switch(BROWSER_NAME){
	case "EDGE" :
		VERTICAL_SCROLL_HEIGHT = 14;
		break;
	case "FIREFOX" :
		VERTICAL_SCROLL_HEIGHT = 15;
		break;
	case "CHROME" :
		VERTICAL_SCROLL_HEIGHT = 15;
		break;	
}