var page = document.getElementsByClassName("menu");

function clickAction() {
	for (var i = 0; i < page.length; i++) {
		page[i].addEventListener("click", insert);
	}
}

function titleColor(e) {
	//change the color of the selected title
	Object.values(page).forEach(e => e.className = "menu");
	e.target.className = "menu menu_clic";
}

function loadContent(pageName) {
	/*next lines changes the script that load different
	contents for different pages*/
	//first remove the old one
	var script = document.getElementById("pageScript");
	script.parentElement.removeChild(script);
	//then create the new one
	var scriptAdd = document.createElement('script');
	scriptAdd.type = 'text/javascript';
	scriptAdd.id = "pageScript";
	scriptAdd.src = 'javascript/' + pageName + '.js';
	scriptAdd.defer = true;
	document.head.appendChild(scriptAdd);
}

function insert(e) {
	//get the name of the page after the # in the url
//	var nameCompare = location.hash.slice(1);
	var pageName = e.target.hash.slice(1);

	if (!document.getElementById("pageScript").src.includes(pageName)) {
		titleColor(e);
		loadContent(pageName);
	};
}

clickAction();