// create our transition as a plugin
$.fn.crossfade = function () {
	return this.each(function () { 
	// cache the copy of jQuery(this) - the start image
	var $$ = $(this);
	
	// get the target from the backgroundImage + regexp
	var target = $$.css('backgroundImage').replace(/^url|[()]/g, '');
	
	// nice long chain: wrap img element in span
	$$.wrap('<span style="position: relative;"></span>')
	// change selector to parent - i.e. newly created span
	.parent()
	// prepend a new image inside the span
	.prepend('<img>')
	// change the selector to the newly created image
	.find(':first-child')
	// set the image to the target
	.attr('src', target);
	
	// position the original image
	$$.css({
	'position' : 'absolute', 
	'left' : 0, 
	// this.offsetTop aligns the image correctly inside the span
	'top' : this.offsetTop
	});
	
	// note: the above CSS change requires different handling for Opera and Safari,
	// see the full plugin for this.
	
	// similar effect as single image technique, except using .animate 
	// which will handle the fading up from the right opacity for us
	$$.hover(function () {
	$$.stop().animate({
	opacity: 0
	}, 250);
	}, function () {
	$$.stop().animate({
	opacity: 1
	}, 500);
	});
	});
};