// 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 = "";

$(document).ready(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;
	});
}