//############### RUN !!! ##########################
												//##
window.onload = (e) => {						//##
		init(e);								//##
}												//##
												//##
//##################################################

window.onkeydown = (e) => {
	if(e.repeat) return;
	if(e.key === 'Control'){
		keyControlPressed = true;
		collapseTitle = collapseAll;
		expandTitle = expandAll;
		if(overBtnItem)
			overBtnItem.textContent = initBtnChk[overBtnItem.parentElement.id]?"+ " + expandTitle:"- " + collapseTitle;
	}
	document.activeElement.blur();
}
window.onkeyup = (e) => {
	if(e.key === 'Control'){
		keyControlPressed = false;
		collapseTitle = collapse;
		expandTitle = expand;
		if(overBtnItem)
			overBtnItem.textContent = initBtnChk[overBtnItem.parentElement.id]?"+ " + expandTitle:"- " + collapseTitle;
	}
	document.activeElement.blur();
}

/********** VARIABLES ***********/
var sectorItems;
var menuItems;
var curItem = undefined;
var menuButtonChecked;
var afterInit = false;
var	menuButton, frameTop, fl, fc, fr, menuHead, menuList, welcome, welShow, coockieOk, whats, telega;
var callback;
var options;
var observer;
var buttonItems;
var overBtnItem = null;
var collapse = "Скрыть", expand = "Показать", collapseAll = "Скрыть всё", expandAll = "Показать всё";
var collapseTitle = collapse, expandTitle = expand;
var keyControlPressed = false;
var timeout = 1000; // work 3000
var sessionSaveThrottler;
var sessionSaveResult = null;
var sessionStatus;
var scrollW, minStickyWidth, frSticked = true, frPortTop = 31;
var scrRates=[16,15,14,11,10]; // px, root font-size for [PC,PORT,LAND]
var curScrRate = scrRates[0]; //for PC default
var isTouch;
var clrMenuActivBg, clrMenuActivFont;
var codeSymTimer = null;
var clrContentOverBg;
var animation = {
		'g2y': ["#ffff00","#42f706"],
		'y2r': ["#ff0000","#ffff00"],
		'direction': ["alternate","alternate-reverse"],
	};
var aniTimer = null;
var styleObj;
/********** END VARIABLES ***********/

for (let i = 0; i < document.styleSheets.length; i++) {
	var styleSh = document.styleSheets[i];
	if (styleSh.href!=null && styleSh.href.includes('/src/cube.css')){ styleObj = styleSh;	break; }
}
const ltRule = [...styleObj.cssRules].find( (r) => r.selectorText === ".lt" );
const rootRule = [...styleObj.cssRules].find( (r) => r.selectorText === "html" );

