$(document).ready(function(){
	prepareTooltips();
	postRefresh();
});

$( document ).ajaxSuccess(function( event, xhr, settings ) {
	prepareTooltips();
	postRefresh();
});

function postRefresh() {
	console.log('postRefresh');

	// выделить ветки с моим участием
	$a = $('a.mylast');
	$a.closest('tr').css({"background":"#bdecb6"});

	// это ветка
	if (typeof JS_TOPIC_ID !== 'undefined') {
		// подсветить сообщения автора ветки
		$tr0 = $('tr.message-row[data-key="' + JS_TOPIC_ID + '#0"]');
		ts = $tr0.find("a.message-user").data("user-id");
		$a = $('a.message-user[data-user-id="' + ts + '"]');
		$a.closest('td').css({"background":"#bdecb6"}); // цвет
		
		// подсветить свои сообщения
		$a = $('a.message-user[data-user-id="'+JS_ENTERED_USER_ID +'"]');
		$a.closest('td').css({"background":"#f2e8c9"}); // цвет
		
		// скрыть все сообщения указанных пользователей (игнор-лист)
		hideNames = ["Масянька"]; // имена пользователей
		for (var k in hideNames) {
			$a = $('a.message-user[data-user-name="' + hideNames[k] + '"]');
			$a.closest('tr').css({"display":"none"});
		};
		
		// по умолчанию включить оформление нового сообщения
		$("#decor").prop("checked",true);
		$('div.decor-panel').show();
   };
   
};

function prepareTooltips(){
	
	console.log('prepareTooltips');
	
	// при клике в любом месте документа спрячем все подсказки
	$('body').click(function(){
		$('div.tooltip').hide();
	});
	
	// вывод подсказок (тултипов, в т.ч. вложенных) для ссылок на посты, например: (0)
	// работает, если вызывается из $(document).ready
	$a_outlink = $('a.outlink');
	defineTooltipsForLinks($a_outlink);

	$a_inlink = $('a.inlink');
	defineTooltipsForLinks($a_inlink);
		
}

function defineTooltipsForLinks($a_xlink){
	
	$a_xlink.css({"background":"#ffeeee"}); // сигнализирует о работе скрипта
	
	$a_xlink.hover(function(){
		
		// получим содержимое подсказки по ссылке
		linkedPostId = $(this).attr('href').slice(1);
		$linkedPost = $('#m' + linkedPostId);
		
		linkedPostHTML = $linkedPost.html();
		linkedPostAuthor = $linkedPost.closest('tr').find('a.message-user').attr('data-user-name');
		linkedPostHeader = `#${linkedPostId} - ${linkedPostAuthor}`;
		
		// получим id элемента подсказки
		if (this.className == 'outlink')
			thisPostId = this.closest('div').id;
		else // inlink
			thisPostId = this.closest('td').id.replace('inLinks', 'm');
		tooltipId = `ttp_${thisPostId}_${linkedPostId}`;
		
		
		// проверим, существует ли элемент подсказки, если нет - создадим 
		tooltipElement = $('#' + tooltipId);
		if (!tooltipElement.length) { // элемент не найден по id, создадим
			//		окно
			//			position:absolute - абсолютные координаты
			//			border - рамка
			//			margin - отступ внешний
			//			padding - отступ внутренний (поля текста)
			//			box-sizing: border-box - внутренний отступ НЕ увеличивает ширину
			newDivHTML = `<div id="${tooltipId}" class="tooltip" 
					style="position:absolute; 	
									background:#eeeeee; 
									border: 1px solid;	
									margin: 10px;
									padding-left: 5px;
									padding-right: 5px;
									padding-top: 0;
									padding-bottom: 5px;
									box-sizing: border-box; 	
									width:800px;">
						<span class='tooltipHeader' 
							style="font-size: 70%;
										color: #555555;
										padding: 0">
							${linkedPostHeader}
						</span>
						<br>
					${linkedPostHTML}
				</div>`;
			$tooltipElement = $(newDivHTML);
		
			// расположим по месту текущей ссылки
			thisOffset = $(this).offset();
			if (this.className == 'outlink'){
				leftPos = thisOffset.left;
				topPos = thisOffset.top;
			}
			else { // inlink
				leftPos = thisOffset.left - $tooltipElement.width() - 20;
				topPos = thisOffset.top;
			};
			
			$tooltipElement.css({
				'left': leftPos + 'px', 
				'top': topPos + 'px'
				});
			//console.log($tooltipElement); // отладка
			
			// добавим события
			$tooltipElement.click(function(){
				$(this).hide();
			});
			
			$tooltipElement.mouseleave(function(){
				$(this).hide();
			});
			
			// добавим готовый элемент в документ
			$('body').append($tooltipElement);
			
			// для подчиненных ссылок на посты - вызовем этот обработчик
			$children_a_outlinks = $('#' + tooltipId).find('a.outlink');
			defineTooltipsForLinks($children_a_outlinks);
		}
		else { // элемент уже есть, покажем
			tooltipElement.show();
		};
		
	},
	function(){
		
	});
}

