/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	* 프로그램명: 슬라이드 롤링 스크립트 플러그인
	* 사용프레임웍: 제이쿼리
	* 개발자: 아이러시 UI개발팀 임종진
	* 개발완료: 2011.10.31
	* 최종 수정일: 2011.11.3
	* 버전:1.01

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* 기본값 정의 부분 */
(function($){
	$.fn.jqRollings=function(userOpts){
		var opts= jQuery.extend({
							keyImgs: $("#panel-store"), //키비주얼 객체
							thumbs: $(".roll_sub_inside"), //썸네일 객체
							titleTxt: $("#visual_title"), //타이틀 객체
							btnPrev: $(".carousel-prev-button"), //썸네일 버튼 객체
							btnNext: $(".carousel-next-button"),
							startBnIndex: 1,  //시작할 썸네일의 인덱스는 1부터 시작
							activeBnIndex: 1, // 썸네일에에서 활성화하고 싶은 엘리먼트의 인덱스, 앞에서부터 0,1,2,3...n
							moveSpeed: 500, //슬라이딩 타임
							autoRollingTime: 10000 //  오토롤링 타임
		},userOpts);
		
		
		var keyImgObj= opts.keyImgs 
		var keyImgWidth=keyImgObj.children().first().width();
		
		var thumbObj=opts.thumbs; 
		var banEls=thumbObj.children();
		var banElWidth=banEls.first().outerWidth(true);

		var titObj=opts.titleTxt.find("img"); 
		var bnBtnPrev=opts.btnPrev;  
		var bnBtnNext=opts.btnNext;
		
		var bnStartIndex=opts.startBnIndex; 
		var bnActiveIndex=opts.activeBnIndex; 
		var bnTransferLength=bnActiveIndex+1;
		var bnLastIndex=banEls.length;
		
		var movingSpeed=opts.moveSpeed;
		var delayTime=opts.autoRollingTime;
		var clickStatus=true; //광클방지용 플래그값(true: 클릭 이벤트 실행가능, false: 클릭 이벤트 실행 불가)
		var thumbClick=false; //keyvisual 모션 선택 (true: 썸네일 클릭상태)
		var autoActCheck=true; //자동롤링 설정(true: 자동실행)

		var initFn=function(){
				// 썸네일에 인덱스 부여
				thumbObj.children().each(function(i){
					$(this).data("thisIndex",i);
				});
				//키비쥬얼 컨테이너 폭 동적 할당
				keyImgObj.append(keyImgObj.children().slice(0,bnStartIndex-1))
										.css({"width": function(){return $(this).children().outerWidth("true")*$(this).children().length;}
									}); 

				//썸네일 컨테이너 폭 동적 할당 및 초기 시작 위치
				if(bnStartIndex<bnTransferLength){
					thumbObj.prepend(thumbObj.children().last())
				}else if(bnStartIndex>bnTransferLength){
					thumbObj.append(thumbObj.children().slice(0,bnStartIndex-bnTransferLength))
				}

				thumbObj.css({
											"width": function(){return ($(this).children().outerWidth("true"))*$(this).children().length;},
											"left":0
									}).children().eq(bnActiveIndex).addClass("current");
				//타이틀변경 
				changeTitle(thumbObj.children().eq(bnActiveIndex).data("thisIndex"))
			}
		
		// 현재 선택된 썸네일의 인덱스값 얻기
		var getThisIndex=function(dir){
			var tmp;
			banEls.each(function(){
				if($(this).hasClass("current") ==true){
					if(dir=="left") tmp=$(this).next().data("thisIndex");
					else  tmp=$(this).prev().data("thisIndex");
				}
			});
			return tmp;
		}

		// 썸네일 커서 상태 변경 (선택된 썸네일과 나머지에 대하여 Cursor스타일 재정의
		var btnCursor=function(){
			banEls.each(function(){
				if($(this).hasClass("current")==true) $(this).css("cursor","default");
				else $(this).css("cursor","pointer");
			});
		}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* 동작부분 */

		
		initFn(); //초기화 함수 호출
		var setAutoEvt;
		var autoMoveRoll=function(){setAutoEvt=setInterval(function(){rollingAction('left')} ,delayTime);}
		var autoMoveStop=function(){clearInterval(setAutoEvt);}
		if(autoActCheck==true) autoMoveRoll(); //자동롤링


		// 롤링 액션 부분   
		function rollingAction(moveDir){//alert(autoActCheck)
			if(clickStatus==true){
				clickStatus=false; //광클방지를 위해 false로 변경
				

				if(moveDir=="left"){
					//썸네일 모션
					changeTitle(getThisIndex(moveDir));
					thumbObj.animate(
						{"left": banElWidth*-1},
						movingSpeed,
						function(){
							$(this).append($(this).children().first()).css("left",0);
							clickStatus=true;
						}
					).children().removeClass("current").eq(bnTransferLength).addClass("current");
					
					//keyVisual 모션 선택
					if(thumbClick==true){
						keyImgObj.children().first().animate({"opacity":0},200,function(){
							$(this).appendTo(keyImgObj).css("opacity",1);
							keyImgObj.children().first().hide().fadeIn(400);
						});
						thumbClick=false;
					}else{
						keyImgObj.animate(
							{"left":keyImgWidth*-1},
							movingSpeed,
							function(){
								$(this).append($(this).children().first()).css("left",0);
							}
						);
					}
					
				}else{
					//썸네일 모션
					thumbObj.prepend(thumbObj.children().last())	.css("left",banElWidth*-1);
					changeTitle(getThisIndex(moveDir));
					thumbObj.animate(
						{"left":0},
						movingSpeed,
						function(){
							$(this).css("left",0);
							clickStatus=true;
						}
					).children().removeClass("current").eq(bnTransferLength-1).addClass("current");

					//keyVisual 모션 선택
					if(thumbClick==true){
						keyImgObj.children().first().animate({"opacity":0},200,function(){
							keyImgObj.children().last().prependTo(keyImgObj).hide().fadeIn(400);
							$(this).first().css("opacity",1);
						});
						thumbClick=false;
					}else{
						keyImgObj.prepend(keyImgObj.children().last()).css("left",keyImgWidth*-1);
						keyImgObj.animate(
							{"left":0},
							movingSpeed,
							function(){
								$(this).css("left",0);
							}
						);
					}
					
				}
				//썸네일 커서 상태 변경
				btnCursor();
				
			}
		}
		


		//타이틀 
		function changeTitle(newIndex){
			var titObjSrc=titObj.attr("src");
			var orgSrcIndex=titObjSrc.slice(titObjSrc.lastIndexOf("/")+1,titObjSrc.length).split(".")[0].split("_")[2];
			//alert("오리지날====>"+orgSrcIndex+":::::::: 변경될 인덱스값====>"+newIndex)
			titObj.fadeOut(200,function(){
				$(this).attr("src",function(){return $(this).attr("src").replace("sub_"+orgSrcIndex, "sub_"+newIndex)})
				.fadeIn(300);
			});
		}

		// 버튼 액션
		bnBtnPrev.bind({
			"mouseover":function(){ autoMoveStop()},
			"mouseout":function(){ autoMoveRoll()},
			"click":function(){rollingAction("right")}
		});
		bnBtnNext.bind({ 
			"mouseover":function(){ autoMoveStop()},
			"mouseout":function(){ autoMoveRoll()},
			"click":function(){rollingAction("left")}
		});
		

		//썸네일 액션
		banEls.bind({
			"mouseover":function(){ autoMoveStop()},
			"mouseout":function(){ autoMoveRoll()},
			"click":function(){
				thumbClick=true;
				if($(this).hasClass("current") ==false){
					if($(this).index()<1) rollingAction("right");
					else rollingAction("left");
					return false;
				}
			}
		});
		
	}
})(jQuery);