(function($){  
 
  $.fn.scrollBox = function() {
     
    function moveTarget(target,percent,prodWith,animate) {
      var pixelleft = ((prodWith/100)*percent.toFixed(0)) * -1;
      if(animate == 1) {
        target.animate({'left' : pixelleft + 'px' }, 400);
      } else {
        target.css('left',  pixelleft + 'px');
      }
    }
    
    return this.each(function() {
  
      $(this).removeClass('products');
      $(this).children('ul').removeClass('img');
      $(this).addClass('scrollMe');
      
      var prodWith = $('.scrollMe').children('ul').innerWidth() - $('.scrollMe').outerWidth();
      //console.log(prodWith);
      
      if(prodWith > 20) {
		  $(this).after('<div class="slider"><div class="paddle"></div><div class="paddle trans"></div></div>');
		  
		  $('.slider .trans').draggable({
			containment: 'parent',
			drag: function(event,ui) {
			  var prodWith = $('.scrollMe').children('ul').innerWidth() - $('.scrollMe').outerWidth();
			  var sliderMax = $('.slider').innerWidth() - $('.slider .paddle').width() - 4;
			  $('.slider .paddle').css('left',$(this).position().left);
			  var percent = ($(this).position().left - 4) / (sliderMax / 100);
			  moveTarget($('.scrollMe ul'),percent,prodWith);
			}
		  });
		  
		  $('.slider').click(function(e) {
			var prodWith = $('.scrollMe').children('ul').innerWidth() - $('.scrollMe').outerWidth();
			var posX = (e.pageX - $(this).offset().left);
			var paddlePos = posX - 75;
			if(paddlePos < 4) { paddlePos = 4 }
			var sliderMax = $('.slider').innerWidth() - $('.slider .paddle').width() - 4;
			if(paddlePos > sliderMax) { paddlePos = sliderMax }
			$('.slider .paddle, .slider .trans').animate({'left' : paddlePos + 'px'}, 400);
			var percent = (paddlePos - 4) / (sliderMax / 100);
			moveTarget($('.scrollMe ul'),percent,prodWith,1);
		  });
	  }
	});
	};
})(jQuery);