Image gallery: Disable thumbnail when being clicked

I'm trying to create a simple "image gallery" where I have one big photo and a couple of thumbnails. When a thumbnail is clicked the big image should fade out and then fade in the new image. My problem is that when I click on the thumbnail that represents the current "big image" the big image fades out and no big image is displayed. I therefore want to disable the thumbnail once it's clicked and it's big image has been loaded. Any suggestions on how to do this would be greatly appreciated. My current code looks like this:

application.js

function addClickHandlers(){
  var large_image = document.getElementById("large_image")
  var thumbnail = $('img.thumbnail')

  // Adds click handlers to image thumbnails that update the larger image
  $(thumbnail, this).click(function() {
    src = this.src.replace("thumb", "large")
    $(large_image).fadeOut(200, function(){
      $(large_image).attr('src', src).bind('readystatechange load', function(){
        if  (this.complete) $(this).fadeIn(400);
      });
    });
  });
};

$(document).ready(addClickHandlers);  

And my HTML/HAML

.big_photo
  = image_tag(@tee.tee_images.first.photo.url(:large), :id => "large_image")
- tee.tee_images.ea开发者_StackOverflow社区ch do |image|
  = image_tag(image.photo.url(:thumb), :class => "thumbnail")

I've followed this tutorial: http://blog.randomutterings.com/articles/2009/02/15/changing-images-with-jquery-and-the-fade-effect

How about checking if the big image matches the thumb? so change the code to

$(thumbnail, this).click(function() {
  src = this.src.replace("thumb", "large");
  if (src != large_image.src)
    $(large_image).fadeOut(200, function(){