$(document).ready(function(){ 
	
	function tabsClear(){
		$("#hdr1").attr('src', 'template/hdr_1a.jpg');
		$("#hdr2").attr("src", "template/hdr_2a.jpg");	
		$("#hdr3").attr("src", "template/hdr_3a.jpg");		
		$("#hdr4").attr("src", "template/hdr_4a.jpg");	
	}
	$("#tabLink1").click(function () {
			tabsClear();					  
			$("#hdr1").attr('src', 'template/hdr_1b.jpg');
	}); 
	$("#tabLink2").click(function () { 
			tabsClear();
			$("#hdr2").attr("src", "template/hdr_2b.jpg");				   
	}); 
	$("#tabLink3").click(function () { 
			tabsClear();
			$("#hdr3").attr("src", "template/hdr_3b.jpg");				   
	}); 
	$("#tabLink4").click(function () { 
			tabsClear();
			$("#hdr4").attr("src", "template/hdr_4b.jpg");				   
	}); 
   
   
     // When a link is clicked  
     $("a.tab").click(function () {  
   
         // switch all tabs off  
         $(".active").removeClass("active");  
   
         // switch this tab on 
		 
         $(this).addClass("active");
		 
		
   
         // slide all elements with the class 'content' up  
           
		 $(".content").fadeOut();  
   			$(".content").slideUp();
         // 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();  
		 
   		 $("#"+content_show).fadeIn();
		 $("#"+content_show).slideDown(); 
     }); 
	 
   
   });