var scrollpaneApi = Array();

$('body').on('click', '.dropdown-toggle', function (e) {
  if (!$(this).hasClass('init')) {
    $(this).addClass('init');
    setTimeout(scrollbar, 10, $(this).parent());
  }  
});

/**
 * Initialize the dropdown scrollbar.
 * 
 * @param {Object} dropdown
 */
function scrollbar(dropdown) {
  var elem = $(dropdown).find(".scroll-pane").jScrollPane({
    showArrows: false,
    contentWidth: 0,
    horizontalDragMaxWidth: 0,
    mouseWheelSpeed: 20
  });
  
  var api = elem.data("jsp");
  scrollpaneApi[$(dropdown).find(".scroll-pane").attr("id")] = api; 
  
  $(dropdown).find('.jspPane').css('width', 'auto');
  
  $(dropdown).find('.jspDrag').hide();
  $(dropdown).find('.jspScrollable').mouseenter(function(){
    $(this).find('.jspDrag').stop(true, true).fadeIn('slow');
  });
  $(dropdown).find('.jspScrollable').mouseleave(function(){
    $(this).find('.jspDrag').stop(true, true).fadeOut('slow');
  });
  
  // scroll to current selection
  var sel = $(dropdown).find(".dropdown-toggle").text();
  var pos = $(dropdown).find("li>a:contains('" + sel + "')").position();
  if (pos !== undefined) {
    api.scrollToY(pos.top);
  }
  
}