$(document).ready(function(){
    
        $("#series").append("<a href='#' id='smaller' class='series_scroll'>Smaller</a> <a href='#' id='bigger' class='series_scroll'>Bigger</a>");
    
        var seriesLi = $("#series li").width();
        var seriesUl = 0;
        $("#series li").each(function(){
            seriesUl += $(this).width();
        });
        
        var biggerX = seriesLi * -2;
        var biggestX = seriesLi * -3;
        var scrollSpeed = 500;
        
        $("#series ul").width(seriesUl);
        
        $("#smaller").click(function(){
            $("a.series_scroll:hidden").fadeIn(scrollSpeed);
            var newPos = $("#series ul").offset().left;
            newPos -= $("#series div").offset().left;
            newPos += seriesLi;

            $("#series .series_scroll").css({ opacity: '1' }).removeClass("on");
            $("#series ul").animate({ left: newPos },scrollSpeed,'easeInOutQuint');

            if (newPos == 0) {$(this).fadeOut(scrollSpeed);}
            return false;
        });
           
        $("#bigger").click(function(){
            $("a.series_scroll:hidden").fadeIn(scrollSpeed);
            var newPos = $("#series ul").offset().left;
            newPos -= $("#series div").offset().left;
            newPos -= seriesLi;
            
            x = biggestX - seriesLi;
            
            $("#series .series_scroll").css({ opacity: '1' }).removeClass("on");
            $("#series ul").animate({ left: newPos },scrollSpeed,'easeInOutQuint');

            if (newPos == biggestX) {$(this).fadeOut(scrollSpeed);}
            return false;
        });        
    
        $("#series ul").animate({ left: biggerX },scrollSpeed,'easeInOutQuint');

    });