var moving_right_now = false;

$(document).ready(function(){
    $("a.go_left").click(moveClip); 
    $("a.go_right").click(moveClip);          
});

function moveClip(){    
    if(moving_right_now) return false;     

    var current_button = $(this);
  
    var direction = current_button.attr("class").split("_")[1];       
    var container = $(".scroll_container");
    
    var imgWidth = parseInt(container.find("img:first").css('width').replace('px', '')) + 2;
    var how_many_img  = container.find("img").size();      
  
    var currentMargin = parseInt($(".scroll_container").css("marginLeft").replace('px', ''));       
     
    //75 is the padding to the right of the image. its 25. so 75 is the number because we moev by 3 pictures.
    var movePx = (imgWidth + 7)* 3; 
    //var limit =   -1942; 
    var limit =   -1386;
    
    if((limit < currentMargin && direction == 'left') || (0 > currentMargin && direction == 'right')){ 
        moving_right_now = true;        
        newMargin = (direction == 'left') ? currentMargin -  movePx  : currentMargin + movePx;     
        
        if(direction == 'left') {
            if(newMargin <= limit) {
                newMargin = limit;     
            }
        }
        if(newMargin > 0) {
            newMargin = 0;    
        }
    
        container.animate({marginLeft:newMargin}, 'slow', function(){moving_right_now = false;});
    }    
    return false;
}