(function ($) {
	var DURATION_PIXELS = 20; // pixels
	var DEFAULT_DURATION = 400; // per DURATION_PIXELS pixels
	ImageScroller = function (contain, durat) {
		var container = $(contain);
		var ul = container.find("ul");
		var containerWidth = container.innerWidth();
		var items = ul.find("li").css("float", "left");
		var maxHeight = 0;
		var totalWidth = 0;
		items.each(function (i, l) {
			var li = $(l);
			var img = li.find('img');
			var h = img.height();
			li.css({ width: img.width(), height: h });
			maxHeight = Math.max(maxHeight, h);
			totalWidth += li.outerWidth();
		});

		ul.css({ display: 'block', height: maxHeight, width: totalWidth, overflow: 'hidden', position: 'absolute' });
		container.css({ height: maxHeight, position: 'relative' });

		// need no animation if we can see all items
		if (totalWidth <= container.width()) {
			return;
		}

		// start rotation
		var duration = (durat ? durat : DEFAULT_DURATION);
		animate();
		function animate() {
			var w = ul.find("li:first").outerWidth();
			var d = w/DURATION_PIXELS*duration;
			ul.animate({ left: "-" + w + "px" }, d, "linear", animationCallback);
		};
		function animationCallback() {
			ul.find("li:first").remove().appendTo(ul);
			ul.css("left", "0px");
			animate();
		};
	}
})(jQuery);