/********** FUNCTIONS  ***********/
const init = (e) => {
	sectorItems = document.querySelectorAll('.section-title');
	menuItems = document.querySelectorAll('.menu-item');
	menuButton = document.getElementById('menu-button');
	menuButtonChecked = initBtnChk[12];
	frameTop = document.getElementById('frame-top');
	fl = document.getElementById('frame-left');
	fc = document.getElementById('frame-center');
	fr = document.getElementById('frame-right');
	menuHead = document.getElementById('menu-head');
	menuList = document.getElementById('menu-list');
	welcome = document.getElementById('welcome');
	welHide = document.getElementById('welcome-hide');
	welShow = document.getElementById('welcome-show');
	buttonItems = document.querySelectorAll('.button-label');
	sessionStatus = document.getElementById('session-status');
	cookieButton = document.getElementById('cookie-ok');
	whats = document.getElementById('whats');
	telega = document.getElementById('telega');
	rootRule.style.setProperty("--scr-land-font-size1", scrRates[1] + "px");
	rootRule.style.setProperty("--scr-land-font-size2", scrRates[2] + "px");
	rootRule.style.setProperty("--scr-port-font-size3", scrRates[3] + "px");
	rootRule.style.setProperty("--scr-port-font-size4", scrRates[4] + "px");
	clrContentOverBg = rootRule.style.getPropertyValue("--clr-content-over-bg");
	
	window.onresize = (e) => { checkBodySize(e); }
	sessionSaveThrottler = throttle(sessionSaver,timeout);
	frameTop.onscroll = eScroll;
	frameTop.onscrollend = eScrollEnd;
	welShow.onclick = () => welcomeClick(false);
	welHide.onclick = () => welcomeClick(true);
	cookieButton.onclick = () => cookieOk();
	whats.onmouseup = function() { window.open("https://chat.whatsapp.com/Ei8Cg1JHc4IA8qzn4ulhUU", "_blank")};
	telega.onmouseup = function() { window.open("https://t.me/+N6nlDq3MvT1kYzA6", "_blank")};
	
	
	buttonItems.forEach((btnItem) => {
			btnItem.onmouseover = function() { buttonMouseover(this);}
		btnItem.onmouseout = function() { buttonMouseout(this); }
		btnItem.onmouseup = function() { buttonClick(this); };
			if(initBtnChk[btnItem.parentElement.id]){
			buttonClickItem(btnItem);
			buttonMouseout(btnItem);
		}
		btnItem.setAttribute('tabindex', '-1');		
	});



	clrMenuActivBg = rootRule.style.getPropertyValue("--clr-menu-activ-bg");
	clrMenuActivFont = rootRule.style.getPropertyValue("--clr-menu-activ-font");
	menuItems.forEach((item) => {
		item.onmouseover = function(){menuItemHover(this, true); }
		item.onmouseout = function(){menuItemHover(this, false); }
	});
	welShow.onmouseover = welcomeShowMouseover;
	welShow.onmouseout = welcomeShowMouseout;
	welHide.onmouseover = welcomeHideMouseover;
	welHide.onmouseout = welcomeHideMouseout;
	menuButton.onmouseover = function() { menuButtonMouseover(); }
	menuButton.onmouseout = function() { menuButtonMouseout(); }
	menuButton.onmousedown = function(){ menuButtonMousedown(); }
	menuButton.onmouseup = function(){ menuButtonMouseup(); }
	
	bCode = document.getElementById('buble-code');
	codeSymbols = document.querySelectorAll('cod');
	codeSymbols.forEach((item) => {
		item.onmouseover = function(){ codeHover(this, true); }
		item.onmouseout = function(){ codeHover(this, false); }
	});
	
	function codeHover(cod, hover) {
		
		if(codeSymTimer) clearTimeout(codeSymTimer);
		if(hover){
			cod.style.color = "var(--clr-keyfr-r)";
			codeSymTimer = setTimeout(showCodeScheme, 400, event, cod);
		}
		else{ 
			cod.style.color = null;
			bCode.style.display = null;
//			showCodeScheme(cod, false);
		}
	}
	
	function showCodeScheme(e, cod){
	console.dir(e);
	console.dir(cod);	
	let parentFrame = frameTop;
		bCode.style.left = (cod.offsetLeft - 90) + "px";
		bCode.style.top = (cod.offsetTop - parentFrame.scrollTop - 105) + "px";
		bCode.style.display = 'block';
//			bg = 'url("/src/' + cod.innerText + '.png")';
//			console.dir(bg);
		bCode.style.backgroundImage = 'url("/src/' + cod.innerText + '.png")';
//			console.dir(cod.innerText);
	}
	

	callback = (entries) => {
	  entries.forEach((entry) => {
		curItem = parseInt(entry.target.parentElement.id);
		if(entry.isIntersecting) {
			if(entry.intersectionRatio > 0.5){
				setActiveMenuItem(curItem);
			}
			else if(!afterInit){
				afterInit = !afterInit;
			}
		}
		else if(afterInit){
			if(curItem)
				curItem = curItem - 1;
			setActiveMenuItem(curItem);
		}
	  });
	}

	options = {
	  root: document.querySelector('#frame-top'),
	  rootMargin: '100000px 0px -50% 0px',
	  threshold: [0,0.5,1],
	}

	observer = new IntersectionObserver(callback, options);	

	sectorItems.forEach((item) => {
		observer.observe(item);
	});
	
	if(!menuButtonChecked) menuButton.style.backgroundImage = 'url("/src/m40v.png")';	
	menuList.hidden = menuButtonChecked;
	welcome.hidden = initBtnChk[13];
	welShow.style.display = initBtnChk[13]?null:'none';
	document.getElementById('cookie').hidden = initBtnChk[14];
	document.querySelector('html').hidden = false;
	checkBodySize(e);
}/* ######### INIT() END ####### */


