const DIRS = ['x', 'y'], TRF = {}, O = {}, 
			LIM = 8, PREC = 3, 
			_SWIPE = document.getElementById('swipe'), 
			_BOXO = document.getElementById('box-origin'), 
			_BOXC = document.getElementById('box-chain'), 
			_TRIG = document.getElementById('box-trigger'), 
			_RUN = document.getElementById('run'), 
			_S = document.createElement('style'), 
			BT = .5;

let popup = null, poplock = false, limreach = false, 
		r = null, act = null, x0 = null, y0 = null, running = false;

function fitPopup(_el) {
	let cr = _el.getBoundingClientRect(), 
			dx = r.right - cr.right;
	
	if(dx < 0) _el.style.setProperty('--x', `${Math.round(dx) - 1}px`)
};

function closePopup() {
		/*
	 * close the currently open popup
	 * there can be only one, stored in 
	 * global popup variable
	 */
	popup.previousElementSibling
		.setAttribute('aria-expanded', false);
	popup = null;
};

function size() {	
	r = document.body.getBoundingClientRect();
	
	if(popup) closePopup();
};

function isIn(_el, cls) {
	/*
	 * ckecks if _el or any of its ancestors
	 * all the way up to the body have the 
	 * cls class
	 */
	
	if(_el === document.body) return false;
	return (_el.classList.contains(cls) ? 
		true : isIn(_el.parentNode, cls))
};

function getAsc(_el, cls) {
	/*
	 * get an ancestor of _el that has class cls
	 */
	if(_el === document.body) return null;
	
	return _el.classList.contains(cls) ? 
		_el : getAsc(_el.parentNode, cls)
};

function updateIndices(i, dir = 1) {
	let n = +TRF._last.dataset.i + dir;
	
	for(let j = i; j <= n; j++) {
		let list = [ j < n ? TRF.chain.list[j]._el : TRF._last];
		
		list.push(...Array.from(list[0].querySelectorAll('[data-j]')));
		
		list.forEach(c => {
			let attr = c.dataset.j.split(' ');
			
			attr.forEach(k => {
				let curr = c.getAttribute(k).split('-');
				
				curr[curr.length - 1] = j;
				
				c.setAttribute(k, curr.join('-'));
			});
		});
	}
	
	document.body.style.setProperty('--curr', TRF.chain.list.length);
}

function textFrom(item) {
	return `${item._fn.textContent.replace(/scale(X|Y)/gi, 'scale')}(${item._nums.map((c, j) => c.textContent + (item._unis.length ? item._unis[j].textContent : '')).join(', ')})`;
};

function prepAni() {
	let n = TRF.chain.text.length + 4, 
			ani = [], u = 100/n;
	
	for(var i = 0; i < 2; i++) {
		let dir = ' var(--dir)', 
				kd = `${2*u}% { transform: var(--pos)${dir} }`, 
				rev = ' var(--rev)', 
				kr = `${(n - 2 + i)*u}%, 100% { transform: var(--pos)${dir} ${TRF.chain.text.join(' ')}${rev}`;
		
		ani[i] = `@keyframes ani${i} {
	0%, ${(2 - i)*u}% { transform: var(--pos) }
	${i ? kd : ''}
	${TRF.chain.text.map((c, j, a) => {
		return `${(3 + j)*u}%${!i && j === TRF.chain.text.length - 1 ? ', 100%': ''} { transform: var(--pos)${i ? dir : ''} ${a.slice(0, j + 1).join(' ')} }`
	}).join('\n')}
	${i ? kr : ''}
}`
	}
		
	_S.textContent = ani.join('');
};

function updateTrf() {
	document.body.style.setProperty('--transform', TRF.chain.text.join(' '));
	if(TRF.chain.text.length) prepAni();
	else _S.textContent = ''
};

