/*	
 * Name: KEPCO
 * Part: JavaScript for ui ＆ plug-in
 * Author : pk.choi
 */
(function($){
//	jQuery.noConfict();
	$(document).ready(function() {		

		/*	
		 * Part: 갤러리미리보기 썸네일 슬라이드
		 * Function:
		 * 		이전/다음 버튼 클릭시 5개씩 좌우 슬라이드(마지막 썸네일까지 보여지면 더이상 스크롤되지않음)
		 * 		썸네일 클릭시 페이지 새로고침 -> 상단 해당 상세 이미지 변경, 클릭했던 썸네일 활성화
		 *		클릭한 썸네일은 활성화처리(<span><strong class="hide">제목</strong></span>태그 비활성화 - span태그가 있는것이 디폴트)
		 *		초기에 페이지에서 전체썸네일수를 변수로 받아 참조한다.
		 */
		 	
		//테스트용 json data
		var jsondata = {"data":[
									{"a_href":"http://www.naver.com","img_src":"/front/img/temp/sample1.jpg","img_alt":"sample1의 대체텍스트"},
									{"a_href":"http://www.nate.com","img_src":"/front/img/temp/sample2.jpg","img_alt":"sample2의 대체텍스트"},
									{"a_href":"http://www.daum.net","img_src":"/front/img/temp/sample3.jpg","img_alt":"sample3의 대체텍스트"},
									{"a_href":"http://dbcut.com","img_src":"/front/img/temp/sample4.jpg","img_alt":"sample4의 대체텍스트"},
									{"a_href":"http://www.nate.com","img_src":"/front/img/temp/sample5.jpg","img_alt":"sample5의 대체텍스트"},
									{"a_href":"http://www.daum.net","img_src":"/front/img/temp/sample6.jpg","img_alt":"sample6의 대체텍스트"},
									{"a_href":"http://www.naver.com","img_src":"/front/img/temp/sample7.jpg","img_alt":"sample7의 대체텍스트"},
									{"a_href":"http://www.daum.net","img_src":"/front/img/temp/sample8.jpg","img_alt":"sample8의 대체텍스트"},
									{"a_href":"http://www.naver.com","img_src":"/front/img/temp/sample1.jpg","img_alt":"sample9의 대체텍스트"},
									{"a_href":"http://www.nate.com","img_src":"/front/img/temp/sample2.jpg","img_alt":"sample10의 대체텍스트"},
									{"a_href":"http://www.daum.net","img_src":"/front/img/temp/sample3.jpg","img_alt":"sample11의 대체텍스트"},
									{"a_href":"http://dbcut.com","img_src":"/front/img/temp/sample4.jpg","img_alt":"sample12의 대체텍스트"},
									{"a_href":"http://www.nate.com","img_src":"/front/img/temp/sample5.jpg","img_alt":"sample13의 대체텍스트"},
									{"a_href":"http://www.daum.net","img_src":"/front/img/temp/sample6.jpg","img_alt":"sample14의 대체텍스트"},
									{"a_href":"http://www.naver.com","img_src":"/front/img/temp/sample7.jpg","img_alt":"sample15의 대체텍스트"},
									{"a_href":"http://www.daum.net","img_src":"/front/img/temp/sample8.jpg","img_alt":"sample16의 대체텍스트"}
								]}
//		alert(jsondata.data[0].img_src);

		var $gal_list = $('.gallery_box .gallery_list');		
		
		var thumbs_page = 5; //한화면에서 보이는 최대 썸네일갯수

//		var total = totalThumbs;	//개발단에서 썸네일의 총갯수를 받아온다
//		var total = jsondata.data.length;	//개발단에서 썸네일의 총갯수를 받아온다
		var total = $("#totalCnt").val();	//썸네일의 총갯수
		
		var nCurrentTmbIndex = eval($("#currentThumb").val() - 1); //현재 활성화 썸네일인덱스 ------------------------------ 인덱스가 1부터 시작하면 -1 해준다.
		
		//현재페이지 인덱스
		var nCurrentPageIndex = Math.floor(nCurrentTmbIndex/thumbs_page);
		
		//총페이지수
		var nPageLength = Math.ceil(total/thumbs_page);
		
		var doms = new Array(nPageLength);
		doms[nCurrentPageIndex] = $gal_list;

		var dist = 165;	//이동할 간격
		var SPEED = 600;
		var animating = false;
		var EASING_ANIMATE = "easeInOutCubic";
		
		//현재썸네일 초기 활성화
		$gal_list.children().eq(nCurrentTmbIndex%thumbs_page).addClass('on');
		
		//이전버튼 클릭
		$('.gallery_perv_box a.ico_prev').bind('click', function () {			
			if(!animating) {
				animating = true;
				prevPage();
			}
			return false;
		});
		
		//다음버튼 클릭
		$('.gallery_perv_box a.ico_next').bind('click', function () {	
			if(!animating) {
				animating = true;
				nextPage();
			}
			return false;
		});

		//썸네일 롤오버/아웃/클릭
		$(this).on('mouseenter', '.gallery_box .gallery_list li a', function (event) {
			$(this).parent().css({"height":"100%",	"background":"#000"});
			$(this).find('img').css({"opacity":"0.5"});
		});
		$(this).on('mouseleave', '.gallery_box .gallery_list li a', function (event) {
			$(this).parent().css({"background":"none"});
			$(this).find('img').css({"opacity":"1"});
		});
		
		//이전페이지
		function prevPage(){
			if(nCurrentPageIndex == 0){
				alert('처음 입니다.');
				animating = false;
				return false;
			}else{
				if(nCurrentPageIndex < 0)
					nCurrentPageIndex = 0;				
				
				//이전에 보여질 썸네일들이 이전에 생성되지 않았다면 생성한 뒤 스크롤 애니메이션 실행
				//생성되었다면 바로 스크롤 애니메이션 실행
				if(doms[nCurrentPageIndex-1] == undefined){
					$('.gallery_box').prepend('<ul class="gallery_list" style="position:absolute; width:870px; top:0"></ul>');
					doms[nCurrentPageIndex-1] = $('.gallery_box .gallery_list').first();
					createDom(nCurrentPageIndex-1, 'prev');
				}else{
					$("#galleryPage").val(eval($("#galleryPage").val())-eval(1));
				}
				slidePage(nCurrentPageIndex-1, -1);
			}
		}
		
		//다음 페이지
		function nextPage(){
			if(nCurrentPageIndex == nPageLength - 1){
				alert('마지막 입니다.');
				animating = false;
				return false;
			}else{
				if(nCurrentPageIndex >= nPageLength)
					nCurrentPageIndex = nPageLength - 1;							 
	
				//다음에 보여질 썸네일들이 이전에 생성되지 않았다면 생성한 뒤 스크롤 애니메이션 실행
				//생성되었다면 바로 스크롤 애니메이션 실행
				if(doms[nCurrentPageIndex+1] == undefined){
					$('.gallery_box').append('<ul class="gallery_list" style="position:absolute; width:870px; top:0"></ul>');
					doms[nCurrentPageIndex+1] = $('.gallery_box .gallery_list').last();								
					createDom(nCurrentPageIndex+1, 'next');
				}else{
					$("#galleryPage").val(eval($("#galleryPage").val())+eval(1));
				}
				slidePage(nCurrentPageIndex+1, 1);
			}
		}		
		
		//thumb dom생성
		function createDom(currentPageIndex, gubun){
			if(gubun == "prev"){
				$.getJSON("/kepco/ntcob/fncGoGal.json", {
					boardCd : $("#inpBoardCd").val()
					,galleryPage : eval($("#galleryPage").val())-eval(1)
					,searchCondition : $("#inpSearchCondition").val()
					,searchKeyword : $("#inpSearchKeyword").val()
				}, function(returnJson){
					var objData = returnJson.resultViewGal;
					if (typeof objData == "object") {
						$.each(objData, function(intIndex, strValue){
							var thisData = objData[intIndex];
							var seq = thisData.boardSeq;
							var temp = "";
							
							if(intIndex == 4){
								temp += "<li style=\"margin-right: 0px;\">";
							}else{
								temp += "<li>";
							}
							temp += "	<a href=https://home.kepco.co.kr/"#\" onclick=\"fncGoView('"+seq+"', '"+(intIndex+1)+"'); return false;\" >";
							temp += "		<img src=https://home.kepco.co.kr/"/kepco/cmmn/fms/getImageThumb.do?atchFileId=%22+thisData.thumbnail+%22&amp;fileSn=%22+thisData.thumbnailSn+%22&amp;width=150&amp;height=123\%22 alt=\""+thisData.boardTitle+"\" onload=\"resizeImg(this);\"/>";
							temp += "		<span class=\"bg01\"><strong class=\"hide\">"+thisData.boardTitle+"</strong></span>";
							temp += "	</a>";
							temp += "</li>";
							
							$(doms[currentPageIndex]).append(temp);
						});
						$("#galleryPage").val(eval($("#galleryPage").val())-eval(1));
					}
				});
			}else{
				$.getJSON("/kepco/ntcob/fncGoGal.json", {
					boardCd : $("#inpBoardCd").val()
					,galleryPage : eval($("#galleryPage").val())+eval(1)
					,searchCondition : $("#inpSearchCondition").val()
					,searchKeyword : $("#inpSearchKeyword").val()
				}, function(returnJson){
					var objData = returnJson.resultViewGal;
					if (typeof objData == "object") {
						$.each(objData, function(intIndex, strValue){
							var thisData = objData[intIndex];
							var seq = thisData.boardSeq;
							var temp = "";
							
							if(intIndex == 4){
								temp += "<li style=\"margin-right: 0px;\">";
							}else{
								temp += "<li>";
							}
							temp += "	<a href=https://home.kepco.co.kr/"#\" onclick=\"fncGoView('"+seq+"', '"+(intIndex+1)+"'); return false;\" >";
							temp += "		<img src=https://home.kepco.co.kr/"/kepco/cmmn/fms/getImageThumb.do?atchFileId=%22+thisData.thumbnail+%22&amp;fileSn=%22+thisData.thumbnailSn+%22&amp;width=150&amp;height=123\%22 alt=\""+thisData.boardTitle+"\" onload=\"resizeImg(this);\"/>";
							temp += "		<span class=\"bg01\"><strong class=\"hide\">"+thisData.boardTitle+"</strong></span>";
							temp += "	</a>";
							temp += "</li>";
							
							$(doms[currentPageIndex]).append(temp);
							
						});
						$("#galleryPage").val(eval($("#galleryPage").val())+eval(1));
					}	
				});
			}
		}
		
		//페이지 썸네일 좌우 슬라이드
		function slidePage(currentPageIndex, dir){		
		
			// 사라질 현재 객체를 구한다.
			var $currentThumbs = $(doms[nCurrentPageIndex]);
			
			// 가운데로 이동할 다음 객체를 구한다.
			var $nextThumbs = $(doms[currentPageIndex]);
			
			// 현재객체를 왼/오른쪽으로 움직이기.
			$currentThumbs.stop().animate({left:(-((dist+20)*thumbs_page) * dir)}, SPEED, EASING_ANIMATE, function(){	animating = false; });		  
					
			// 다음객체를 움직이기 전에, 다음객체위치의 시작위치 설정하기.
			$nextThumbs.stop().css({left:((dist+20) * thumbs_page) * dir}).animate({left:0}, SPEED, EASING_ANIMATE);		  	

			nCurrentPageIndex = currentPageIndex;
		}		
		
	});//end : document ready	

})(jQuery);