
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">Loading...</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() {
        // 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();
        // UL width with item number
        var lastLi = $('ul.sc_menu').find('li:last-child');
        var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + 15;
        $('ul.sc_menu').width(ulWidth);
        // Using outer height to include padding too
        var scrollableWidth = ulWidth + 2 * inactiveMargin;
        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();

        // 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;
            //alert(wrapperOffset);
            var wrapperOffset = wrapper.offset();


            var left = (e.pageX - wrapperOffset.left) * (scrollableWidth - wrapperWidth) / wrapperWidth - inactiveMargin;
            if (left < 0) {
                left = 0;
            }
            wrapper.scrollLeft(left);
           
        });

       // ---------------------
       $('.sc_menu li').mouseenter(function() {
           //$(this).css('background-color', '#cccccc';'', '8px;';'', '8px';);
           var cssObj = {
                'background-color' : '#cccccc'
            }
            $(this).css(cssObj);
           //$("span", this).show();
           $("span", this).fadeIn(500);
           
           
           

           
       });
       
       $('.sc_menu li').mouseleave(function() {
            $("span", this).fadeOut(50);
           $(this).css('background-color', '');
       });	
    }
}
$(function() {
    makeScrollable("div.sc_menu", "ul.sc_menu");
});
