$j(document).ready(function() {
    var imgTotalWidth = 0;
    var contextItemSize = 0;
    var contextItemWidth = 0;
    var context = $j('#scroller-content');
    if (context.find('div').length > 0) {
        contextItemSize = context.find('div').size()
        contextItemWidth = parseInt(context.find('div').css('width'));
        context.css('width', ((contextItemWidth + 20) * contextItemSize) - 20);
    } else if (context.find('ul').length > 0) {
        $j('#scroller-content ul li a img').each(function() {
            imgTotalWidth += $j(this).width();
        });
        contextItemSize = context.find('img').size();
        context.css('width', imgTotalWidth + ((10 + 2 + 10) * contextItemSize) - 10);
    }

    $j("#scroller-bar").slider({
        animate: true,
        change: handleSliderChange,
        slide: handleSliderSlide
    });
});

function handleSliderChange(e, ui) {
    var maxScroll = $j("#scroller-container").attr("scrollWidth") - $j("#scroller-container").width();
    $j("#scroller-container").animate({ scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui) {
    var maxScroll = $j("#scroller-container").attr("scrollWidth") - $j("#scroller-container").width();
    $j("#scroller-container").attr({ scrollLeft: ui.value * (maxScroll / 100) });
}

$j(document).ready(function() {
    $j('#wrapper-scroller').click(function(e) {
        var clickedPosition = e.pageX - $j('#main-content #content-column').offset().left;
        if (clickedPosition < 50) { $j('.ui-slider-handle').css('left', '0%'); $j("#scroller-container").animate({ scrollLeft: 0 }, 1000); }
        else { $j('.ui-slider-handle').css('left', '100%'); $j("#scroller-container").animate({ scrollLeft: 3000 }, 1000); }
    });
});