Resolved How do I disable the right button after the slide show the last set of li

[Ottster]

So here I have a rotator with left and right arrow. I want to be able to remove the right arrow when it comes to the last slide. Right now as the codes is it only remove (with the off class) the right arrow after you click on the right arrow once. Because I will be adding more slides I want the selector to be able to know when to remove the arrow (addClass "off"). Can someone help me with this ? I believed it should be in this areas..

                $('.left_button2').live('click',function(){
					
			$('ul.fb-carousel2').animate({left:'+=444px'},300);
			$(".left_button2").addClass("off");
			$(".right_button2").removeClass("off");
			
		});	
		$('.right_button2').live('click',function(){
					
			$('ul.fb-carousel2').animate({left:'-=444px'},300);
			$(".left_button2").removeClass("off");
			$(".right_button2").addClass("off");
			
		});

The rest of the codes is below. Let me know if you need anything else for me to make this more clear. Thanks in advance.

			
$(document).ready(function(){ 
		
		// ROTATOR INITIALIZE	
		var quoteNumber = 0;
		var quoteLength = $('ul.fb-carousel li').length - 1;
		var quoteLength2 = $('ul.fb-carousel2 li').length - 1;
		
		
		$('.left_button').live('click',function(){
					
			$('ul.fb-carousel li').eq(quoteNumber).removeClass('on');
			quoteNumber--;
			$('ul.fb-carousel li').eq(quoteNumber).addClass('on');
			
			if (quoteNumber == 0) {
				$(".left_button").addClass("off")
				$(".right_button").removeClass("off");
			}	else {
					$(".left_button").removeClass("off");
					$(".right_button").removeClass("off");
				}
		});	
		
							
		$('.right_button').live('click',function(){
				
			$('ul.fb-carousel li').eq(quoteNumber).removeClass('on');
			quoteNumber++;
			$('ul.fb-carousel li').eq(quoteNumber).addClass('on');
			
			if (quoteNumber == quoteLength2) {
				$(".right_button").addClass("off")
				$(".left_button").removeClass("off");
			} else if (quoteNumber < quoteLength2) {
					$(".right_button").removeClass("off");
					$(".left_button").removeClass("off");
				}
		});	
		
		$('.left_button2').live('click',function(){
					
			$('ul.fb-carousel2').animate({left:'+=444px'},300);
			$(".left_button2").addClass("off");
			$(".right_button2").removeClass("off");
			
		});	
		$('.right_button2').live('click',function(){
					
			$('ul.fb-carousel2').animate({left:'-=444px'},300);
			$(".left_button2").removeClass("off");
			$(".right_button2").addClass("off");
			
		});	
});

RESOLVED: this was all I needed...

		$('.left_button2').live('click',function(){
			$('ul.fb-carousel2').animate({left:'+=444px'},300, function (){
			if ($('ul.fb-carousel2').css('left') == '0px')
			$(".left_button2").addClass("off");
			});
			$(".right_button2").removeClass("off");
		});	
		
		$('.right_button2').live('click',function(){
			$('ul.fb-carousel2').animate({left:'-=444px'},300, function() {
			if ($('ul.fb-carousel2').css('left') == '-888px')
			$(".right_button2").addClass("off");
			});
			$(".left_button2").removeClass("off");
		});