/*
	
	Awesome preloading image rollover script from:
	http://www.robertmullaney.com/2011/01/14/improved-jquery-image-preloader-rollover-effect/
	
	Slightly modified so this script can be used on any element with a "src" attribute.
	
	Usage:
	
	 - Apply ".rollover" class on desired element. The element must have the "src" attribute (go figure).
	 - Save image rollovers with -hover at the end of the name.
		
		eg: <a href="#"><img class="rollover" src="images/myimage.jpg" alt="" /></a>
			<input type="image" class="rollover" name="submit" src="images/myimage.jpg" />
			
			Hover image is saved as myimage-hover.jpg
	
*/
$(document).ready(function() {
	
	//preload images
	var preloadedImages = new Array();
	
	$('.rollover').each(function(i) {
		
		preloadedImages[i] = new Image();
		var ext = $(this).attr('src').split('.').pop();
		preloadedImages[i].src = $(this).attr('src').split('.' + ext).join('-hover.' + ext);
		
	});
	
	//rollover effect
	$('.rollover').hover(function() {
		
		var ext = $(this).attr('src').split('.').pop();
		$(this).attr('src', $(this).attr('src').split('.' + ext).join('-hover.' + ext));
		
	}, function() {
		
		var ext = $(this).attr('src').split('.').pop();
		$(this).attr('src', $(this).attr('src').split('-hover.' + ext).join('.' + ext));
		
	});
	
});