이미지 롤링(Image rolling)

/*
 * jQuery Image rolling Plugin
 * @author 	ddakker
 * @date 	2012-01-30
 * ex)	

 * 			
 *     		
 *    		...
 *		
 *		
 *		
 *		
 *
 */
;(function($) {
	/**
	 * 상하 이미지 롤링(추후 좌우 추가)
	 * @param viewCount 			이미지 보여줄 갯수
	 * @param delay					이동 주기
	 * @param duration				Effect 지속 시간
	 * @param btNextId				Up,Left 이동 버튼
	 * @param btPrevId				Down,Right 이동 버튼
	 * @param direction				이동방향
	 * @param autoRolling			자동 롤링
	 * @param callbackRollingFun	이미지 롤링 시 호출될 콜백 함수 ex) callbackRollingFun(direction, options.rollingEl, selectedIndex);
	 */
	$.fn.rolling = function(viewCount, delay, duration, btNextId, btPrevId, direction, bAutoRolling, callbackMoveFun) {
		if( this.children().length == 0 ) return;

		var clickArr = new Array();
		var options = {};

		var bEffectProgress		= false;
		var autoRollingTimer	= null;
		var clickedProcessTimer	= null;

		options.el		  			= $(this);
		options.viewCount 			= viewCount;
		options.imgCount 			= options.el.children().length;
		options.direction 			= (direction==undefined)?"DOWN":direction;
		options.delay				= delay;
		options.duration 			= duration;
		options.itemWidth 			= options.el.children().eq(0).width() + Number(options.el.children().eq(0).attr("border"))*2;
		options.itemHeight 			= options.el.children().eq(0).height() + Number(options.el.children().eq(0).attr("border"))*2;
		options.btNextId 			= btNextId;
		options.btPrevId 			= btPrevId;
		options.autoRolling 		= (bAutoRolling==undefined)?true:bAutoRolling;
		options.callbackMoveFun 	= (callbackMoveFun==undefined)?null:callbackMoveFun;;

		options.rollingEl  	= null;

		options.el.children().each(function(){
			if( $(this).attr("onclick") )
				$(this).css("cursor", "pointer");
		});

		this.css("position", "relative");
		this.css("overflow", "hidden");
		if( options.direction == "UP" || options.direction == "DOWN" ){
			this.css("width", options.itemWidth);
			this.css("height", options.viewCount * options.itemHeight);
		}else{
			this.css("width", options.viewCount * options.itemWidth);
			this.css("height", options.itemHeight);
		}

		options.el.children().wrapAll('
');
		options.rollingEl = options.el.children("div");
		options.rollingEl.css("position", "absolute");
		options.rollingEl.attr("align", "left");
		options.rollingEl.css("left", "0");
		options.rollingEl.css("top", "0");
		if( options.direction == "UP" || options.direction == "DOWN" ){
			options.rollingEl.css("height", this.height()*2);
		}else{
			options.rollingEl.css("width", this.width()*2);
		}

		options.rollingEl.children().each(function(i){
			options.rollingEl.children().eq(i).attr("idx", i);
		});

		if( options.imgCount >= viewCount ){
			$("#" + btPrevId).bind("click", function(){
				if( options.direction == "UP" || options.direction == "DOWN" )
					clickArrAdd("UP");
				else
					clickArrAdd("LEFT");
			}).css("cursor", "pointer");
			$("#" + btNextId).bind("click", function(){
				if( options.direction == "UP" || options.direction == "DOWN" )
					clickArrAdd("DOWN");
				else
					clickArrAdd("RIGHT");
			}).css("cursor", "pointer");

			if( options.autoRolling ){
				autoRolling();

				this.mouseover(function() {
					stopRolling();
				}).mouseout(function(){
					autoRolling();
				});
			}
		}

		// 동작 추가 및 호출
		function clickArrAdd(direction){
			clickArr.push(direction);

			stopRolling();

			clickArrProcess();
		}

		// 동작 처리 호출
		function clickArrProcess(){
			if( clickedProcessTimer != null ) return;

			clickedProcessTimer = setInterval(function(){
				if( bEffectProgress == false && clickArr.length > 0 ){
					move(clickArr.slice(0, 1), true);

					clickArr = clickArr.slice(1);
				}
			}, 100);
		}

		function autoRolling(){
			if( clickedProcessTimer ){
				clearInterval(clickedProcessTimer);
				clickedProcessTimer = null;
			}

			if( clickedProcessTimer != null ) return;

			autoRollingTimer = setInterval(function(){
				if( bEffectProgress == false ){
					move(null, false);
				}
			}, options.delay);
		}

		function stopRolling(){
			clearInterval(autoRollingTimer);
			autoRollingTimer = null;
		}

		// 동작 처리
		function move(direction, btClicked){
			if( direction ) options.direction = direction;

			var topMoveSize		= 0;
			var leftMoveSize	= 0;
			if( options.direction == "UP" || options.direction == "LEFT" ){
				options.rollingEl.append(options.rollingEl.children().eq(0).clone());
				if( options.direction == "UP" ){
					topMoveSize		= "-=" + options.itemHeight + "px";;
					leftMoveSize	= 0;
				}else{
					topMoveSize		= 0;
					leftMoveSize	= "-=" + options.itemWidth + "px";;
				}
			}else if( options.direction == "DOWN" || options.direction == "RIGHT" ){
				options.rollingEl.prepend(options.rollingEl.children().eq(options.rollingEl.children().length-1).clone());

				if( options.direction == "DOWN" ){
					options.rollingEl.css("top", (options.itemHeight*-1)+"px");
					topMoveSize		= "+=" + options.itemHeight + "px";;
					leftMoveSize	= 0;
				}else{
					options.rollingEl.css("left", (options.itemWidth*-1)+"px");
					topMoveSize		= 0;
					leftMoveSize	= "+=" + options.itemWidth + "px";;
				}
			}

			bEffectProgress = true;
			options.rollingEl.animate({
				top: topMoveSize,
				left: leftMoveSize
			}, options.duration, function(){
				if( options.direction == "UP" || options.direction == "LEFT" ){
					options.rollingEl.children().eq(0).remove();
					options.rollingEl.css("top", "0px");
					options.rollingEl.css("left", "0px");
				}else if( options.direction == "DOWN" || options.direction == "RIGHT" ){
					options.rollingEl.children().eq(options.rollingEl.children().length-1).remove();
				}
				bEffectProgress = false;

				if( btClicked == true && clickArr.length == 0 ){
					autoRolling();
				}

				// 롤링 후 콜백 함수 호출
				if( options.callbackMoveFun != null ) options.callbackMoveFun("" + options.direction, options.rollingEl, Number(options.rollingEl.children().eq(0).attr("idx")));
			});

		}
	};

})(jQuery);