function addTrf(data, nxt) {
	let item = {
				_el: TRF.temp._item.cloneNode(true), 
				name: data.name, 
				iso: false
			}, 
			fblock = TRF.temp[`_${data.name}`].cloneNode(true), 
			i = +nxt.dataset.i;
	
	item._el.appendChild(TRF.temp._rem.cloneNode(true));
	item._el.appendChild(fblock);
		
	item._fn = item._el.querySelector('.token--func');
	item._nums = Array.from(item._el.querySelectorAll('.token--num'));
	item._unis = Array.from(item._el.querySelectorAll('.token--unit'));
	
	TRF._adds.splice(i, 0, item._el.querySelector('.add'));
	
	TRF.chain.list.splice(i, 0, item);
	TRF.chain.text.splice(i, 0, textFrom(item));
	updateTrf();
	updateIndices(i);
	TRF._wrap.insertBefore(item._el, nxt);
	
	if(TRF.chain.list.length && _RUN.disabled) _RUN.disabled = false;
};

function remTrf(i) {
	TRF._wrap.removeChild(TRF.chain.list[i]._el);
	
	TRF._adds.splice(i, 1);
	TRF.chain.list.splice(i, 1);
	TRF.chain.text.splice(i, 1);
	updateTrf();
	updateIndices(i, -1);
	
	if(limreach) {
		TRF._adds.forEach(c => { c.removeAttribute('disabled') });
		limreach = false;
	}
	
	if(!TRF.chain.list.length && !_RUN.disabled) _RUN.disabled = true
};

function rangeUpdate(_t) {
	if(_t.type !== 'range') return;	
	
	let _pop = getAsc(_t, 'popup'), 
			_num = _pop.previousElementSibling, 
			_out = _t.nextElementSibling, 
			_arg = _num.parentNode.parentNode, 
			m = +_arg.dataset.m, 
			val = +_t.value;
	
	_pop.style.setProperty('--val', val);
	_num.textContent = _out.textContent = +(m*val).toFixed(PREC);
	
	DIRS.forEach(c => {
		if(_arg.classList.contains(`o${c}`)) {
			document.body.style.setProperty(`--o${c}`, `${val}%`);
			
			O[c]._num.forEach(k => { k.textContent = val })
			O[c]._unit.forEach(k => { k.textContent = '%' })
		}
	});
	
	if(_t.id.indexOf('-') !== -1) {
		let i = +_t.id.split('-')[1], 
				item = TRF.chain.list[i];
		
		if(item.iso) {
			let _arg2 = _arg.nextElementSibling.nextElementSibling, 
					_num2 = _arg2.querySelector('.token--num'), 
					_pop2 = _num2.nextElementSibling, 
					_in2 = _arg2.querySelector('input'), 
					_out2 = _arg2.querySelector('input');

			_pop2.style.setProperty('--val', val);
			_num2.textContent = _in2.value = _out2.value = +(m*val).toFixed(PREC);
		}
		
		TRF.chain.text[i] = textFrom(item);
		updateTrf();
	}
};

function getE(ev) {
	/* to unify click and touch */
	return ev.touches ? ev.touches[0] : ev;
};

function lock(e, aname) {
	/*
	 * lock in some values at the start of an action
	 * like swipe, drag
	 */
	
	act = aname;
	x0 = e.clientX;
	y0 = e.clientY;
	
	if(aname === 'swipe') _SWIPE.classList.remove('smooth')
};

function preswipe(e) {
	/*
	 * move panels a bit while the cursor is still moving and
	 * mouseup/ touchend haven't been triggered yet
	 */
	
	let x = e.clientX, 
			dx = x - x0, 
			s = 1*(dx > 0), 
			f = +(dx/r.width).toFixed(2);
	
	if((dx > 0 && _SWIPE.classList.contains('left')) || 
		 (dx < 0 && !_SWIPE.classList.contains('left'))) {
		
		running = false;
		_RUN.textContent = 'Run';
		document.body.style.setProperty('--dt', '0s');
		document.body.classList.remove('running');
		
		_SWIPE.style.setProperty('--tx', `${(f - s)*50}%`);
	}
};

