$(document).ready(function(){ 
	
	function tabsClear(){
		$("#t1").attr('src', 'template/tab_show_0.png');
		$("#t2").attr("src", "template/tab_interviews_0.png");	
		$("#t3").attr("src", "template/tab_gallery_0.png");		
		$("#t4").attr("src", "template/tab_19th_hole_0.png");	
	}
	$("#tabLink1").click(function () {
			tabsClear();					  
			$("#t1").attr('src', 'template/tab_show_1.png');
	}); 
	$("#tabLink2").click(function () { 
			tabsClear();
			$("#t2").attr("src", "template/tab_interviews_1.png");				   
	}); 
	$("#tabLink3").click(function () { 
			tabsClear();
			$("#t3").attr("src", "template/tab_gallery_1.png");				   
	}); 
	$("#tabLink4").click(function () { 
			tabsClear();
			$("#t4").attr("src", "template/tab_19th_hole_1.png");				   
	}); 
   
   
     // 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").hide();  
   
         // 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).show(); 
   
     }); 
	 
   
   });  
