$(function(){

    var obj = $(this);
    var s = $(".slide-pane").length;
    $(".slide-nav").hide();
    if (s>1){$('.slide-nav').html('<div class="slide-nav-inner"><span class="slide-left"><a href="#" title="Previous four"><span></span>&lt;</a></span><span id="slide-nav-text">Case Studies</span><span class="slide-right"><a href="#" title="Next four"><span></span>&gt;</a></span></div>');}
    $(".slide-nav").show();
    $('#slider').css({height:380,overflow:'hidden'});
    $(".slide-pane").css({float:'left'});
   
    var selectedPane = $('#slider').attr('selectedpane');
    
    // Get the width of the outermost slider-container div.
    var getWidth = $('#slider-container').width();
    $('#slider', obj).css('width',s*getWidth);
    var totalWidth = $('#slider').width();
    
    
    // Set a global variable to keep track of how far
    // the "slider" should be moved.
    var setWidth = 0;
    if (selectedPane>1&&selectedPane<s)
    {
        setWidth = (selectedPane*-getWidth)+getWidth;
        $('#slider').css({marginLeft: setWidth});
    }
    else if (selectedPane==s) 
    {
        $('.slide-right').css('display','none');
        setWidth = (selectedPane*-getWidth)+getWidth;
        $('#slider').css({marginLeft: setWidth});
    }
    else {$('.slide-left').css('display','none');}

    // Subtract the pane width from the amount by which
    // the "slider" has already been moved.
    // Don't forget to give back the changed setWidth variable!
    $('.slide-left').click(function(){
        setWidth = setWidth + getWidth;
        $('#slider').animate({marginLeft: setWidth}, 500);
        var displayLink = (setWidth == 0)? 'none' : 'inline';
        $('.slide-right').css('display','inline');
        $('.slide-left').css('display',displayLink);
        return false;
    });
    
    // Same thing in reverse.
    $('.slide-right').click(function(){
        setWidth = setWidth - getWidth;
        $('#slider').animate({marginLeft: setWidth}, 500);
        var displayLink = (setWidth == (getWidth-totalWidth))? 'none' : 'inline';
        $('.slide-left').css('display','inline');
        $('.slide-right').css('display',displayLink);
        return false;
    });
    
    $(".slide-nav .slide-left a").hover(
        function(){$(".slide-nav .slide-left span").stop().animate({backgroundColor:arrowColor},150)},
        function(){$(".slide-nav .slide-left span").stop().animate({backgroundColor:"#cccccc"},150)});
    $(".slide-nav .slide-right a").hover(
        function(){$(".slide-nav .slide-right span").stop().animate({backgroundColor:arrowColor},150)},
        function(){$(".slide-nav .slide-right span").stop().animate({backgroundColor:"#cccccc"},150)});
});