function swipe() {
	/*
	 * fully move from one code option panel to the other
	 * on mouseup/ touchend
	 */
	
	if((!_SWIPE.classList.contains('left') && 
			getComputedStyle(_SWIPE).getPropertyValue('--tx').trim() != 0) || 
		 (_SWIPE.classList.contains('left') && 
			getComputedStyle(_SWIPE).getPropertyValue('--tx').trim() != '-50%')) {
		_SWIPE.classList.add('smooth');
		_SWIPE.style.removeProperty('--tx');
		_SWIPE.classList.toggle('left');
	}
	
	act = null;
};

function downact(e) {
	/*
	 * decides whether to start a swipe or drag action
	 * called on mousedown/ touchstart
	 */
	
	const _T = e.target;
	
	if(_T.className.indexOf('token') === -1) lock(getE(e), 'swipe');
};

function moveact(e) {
	/*
	 * decides whether to start a preswipe or predrag action
	 * called on mousemove/ touchmove
	 */
	
	if(act === 'swipe') preswipe(getE(e));
};

function upact(e) {
		/*
	 * decides whether to end a swipe or drag action
	 * called on mouseup/ touchend
	 */
	
	if(act === 'swipe') swipe();
};

(function init() {
	let _temp = Array.from(document.querySelectorAll('template'));
	
	document.documentElement.classList.add('js');
	size();
		
	TRF._wrap = document.getElementById('trf-val');
	
	TRF._last = TRF._wrap.querySelector('.item');
	
	TRF.temp = { _item: TRF._last.cloneNode(true) };
	
	_temp.forEach(_c => {
		TRF.temp[`_${_c.id}`] = document.importNode(_c.content, true);
	});
	
	TRF.chain = { list: [], text: []	};
	
	TRF._adds = [TRF._last.querySelector('.add')];
		
	DIRS.forEach(c => {
		O[c] = {
			_num: Array.from(document.querySelectorAll(`.o${c} .token--num`)), 
			_unit: Array.from(document.querySelectorAll(`.o${c} .token--unit`)), 
			_pop: document.querySelector(`.o${c} .popup`), 
			_in: document.querySelector(`.o${c} input`), 
			_out: document.querySelector(`.o${c} output`)
		}
	});
	
	document.body.appendChild(_S);
	document.body.style.setProperty('--max', LIM)
	document.body.style.setProperty('--curr', 0)
})();

addEventListener('click', e => {
	let _t = e.target;
	
	if(_t.hasAttribute('aria-haspopup')) {
		let _nxt = _t.nextElementSibling;
		
		if(popup !== _nxt) {
			let _check = _nxt.querySelector(':checked');
			
			if(popup) closePopup();
			
			if(_check !== null && _check.nextElementSibling.classList.contains('final'))
				_check.checked = false;
			
			popup = _nxt;			
			_t.setAttribute('aria-expanded', poplock = true);
			
			fitPopup(_nxt);
			
			setTimeout(() => { poplock = false }, 500);
		}
		
		return
	}
	else if(popup && !isIn(_t, 'popup')) {
		closePopup();
		return
	}
	
	if(_t.classList.contains('final')) {
		let _prv = _t.previousElementSibling;
		
		addTrf({ name: _t.textContent }, getAsc(_t, 'item'));
		
		closePopup();
		
		if(+TRF._last.dataset.i === LIM) {
			TRF._adds.forEach(c => { c.setAttribute('disabled', true) });
			limreach = true;
		}
		
		return
	}
	
	if(_t.classList.contains('rem')) {
		remTrf(+getAsc(_t, 'item').dataset.i);
		
		return;
	}
	
	if(_t.classList.contains('point')) {		
		DIRS.forEach(c => {
			let num = +_t.style.getPropertyValue(`--o${c}`).trim().replace('%', '');
			
			document.body.style.setProperty(`--o${c}`, `${num}%`);
			
			O[c]._num.forEach(k => { k.textContent = num })
			O[c]._unit.forEach(k => { k.textContent = '%' })
			O[c]._pop.style.setProperty(`--val`, O[c]._in.value = O[c]._out.value = num);
		});
		
		
	}
	
	if(_t.id === 'run') {
		running = !running;
		
		_RUN.textContent = running ? 'Stop' : 'Run';
		
		document.body.style.setProperty('--dt', `${running*(TRF.chain.list.length + 4)*BT}s`);
		document.body.classList.toggle('running', running);
		_SWIPE.classList.add('smooth');
	}
}, false);

