function clearOthers(current){
	if(current = "cli") {
		$("#can_details").slideUp(600);
		$("#con_details").slideUp(600);
		$("#tea_details").slideUp(600);		
		$("#can").css("color", "#999999");
		$("#con").css("color", "#999999");		
		$("#tea").css("color", "#999999");		
		
	}
	
	if(current = "can") {
		$("#cli_details").slideUp(600);
		$("#con_details").slideUp(600);
		$("#tea_details").slideUp(600);
		$("#cli").css("color", "#999999");
		$("#con").css("color", "#999999");
		$("#tea").css("color", "#999999");								
	}
	
	if(current = "tea") {
		$("#cli_details").slideUp(600);
		$("#con_details").slideUp(600);
		$("#can_details").slideUp(600);		
		$("#cli").css("color", "#999999");
		$("#con").css("color", "#999999");	
		$("#can").css("color", "#999999");			
				
	}	
	
	if(current = "con") {
		$("#can_details").slideUp(600);
		$("#cli_details").slideUp(600);
		$("#tea_details").slideUp(600);		
		$("#cli").css("color", "#999999");
		$("#can").css("color", "#999999");
		$("#tea").css("color", "#999999");			
					
	}
				
};

function clearAll(){
		$("#can_details").slideUp(600);
		$("#cli_details").slideUp(600);
		$("#tea_details").slideUp(600);		
		$("#con_details").slideUp(600);
		
		$("#cli").css("color", "#999999");
		$("#can").css("color", "#999999");
		$("#tea").css("color", "#999999");				
		$("#con").css("color", "#999999");
							
};



$(function(){

	var current = "firstrun";
	var clicked = false;

	
	$("#cli").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
	$("#can").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
	$("#tea").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});	
	$("#con").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

	
	$("#cli").click(function(){
		
		
		if((current == "cli" && clicked == false) || (current == "firstrun") || (current != "cli" && clicked == true) || (current != "cli" && clicked == false)) {
			clicked = true;
			current = "cli";
			clearOthers(current);
			$("#cli").css("color", "#ffffff");
			$("#cli_details").slideDown(600);
			return;
		}
		
		
		if(clicked == true) {
			current = "cli";
			clicked = false;
			clearAll();
			return;
		}		


	});


	
	$("#can").click(function(){
		if((current == "can" && clicked == false) || (current == "firstrun") || (current != "can" && clicked == true) || (current != "can" && clicked == false)) {
			current = "can";
			clicked = true;
			clearOthers(current);
			$("#can").css("color", "#ffffff");
			$("#can_details").slideDown(600);
			console.log(clicked);
			console.log(current);
			return;
			
		}	
		
		if(clicked == true) {
			current = "can";
			clicked = false;
			clearAll();
			console.log(clicked);
			console.log(current);
			return;
			
		}
	
	});
	
	
	$("#tea").click(function(){
		if((current == "tea" && clicked == false) || (current == "firstrun") || (current != "tea" && clicked == true) || (current != "tea" && clicked == false)) {
			current = "tea";
			clicked = true;
			clearOthers(current);
			$("#tea").css("color", "#ffffff");
			$("#tea_details").slideDown(600);
			console.log(clicked);
			console.log(current);
			return;
			
		}	
		
		if(clicked == true) {
			current = "tea";
			clicked = false;
			clearAll();
			console.log(clicked);
			console.log(current);
			return;
			
		}
	
	});	
	

	$("#con").click(function(){
		if((current == "con" && clicked == false) || (current == "firstrun") || (current != "con" && clicked == true)|| (current != "con" && clicked == false)) {
			current = "con";
			clicked = true;
			clearOthers(current);
			$("#con").css("color", "#ffffff");
			$("#con_details").slideDown(600);
			return;
			
		}	
		
		if(clicked == true) {
			current = "con";
			clicked = false;
			clearAll();
			return;
			
		}	
	
	});		
	
});