$( function() {
	var i = 0;
	$('.hoverable img, img.hoverable').each( function() {
		var src			= $(this).attr('src');
		var alt			= $(this).attr('alt');
		var extension	= src.substring(src.lastIndexOf('.'),src.length);
		var hoverElem	= $(document.createElement('span'));
		
		$(hoverElem).attr('id', alt + '_' + i + '_hover');
		$(this).wrap($(hoverElem));
		
		$('#' + alt + '_' + i + '_hover').css({
			display: 'block',
			position: 'relative',
			backgroundPosition: 'center bottom',
			backgroundRepeat: 'no-repeat',
			backgroundImage: 'url(' + src.replace(extension,'_hover' + extension) + ')',
			overflow: 'visible'
		});

		$(this).bind('mouseenter', function() {
			$(this).animate({ opacity: 0 }, 150);
		});
		$(this).bind('mouseleave', function() {
			$(this).animate({ opacity: 1 }, 150);
		});
	});
	$(".nofade").each( function() {
		var src			= $(this).attr('src');
		var extension	= src.substring(src.lastIndexOf('.'), src.length);

		$(this).bind('mouseenter', function() {
			$(this).attr('src', src.replace(extension,'_hover' + extension));
		});
		$(this).bind('mouseleave', function() {
			$(this).attr('src', src);
		});
	});
});