Changing images with JQuery and the fade effect

application.js

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

$(document).ready(addClickHandlers);

show.html.haml

- @listing.photos.each do |p|
  = image_tag(p.photo.url(:small), :class => "thumbnail")
= image_tag(@listing.photos.first.photo.url(:medium), :id => "medium_photo")