jQuery(document).ready(function() {
	
	var theNextSlide;

	// show first image
	jQuery('#features_image #f1').fadeIn();
	
	jQuery('#features_navigation ul li a').bind({
		mouseenter: function() {
			theNextSlide = this.id.substr(1); // get the target image to show and fade it in
			// hide all the images
			jQuery('#features_image div').each(function() {
				jQuery(this).hide();
			});
			if (this.className == 'current') {
				jQuery('#'+theNextSlide).show();
			} else {
				jQuery('#'+theNextSlide).fadeIn();
			}
			// turn off arrows, except for one being rolledover
			jQuery('#features_navigation ul li a').each(function() {
				jQuery(this).removeClass('current');
			});
			jQuery(this).addClass('current');
		}
	});

});