$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); }
    });
});