jQuery(document).ready(function(){
	
	$('p').slideUp(0);
	
	$('p img').tooltip({ 
    			track: true, 
    			delay: 0, 
    			showURL: false, 
    			showBody: " - ", 
    			fade: 250 
			});
	
	/*Header highlights and hovers*/
	
	$('li').hover(
		function(){
			$(this).css({'background-color':'#CC3300'})
			},
		function() {
			$(this).css({'background-color':'black'})
		})

	$('.title').addClass('inactive');
	
	$('.title:first')
		.removeClass('inactive')
		.addClass('active');
		
	$('.inactive')
		.bind("mouseenter",
			function(){
				$(this).animate({opacity:1},'slow')
			})
		.bind("mouseleave",
			function() {
				$(this).animate({opacity:0.25},'slow')
			})
			
	$('.title').click(function(){

		/*Reset headers and bindings*/		
		$('.inactive')
			.unbind("mouseenter")
			.unbind("mouseleave");
		
		$('.title').removeClass('active');
		$('.title').addClass('inactive');
		
		$(this).removeClass('inactive');
		$(this).addClass('active');
		
		$('.inactive').bind("mouseenter",
		function(){
			$(this).animate({opacity:1},'slow')
		})
		
		$('.inactive').bind("mouseleave",
		function() {
			$(this).animate({opacity:0.25},'slow')
		})
		
		
		/*Hide and Show*/
		var show = $(this).attr('name');
		
		$('p').slideUp(500);
		
		setTimeout( function(){
			$('p#'+show).slideDown(500);
		}, 250)
		
		$('.inactive').animate({opacity:0.25},'fast');
		
		
	})

});

window.onload = function() {
	$('p:first').slideDown(250);

	setTimeout( function(){
		$('.inactive').animate({opacity:0.25},'fast');
	}, 250)
}