"use strict";

var g_timeoutMove = null;

// Muss nach dem Laden der Seite (z.B. beim DOMContentLoaded-Event) einmalig aufgerufen werden!
function InitList()
{
	var elemsList = document.getElementsByClassName('list');
	for (var i = 0; i < elemsList.length; i++)
	{
		var elemList = elemsList[i];
		var elemsItem = elemList.getElementsByClassName('item');
		for (var iItem = 0; iItem < elemsItem.length; iItem++)
		{
			var elemItem = elemsItem[iItem];
			var elemTitle = elemItem.getElementsByClassName('title')[0];
			elemTitle.setAttribute('onclick', 'ShowItem(this);');
			var elemDetails = elemItem.getElementsByClassName('details')[0];
			elemDetails.style.display = 'none';
		}
	}
	window.addEventListener('resize', OnResize);
}

// Reagiert auf Klick auf einen Item-Titel
function ShowItem(elemTitleClicked)
{
	var bAllDetailsHidden = true;

	var elemItemClicked = elemTitleClicked.parentElement;
	var elemList = elemItemClicked.parentElement;
	var elemsItem = elemList.getElementsByClassName('item');
	for (var iItem = 0; iItem < elemsItem.length; iItem++)
	{
		var elemItem = elemsItem[iItem];
		elemItem.classList.remove('expanded');

		var elemDetails = elemItem.getElementsByClassName('details')[0];
		elemDetails.style.removeProperty('display');

		if (elemItem === elemItemClicked && !elemDetails.style.maxHeight)
		{
			ScrollIntoView(elemItemClicked);
			elemItemClicked.classList.add('expanded');
			elemDetails.style.maxHeight = elemDetails.scrollHeight + "px";
			window.setTimeout(function() { ScrollIntoView(null); }, 300); // [1] Die Zeitangabe sollte etwas länger als [1] in list.css sein!
			bAllDetailsHidden = false;
		}
		else
		{
			elemDetails.style.maxHeight = null;
		}
	}

	window.setTimeout(function()
	{
		for (var iItem = 0; iItem < elemsItem.length; iItem++)
		{
			var elemItem = elemsItem[iItem];
			var elemDetails = elemItem.getElementsByClassName('details')[0];
			if (!elemDetails.style.maxHeight)
				elemDetails.style.display = 'none';
		}
	}, 200); // [1] Die Zeitangabe muss mindestens [1] in list.css entsprechen!

	var elemHint = elemList.querySelector("#hint");
	if (elemHint)
	{
		if (bAllDetailsHidden)
		{
			elemHint.style.removeProperty('display');
		}
		else
		{
			elemHint.style.display = 'none';
		}
	}
}

// Hält den angeklickten Item-Titel nach Zuklappen darüber befindlichen Items im Browser-Fenster
function ScrollIntoView(elemItemClicked)
{
	clearTimeout(g_timeoutMove);
	if (elemItemClicked)
	{
		var topicPos = elemItemClicked.getBoundingClientRect().top;
		if (topicPos < 0)
		{
			window.scrollBy(0, topicPos);
		}
		g_timeoutMove = window.setTimeout(function() { ScrollIntoView(elemItemClicked) }, 10);
	}
}

// Aktualisiert die Höhe des/der aufgeklappten Item-Titel(s) nach Größenänderung des Browser-Fensters
function OnResize()
{
	var elemsDetails = document.getElementsByClassName('details');
	for (var iDetails = 0; iDetails < elemsDetails.length; iDetails++)
	{
		var elemDetails = elemsDetails[iDetails];
		if (elemDetails.style.maxHeight)
		{
			elemDetails.style.maxHeight = elemDetails.scrollHeight + "px";
		}
	}
}

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