/*
 * JQuery Rolling 
 * songsungkyun@naver.com
 * 2008/03/16
 */
(function($) {
	$.fn.rolling = function(rollingDirection, width, height, viewingItemCount) {
		if (viewingItemCount == undefined) {
			viewingItemCount = 1;
		}
		
		if (rollingDirection == "left" || rollingDirection == "right") {
			this.css("width", width * viewingItemCount);
		} else {
			this.css("width", width);
		}
		
		if (rollingDirection == "up" || rollingDirection == "down") {
			this.css("height", height * viewingItemCount);
		} else {
			this.css("height", height);
		}
		this.css("position", "relative");
		this.css("overflow", "hidden");
		var rollingId = new Date().getTime();
		this.attr("rollingId", rollingId);
		this.empty();	
		
		var rollingContentDiv = $("<div/>").appendTo(this);
		rollingContentDiv.attr("id", rollingId);
		rollingContentDiv.css("position", "absolute");
		rollingContentDiv.css("left", "0");
		rollingContentDiv.css("top", "0");
		rollingContentDiv.attr("start", "false");
		rollingContentDiv.attr("rollingItemCount", "0");
		rollingContentDiv.attr("index", "0");
		rollingContentDiv.attr("height", height);
		rollingContentDiv.attr("width", width);
		rollingContentDiv.attr("viewingItemCount", viewingItemCount);
		rollingContentDiv.attr("rollingTime", "100");
		rollingContentDiv.attr("viewingTime", "3000");
		rollingContentDiv.attr("rollingAnimationFrame", "5");
		rollingContentDiv.attr("rollingDirection", rollingDirection);
		return this;
	};
	
	$.fn.getIntAttr = function(name) {
		return parseInt(this.attr(name));
	}
	
	$.fn.addRollingItem = function(html) {
		var rollingContentDiv = $("#" + this.attr("rollingId"));
		var rollingItemCount = rollingContentDiv.getIntAttr("rollingItemCount");
		rollingItemCount++;
		rollingContentDiv.attr("rollingItemCount", rollingItemCount);		
		
		var width = rollingContentDiv.getIntAttr("width");
		var height = rollingContentDiv.getIntAttr("height");
		var rollingDirection = rollingContentDiv.attr("rollingDirection");
		var rollingItem = null;
		var viewingItemCount = rollingContentDiv.getIntAttr("viewingItemCount");
		
		if (rollingDirection == "up") {
			rollingItem = $("<div/>").appendTo(rollingContentDiv);			
		} else if (rollingDirection == "right") {
			rollingItem = $("<div/>").prependTo(rollingContentDiv);
			rollingItem.css("display", "inline");
			rollingContentDiv.css("width", rollingItemCount * width);			
			rollingContentDiv.css("left", -1 * (rollingItemCount - viewingItemCount) * width);
		} else if (rollingDirection == "down") {
			rollingItem = $("<div/>").prependTo(rollingContentDiv);
			rollingContentDiv.css("top", -1 * (rollingItemCount - viewingItemCount) * height);
		} else if (rollingDirection == "left") {
			rollingItem = $("<div/>").appendTo(rollingContentDiv);
			rollingItem.css("display", "inline");
			rollingContentDiv.css("width", rollingItemCount * width);			
		}
		rollingItem.css("overflow", "hidden");
		rollingItem.css("width", width);
		rollingItem.css("height", height);
		rollingItem.html(html);
		return this;
	};
	
	$.fn.rollingAnimation = function(rollingId) {
		var rollingContentDiv = $("#" + rollingId);
		var delayTime = parseInt(rollingContentDiv.attr("rollingTime"));
		if (rollingContentDiv.attr("start") != "true") {
			setTimeout("$.fn.rollingAnimation('" + rollingId + "')", delayTime);
			return;
		}
		
		var rollingDirection = rollingContentDiv.attr("rollingDirection");
		var width = rollingContentDiv.getIntAttr("width");
		var height = rollingContentDiv.getIntAttr("height");
		var rollingAnimationFrame = rollingContentDiv.getIntAttr("rollingAnimationFrame");
		var index = rollingContentDiv.getIntAttr("index");
		var rollingItemCount = rollingContentDiv.getIntAttr("rollingItemCount");
		
		var positionName = null
		var positionValue = 0;
		var viewingItemCount = rollingContentDiv.getIntAttr("viewingItemCount");
				
		if (rollingDirection == "up") {
			positionName = "top";
			positionValue = (index + 1) * -1 * height/rollingAnimationFrame;						
		} else if (rollingDirection == "right") {
			positionName = "left";
			positionValue = -(rollingItemCount - viewingItemCount) * width + (index + 1) * width/rollingAnimationFrame;	
		} else if (rollingDirection == "down") {
			positionName = "top";
			positionValue = -(rollingItemCount - viewingItemCount) * height + (index + 1) * height/rollingAnimationFrame;			
		} else if (rollingDirection == "left") {
			positionName = "left";
			positionValue = (index + 1) * -1 * width/rollingAnimationFrame;			
		}
		
		rollingContentDiv.css(positionName, positionValue);		
		
		index++;
		rollingContentDiv.attr("index", index);		
		var currentRollingItemIndex = 0;
		
		
		
		if (index%rollingAnimationFrame == 0) {
			var currentRollingItem = null;
			if (rollingDirection == "up" || rollingDirection == "left") {
				currentRollingItemIndex = 0;				
			} else if (rollingDirection == "right" || rollingDirection == "down") {
				currentRollingItemIndex = rollingItemCount - 1;
			}
			
			currentRollingItem = $("div:eq(" + currentRollingItemIndex + ")", rollingContentDiv);
			var html = currentRollingItem.html();
			currentRollingItem.remove();
			
			var rollingItem = null;
			var positionName = null
			var positionValue = 0;
			var viewingItemCount = rollingContentDiv.getIntAttr("viewingItemCount");
		
			if (rollingContentDiv.attr("rollingDirection") == "up") {
				positionName = "top";
				positionValue = height + index * -height/rollingAnimationFrame;				
				rollingItem = $("<div/>").appendTo(rollingContentDiv);
			} else if (rollingContentDiv.attr("rollingDirection") == "right") {
				positionName = "left";
				positionValue = -((rollingItemCount - viewingItemCount) * width) + width + index * - width/rollingAnimationFrame;
				rollingItem = $("<div/>").prependTo(rollingContentDiv);				
				rollingItem.css("display", "inline");
			} else if (rollingContentDiv.attr("rollingDirection") == "down") {
				positionName = "top";
				positionValue = -((rollingItemCount - viewingItemCount) * height) + height + index * - height/rollingAnimationFrame;
				rollingItem = $("<div/>").prependTo(rollingContentDiv);
			} else if (rollingContentDiv.attr("rollingDirection") == "left") {
				positionName = "left";
				positionValue = width + index * -width/rollingAnimationFrame;
				rollingItem = $("<div/>").appendTo(rollingContentDiv);
				rollingItem.css("display", "inline");
			}
			
			rollingContentDiv.css(positionName, positionValue);		
			rollingItem.css("overflow", "hidden");
			rollingItem.css("width", width);
			rollingItem.css("height", height);
			rollingItem.html(html);
		
			delayTime = rollingContentDiv.attr("viewingTime");
			
			var previousRollingItem = $("div:eq(" + currentRollingItemIndex + ")", rollingContentDiv);
			rollingContentDiv.trigger("viewing", [previousRollingItem]);
			rollingContentDiv.attr("index", "0");
		}
		
		var currentRollingItem = $("div:eq(0)", rollingContentDiv);
		rollingContentDiv.trigger("rolling", [currentRollingItem]);
		
		setTimeout("$.fn.rollingAnimation('" + rollingId + "')", delayTime);
	};
	
	$.fn.startRolling = function(rollingTime, viewingTime, rollingAnimationFrame) {
		var rollingContentDiv = $("#" + this.attr("rollingId"));
		var currentRollingItemIndex = 0;
		var rollingDirection = rollingContentDiv.attr("rollingDirection");
		
		if (rollingDirection== "up" || rollingDirection == "left") {
			currentRollingItemIndex = 0;
		} else if (rollingDirection == "right" ||	rollingDirection == "down") {
			currentRollingItemIndex = rollingContentDiv.getIntAttr("rollingItemCount") - 1;
		}
		var currentRollingItem = $("div:eq(" + currentRollingItemIndex + ")", rollingContentDiv);
		rollingContentDiv.trigger("viewing", [currentRollingItem]);
		rollingContentDiv.attr("rollingTime", rollingTime);
		rollingContentDiv.attr("viewingTime", viewingTime);
		rollingContentDiv.attr("rollingAnimationFrame", rollingAnimationFrame);
		rollingContentDiv.attr("start", "true");
		rollingContentDiv.trigger("start");
		setTimeout("$.fn.rollingAnimation('" + this.attr("rollingId") + "')", viewingTime);
		return this;
	};
	
	$.fn.stopRolling = function() {
		var rollingContentDiv = $("#" + this.attr("rollingId"));
		rollingContentDiv.trigger("stop");
		rollingContentDiv.attr("start", "false");
		return this;
	};
	
	$.fn.resumeRolling = function() {
		var rollingContentDiv = $("#" + this.attr("rollingId"));
		if (rollingContentDiv.attr("start") != "true") {
			rollingContentDiv.attr("start", "true");
			rollingContentDiv.trigger("start");
			//$.fn.rollingAnimation(this.attr("rollingId"));
		}
		this;
	};
	
	$.fn.getRollingTime = function() {
		return $("#" + this.attr("rollingId")).attr("rollingTime");
	};
	
	$.fn.getViewingTime = function() {
		return $("#" + this.attr("rollingId")).attr("viewingTime");
	};
	
	$.fn.getRollingAnimationFrame = function() {
		return $("#" + this.attr("rollingId")).attr("rollingAnimationFrame");
	};
	
	$.fn.getRollingDirection = function() {
		return $("#" + this.attr("rollingId")).attr("rollingDirection");
	};
	
	$.fn.setRollingTime = function(rollingTime) {
		$("#" + this.attr("rollingId")).attr("rollingTime", rollingTime);
		return this;
	};
	
	$.fn.setViewingTime = function(viewingTime) {
		$("#" + this.attr("rollingId")).attr("viewingTime", viewingTime);
		return this;
	};
	
	$.fn.setRollingAnimationFrame = function(rollingAnimationFrame) {
		$("#" + this.attr("rollingId")).attr("rollingAnimationFrame", rollingAnimationFrame);
		return this;
	};
	
	$.fn.getRollingItems = function() {
		return $("div", $("#" + this.attr("rollingId")));
	};
	
	$.fn.bindViewingEvent = function(rollingEvent) {
		return $("#" + this.attr("rollingId")).bind("viewing", rollingEvent);
	};
	
	$.fn.bindRollingEvent = function(rollingEvent) {
		return $("#" + this.attr("rollingId")).bind("rolling", rollingEvent);
	};
	
	$.fn.bindStartEvent = function(rollingEvent) {
		return $("#" + this.attr("rollingId")).bind("start", rollingEvent);
	};
	
	$.fn.bindStopEvent = function(rollingEvent) {
		return $("#" + this.attr("rollingId")).bind("stop", rollingEvent);
	};
})(jQuery);