$(document).ready(function () {
	var itemSize = $('div.scrollable div.items a').eq(0).outerWidth(true);
	var _visibleItemsCount = Math.ceil($('div.scrollable').width()/itemSize);
	var api = null;
	var _interval = 2000;
	var _speed = 750;
	var _loaded = false;

	// initialize scrollable together with the circular plugin
	api = $("#scroll-infinite").scrollable({
		easing: 'swing',
		speed: _speed,
		size: _visibleItemsCount,
		loop: true,
		hoverClass: 'hovered',
		onReload: function(e, pos) {
			if (!_loaded) {
				var items = this.getItems();
				$(items).mouseover(function() {
					$(items).eq(api.getIndex()+_visibleItemsCount-1).stop(false, true);
					$(items).eq(api.getIndex()+_visibleItemsCount-1).fadeTo(100,1);
					$(items).eq(api.getIndex()).stop(false, true);
					$(items).eq(api.getIndex()).fadeTo(100,1);
					api.getConf().interval = 0;
				});
				$(items).mouseout(function() {
					api.getConf().interval = _interval;
				});
				_loaded = true;
			}
			$(items).eq(0).fadeTo(2*_interval, 0);
			$(items).eq(_visibleItemsCount).fadeTo(1,0);
		},
		onBeforeSeek: function(e, pos) {
			var items = this.getItems();
			$(items).eq(pos+_visibleItemsCount).fadeTo(1,0);
			$(items).eq(pos+_visibleItemsCount-1).fadeTo(_interval, 1);
		},
		onSeek: function(e, pos) {
			var items = this.getItems();
			$(items).eq(pos).fadeTo(1.3*_interval, 0);
			$(items).eq(pos-1).fadeTo(1,1);
		}
	 }).circular().autoscroll({
		api: true,
		interval: _interval
	});
});