document.addEventListener('DOMContentLoaded', addCollapsibleOnClick(), false);
document.addEventListener('DOMContentLoaded', applyExpandSettings(), false);
document.addEventListener('DOMContentLoaded', hideUserSettingsModal(), false);

function showUserSettingsModal() {
	var modalElement = document.getElementById("userSettingsModal");
	if (modalElement != null) {
		modalElement.style.display = 'block';
	}
}

function hideUserSettingsModal() {
	window.onclick = function(event) {
		var modalElement = document.getElementById("userSettingsModal");
		var closeElement = document.getElementById("closeModalWindow");
		if (event.target == modalElement || event.target == closeElement) {
			modalElement.style.display = 'none';
		}
	}
}

function addCollapsibleOnClick() {
	var coll = document.getElementsByClassName("collapsible");
	var i;
	for (i = 0; i < coll.length; i++) {
		var collapsibleLink = coll[i].querySelector('.collapsibleLink');
		if (collapsibleLink === null) {
			collapseNextElementOnClick(coll[i]);
		} else {
			expandableNextOuterElementOnClick(collapsibleLink);
		}

	}
}

function expandableNextOuterElementOnClick(element) {
	element.addEventListener("click", function() {
		this.parentElement.classList.toggle("expanded");
		this.parentElement.classList.toggle("collapsed");
		var content = this.parentElement.nextElementSibling;
		if (content.style.display === "block") {
			content.style.display = "none";
		} else {
			content.style.display = "block";
		}
	});
}

function collapseNextElementOnClick(element) {
	element.addEventListener("click", function() {
		this.classList.toggle("active");
		var content = this.nextElementSibling;
		if (content.style.display === "block") {
			content.style.display = "none";
		} else {
			content.style.display = "block";
		}
	});
}

function applyExpandSettings() {
	applyDocumentExpandSettings('switchExpand', 'expandCB', 'expandSettingsCB', '.autoExpand');
	applyDocumentExpandSettings('metadataExpandSetting', 'metadataExpandCB', 'metadataExpandSettingCB', '.autoMetadataExpand');
}

function applyDocumentExpandSettings(settingName, buttonId, settingButtonId, targetElementsClass) {
	if (localStorage.getItem(settingName) === true || localStorage.getItem(settingName) === 'true') {
		var expandSwitchCB = document.getElementById(buttonId);
		if (expandSwitchCB != null) {
			expandSwitchCB.checked = true;
		}
		var expandSwitchSettingsCB = document.getElementById(settingButtonId);
		if (expandSwitchSettingsCB != null) {
			expandSwitchSettingsCB.checked = true;
		}
		$(targetElementsClass).show();
		showDocumentCollapseButton(buttonId);
	} else {
		$(targetElementsClass).hide();
		showDocumentExpandButton(buttonId);
	}
}

function switchExpand(inputID, elementsClass) {
	var checkBox = document.getElementById(inputID);
	if (checkBox.checked == true) {
		$(elementsClass).show();
		showDocumentCollapseButton(inputID);
	} else {
		$(elementsClass).hide();
		showDocumentExpandButton(inputID);
	}
}
function showDocumentCollapseButton(inputID) {
	var inputElement = document.getElementById(inputID);
	if (inputElement === null) {
		return;
	}
	var collapseTextControl = inputElement.parentElement.querySelector('.collapseTextControl');
	collapseTextControl.style.display = "inline";
	var expandTextControl = inputElement.parentElement.querySelector('.expandTextControl');
	expandTextControl.style.display = "none";
}

function showDocumentExpandButton(inputID) {
	var inputElement = document.getElementById(inputID);
	if (inputElement === null) {
		return;
	}
	var collapseTextControl = inputElement.parentElement.querySelector('.collapseTextControl');
	collapseTextControl.style.display = "none";
	var expandTextControl = inputElement.parentElement.querySelector('.expandTextControl');
	expandTextControl.style.display = "inline";
}

function switchExpandSettings(checkboxID, settingName) {
	var checkBox = document.getElementById(checkboxID);
	if (checkBox.checked == true) {
		localStorage.setItem(settingName, true);
	} else {
		localStorage.setItem(settingName, false);
	}
}
