// +++ Built by JFitz on 17 March 2010 +++ //
// Replaces Flash module for displaying descriptions // 
// of medical cart components. //

$(document).ready(function() {		
	
	var last_elem = "#img_default";
	var elem;
	var last_btn = "";

	// Build an array of image and hotspot element IDs //
	var images = [];		
	var hotspots = [];
		
	
	// Assign the rollover effects //
	$(".btn").hover(
		function () { // MouseOver effect //

			// Grab the rel tag from the "hotspot" DIV (should be the ID of the image we want to show) //
			elem = "#" + $(this).attr('rel');
			
			// Don't redisplay if user moused over same area //
			if (last_elem == elem) return true;
			
			if ($(last_elem).css('display') != 'none')						
				$(last_elem).fadeOut(250);	

			// Reset the last hotspot //				
			if (last_btn != "")
			{
				$(last_btn).css('background', 'url(images/slices/circle.png) top left no-repeat');				
				$(last_btn).css('color', '#aaaaaa');
			}

			// Set the new "hotspot's" background image to "hovering" //
				$(this).css('background', 'url(images/slices/circlecolor.png) top left no-repeat');				
			$(this).css('color', '#ffffff');

			// Fade in the detail image //
			$(elem).fadeIn(350);

			last_elem = elem;
			last_btn = this;				
			}
	);		
});