/* Gemeinsam genutzte Scripts */

function InitCSS()
{
	document.documentElement.style.setProperty('--ScrollbarWidth', (window.innerWidth - document.documentElement.clientWidth) + "px");
}

function InitLinks()
{
	var thisServer = 'geliebt.info';

	var elemContent = document.querySelector("#content");
	if (!elemContent) return;

	var elemsLink = elemContent.getElementsByTagName('a');
	for (var i = 0; i < elemsLink.length; i++)
	{
		var elemLink = elemsLink[i];

		var href = elemLink.href;
		var translation = (href.match(/^https:\/\/www.bibleserver.com\/([A-Z]*)\//) || ['', ''])[1];

		if (translation === 'LUT') translation = 'Luther 2017';
		else if (translation === 'ELB') translation = 'Elberfelder Bibel 2006';
		else if (translation === 'SLT') translation = 'Schlachter 2000';
		else if (translation === 'HFA') translation = 'Hoffnung für alle';

		var title = '';
		var linkText = elemLink.title || elemLink.innerText;
		if (translation !== '')
			title = '🕮\u{FE0E} ' + linkText + '\n文\u{FE0E} Übersetzung: ' + translation;
		else
			title = '➤\u{FE0E} ' + linkText;

		var server = (href.match(/^https:\/\/([^\/]*)\//) || ['', ''])[1];
		if (server !== '' && server !== thisServer)
			title += '\n🌎\u{FE0E} ' + server + ' (externer Link)';
		else
			title += '\n🎔\u{FE0E} ' + thisServer + ' (interner Link)';

		elemLink.title = title;
	}
}

function InitFooter()
{
	var elemInsertAfter = document.querySelector("#content");
	if (!elemInsertAfter) return;

	var elemFooter = document.createElement('div');
	elemFooter.classList.add('footer');

	var links =
	[
		{
			url: 'index.html',
			txt: 'Du bist geliebt'
		},
		{
			url: 'kind-gottes-werden.html',
			txt: 'Kind Gottes werden'
		},
		{
			url: 'kommst-du-in-den-himmel.html',
			txt: 'Kommst du in den Himmel?'
		},
		{
			url: 'jesus-kommt-wieder.html',
			txt: 'Jesus kommt wieder'
		},
		{
			url: 'about.html',
			txt: 'Über geliebt.info'
		},
/*
		{
			url: 'cgi-bin/dialog.pl',
			txt: 'Dialog'
		},
*/
		{
			url: 'cgi-bin/kontakt.pl?to=geliebt',
			txt: 'Kontakt'
		}
	];

	var strFooter = '';
	for (var i in links)
	{
		if (i > 0 && i % 3 === 0)
		{
			elemFooter.innerHTML = strFooter;
			document.body.insertBefore(elemFooter, elemInsertAfter.nextSibling);
			strFooter = '';

			elemInsertAfter = elemFooter;
			elemFooter = document.createElement('div');
			elemFooter.classList.add('footer');
		}

		var lnk = links[i];
		var url = lnk.url.split('?')[0];
		var loc = window.location.pathname;
		if (loc === '/') loc = '/index.html';

		if (loc.indexOf(url) < 0)
		{
			var path = '';
			if (loc.indexOf('/cgi-bin/') >= 0)
				path = '../';

			strFooter +=
				'<div>' +
				'	<p><a href="' + path + lnk.url + '">' + lnk.txt.replaceAll(' ', '&nbsp;') + '</a></p>' +
				'</div>';
		}
		else
		{
			strFooter +=
				'<div>' +
				'	<p class="active">' + lnk.txt.replaceAll(' ', '&nbsp;') + '</p>' +
				'</div>';
		}
	}

	elemFooter.innerHTML = strFooter;
	document.body.insertBefore(elemFooter, elemInsertAfter.nextSibling);
}

// Automatisches Inhaltsverzeichnis für Artikel erstellen
// - Erstellt anhand der Überschriften (H1...H6) innerhalb eines Artikels ein Inhaltsverzeichnis.
// - Es werden nur Überschriften berücksichtugt, die eine ID haben. Die ID wird als Sprungziel verwendet.
// - Das erzeugte Inhaltsverzeichnis wird in Elemente mit der Klasse "toc" eingefügt.
// - Wenn das Element mit der Klasse "toc" ein Attribut "data-list-tag" enthält, wird dieses anstelle von "ol" verwendet.
// - Per CSS kann das Inhaltsverzeichnis über den Selektor ".toc ol" gestyled werden.
function InitTableOfContents()
{
	var elemArticle = document.getElementById('content');
	if (elemArticle)
	{
		var elemsTOC = elemArticle.getElementsByClassName('toc');
		var html = '';
		for (var d = 0; d < elemsTOC.length; d++)
		{
			var elemTOC = elemsTOC[d];
			if (html === '') html = CreateTOC(elemArticle);
			elemTOC.innerHTML += html;
		}
	}

	function CreateTOC(elemArticle)
	{
		var elems = elemArticle.getElementsByTagName('*');
		var levelStart = -1
		var level = levelStart;
		var html = '';
		var ids = [];
		for (var i = 0; i < elems.length; i++)
		{
			var elem = elems[i];
			var tagName = elem.tagName;
			var matches = tagName.match(/^H([1-6])$/);
			if (matches)
			{
				if (!elem.id) continue;
				var txtDuplicateId = '';
				if (ids.includes(elem.id))
					txtDuplicateId = '<span class="error"> &ndash; DUPLICATE ID: ' + elem.id + '</span>';
				else
					ids.push(elem.id);

				var levelNew = matches[1];
				if (levelStart === -1)
				{
					levelStart = levelNew - 1;
					level = levelStart;
				}

				if (level < levelNew)
				{
					while (level < levelNew)
					{
						html += '<ol><li>';
						level++;
					}
					html += '<a href="#' + elem.id + '">' + elem.innerText + '</a>' + txtDuplicateId;
				}
				else
				{
					while (level > levelNew)
					{
						html += '</li></ol>';
						level--;
					}
					html += '</li><li><a href="#' + elem.id + '">' + elem.innerText + '</a>' + txtDuplicateId;
				}
			}
		}

		while (level > levelStart)
		{
			html += '</li></ol>';
			level--;
		}

		return html;
	}
}

var gToken;
var gSession;

var gPos;
var gTarget;
var gReferrer;
var gUserAgent;

function Process(action, data)
{
	var pos = GetPos();
	if (pos && gPos !== pos) gPos = pos;
	else pos = undefined;

	var target = window.location;
	if (target && gTarget !== target) gTarget = target;
	else target = undefined;

	var referrer = document.referrer;
	if (referrer && gReferrer !== referrer) gReferrer = referrer;
	else referrer = undefined;

	var userAgent = navigator.userAgent;
	if (userAgent && gUserAgent !== userAgent) gUserAgent = userAgent;
	else userAgent = undefined;

	var url = '/cgi-bin/process.pl';
	var params = 
		'token=' + encodeURIComponent(gToken) +
		'&session=' + encodeURIComponent(gSession) +
		'&action=' + encodeURIComponent(action) +
		'&data=' + encodeURIComponent(data);
	if (pos) params += 
		'&pos=' + encodeURIComponent(pos);
	if (target) params += 
		'&target=' + encodeURIComponent(target);
	if (referrer) params += 
		'&referrer=' + encodeURIComponent(referrer);
	if (userAgent) params += 
		'&userAgent=' + encodeURIComponent(userAgent);

//	console.log(decodeURIComponent(params));

	var xhttp = new XMLHttpRequest();
	xhttp.open('POST', url, true);
	xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	xhttp.send(params);
}

function GetElementText(elem)
{
	var result = '';
	var tag = elem.tagName.toLowerCase();
	result += 'Tag=' + tag.toUpperCase();
	if (elem.id) result += '; ID=' + elem.id;
	if (elem.name) result += '; Name=' + elem.name;
	if (elem.value) result += '; Value=' + GetTextExcerpt(elem.value);

	var txt = GetTextExcerpt(elem.innerText || '');
	if (tag === 'a')
	{
		if (!txt) txt = elem.getAttribute('title');
		if (txt) result += '; Txt=' + txt;
		result += '; Lnk=' + elem.getAttribute('href');
	}
	else if (tag === 'img')
	{
		txt = elem.getAttribute('alt') || elem.getAttribute('title');
		if (txt) result += '; Txt=' + txt;
		result += '; Src=' + elem.getAttribute('src');
	}
	else if (tag === 'svg' || tag === 'path')
	{
		if (tag === 'path') elem = elem.parentElement;
		var elemsDesc = elem.getElementsByTagName('desc');
		if (elemsDesc) txt = elemsDesc[0]?.textContent;
		if (txt) result += '; Txt=' + txt;
	}
	else
	{
		if (txt) result += '; Txt=' + txt;
	}
	return result;
}

function IsElementVisible(elem)
{
//	var styleDisplay = window.getComputedStyle(elem).display;
//	return (!styleDisplay || styleDisplay !== 'none');

	while (elem)
	{
		if (elem.style.display === 'none')
			return false;
		elem = elem.parentElement;
	}
	return true;
}

function GetPos()
{
	var res = 'Lng=' + navigator.language;
	res += '; Win=' + window.innerWidth + 'x' + window.innerHeight;
	var h = document.documentElement.scrollHeight - window.innerHeight;
	var pos = (h > 0) ? Math.floor(100 * document.documentElement.scrollTop / h) : 0;
	res += '; Pos=' + pos + '%';
	var txt = GetPosText();
	if (txt) res += '; ' + txt;
	return res;
}

function GetPosText()
{
	var elems = document.getElementsByTagName('*');
	for (var i = 0; i < elems.length; i++)
	{
		var elem = elems[i];
		var tag = elem.tagName.toLowerCase();
		if (tag === 'p' || tag === 'h3' || tag === 'img')
		{
			var rect = elem.getBoundingClientRect();
			if (rect.top >= 0 && IsElementVisible(elem))
			{
				return GetElementText(elem);
			}
		}
	}
	return '';
}

function GetRandomString()
{
	return Math.floor(Math.random() * 1000000000000000).toString(16).padStart(13, '0');
}

function GetTextExcerpt(txt)
{
	txt = txt.replace(/[\n]+/g, ' ');
	if (txt.length > 35) txt = txt.substring(0, 30) + '[...]';
	return txt;
}

function InitToken()
{
	gToken = localStorage.getItem('token');
	if (!gToken)
	{
		gToken = GetRandomString();
		localStorage.setItem('token', gToken);
	}
}

function InitSession()
{
	gSession = GetRandomString();
}

function InitEvents()
{
	document.addEventListener('scroll', OnScroll);
	window.addEventListener('resize', OnInput);
	window.addEventListener('mousemove', OnInput);
	window.addEventListener('mousedown', OnClick);
	window.addEventListener('wheel', OnInput);
	window.addEventListener('beforeunload', OnUnload);
	document.addEventListener('visibilitychange', OnVisibilityChange);

	var elems = document.getElementsByTagName('a');
	for (var i = 0; i < elems.length; i++)
	{
		var elem = elems[i];
		elem.setAttribute('onclick', 'OnCallLink(this);');
	}

	elems = document.getElementsByTagName('input');
	for (var i = 0; i < elems.length; i++)
	{
		var elem = elems[i];
		if (elem.type !== 'text' && elem.type !== 'password') continue;
		elem.setAttribute('onfocus', 'OnFocus(this);');
		elem.setAttribute('onblur', 'OnBlur(this);');
	}

	elems = document.getElementsByTagName('textarea');
	for (var i = 0; i < elems.length; i++)
	{
		var elem = elems[i];
		elem.setAttribute('onfocus', 'OnFocus(this);');
		elem.setAttribute('onblur', 'OnBlur(this);');
	}
}

var g_timeoutScroll;
var g_scrollPos = 0;

function OnScroll()
{
	OnInput();
	clearTimeout(g_timeoutScroll);
	g_timeoutScroll = setTimeout(OnScrollStop, 1000);
}

function OnScrollStop()
{
	var scrollPos = document.documentElement.scrollTop;
	var scrollDir = (scrollPos > g_scrollPos) ? 1 : (scrollPos < g_scrollPos) ? -1 : 0;
	g_scrollPos = scrollPos;
	Process('Scroll', (scrollDir > 0) ? 'down' : (scrollDir < 0) ? 'up' : '');
}

function OnClick(evt)
{
	OnInput();
	var elem = evt.target;
	if (!elem.parentElement) return;
	Process('Click', GetElementText(elem));
}

var g_timeoutIdle;
var g_bIdle = false;

function OnInput()
{
	clearTimeout(g_timeoutIdle);
	g_timeoutIdle = setTimeout(OnIdle, 60000);

	if (g_bIdle)
		Process('User', 'active');
	g_bIdle = false;
}

function OnIdle()
{
	g_bIdle = true;
	Process('User', 'inactive');
}

function OnLoad()
{
	Process('Page', 'loaded');
}

function OnUnload()
{
	Process('Page', 'unloaded');
	return undefined;
}

function OnVisibilityChange()
{
	Process('Page', document.visibilityState);
}

function OnCallLink(elem)
{
	var target = elem.getAttribute('href');
	Process('Open Link', target);
}

function OnFocus(elem)
{
	OnInput();
	Process('Enter', GetElementText(elem));
}

function OnBlur(elem)
{
	OnInput();
	Process('Leave', GetElementText(elem));
}

function InitDefault()
{
	InitCSS();
	InitLinks();
	InitFooter();
	InitTableOfContents();
	InitToken();
	InitSession();
	InitEvents();
	OnLoad();
	g_scrollPos = document.documentElement.scrollTop;
}

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