	document.addEventListener('DOMContentLoaded', createTOC(), false);

	function createTOC(){
		var complexDocElement = document.getElementById("complexDocument");
		var tocElement = document.getElementById("tocPlaceHolder");
		
		if (complexDocElement === null || tocElement === null){
			console.log("no complex document or no placeholder");
			return;
		}
		addItemsToTOC(complexDocElement,tocElement);

		collapseAllTOCElements("tocPlaceHolder");
		//show created TOC
		tocElement.style.display = "block"; 
	}
	
	function addItemsToTOC(docPart, tocElement){
		var docPartChilds = docPart.childNodes;
		for (var i = 0; i < docPartChilds.length; i++){
			var docPartChild = docPartChilds[i];
			if ( docPartChild.nodeType === Node.ELEMENT_NODE && docPartChild.classList.contains("documentPart")){
				var tocElementChild = createTOCItem(docPartChild, tocElement);
				addItemsToTOC(docPartChild,tocElementChild);
				addElementControls(tocElementChild);
			}
		}
	}
	function addElementControls(tocElement){
		
		var nameContainer = tocElement.querySelector('.tocElementName');
		if (nameContainer === null){
			console.log("no nameContainer found");
			return;
		}
		if (tocElement.id === null){
			console.log("no tocElement id found");
			return;
		}
	
		var elementChild = tocElement.querySelector('.tocElement');
		if (elementChild === null){
			var leafImage = document.createElement("img");
			leafImage.className = "tocElementLeafImage";
			leafImage.src = urlsBase + "/themes/iph/images/circle-item.svg";
			nameContainer.prepend(leafImage);
		} else {
			var switchImage = document.createElement("img");
			switchImage.onclick = function() {switchTOCElement(tocElement.id);};
			switchImage.className = "tocElementSwitchImage";
			nameContainer.prepend(switchImage);
		}
	}
	
	function switchTOCElement(id){
		var tocElement = document.getElementById(id);
		var elementChild = tocElement.querySelector('.tocElement');
		if (elementChild.style.display === "none"){
			expandTOCElementChilds(id);
			setCollapseImageToElement(id);
		} else {
			collapseTOCElementDescendants(id);
			setExpandImageToElement(id);
		}
	}
	
	function setCollapseImageToElement(id){
		var tocElement = document.getElementById(id);
		var nameContainer = tocElement.querySelector('.tocElementName');
		if (nameContainer === null){
			console.log("no nameContainer found");
			return;
		}
	    $.extend(this, urlsBase);
		var imgElement = nameContainer.querySelector('.tocElementSwitchImage');
		if (imgElement != null){
			imgElement.src = urlsBase + "/themes/iph/images/arrow-top-small.svg";
		}
	}
	
	function setExpandImageToElement(id){
		var tocElement = document.getElementById(id);
		var nameContainer = tocElement.querySelector('.tocElementName');
		if (nameContainer === null){
			console.log("no nameContainer found");
			return;
		}
	    $.extend(this, urlsBase);
		var imgElement = nameContainer.querySelector('.tocElementSwitchImage');
		if (imgElement != null){
			imgElement.src = urlsBase + "/themes/iph/images/arrow-down-small.svg";
		}
		
	}
	
	function expandTOCElementChilds(id){
		var tocElement = document.getElementById(id);
		var elementChilds = tocElement.querySelectorAll(':scope > .tocElement');
		for (let i = 0; i < elementChilds.length; i++) {
			elementChilds[i].style.display = "block";
			setExpandImageToElement(elementChilds[i].id);
		}
	}
	
	function expandTOCElementDescendants(id){
		var tocElement = document.getElementById(id);
		var elementChilds = tocElement.querySelectorAll('.tocElement');
		for (let i = 0; i < elementChilds.length; i++) {
			elementChilds[i].style.display = "block";
			setExpandImageToElement(elementChilds[i].id);
		}
	}
	
	function collapseAllTOCElements(placeHolderId){
		var tocRoot = document.getElementById(placeHolderId);
		var elementChilds = tocRoot.querySelectorAll('.tocElement');
		for (let i = 0; i < elementChilds.length; i++) {
			collapseTOCElementDescendants(elementChilds[i].id);
			setExpandImageToElement(elementChilds[i].id);
		}
	}
	function expandAllTOCElements(placeHolderId){
		var tocRoot = document.getElementById(placeHolderId);
		var elementChilds = tocRoot.querySelectorAll('.tocElement');
		for (let i = 0; i < elementChilds.length; i++) {
			expandTOCElementDescendants(elementChilds[i].id);
			setCollapseImageToElement(elementChilds[i].id);
		}
	}
	
	function collapseTOCElementDescendants(id){
		var tocElement = document.getElementById(id);
		var elementChilds = tocElement.querySelectorAll('.tocElement');
		for (let i = 0; i < elementChilds.length; i++) {
			elementChilds[i].style.display = "none";
			setCollapseImageToElement(elementChilds[i].id);
		}
	}

	function createTOCItem(docPart, tocElement){
		var newTOCElement = document.createElement("div");
		var newTOCElementName = document.createElement("div");
		var anchor = docPart.getAttribute('id');
		var tocElementID = "toc-" + anchor;
		newTOCElement.id = tocElementID;
		var docPartButton = docPart.previousElementSibling;
		var itemName = docPartButton.textContent;
		var link = document.createElement("a");
		link.setAttribute("href", "javascript:goToDocumentPart(\"" + anchor + "\");" );
		link.innerText = itemName;
		newTOCElement.appendChild(newTOCElementName);
		newTOCElementName.appendChild(link);
		newTOCElement.className = "tocElement";
		newTOCElementName.className = "tocElementName";
		tocElement.appendChild(newTOCElement);
		return newTOCElement;
	}
	function goToDocumentPart(targetId){
		if (targetId ===""){
			return;
		}
		var targetNode = document.getElementById(targetId);
		if (targetNode === null){
			console.log("document has no target node to go to")
			return;
		}
		showParents(targetNode);
		document.getElementById(targetId).scrollIntoView();		
	}
	function showParents(targetNode){
		if (targetNode != null && "complexDocument" !== targetNode.id){
			if (targetNode.style.display === "none") {
    			targetNode.style.display = "block";
  			}
			showParents(targetNode.parentElement);
		}
	}
	