// JavaScript Document
/*
 * subject : carousel plugin 제작
 * author : pipe  
 * date : 2013.
 * copyright : Copyright All rights reserved by pipe 
 * 무단 배포 알아서 하세요 ^^ 
 */
$(function(){
	jQuery.fn.pipeCarousel = function(opts){
		var $contentsContainer = $(this);	                           // 컨텐츠 컨테이너
		var $buttons = $contentsContainer.children('a');			   // 좌우측 버튼클립
		var $mask = $contentsContainer.children('div.mask');		   // 이미지 컨테이너 마스크 
		var $imageContainer = $mask.children('ul.imageContainer');     // 이미지 컨테이너
		var $mc = $imageContainer.children();					       // 이미지 무비클립
		var $len = 0;					// 총개수
		var $view = 0;                  // 화면에 보여지는 이미지 개수
		var $initWidth = 0;				// 기본가로크기
		var $initAllWidth = 0;			// 전체크기
		var $isClick = true;			// 무비클립이 다 이동할때까지  animateMc()실행 금지
		var $autoPlay = 0;				// setInterval()값을 저장
		/*
		 * motion_duration: 이미지클립이 움직이는 이동시간 1000은 1초
		 * auto_duration  : 전체 이미지클립이 실행되는 시간(자동)
		 * dir            : 방향지정
		 * view           : 보여지는 이미지 개수
		 * contents_gap   : 버튼과 이미지 컨테이너 사이공간
		 * gap			  : 이미지와 이미지 사이의 공간
		 * $opts.kindDir		  : 버튼을 클릭했을 때 역방향 순방향 결정
		 */
		var $opts = {motion_duration:500,auto_duration:3000,dir:0,view:4,kindDir:true,contents_gap:0,gap:0};
		
		$.extend($opts,opts);
		
		readyCarousel();
		
		function readyCarousel(){
			init();
			if($len > 1){
				setImagePosition();
				events();
				autoMotion();
			}
		}
		
		function init()
		{			
			$len = $mc.length;
			$initWidth = $($mc[0]).width() + $opts.gap;
			$initAllWidth = ($len-1) * $initWidth;
			$view = $opts.view *  $initWidth;
			
			// 이미지 컨테이너 자동크기조절
			$imageContainer.width($view * $initWidth);
			
			// 마스크 자동크기조절
			$mask.width($view - $opts.gap);
			
			// 마스크의 x축(left) 위치 설정
			$mask.css("left",$buttons.eq(0).width() + $opts.contents_gap);
			
			// 컨텐츠 컨테이너 자동크기조절
			$contentsContainer.width(($buttons.eq(0).width() * 2 + $view + $opts.contents_gap * 2)-$opts.gap);
		}
		
		// 이미지 정렬
		function setImagePosition()
		{
			$mc.each(function(index){
				var ptx = $(this).position().left;
				$(this).css('left',$opts.gap*index);
			});
		}
		
		function events()
		{
			// 자동 멈춤 마우스 오버
			$contentsContainer.bind('mouseenter',function(){
				clearAutoMotion();
			});
			
			// 자동 움직임 마우스 아웃
			$contentsContainer.bind('mouseleave',function(){
				autoMotion();
			});
			
			// 왼쪽 오른쪽 버튼
			$buttons.each(function(index){
				$(this).click(function(e){
					$opts.dir = index;
					animateMc();
					e.preventDefault();
					e.stopPropagation();
				});
			});
		}
		
		// 자동넘김
		function autoMotion()
		{
			if($autoPlay != 0)
				clearInterval($autoPlay);
			
			if($opts.kindDir)
				$opts.dir = 0;
			else
				$opts.dir = 1;
			$autoPlay = setInterval(animateMc,$opts.auto_duration);
		}
		
		function clearAutoMotion()
		{
			if($autoPlay != 0)
				clearInterval($autoPlay);
			$autoPlay = 0;
		}
			
		/*
		 * param   $dir : 방향 결정
		 * 0 -> left , 1 -> right
		 */
		
		function animateMc()
		{
			var count = 0;
			var move;
			if($opts.kindDir)
				move = ($opts.dir == 0) ? -1 * $initWidth : $initWidth;
			else 
				move = ($opts.dir == 0) ? $initWidth : -1 * $initWidth;
			
			if($isClick)
			{
				$isClick = false;
				$mc.each(function(index){
					if(setPosition($opts.dir,$(this),index) != undefined)
						$(this).css("left",setPosition($opts.dir,$(this),index));
							
					$(this).animate({left:'+=' + move},$opts.motion_duration,'easeOutQuad',function(){
						if(++count == $len) $isClick = true;
					});
				});
			}
		}
		
		/*
		 * desc : 경계선을 벗어난 이미지를 옮길 위치의 값을 반환
		 * param dir : 방향
		 * param mc : 이미지클립
		 * param index : 색인
		 */
		
		function setPosition(dir,mc,index)
		{
			switch(dir)
			{
				case 0:
					// 이미지가 왼쪽 경계선을 벗어날때
					if($opts.kindDir)
					{
						if(mc.position().left <= -1 * $initWidth)
							return $initAllWidth - ($initWidth * index) + ($opts.gap * index);  // position:relative일때는 현재 위치한 곳이 기준(0) -> 거리로 계산
					}
					else
					{
						if(mc.position().left >= $initAllWidth)
							return -$initWidth - ($initWidth * index) + ($opts.gap * index);    // position:relative일때는 현재 위치한 곳이 기준(0) -> 거리로 계산
					}
					break;
				case 1:
					// 이미지가 오른쪽 경계선을 벗어날때
					if($opts.kindDir)
					{
						if(mc.position().left >= $initAllWidth)
							return -$initWidth - ($initWidth * index) + ($opts.gap * index);    // position:relative일때는 현재 위치한 곳이 기준(0) -> 거리로 계산
					}
					else
					{
						if(mc.position().left <= -1 * $initWidth)
							return $initAllWidth - ($initWidth * index) + ($opts.gap * index);  // position:relative일때는 현재 위치한 곳이 기준(0) -> 거리로 계산
					}
					break;
			}
		}
	};
});