// ** slices hover effect **
// **                     **
$(function(){ // (executes when the dom is ready)
	
	// when we mouse over (hover) each "area" on our image map, reveal the correct image
	// when we mouse out, put the image back to normal state
	$('area').hover(function() {
		// on mouse over (hover) do...
		// find the class name for our image based on the "rel" attribute of the "area" tag
		// then add the class "show-all" which will ensure it removes the clip attribute
		$("."+$(this).attr("rel")).addClass("show-all");
	}, function() {
		// on mouse out do..
		// find the class name for our image based on the "rel" attribute of the "area" tag
		// then remove the class "show-all" which will ensure it removes the clip attribute
		$("."+$(this).attr("rel")).removeClass("show-all");
	});
	
	// do the same thing as above, but slightly different for IE browsers due to their stupidity
	if ($.browser.msie) {
		$("area").bind("mouseover", function(){
			$("."+$(this).attr("rel")).addClass("show-all");
		}).bind("mouseout", function(){
			$("."+$(this).attr("rel")).removeClass("show-all");
		});
	};
	
});