// Constants
var DEFAULT_VISIBLE_ITEMS_NUMBER = 4;
var DEFAULT_WIDGET_CLASS_NAME = "";
var ANIMATION_SPEED = 500;
var FADE_SPEED = 500;

// Variables
var scrollPosition = 0;
var animated = false;
var visibleItemsNumber = 0;
var widgetClassName = "";

jQuery.noConflict();
(function($) { 
	$(function() {
		var $scrollBlockList = $("#scrollBlock");
		var metaData = $scrollBlockList.metadata();
		visibleItemsNumber = metaData.columns ? ((metaData.columns > 0) ? metaData.columns : DEFAULT_VISIBLE_ITEMS_NUMBER) : DEFAULT_VISIBLE_ITEMS_NUMBER;
		widgetClassName = metaData.className ? ((metaData.className != "") ? metaData.className : DEFAULT_WIDGET_CLASS_NAME) : DEFAULT_WIDGET_CLASS_NAME;
		if ($scrollBlockList.length > 0) {
			$scrollBlockList.wrap("<div id=\"scrollBlock-widget\"><div id=\"scrollBlock-wrapper\"></div></div>");
			var $scrollBlockWidget = $("#scrollBlock-widget");
			$scrollBlockWidget.addClass(widgetClassName);
			var $scrollBlockWrapper = $("#scrollBlock-wrapper");
			$scrollBlockWrapper.before("<div id=\"scrollBlock-previous\"><a href=\"javascript:void(0);\">previous</a></div>");
			$scrollBlockWrapper.after("<div id=\"scrollBlock-next\"><a href=\"javascript:void(0);\">next</a></div>");
			var scrollBlockItemsWidth = $("#scrollBlock-widget").width() / visibleItemsNumber;
			var $scrollBlockItems = $scrollBlockList.find("li");
			$scrollBlockList.css({width:($scrollBlockItems.length * scrollBlockItemsWidth) + "px"});
			$scrollBlockItems.css({width:scrollBlockItemsWidth + "px"});
			$scrollBlockItems.each(function(i) {
				var $currentScrollBlockItem = $scrollBlockItems.eq(i);
				var $currentScrollBlockLink = $currentScrollBlockItem.find("a");
				var $currentScrollBlockImage = $currentScrollBlockLink.find("img");
				$currentScrollBlockLink.css({left:(($currentScrollBlockItem.outerWidth() - $currentScrollBlockImage.outerWidth()) / 2) + "px", top:(($currentScrollBlockItem.outerHeight() - $currentScrollBlockImage.outerHeight()) / 2) + "px"});
			});
			$("#scrollBlock-previous").click(function() {
				if ((scrollPosition > 0) && !animated) {
					var $lastVisibleItem = $scrollBlockItems.eq(scrollPosition + visibleItemsNumber - 1);
					var $invisibleItem = $scrollBlockItems.eq(scrollPosition - 1);
					$invisibleItem.css({opacity:0});
					$lastVisibleItem.animate({opacity:0}, FADE_SPEED);
					$invisibleItem.animate({opacity:1}, FADE_SPEED);
					scrollPosition--;
					scrollToPosition(scrollPosition, scrollBlockItemsWidth);
				}
			});	
			$("#scrollBlock-next").click(function() {
				if ((scrollPosition < $scrollBlockItems.length - visibleItemsNumber) && !animated) {
					var $firstVisibleItem = $scrollBlockItems.eq(scrollPosition);
					var $invisibleItem = $scrollBlockItems.eq(scrollPosition + visibleItemsNumber);
					$invisibleItem.css({opacity:0});
					$firstVisibleItem.animate({opacity:0}, FADE_SPEED);
					$invisibleItem.animate({opacity:1}, FADE_SPEED);
					scrollPosition++;
					scrollToPosition(scrollPosition, scrollBlockItemsWidth);
				}
			});
		}
	});

	function scrollToPosition(position, step) {
		var $scrollBlockList = $("#scrollBlock");
		var targetPosition = - step * position;
		animated = true;
		$scrollBlockList.animate({marginLeft:targetPosition + "px"}, ANIMATION_SPEED, "swing", function() {
			animated = false;
		});
	}
})(jQuery);