(function($) {
	$(document).ready(function() {
		$('.multi-carousel').each(function() {
			var container = $(this);
			var verticalCarousel = $('.carousel-multi-vertical');
			var horizontalCarousel = $('.carousel-multi-horizontal');
			
			var horizontalScrollTo = function (element) {
				var vCarousel = verticalCarousel.data('jcarousel');
				var hCarousel = horizontalCarousel.data('jcarousel');
				
		    	// deactive all
		    	$(vCarousel.list).find('.jcarousel-item').removeClass('active-jcarousel-item');
		    	$(vCarousel.list).find('.jcarousel-active-item-arrow').hide();
		    	// activate this one
		    	$(element).addClass('active-jcarousel-item').find('.jcarousel-active-item-arrow').show();
		    	var index = $(element).attr('jcarouselindex');
		    	// for some reason the pos() method of the carousel does not calculate correctly
		    	// that's why i calculate and animate manually
		    	var w = hCarousel.get(index).width();
		    	hCarousel.animate(-1 * w * (index - 1), true);
		    }
		    
		    var scrollToPosition = function (pos, carousel) {
		    	if (pos < 1) {
		    		pos = carousel.list.find('.jcarousel-item').length;
		    	}
		    	if (!carousel.get(pos).length) {
    				pos = 1;
    			}
    			currentPosition = pos;
		    	carousel.scroll(currentPosition, true);
		    }
		    
		    var currentPosition = 1;
		    var timer = null;
		    var startAutoScroll = function (carousel) {
		    	if (timer == null) {
		    		timer = window.setInterval(function () {
		    			currentPosition++;
		    			scrollToPosition(currentPosition, carousel);
		    		}, 7000);
		    	}
		    }
		    
		    var stopAutoScroll = function () {
		    	if (timer == null) {
		    		return;
		    	}
		    	window.clearInterval(timer);
		    	timer = null;
		    }
			
			verticalCarousel.show().jcarousel({
				vertical: true,
				wrap: 'last',
				scroll: 1,
				easing: 'swing',
				initCallback: function (carousel) {
					startAutoScroll(carousel);
					
					// activate the first item
					$(carousel.list).find('.jcarousel-item:first-child').addClass('active-jcarousel-item')
						.find('.jcarousel-active-item-arrow').show();
					
				    // Pause autoscrolling if the user moves with the cursor over the clip.
				    carousel.clip.hover(function() {
				        stopAutoScroll();
				    }, function() {
				        startAutoScroll(carousel);
				    });
				    
				    $(carousel.list).find('.jcarousel-item').click(function () {
				    	horizontalScrollTo(this);
				    });
				    
				    $(carousel.list).mousewheel(function (e, delta) {
				    	stopAutoScroll();
				    	if (delta > 0) {
				    		currentPosition--;
				    	}
				    	else {
				    		currentPosition++;
				    	}
				    	scrollToPosition(currentPosition, carousel);
				    	return false;
				    });
				    
				    // redirect to the link if the user clicks the li
				    $(carousel.list).find('.jcarousel-item').click(function () {
				    	if (!$(this).hasClass('active-jcarousel-item')) {
				    		return false;
				    	}
				    	var link = $(this).find('a');
				    	if (link.length) {
				    		window.location.href = link.attr('href');
				    	}
				    	return false;
				    });
				},
				beforeScroll: function(carousel, index, item) {
					horizontalScrollTo(item);
				}
			});
		
			horizontalCarousel.show().jcarousel({
				scroll: 1,
				easing: 'swing'
			});
		});
	});
})(jQuery);