(function() {
	$.fn.timeline = function() {
		return this.each(function() {
			new $.timeline(this);
		});
	};
	
	$.timeline = function(element) {
		var element = element;
		var width = 0;
		var count = 0;
		var cur = 0;
		var step = 1;
		var items = new Array();
		var duration = 500;
		var easing = "swing";
		
		var moveLeft = function(ev) {
			if (cur > 0) {
				cur -= step;
				if (cur < 0) {
					cur = 0;
				}
				
				$(".holder>ul",element).stop();
				$(".holder>ul",element).animate({left:-items[cur].l+"px"},{queue:false,duration:duration,easing:easing});
			}
			return false;
		};
		
		
		var moveRight = function(ev) {
			if (cur < (count-step)) {
				
				cur += step;
				if (cur > (count-step)) {
					cur = count-step;
				}
				
				$(".holder>ul",element).stop();
				$(".holder>ul",element).animate({left:-items[cur].l+"px"},{queue:false,duration:duration,easing:easing});
			}
			return false;
		};
		
		var init = function() {
			width = 0;
			i=0;
			l = 0;
			$(".holder>ul>li",element).each(function() {
				w = $(this).outerWidth();
				
				items[i] = {};
				items[i].w = w;
				items[i].l = l;
				
				width += w;
				l+= w;
				count++;
				i++;
			});
			
			
			$(".holder>ul",element).css({width:width+"px"});
			
			$(".left>a",element).bind("click",moveLeft);
			$(".right>a",element).bind("click",moveRight);
		};
		
		init();
	};
})(jQuery);

$().ready(function() {
	$("#timeline").timeline();
});