function makeScrollable(wrapper, scrollable) {

    // Get jQuery elements
    var wrapper = $(wrapper), scrollable = $(scrollable);

    // Hide images until they are not loaded
    scrollable.hide();
    var loading = $('<div class="loading">Portfolio wordt geladen...</div>').appendTo(wrapper);

    // Set function that will check if all images are loaded
    var interval = setInterval(function () {
        var images = scrollable.find('img');
        var completed = 0;

        // Counts number of images that are succesfully loaded
        images.each(function () {
            if (this.complete) completed++;
        });

        if (completed == images.length) {

            clearInterval(interval);
            // Timeout added to fix problem with Chrome
            setTimeout(function () {

                loading.hide();
                // Remove scrollbars	
                wrapper.css({ overflow: 'hidden' });

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

    function enable() {
        // width of area at the left at right, that don't respond to mousemove
        var inactiveMargin = 100;
        // Cache for performance
        var wrapperWidth = wrapper.width();
        var padding = 40; //look in css (padding + margin * 4)

        var scrollableWidth = 0;
        var images = scrollable.find('img')
        images.each(function () {
            scrollableWidth += $(this).attr('width') + padding;
        });
        
        // 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();

        // Create a invisible tooltip
        var tooltip = $('<div class="sc_menu_tooltip"></div>')
			.css('opacity', 0)
			.appendTo(wrapper);

        // Save menu titles
        scrollable.find('a').each(function () {
            $(this).data('tooltipText', this.title);
        });

        // Remove default tooltip
        scrollable.find('a').removeAttr('title');
        // Remove default tooltip in IE
        scrollable.find('img').removeAttr('alt');

        var lastTarget;
        //When user move mouse over menu
        wrapper.mousemove(function (e) {
            // Save target
            lastTarget = e.target;

            var wrapperOffset = wrapper.offset();

            // Scroll menu
            var left = (e.pageX - wrapperOffset.left) * (scrollableWidth - wrapperWidth) / wrapperWidth - inactiveMargin;

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

            wrapper.scrollLeft(left);
        });

        // Setting interval helps solving perfomance problems in IE
        var interval = setInterval(function () {
            if (!lastTarget) return;

            var currentText = tooltip.text();

            if (lastTarget.nodeName == 'IMG') {
                // We've attached data to a link, not image
                var newText = $(lastTarget).parent().data('tooltipText');

                // Show tooltip with the new text
                if (currentText != newText) {
                    tooltip
						.stop(true)
						.css('opacity', 0)
						.text(newText)
						.animate({ opacity: 1 }, 1000);
                }
            }
        }, 200);

        // Hide tooltip when leaving menu
        wrapper.mouseleave(function () {
            lastTarget = false;
            tooltip.stop(true).css('opacity', 0).text('');
        });

        /*
        //Usage of hover event resulted in performance problems
        scrollable.find('a').hover(function(){
        tooltip
        .stop()
        .css('opacity', 0)
        .text($(this).data('tooltipText'))
        .animate({opacity: 1}, 1000);
	
        }, function(){
        tooltip
        .stop()
        .animate({opacity: 0}, 300);
        });
        */
    }
}