var cp = "p1";
function activatePrinciple(principle){
	// Deactivate currently active principle and hide text
	$("#" + cp).removeClass("active");
	$("#" + cp + "-text").hide();
	
	// Activate the new principle and show text
	cp = principle;
	$("#" + cp).addClass("active");
	$("#" + cp + "-text").show();
}
$(document).ready(function() {
	// Hide all principle texts to begin with
	$(".principletext").hide();
	
	// Activate first principle by default
	activatePrinciple("p1");
	
	// Add this event to each principle to activate it when clicked
    $("#arc .principle").click(function(event) {
    	activatePrinciple($(this).attr("id"));
    });
});