﻿(function($) {
	$.fn.sltscrollable = function(options) {
		var defaults = {
			stepsize: 1, 			// number of items that should scrolled in one click
			animation: true, 		// false is instant, true is animate. (not implemented)
			duration: 1000, 		// how fast must the animation move in ms?
			vertical: true,			// should the carousel be rendered vertically or horizontally (default)
			nextBtn: '.next',
			prevBtn: '.prev'
		};
		var options = $.extend(defaults, options);

		var scrollable = $(this);

		var itemsize = options.vertical ? $('li', scrollable).height() : $('li', scrollable).width();
		var clipsize = options.vertical ? $('.scrollable-clip', scrollable).height() : $('.scrollable-clip', scrollable).width();
		var listsize = itemsize * $('li', scrollable).length;

		var eventsEnabled = true;	// used to disable events instead of binding / unbinding events for performance

		return this.each(function() {
			initEvents();
		});

		function initEvents() {
			$(options.nextBtn, scrollable).click(next);
			$(options.prevBtn, scrollable).click(prev);
		}
		function next(event) {
			if (eventsEnabled) {
				eventsEnabled = false;

				var offset = getOffset('next');
				if (options.vertical) {
					move({ top: offset });
				} else {
					move({ left: offset });
				}
			}
		}
		function prev(event) {
			if (eventsEnabled) {
				eventsEnabled = false;

				var offset = getOffset('prev');
				if (options.vertical) {
					move({ top: offset });
				} else {
					move({ left: offset });
				}
			}
		}
		function getOffset(direction) {

			var listpos = Math.abs(options.vertical ? $('ul', scrollable).position().top : $('ul', scrollable).position().left);
			var offset = options.stepsize * itemsize;

			if (direction == 'next') {
				var endpos = listsize - clipsize;
				if ((listpos + offset) >= endpos) {
					return '-' + endpos;
				} else {
					return '-=' + offset;
				}
			} else {
				if ((listpos - offset) <= 0) {
					return 0;
				} else {
					return '+=' + offset;
				}
			}
		}
		function move(props) {

			$('ul', scrollable).animate(props, options.duration, function() {
				var listpos = options.vertical ? $('ul', scrollable).position().top : $('ul', scrollable).position().left;
				if (listpos >= 0) {
					$(options.nextBtn).show();
					$(options.prevBtn).hide();
				} else if (listpos <= -(listsize - clipsize)) {
					$(options.nextBtn).hide();
					$(options.prevBtn).show();
				} else {
					$(options.nextBtn).show();
					$(options.prevBtn).show();
				}
				eventsEnabled = true;
			});
		}
	};
})(jQuery);
