// When the document loads do everything inside here ...  
$(document).ready(function(){  
	
	// color initial active image on load
	$("a.active").children("img").attr('src', function() { 
	    return this.src.replace(/_bw.jpg/,'.jpg'); 
	});
				
    // When a link is hovered  
    $("a.tab").mouseover(function () {  
		
        // switch all tabs off  
        $(".active").removeClass("active");  
       	
		// switch this tab on  
		$(this).addClass("active");
        
        // hide all elements with the class 'content' up  
        $(".content").hide();  
		
		// change all images to b&w that are not active
		$("a.tab").not(".active").children("img").attr('src', function() { 
		    return this.src.replace(/([0-9]).jpg$/i, "$1_bw.jpg"); 
		});
								
        // Now figure out what the 'title' attribute value is and find the element with that id.  Then slide that down.  
		var content_show = $(this).attr("title"); 
		$("#"+content_show).show(); 
				
		// show color for the active image	
		$("a.active").children("img").attr('src', function() { 
		    return this.src.replace(/_bw.jpg/,'.jpg'); 
		});
				
    });

});