const setActiveMenuItem = (n) => {
	menuItems.forEach((item, index) => {
		item.classList.toggle('active', (index === n));
		if(index === n){
			menuItemHover(item, false)
		}
	});
} 

const eScroll = (e) => {
	if(frSticked) return;
	let rTop = welcome.clientHeight - frameTop.scrollTop,
		scrTop = curScrRate < scrRates[2]? frPortTop : 0;
	if(rTop > 0) {
		fr.style.top = (rTop + scrTop) + 'px';
	}
	else {
		if(fr.offsetTop!==scrTop){
			fr.style.top = scrTop + 'px';
		}
		if(menuButtonChecked && e !== undefined && e.type == 'scroll' && frameTop.scrollTop != 0){
			menuHead.style.animation = "scroll-end 0.5s 1 alternate-reverse ease-out";
			menuHead.style.borderColor = "var(--clr-3)";
		}
	}
};

const eScrollEnd = (e) => {
	menuHead.style.animation = "scroll-end 0.5s 1 alternate ease-out";
	menuHead.style.borderColor = "var(--clr-f)";
}

const checkBodySize = (e) => {
	let sW = e.currentTarget.innerWidth, 
		sH = e.currentTarget.innerHeight,
		outW = rootRule.style.getPropertyValue("--out-width");
	isTouch = getIsTouch();
	curScrRate = getCurScrRate(sW, sH);
	outW = Number(outW.slice(0,-3))*curScrRate;
	minStickyWidth = outW + fc.clientWidth + outW;
	scrollW = frameTop.offsetWidth - frameTop.clientWidth;
	fr.style.top = null;
	if(sW - scrollW >= minStickyWidth){
		if(!frSticked){
			frSticked = true;
			fr.style.right = null;
		}
	}
	else{
		if(frSticked){
			frSticked = false;
		}
		fr.style.right = scrollW + "px";
		eScroll(e);		
	}
}

function getCurScrRate(w,h){
	let rate = scrRates[0];

	if(isTouch){
		if(w < h)
			rate = w < 380 ? scrRates[4]:scrRates[3];
		else
			rate = w < 750 ? scrRates[2]:scrRates[1];
	}
	return rate;
}

//################## SECTION BUTTON ##############

function buttonClick(btnItem) {
	if(keyControlPressed){
		buttonClickAll(btnItem);
	}
	else {
		buttonClickItem(btnItem);
	}
	evryClick();
}

function buttonClickItem(btnItem) {
	var sId = btnItem.parentElement.id;
	var element = btnItem.parentElement.parentElement.children[(sId === '2')?3:1];
	element.hidden = !element.hidden;
	initBtnChk[sId] = Number(element.hidden);
	btnItem.textContent = initBtnChk[sId]?"+ " + expandTitle:"- " + collapseTitle;
	if(sId === '1'){
		ltRule.style.setProperty("display", initBtnChk[sId]?"none":"block");
	}
	else if(sId === '2'){
		element.style.display = initBtnChk[sId]?"none":null;
	}
}

function buttonClickAll(btnItem) {
	var sId = btnItem.parentElement.id;
	var initSid = initBtnChk[sId];
	buttonItems.forEach((Item) => {
		if(initBtnChk[Item.parentElement.id] === initSid){
			buttonClickItem(Item);
			buttonMouseout(Item);
		}
	});
}

function buttonMouseover(btnItem) { // highLightArea
	var sId = btnItem.parentElement.id;
	var element = btnItem.parentElement.parentElement.children[(sId === '2')?3:1];
	overBtnItem = btnItem;
	element.style.backgroundColor = clrContentOverBg;
	btnItem.textContent = initBtnChk[sId]?"+ " + expandTitle:"- " + collapseTitle;
	if(sId === '1')
		ltRule.style.setProperty("background-color", clrContentOverBg);
}
function buttonMouseout(btnItem) { // hideArea
	var sId = btnItem.parentElement.id;
	var element = btnItem.parentElement.parentElement.children[(sId === '2')?3:1];
	overBtnItem = null;
	element.style.backgroundColor = null;
	btnItem.textContent = initBtnChk[sId]?"+":"-";
	if(sId === '1')
		ltRule.style.setProperty("background-color", null);
}


