var wrapper;
    var scrollable;


    function makeScrollable(wrappername, scrollablename) {
        // Get jQuery elements
        wrapper = $(wrappername);  
        scrollable = $(scrollablename);

        wrapper.css({ overflow: 'hidden' });

        scrollable.slideDown('slow', function() {
            enable();
        });
    }


    function enable() {
        // height of area at the top at bottom, that don't respond to mousemove
        var inactiveMargin = 100;
        // Cache for performance
        var wrapperWidth = wrapper.width();
        var wrapperHeight = wrapper.height();
        // Using outer height to include padding too
        var scrollableHeight = scrollable.outerHeight() + 2 * inactiveMargin;
        // Do not cache wrapperOffset, because it can change when user resizes window
        // We could use onresize event, but it's just not worth doing that
        // var wrapperOffset = wrapper.offset();

        //When user move mouse over menu
        wrapper.mousemove(function(e) {
            var wrapperOffset = wrapper.offset();
            // Scroll menu
            var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;

            if (top < 0) {
                top = 0;
            }

            wrapper.scrollTop(top);
        });
    }