$(function() {
    $('.products-scroller .scroller-items').each(function() {
    	var total_width = $(this).find('.scroller-item').first().outerWidth() * $(this).find('.scroller-item').length;
    	
    	$(this).width(total_width);
    });
    
    $('.products-scroller .scroller-navi').click(function() {
    	
    	var $context = $(this).closest('.products-scroller');
		var dir = $(this).hasClass('scroller-left') ? 1 : -1;
		var $items = $context.find('.scroller-items');
		var distance = $items.find('.scroller-item').first().outerWidth();
		
		if($context.data('animating') !== true) { 
			
			$context.data('animating', true);
			
			if(dir == 1) {
				
				$items.find('.scroller-item').last().prependTo($items);
				$items.css({
					marginLeft: -1 * distance
				}).animate({
					marginLeft: 0
				}, 500, function() {
					$context.data('animating', false);
				});
				
			} else {
				
				$items.animate({
					marginLeft: -1 * distance
				}, 500, function() {
					$items.find('.scroller-item').first().appendTo($items);
					$items.css({
						marginLeft: 0
					});
					$context.data('animating', false);
				});
			}
		}
		
    	return false;
    });
});