$(document).ready(function () {

    // the element we want to apply the jScrollPane
    var $el = $('#jp-container').jScrollPane({
        verticalGutter: -16
    }),

    // the extension functions and options 	
					extensionPlugin = {

					    extPluginOpts: {
					        // speed for the fadeOut animation
					        mouseLeaveFadeSpeed: 500,
					        // scrollbar fades out after hovertimeout_t milliseconds
					        hovertimeout_t: 1000,
					        // if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
					        // if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after "hovertimeout_t" ms
					        // also, it will be shown when we start to scroll and hidden when stopping
					        useTimeout: false,
					        // the extension only applies for devices with width > deviceWidth
					        deviceWidth: 980
					    },
					    hovertimeout: null, // timeout to hide the scrollbar
					    isScrollbarHover: false, // true if the mouse is over the scrollbar
					    elementtimeout: null, // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
					    isScrolling: false, // true if scrolling
					    addHoverFunc: function () {

					        // run only if the window has a width bigger than deviceWidth
					        if ($(window).width() <= this.extPluginOpts.deviceWidth) return false;

					        var instance = this;

					        // functions to show / hide the scrollbar
					        $.fn.jspmouseenter = $.fn.show;
					        $.fn.jspmouseleave = $.fn.fadeOut;

					        // hide the jScrollPane vertical bar
					        var $vBar = this.getContentPane().siblings('.jspVerticalBar').hide();

					        /*
					        * mouseenter / mouseleave events on the main element
					        * also scrollstart / scrollstop - @James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
					        */
					        $el.bind('mouseenter.jsp', function () {

					            // show the scrollbar
					            $vBar.stop(true, true).jspmouseenter();

					            if (!instance.extPluginOpts.useTimeout) return false;

					            // hide the scrollbar after hovertimeout_t ms
					            clearTimeout(instance.hovertimeout);
					            instance.hovertimeout = setTimeout(function () {
					                // if scrolling at the moment don't hide it
					                if (!instance.isScrolling)
					                    $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
					            }, instance.extPluginOpts.hovertimeout_t);


					        }).bind('mouseleave.jsp', function () {

					            // hide the scrollbar
					            if (!instance.extPluginOpts.useTimeout)
					                $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
					            else {
					                clearTimeout(instance.elementtimeout);
					                if (!instance.isScrolling)
					                    $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
					            }

					        });

					        if (this.extPluginOpts.useTimeout) {

					            $el.bind('scrollstart.jsp', function () {

					                // when scrolling show the scrollbar
					                clearTimeout(instance.hovertimeout);
					                instance.isScrolling = true;
					                $vBar.stop(true, true).jspmouseenter();

					            }).bind('scrollstop.jsp', function () {

					                // when stop scrolling hide the scrollbar (if not hovering it at the moment)
					                clearTimeout(instance.hovertimeout);
					                instance.isScrolling = false;
					                instance.hovertimeout = setTimeout(function () {
					                    if (!instance.isScrollbarHover)
					                        $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
					                }, instance.extPluginOpts.hovertimeout_t);

					            });

					            // wrap the scrollbar
					            // we need this to be able to add the mouseenter / mouseleave events to the scrollbar
					            var $vBarWrapper = $('<div/>').css({
					                position: 'absolute',
					                left: $vBar.css('left'),
					                top: $vBar.css('top'),
					                right: $vBar.css('right'),
					                bottom: $vBar.css('bottom'),
					                width: $vBar.width(),
					                height: $vBar.height()
					            }).bind('mouseenter.jsp', function () {

					                clearTimeout(instance.hovertimeout);
					                clearTimeout(instance.elementtimeout);

					                instance.isScrollbarHover = true;

					                // show the scrollbar after 100 ms.
					                // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar								
					                instance.elementtimeout = setTimeout(function () {
					                    $vBar.stop(true, true).jspmouseenter();
					                }, 100);

					            }).bind('mouseleave.jsp', function () {

					                // hide the scrollbar after hovertimeout_t
					                clearTimeout(instance.hovertimeout);
					                instance.isScrollbarHover = false;
					                instance.hovertimeout = setTimeout(function () {
					                    // if scrolling at the moment don't hide it
					                    if (!instance.isScrolling)
					                        $vBar.stop(true, true).jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed || 0);
					                }, instance.extPluginOpts.hovertimeout_t);

					            });

					            $vBar.wrap($vBarWrapper);

					        }

					    }

					},

    // the jScrollPane instance
					jspapi = $el.data('jsp');

    // extend the jScollPane by merging	
    $.extend(true, jspapi, extensionPlugin);
    jspapi.addHoverFunc();
});