Pomoc z delikatnej zmianie w slider - jquery (java script)

Cześć, potrzebuje delikatnej pomocy w sliderze... chodzi o to, że gdy slider dochodzi do końca to jego np. prawy control znika, chciałbym to zmienić aby nie znikał tylko został zmieniony na inny obrazek (lub id w css z innym background)

tutaj mam ten kawałek kodu odpowiadający za ukrywanie i chowanie... mecze się i nie mogę go przerobić na zamianę... dla kogoś to pewnie banalne ;/

// manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	

poniżej cały kod skryptu:

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script>
    

oraz css:

#leftControl {
  top:0;
  left:0;
  background:transparent url(images/prev.png) no-repeat 0 0;
}

#rightControl {
  top:0;
  right:0;
  background:transparent url(images/next.png) no-repeat 0 0;
}

będę wdzięczny za pomoc..

// manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
        if(position==0){ $('#leftControl').addClass("disabled"); } else{ $('#leftControl').removeClass("disabled"); }
        // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').addClass("disabled"); } else{ $('#leftControl').removeClass("disabled"); }
  }   

do css dopisz:

#leftControl.disabled {
  background:transparent url(images/prev_disabled.png) no-repeat 0 0;
  cursor: default;  /* zeby kursor nie był "łapką" */
}
 
#rightControl.disabled {
  background:transparent url(images/next_disabled.png) no-repeat 0 0;
  cursor: default; /* zeby kursor nie był "łapką" */
}

czy to się spodoba skryptowi który używasz - nie wiem.
w każdym razie nie zniknie i nie będzie "łapki" po najechaniu. sprawdź co będzie po kliknięciu

edit: po rzuceniem okiem na kod ztwierdzam, że nic dobrego z tego nie będzie, a nie chce mi się już dopisywać do tamtego ;P

kurczeee proszę :) ważne to dla mnie :)))

i nikt :( ??

przez ten czas to byś się "naumiał" tego..