$.fn.royalSliderInjectJScrollPane = function(scrollPaneOptions, options) {

    var defaults = {
        scrollPaneHeight: '27px',
        scrollPaneTimeout: 300
    };

    var options = $.extend({}, defaults, options);

    var $slider = this;
    var sliderApi = $slider.data("royalSlider");

    var $scrollPane;
    var scrollPaneApi;
    var scrollPaneTimeoutId;

    var $wrapper = $('.royalWrapper', $slider);
    $wrapper.after("<div class='fake-scroll-container'><div class='fake-scroll'></div></div>");

    $('.fake-scroll', $slider)
        .width($('.royalSlidesContainer').width())
        .height(options.scrollPaneHeight);

    $scrollPane = $('.fake-scroll-container', this)
        .jScrollPane(scrollPaneOptions)
        .bind(
            'jsp-scroll-x',
            function(event, scrollPositionX, isAtLeft, isAtRight) {
                var scrollPart = scrollPositionX / (scrollPaneApi.getContentWidth() - $('.fake-scroll-container').width());
                var newSlideId = Math.round((sliderApi.numSlides - 1) * scrollPart);
                if (sliderApi.currentSlideId != newSlideId) {
                    clearTimeout(scrollPaneTimeoutId);
                    scrollPaneTimeoutId = setTimeout(function() {
                        sliderApi.goTo(newSlideId);
                        //console.log('newScrollPaneSlideId: ', newSlideId);
                    }, options.scrollPaneTimeout);
                }
            }
        );
    scrollPaneApi = $scrollPane.data('jsp');

    var oldAfterSlideChange = sliderApi.settings.afterSlideChange;
    sliderApi.settings.afterSlideChange = function()
    {
        if (oldAfterSlideChange) {
            oldAfterSlideChange();
        }
        scrollPaneApi.scrollToPercentX(
            sliderApi.currentSlideId / (sliderApi.numSlides - 1),
            false
        );
        //console.log('newGallerySlideId', sliderApi.currentSlideId);*/
    };

};