$().ready(function(){
	var content = $("#content");
	var contentSection = $("#content > div");
	var menuSections = $("#left_nav ul li");
	var areaLogistics = $("#areaDigital");
	var areaAwards = $("#areaWeb");
	var areaNews = $("#areaMarketing");
	var areaClient = $("#areaEvents");
	
	//current section
	var currentSection = $("#web");
	var currentMenu = "web";
	
	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 "digital":
					content.fadeTo("slow", 0.0,
						function(){
							contentSection.css({display:"none"});
							areaLogistics.css({display:"block"});}
					);
					content.fadeTo("slow", 1.0);
				break;
				case "web":
					content.fadeTo("slow", 0.0,
						function(){
							contentSection.css({display:"none"});
							areaAwards.css({display:"block"});}
					);
					content.fadeTo("slow", 1.0);
				break;
				case "marketing":
					content.fadeTo("slow", 0.0,
						function(){
							contentSection.css({display:"none"});
							areaNews.css({display:"block"});}
					);
					content.fadeTo("slow", 1.0);
				break;
				case "events":
					content.fadeTo("slow", 0.0,
						function(){
							contentSection.css({display:"none"});
							areaClient.css({display:"block"});}
					);
					content.fadeTo("slow", 1.0);
				break;
			}
		}
	});
});