const updateAuthenticationButtons = () => {
	const loginButton = getElement('login-button');
	const logoutButton = getElement('logout-button');
	if (Login.isLoggedIn()) {
		loginButton.style.display = 'none';
		logoutButton.style.display = 'inline-block';
	} else {
		loginButton.style.display = 'inline-block';
		logoutButton.style.display = 'none';
	}
};

const execTranslation = async () => {
	const sourceText = getElement('source-text').value;
	const translateOptions = getElement('direction').value;
	if (!sourceText) {
		return;
	}
	const { translation, error } = await Translate.transmit(sourceText, translateOptions, Login.getCredentials());
	const destination = getElement('destination-text');
	if (error) {
		destination.innerHTML = `<div class="translation-error">${error}</div>`;
	} else {
		destination.innerHTML = translation;
	}
};

const showExample = () => {
	const exampleArea = getElement('example-area');
	exampleArea.style.display = 'flex';
}

const closeExampleArea = () => {
	const exampleArea = getElement('example-area');
	exampleArea.style.display = 'none';
}

function objectCoords(htmlObject)
{
//	if ( htmlObject.calculatedPos )
//		return htmlObject.calculatedPos;
	var left = 0;
	var top  = 0;
	var originalObject = htmlObject;

	while (htmlObject.offsetParent)
	{
		left += htmlObject.offsetLeft;
		top += htmlObject.offsetTop;
		htmlObject = htmlObject.offsetParent;
	}
	left += htmlObject.offsetLeft;
	top  += htmlObject.offsetTop;

	originalObject.calculatedPos = {x:left, y:top};
	return originalObject.calculatedPos;
}

function getNewRow(newText, obj, menu, title)
{
	var row = document.createElement("tr");
	var cell = document.createElement("td");
	cell.onclick = (function(newText, obj, menu)
	{
		return function()
		{
			obj.innerHTML = newText;
			menu.style.display = "none";
		}
	})(newText, obj, menu);
	cell.onmouseover = (function(cell)
	{
		return function()
		{
			cell.className = "multipleChoiceHover";
		}
	})(cell);
	cell.onmouseout = (function(cell)
	{
		return function()
		{
			cell.className = "multipleChoice";
		}
	})(cell);
	cell.appendChild(document.createTextNode(title));
	row.appendChild(cell);
	return row;
}

function showMultipleChoiceMenu(arr, obj)
{
	var i;
	var menu = document.getElementById("multipleChoiceMenu");
	var table = document.createElement("table");
	table.className = "multipleChoiceMenu";
	table.cellPadding = 0;
	table.cellSpacing = 0;
	var title = "";
	for (i = 0; i < arr.length; i++) {
		if (arr[i].indexOf('#') >= 0) {
			title = arr[i].substr(0, arr[i].indexOf('#'));
			arr[i] = arr[i].replace('#', ' (') + ')';
		} else
			title = arr[i];
		var newRow = getNewRow(title, obj, menu, arr[i]);
		table.appendChild(newRow);
	}
	var newRow;
	if (arr[0].indexOf(' (') >= 0)
		newRow = getNewRow(arr[0].substr(0, arr[0].indexOf(' (')), obj, menu, "<prvobitni izbor>");
	else
		newRow = getNewRow(arr[0], obj, menu, "<prvobitni izbor>");
	table.appendChild(newRow);

	var coordinates = objectCoords(obj);
	coordinates.y -= document.getElementById("destination-text").scrollTop;
	coordinates.y += 14;
//	alert(coordinates.x + ", " + coordinates.y);
	menu.innerHTML = "";
/*	  for ( i = menu.childNodes.length; i >= 0; i--)
 *		  menu.removeChild(menu.childNodes[i]); //ili menu.innerHTML = "...";*/
	menu.appendChild(table);
	menu.style.display = "block";

	if (coordinates.x + menu.clientWidth > screen.width)

	coordinates.x -= menu.clientWidth;
	if (coordinates.y + obj.clientHeight + menu.clientHeight > screen.height)
	coordinates.y -= menu.clientHeight;

	menu.style.top = (coordinates.y + obj.clientHeight) + "px";
	menu.style.left = coordinates.x + "px";
}