/**

Coded by Leonard Burton for LookTouchFeel.co.uk

This uses the standard and rollover image side by side within one file. This is to prevent problems with loading on first rollover making things sloppy.


Example Usage:
	
	<div class="rollover-image" style="background-image:url('image.jpg');width:400px;height:250px;">
		<a href="#"><span>This is to replace alt text.</span></a>
	</div>



**/

jQuery(document).ready(function() {
			
	jQuery.easing.def = "easeOutQuad";
	
	jQuery('div.rollover-image').each(function(){
		
		var current = jQuery(this).html() ;
		
		jQuery(this).html('<div class="rollover-overlay">&nbsp;</div>'+current);
		
		jQuery(this).find('.rollover-overlay').css({	'background-position' : jQuery(this).css('width') + ' 0',
												'background-image' : jQuery(this).css('background-image'),
												'width' : jQuery(this).css('width'),
												'height' : jQuery(this).css('height')    });
		
		jQuery(this).mouseenter(function(){ jQuery(this).find('.rollover-overlay').clearQueue().fadeTo(500, 1) ; });
		
		jQuery(this).mouseleave(function(){ jQuery(this).find('.rollover-overlay').clearQueue().fadeTo(500, 0) ; });
		
	});
	
	
});