// JavaScript Document
var s = 0;
$("#port").css({'z-index':"0"});
$("#about").css({'z-index':"0"});

$("#menu > *").click(function () {
 var clickedLink = $(this).attr("id");
 if(s == 0){ 
  s = 1;
 
  if(clickedLink == 'workLink'){
   $("#headerDown").animate({top: "-75px"}, 600, function(){
    $("#port").addClass("active");
	$("#port").css({'z-index':"2"}); //portfolio forward
	$("#about").css({'z-index':"0"});
    $("#port").animate({opacity:"1"}, 1200);
   });//End header callback function
  } // End if clickedLink = work
  
  if(clickedLink == 'aboutLink'){
   $("#headerDown").animate({top: "-75px"}, 600, function(){
    $("#about").addClass("active");
  
	$("#port").css({'z-index':"-1"}); //portfolio backward
	$("#about").css({'z-index':"2"});
    $("#about").animate({opacity:"1"}, 1200);
   });//End header callback function
  } //End if clickedLink = about
 } //End initial if s 

 if(s == 1){
  if(clickedLink == 'workLink'){
 	$(".active").removeClass("active");
    $("#about").animate({opacity:"0"}, 1200, function(){
	 $("#port").addClass("active");
	 $("#port").css({'z-index':"2"}); //portfolio forward	
     $("#port").animate({opacity:"1"}, 1200);
	 $("#about").css({'z-index':"-1"}); //about backward											  
	});
	
  
  } // End if clickedLink = work	
  
  if(clickedLink == 'aboutLink'){
	$(".active").removeClass("active");
	$("#port").animate({opacity:"0"}, 1200, function(){
	 $("#about").addClass("active");
	 $("#about").css({'z-index':"2"});
	 $("#about").animate({opacity:"1"}, 1200);	 
	 $("#port").css({'z-index':"-1"}); //portfolio backward
    });
    
   
  
	
    

  } //End if clickedLink = about
  
 }
}); //End menu click function