// добавить вспомогательные кнопки Вверх, Список тем
$('#buttonBookmarkTopic').before('<a href="#0" class="sendbutton" style="margin-right:15px; margin-left:20px; background-color:#EEE; border: 1px solid #666; height:30px; font-size:78%;">Вверх</a>');
$('#buttonBookmarkTopic').before('<a href="/" class="sendbutton" style="margin-right:30px; margin-left:5px; background-color:#EEE; border: 1px solid #666; height:30px; font-size:78%;">Список тем</a>');

// разместить вспомогательные кнопки слева, "Совет дня" - справа
$('#topicAssistButtons').css({
	'float': 'left',
	'margin-left': '10px'
});
$('div.advice').css({
	'float': 'right',
	'margin-left': '10px',
	'margin-right': '10px',
	'border-left': '1px solid #8f8116',
	'border-right': '0',
	'border-radius': '10px 0 0 10px'
});
// отделим плавающие элементы от поля ввода сообщения
$('form#replyForm').before('<div style="clear:both"></div>');

(async () => {
    const userDatesStr = localStorage.getItem('userDates')
    const cachedUserDates = userDatesStr === null ? {} : JSON.parse(userDatesStr)
    const cachedUserIds = Object.keys(cachedUserDates)

    const userNodes = Array.from(document.getElementsByClassName('message-user'))
    const allUserIds = userNodes.map(userNode => userNode.dataset.userId)
    const uniqueUserIds = allUserIds.filter((val, i, arr) => arr.indexOf(val) === i)

    const uncachedUserIds = uniqueUserIds.filter(x => !cachedUserIds.includes(x))

    const userDatesPromises = uncachedUserIds.map(async userId => {
        const responseText = await (await fetch(`/user/${userId}`)).text()
        const doc = new DOMParser().parseFromString(responseText, 'text/html')
        const regString = doc.querySelector('.registered .right').innerText.trim().substring(0, 10)
        const dateParts = regString.split('.')
        const regDate = new Date(+dateParts[2], +dateParts[1] - 1, +dateParts[0])

        return [ userId, (Date.now() - regDate) / 31536000000 ]
    })

    const additionalUserDates = Object.fromEntries(await Promise.all(userDatesPromises))
    const mergedUserDates = { ...additionalUserDates, ...cachedUserDates }
    localStorage.setItem('userDates', JSON.stringify(mergedUserDates))

    userNodes.forEach(userNode => {
        const userId = userNode.dataset.userId
        const years = mergedUserDates[userId]
        const bigStarsCount = Math.floor(years / 5)
        const smallStarsCount = Math.floor(years % 5)
        const newUserLine = document.createElement('div')
        newUserLine.className = 'user-line'
        newUserLine.innerHTML = '★'.repeat(bigStarsCount) + '<span style="font-size: small;">' + '★'.repeat(smallStarsCount) + '</span>'
        newUserLine.style.width = '250px'
        newUserLine.style.backgroundImage = 'unset'
        userNode.nextElementSibling.replaceWith(newUserLine)
    }, undefined)
})()

(async () => {
    const storageName = 'usersData'
    const storageStr = localStorage.getItem(storageName)
    const storageData = storageStr === null ? { v: 1, data: {} } : JSON.parse(storageStr)
    const cachedUsersData = storageData.data
    const cachedUserIds = Object.keys(cachedUsersData)

    const userNodes = Array.from(document.getElementsByClassName('message-user'))
    const allUserIds = userNodes.map(userNode => userNode.dataset.userId)
    const uniqueUserIds = allUserIds.filter((val, i, arr) => arr.indexOf(val) === i)

    const uncachedUserIds = uniqueUserIds.filter(x => !cachedUserIds.includes(x))

    const userPromises = uncachedUserIds.map(async userId => {
        const responseText = await (await fetch(`/user/${userId}`)).text()
        const doc = new DOMParser().parseFromString(responseText, 'text/html')

        const regString = doc.querySelector('.registered .right').innerText.trim().substring(0, 10)
        const dateParts = regString.split('.')
        const regDate = new Date(+dateParts[2], +dateParts[1] - 1, +dateParts[0])

        const statusElem = doc.getElementById(`statusForUser${userId}`)
        const status = statusElem.getElementsByTagName('span').item(0)?.className ?? 'normal'

        const roleElem = doc.getElementsByClassName('role').item(0)
        const role = roleElem.getElementsByClassName('right').item(0).innerText.trim()

        return [ userId, { years: (Date.now() - regDate) / 31536000000, status, role } ]
    })

    const additionalUsersData = Object.fromEntries(await Promise.all(userPromises))
    const mergedUsersData = { ...additionalUsersData, ...cachedUsersData }
    localStorage.setItem(storageName, JSON.stringify({ v: 1, data: mergedUsersData }))

    userNodes.forEach(userNode => {
        const userId = userNode.dataset.userId
        const userData = mergedUsersData[userId]
        const { role } = userData
        const userRoleElem = userNode.parentElement.getElementsByClassName('user-role').item(0)
        userRoleElem.innerHTML = role
    })
})()