//################## WELCOME ##############

function welcomeClick(hide) {
	welcome.hidden = hide;
	welShow.style.display = hide?null:'none';
	initBtnChk[13] = Number(hide);
	if(hide){
		eScroll();
	}
	else{
		if(!frameTop.scrollTop && !frSticked)
			eScroll();
		else
			frameTop.scrollTo({top: 0, left: 0, behavior: 'smooth'});
	}
	evryClick();
}

function welcomeShowMouseover() {
	welShow.innerText = "Открыть приветствие ?";
}
function welcomeShowMouseout() {
	welShow.innerText = '?';
}
function welcomeHideMouseover() {
	this.innerText = 'Закрыть приветствие X';
}
function welcomeHideMouseout() {
	welHide.innerText = 'X';
}

//################## MENU ##############

function menuButtonMouseover() {
	menuList.hidden = false;
	if (frSticked)
		menuButton.style.backgroundImage = !menuButtonChecked?'url("/src/m40hv.gif")':'url("/src/m40h.gif")';
	else
		menuButton.style.backgroundImage = !menuButtonChecked?'url("/src/m40hv-r.gif")':'url("/src/m40h-r.gif")';
}
function menuButtonMouseout() {
	menuList.hidden = menuButtonChecked;
	menuButton.style.backgroundImage = !menuButtonChecked?'url("/src/m40v.png")':null;
}
function menuButtonMousedown() {
	menuButton.style.backgroundImage = 'url("/src/m40ha.png")';
}
function menuButtonMouseup() {
	menuButtonChecked = !menuButtonChecked;
	initBtnChk[12] = Number(menuButtonChecked);
	menuButtonMouseout()
	evryClick();
}

function menuItemHover(item, over) {
		item.children[0].style.color  = over? clrMenuActivFont : null;
		item.children[0].style.backgroundColor = over? clrMenuActivBg : null;
}
function cookieOk() {
	cookie.hidden = true;
	initBtnChk[14] = 1;
	evryClick();
}

//################## ALL BUTTON ACTION HANDLER ##############

function evryClick(){
	if(sessionSaveResult === null || sessionSaveResult) colorChange('g2y', 0);
	else colorChange('y2r', 1);
	sessionSaveThrottler();
}
function throttle(sessionSaver, timeout) {
  throTimer = null;
  return function perform() {
	if(throTimer) clearTimeout(throTimer);
    throTimer = setTimeout(() => sessionSaver(), timeout)
  }
}

//################## SESSION ##############

async function sessionSaver() {
	try {
		showLoader(); 
		const response = await fetch(selfLocation + "/ajax/session-write", {
			method: "POST",
			headers: {
				"Content-Type": "application/x-www-form-urlencoded",
				"X-Requested-With": "XMLHttpRequest"
			},
			body: "initBtnChk=" + initBtnChk,
			keepalive: true,
		});
		sessionSaveResult = await response.ok;	
	  } finally {
		  hideLoader();
	  }
}

function showLoader() {
	sessionStatus.style.animationDuration =  "100ms";
	sessionStatus.style.animationIterationCount = "infinite";
	sessionStatus.style.animationDirection = "normal ";
	sessionStatus.style.animationTimingFunction = "ease-in";
	sessionStatus.style.animationName = "save";	
}

function hideLoader(){
	if(throTimer){ clearTimeout(throTimer); throTimer = null; }
	if(sessionSaveResult)
		colorChange('g2y', 1);
	else
		colorChange('y2r', 0);
}

function colorChange(aniName, aniDirect){
	if(throTimer) return;
	sessionStatus.style.animationDuration = "300ms";
	sessionStatus.style.animationIterationCount = 1;
	sessionStatus.style.animationTimingFunction = "ease-out";
	sessionStatus.style.animationDirection = animation.direction[aniDirect]; // "alternate-reverse";
	sessionStatus.style.animationName = aniName; //'g2y	
	aniTimer = setTimeout( finish, 200, aniName, aniDirect);
}

function finish(aniName, aniDirect){
	sessionStatus.style.backgroundColor = animation[aniName][aniDirect];
	sessionStatus.style.animationName = "none";
	aniTimer = null;
}