(function($){  
 
  $.fn.scrollBox = function() {
     
    function moveTarget(target,percent,prodWith,animate) {
        prodWith = $('.scrollMe').children('ul').innerWidth() - $('.scrollMe').outerWidth() + 80;
        var pixelleft = ((prodWith/100)*percent.toFixed(0)) * -1;
        if(animate == 1) {
        target.animate({'left' : pixelleft + 'px' }, 400);
        } else {
        target.css('left',  pixelleft + 'px');
        }  

        $('#now').html($('.scrollMe ul li.cattitle').filter(function (index) {
        return index == 0 || parseFloat($(this).position().left) <= (pixelleft * -1) + 400;
        }).filter(':last').attr('title'));
    }
    
    return this.each(function() {
  
      $(this).removeClass('products');
      $(this).addClass('scrollMe');
      prodWith = $(this).children('ul').innerWidth() - $(this).outerWidth() + ($('.scrollMe ul li.title').length * 80);
      fullprodWith = $(this).children('ul').innerWidth() + ($('.scrollMe ul li.title').length * 80);
      
      $(this).after('<div class="slider"><div class="titles"></div><div class="paddle"></div><div class="paddle trans"></div></div>');
      
      $('.scrollMe ul li.title').each(function() {                        
          var percent = ($(this).position().left) / (fullprodWith / 100);
          percent = Math.round(percent);
          if(percent < 5) {
            percent = 1;
          } else {
              percent = percent + 5;
          }
          //'+$(this).position().left+' of '+fullprodWith+'
          $(this).replaceWith('<li class="spacing cattitle" rel="'+$(this).children('a').attr('href')+'" title="'+ $(this).children('a').html() +'">&nbsp;</li>');        
      });
      $(this).children('ul li.spacing:first').removeClass('spacing');
      
      $(this).before('<h1 id="now">'+ $('ul li.cattitle').attr('title') +'</h1>');
      
      $('.slider .trans').draggable({
        containment: 'parent',
        drag: function(event,ui) {
          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.scroll'),percent,prodWith);
        }
      });
      
      $('.slider').click(function(e) {
        var posX = (e.pageX - $(this).offset().left);
        var paddlePos = posX - ($('.slider .paddle').width()/2);
        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.scroll'),percent,prodWith,1);
      });
      
      });
	};
})(jQuery);