addEventListener('resize', size, false);

addEventListener('keyup', e => {
	if(popup) {
		let kc = e.keyCode;
		
		if(!poplock && (kc === 13 || kc === 32)) 
			closePopup()
	}
}, false);

addEventListener('input', e => rangeUpdate(e.target), false);

addEventListener('change', e => {
	let _t = e.target;
	
	if(_t.type === 'range') {
		rangeUpdate(_t);
		return
	}
	
	if(_t.type === 'radio') {
		let _lbl = _t.nextElementSibling;
		
		if(!_lbl.classList.contains('final')) {
			let _btn = getAsc(_t, 'popup').previousElementSibling, 
					i = +_t.id.split('-')[1], 
					item = TRF.chain.list[i];
			
			_btn.textContent = _lbl.textContent;
			
			if(_btn.classList.contains('token--func')) {
				let dir = _t.dataset.dir, 
						_ctrl = _btn.parentNode, 
						_args = Array.from(item._el.querySelectorAll('.token--arg')), 
						_iso = item._el.querySelector('[type=checkbox]');

				_ctrl.dataset.dir = dir;
				
				if(item.name === 'scale') {
					if(dir !== '') {
						_iso.disabled = true;

						_args.forEach(_c => {
							if(_c.dataset.dir !== dir) {
								let _num = _c.querySelector('.token--num'), 
										_pop = _num.nextElementSibling, 
										_in = _pop.querySelector('input'), 
										_out = _pop.querySelector('output');

								_pop.style.setProperty('--val', _num.textContent = _in.value = _out.value = 1);
							}
						});
					}
					else {
						_iso.disabled = false;

						if(item.iso) {
							let val = +_args[0].querySelector('.token--num').textContent;

							_args.forEach((_c, i, a) => {
								if(i > 0) {
									let _num = _c.querySelector('.token--num'), 
											_pop = _num.nextElementSibling, 
											_in = _pop.querySelector('input'), 
											_out = _pop.querySelector('output');

									_pop.style.setProperty('--val', _num.textContent = _in.value = _out.value = val);
								}
							});
						}
					}
				}
			}
			else if(_btn.classList.contains('token--unit')) {
				let _arg = _btn.parentNode.parentNode, 
						_num = _arg.querySelector('.token--num'), 
						_out = _arg.querySelector('output'), 
						m = +_t.dataset.val, 
						val = +_arg.querySelector('[type=range]').value;

					_btn.textContent = _lbl.textContent;
					_arg.dataset.m = m;
					_num.textContent = _out.textContent = +(m*val).toFixed(PREC);
				}
			
			TRF.chain.text[i] = textFrom(item);
			updateTrf();
			return;
		}
	}
	
	if(_t.type === 'checkbox') {
		let i = +_t.id.split('-')[1], 
				item = TRF.chain.list[i], 
				_ctrl = getAsc(_t, 'ctrl'), 
				_args = Array.from(item._el.querySelectorAll('.token--arg'));
		
		_ctrl.classList.toggle('iso');
		
		item.iso = !item.iso;
		
		if(item.iso) {
			let val = +_args[0].querySelector('.token--num').textContent;

			_args.forEach((_c, i, a) => {
				if(i > 0) {
					let _num = _c.querySelector('.token--num'), 
							_pop = _num.nextElementSibling, 
							_in = _pop.querySelector('input'), 
							_out = _pop.querySelector('output');

					_pop.style.setProperty('--val', _num.textContent = _in.value = _out.value = val);
				}
			});
		}
		
		TRF.chain.text[i] = textFrom(item);
		updateTrf();
		return;
	}
}, false);

addEventListener('mousedown', downact, false);
addEventListener('touchstart', downact, false);

addEventListener('mousemove', moveact, false);
addEventListener('touchmove', moveact, false);

addEventListener('mouseup', upact, false);
addEventListener('touchend', upact, false);

document.body.addEventListener('mouseout', upact, false);

addEventListener('animationend', e => {
	_SWIPE.classList.toggle('left')
}, false);