$().ready(function(){
	var content = $("#content");
	var contentSection = $("#content > div");
	var menuSections = $("#menu ul li");
	var areaHome = $("#areaHome");
	var areaAbout = $("#areaAbout");
	var areaProjects = $("#areaProjects");
	var areaContact = $("#areaContact");
	
	//current section
	var currentSection = $("#home");
	var currentMenu = "home";
	
	menuSections.click(function(){
		//change section if it's different than current
		if(currentMenu != this.id){
			//menu style
			$(this).addClass("active");
			currentSection.removeClass("active");
			currentSection = $(this);
			currentMenu = this.id;
			
			//activate the new selected section
			switch(this.id){
				case "home":
					content.fadeTo("slow", 0.0,
						function(){
							contentSection.css({display:"none"});
							areaHome.css({display:"block"});}
					);
					content.fadeTo("slow", 1.0);
				break;
				case "about":
					content.fadeTo("slow", 0.0,
						function(){
							contentSection.css({display:"none"});
							areaAbout.css({display:"block"});}
					);
					content.fadeTo("slow", 1.0);
				break;
				case "projects":
					content.fadeTo("slow", 0.0,
						function(){
							contentSection.css({display:"none"});
							areaProjects.css({display:"block"});}
					);
					content.fadeTo("slow", 1.0);
				break;
				case "contact":
					content.fadeTo("slow", 0.0,
						function(){
							contentSection.css({display:"none"});
							areaContact.css({display:"block"});}
					);
					content.fadeTo("slow", 1.0);
				break;
			}
		}
	});
});