const getUsersData = async () => {
    const v = 2
    const defaultData = {}
    const storageName = 'usersData'
    const storageStr = localStorage.getItem(storageName)
    const storageData = storageStr === null ? { v, data: defaultData } : JSON.parse(storageStr)
    const isNeedUpdate = storageData.v < v
    const cachedUsersData = isNeedUpdate ? defaultData : storageData.data
    const cachedUserIds = Object.keys(cachedUsersData)

    const userNodes = Array.from(document.getElementsByClassName('message-user'))
    const allUserIds = userNodes.map(userNode => userNode.dataset.userId)
    const uniqueUserIds = allUserIds.filter((val, i, arr) => arr.indexOf(val) === i)

    const uncachedUserIds = uniqueUserIds.filter(x => !cachedUserIds.includes(x))

    const userPromises = uncachedUserIds.map(async userId => {
        const responseText = await (await fetch(`/user/${userId}`)).text()
        const doc = new DOMParser().parseFromString(responseText, 'text/html')

        const regString = doc.querySelector('.registered .right').innerText.trim().substring(0, 10)
        const dateParts = regString.split('.')
        const regDate = new Date(+dateParts[2], +dateParts[1] - 1, +dateParts[0])

        const statusElem = doc.getElementById(`statusForUser${userId}`)
        const status = statusElem.getElementsByTagName('span').item(0)?.className ?? ''

        const roleElem = doc.getElementsByClassName('role').item(0)
        const role = roleElem.getElementsByClassName('right').item(0).innerText.trim()

        return [ userId, { years: (Date.now() - regDate) / 31536000000, status, role } ]
    })

    const additionalUsersData = Object.fromEntries(await Promise.all(userPromises))
    const mergedUsersData = { ...additionalUsersData, ...cachedUsersData }
    localStorage.setItem(storageName, JSON.stringify({ v, data: mergedUsersData }))

    return { usersData: mergedUsersData, userNodes }
}

(async () => {
    const { usersData, userNodes } = await getUsersData()

    userNodes.forEach(userNode => {
        const userId = userNode.dataset.userId
        const userData = usersData[userId]
        const { role, status, years } = userData

        //  Bans
        if (status !== '') userNode.classList.add(status)

        //  Roles
        const userRoleElem = userNode.parentElement.getElementsByClassName('user-role').item(0)
        userRoleElem.innerHTML = role

        //  Stars
        const bigStarsCount = Math.floor(years / 5)
        const smallStarsCount = Math.floor(years % 5)
        const dotsCount = bigStarsCount + smallStarsCount === 0 ? Math.floor(years % 1 * 12) : 0

        const newUserLine = document.createElement('div')
        newUserLine.className = 'user-line'
        newUserLine.innerHTML = '★'.repeat(bigStarsCount) + '<span style="font-size: small;">' + '★'.repeat(smallStarsCount) + '•'.repeat(dotsCount) + '</span>'
        newUserLine.style.backgroundImage = 'unset'
        newUserLine.style.maxHeight = 'unset'
        newUserLine.style.height = '9px'
        newUserLine.style.lineHeight = '9px'
        userNode.nextElementSibling.replaceWith(newUserLine)
    })
})()

<script>
const usersDataGlobal = [
	{
		id: 1,
		role: 'администратор',
		status: '',
		registered: '03.11.2003'
	},
	{
		id: 37324,
		role: 'здравомыслящий',
		status: 'ban',
		registered: '26.03.2008'
	},
.....................
]
</script>

document.onpaste = async event => {
    const item = Array.from(event.clipboardData.items).filter(item => item.kind === 'file')[0]
    if (item === undefined) return
    // document.querySelector('form .filebar').dataset.filesCount = 1   //  отключить диалог выбора файла
    showFileBar(document.getElementById('buttonShowFilebar'))
    const fakeInput = document.createElement('span')
    fakeInput.files = [ item.getAsFile() ]

    const slot = document.querySelector('.slot.empty') ?? await new Promise(resolve => {
        const observer = new MutationObserver(record => {
            observer.disconnect()
            resolve(record[0].addedNodes[0])
        })

        const fileBar = document.querySelector('form .filebar')
        observer.observe(fileBar, { childList: true, subtree: true })
    })

    slot.append(fakeInput)
    fileSelected(fakeInput)
}

Array.from(document.querySelectorAll('td.updated')).forEach(td => {
    const [ moscowUpdatedTime, ...userParts ] = td.innerText.trim().split(' ')
    const user = userParts.join(' ')
    const [ moscowDate ] = new Date().toLocaleString('en-US', { timeZone: 'Europe/Moscow' }).split(' ')
    const universalUpdatedTime = new Date(`${moscowDate}, ${moscowUpdatedTime} GMT+0300`)
    if (universalUpdatedTime.toString() === 'Invalid Date')
        return
    const deltaSecondsTotal = (Date.now() - universalUpdatedTime) / 1000
    const deltaHours = Math.floor(deltaSecondsTotal / 3600)
    const deltaMinutes = String(Math.floor(deltaSecondsTotal % 3600 / 60)).padStart(2, '0')
    td.innerText = `-${deltaHours}:${deltaMinutes} ${user}`
})