(function($){
	$.fn.infoBox = function(vars) {
		var element		= $(this[0]);
		var width		= element.width();
		var tape		= $("#" + element.attr("id") + " ul");
		var views		= $("#" + element.attr("id") + " li");
		var display		= $("#" + element.attr("id") + " .display");
		var prevBtn		= $("#" + element.attr("id") + " .prevButton");
		var nextBtn		= $("#" + element.attr("id") + " .nextButton");
		var dots		= $("#" + element.attr("id") + " .dots .dot");

		var current = 0;
		var next = 0;

		prevBtn.click(function() {
			$(element).stopTime("move");
			showPrev();
		});

		nextBtn.click(function() {
			$(element).stopTime("move");
			showNext();
		});

		$(dots).each(function(index) {
			$(dots[index]).click(function() {
				$(element).stopTime("move");
				showView(index);
			});
		});

		var updateDots = function() {
			$(dots).removeClass('active');
			$(dots[current]).addClass('active');
		}

		var moveOut = function() {
			$(tape).animate({"margin-left": "+=" + width + "px"}, {
				duration: 0,
				easing: "easeInOutBack",
				complete: function() {
					$(views).css('display', 'none');
					moveIn();
				}
			});
		}

		var moveIn = function() {
			$(views).css('display', 'none');
			$(views[next]).css('display', '');
			$(tape).css('margin-left', width + 'px')

			current = next;

			$(tape).animate({"margin-left": "-=" + width + "px"}, {
				duration: 0,
				easing: "easeInOutBack",
				complete: function() {
					updateDisplay();
					updateDots();
				}
			});
		}

		var updateDisplay = function() {
			$(display).html((current + 1) + "/" + views.length);
		}

        var showPrev = function() {
        	next = current - 1;
        	if (next < 0)
        		next = views.length - 1;

			moveOut();
        }

        var showNext = function() {
        	next = current + 1;
        	if (next >= views.length)
        		next = 0;

			moveOut();
        	//animate(next);
        }

		var showView = function(index) {
			next = index;
			
			if (next >= views.length)
        		next = 0;

			moveOut();
		}

		updateDisplay();
		updateDots();
		moveIn();
		$(element).everyTime(10000, "move", function(i) {
			showNext();
		});
	};
})(jQuery);