(function($) {
	$.fn.scrollableList = function(options) {
		var settings = {
			control: 'click', // 'click', 'hover'
			direction: 'horizontal',
			innerContainerSelector: '.inner_container',
			contentSelector: '.content',
			hoverScrollStep: 5,
			hoverScrollInterval: 20,
			fixWidth: false
		}
		
		if (options) {
			$.extend(settings, options);
		}
		
		return this.each(function() {
			var outerContainer = $(this);
			var innerContainer = $(settings.innerContainerSelector, this);
			var content = $(settings.contentSelector, innerContainer);
			var hoverScrollInterval = null;
			
			// fix width of a container with floated child elements
			if (settings.fixWidth) {
				var w = 0;
				$(content).children().each(function() {
					w += $(this).outerWidth(true);
				});
				content.width(w);
			}
			
			if (settings.direction == 'horizontal') {
				if (content.width() > innerContainer.width()) {
					var scrollLeft = $('<div class="scroll_left"></div>');
					var scrollRight = $('<div class="scroll_right"></div>');
				
					if (settings.control == 'click') {
						scrollLeft.unbind('click');
						scrollLeft.click(
							function() {
								if (innerContainer.scrollLeft() > innerContainer.width()) {
									newPosition = innerContainer.scrollLeft() - innerContainer.width();
								} else {
									newPosition = 0;
								}
								innerContainer.stop().clearQueue().animate({
									scrollLeft: newPosition
								}, 300);
							}
						);
						scrollRight.unbind('click');
						scrollRight.click(
							function() {
								if (content.width() > innerContainer.scrollLeft() + innerContainer.width()) {
									newPosition = innerContainer.scrollLeft() + innerContainer.width();
								} else {
									newPosition = content.width() - innerContainer.width();
								}
								innerContainer.stop().clearQueue().animate({
									scrollLeft: newPosition
								}, 300);
							}
						);
					}
					
					if (settings.control == 'hover') {
						scrollLeft.unbind('mouseenter');
						scrollLeft.unbind('mouseleave');
						scrollLeft.hover(
							function() {
								clearInterval(hoverScrollInterval);
								if (innerContainer.scrollLeft() > 0) {
									hoverScrollInterval = setInterval(function() {
										if (innerContainer.scrollLeft() > settings.hoverScrollStep) {
											innerContainer.scrollLeft(innerContainer.scrollLeft() - settings.hoverScrollStep);
										} else {
											innerContainer.scrollLeft(0);
											clearInterval(hoverScrollInterval);
										}
									},
									settings.hoverScrollInterval);
								}
							},
							function() {
								clearInterval(hoverScrollInterval);
							}
						);
						
						scrollRight.unbind('mouseenter');
						scrollRight.unbind('mouseleave');
						scrollRight.hover(
							function() {
								clearInterval(hoverScrollInterval);
								if (innerContainer.scrollLeft() < content.width() - innerContainer.width()) {
									hoverScrollInterval = setInterval(function() {
										if (innerContainer.scrollLeft() < content.width() - innerContainer.width() - settings.hoverScrollStep) {
											innerContainer.scrollLeft(innerContainer.scrollLeft() + settings.hoverScrollStep);
										} else {
											innerContainer.scrollLeft(content.width() - innerContainer.width());
											clearInterval(hoverScrollInterval);
										}
									},
									settings.hoverScrollInterval);
								}
							},
							function() {
								clearInterval(hoverScrollInterval);
							}
						);
					}
					$(outerContainer).prepend(scrollLeft);
					$(outerContainer).append(scrollRight);
					// resize innerContainer to fit scrollLeft and scrollRight:
					innerContainer.width(innerContainer.width() - scrollLeft.width() - scrollRight.width());
				}
			}
			
			if (settings.direction == 'vertical') {
				// TODO: vertical scrolling
			}
		});
	};
})(jQuery);