// jshint esversion: 6 
	let gui = new lil.GUI();
	let hideTimeout = false;
	let svg;
	let zoom = 1;
	let oldZoom = 1;
	let panZoomPanther;
	let foundAnimate = 1;
	let foundScale = 1.05;
	let myPanZoomTimer = null;
	let historytime = + new Date();
	let fel1 = false;
	let fel2 = false;
	const panZoomTime = 500;
	const facilities = [''];
	const names = [];
	const serviceareanames = [];
	const alias = [];
	let maxZoom = 230;
	const status = [];
	const point = {x: 0, y: 0};
	const pa = document.location.search.replace('?','').split('&');
	const parameters = {};
	const state = document.location.search.indexOf('ps')>-1;
	const vlv = document.location.search.indexOf('vlv')>-1;
	const vlvs = [];
	for (let i=0; i<pa.length; i++) {const p = pa[i].split('='); parameters[p[0]] = p[1];}
	const machineCaseSensitive = document.location.search.indexOf('machine=')>-1? document.location.search.split('machine=')[1].split('&')[0]: 'elettra';
	const machine = machineCaseSensitive.toLowerCase();
	//https://puma-01.elettra.eu/rchan.php?json&valueOnly&src=srv-tango-srf-01.fcs.elettra.trieste.it:20000/f/access_control/safety/Undulator_access_state -> 5 FEL1, 6 FEL2
	if (machine.indexOf('fermi')>-1) {
		fetch(conf.rchan+'srv-tango-srf-01:20000/f/access_control/safety/Undulator_access_state').then((response) => {return response.json();}).then((fel) => {
			fel1 = fel[5] == 1;
			fel2 = fel[6] == 1;
		});
	}
	const latticeFile = document.location.href.split('?')[0].split('/').slice(0,-1).join('/')+'/'+machine+'_lattice.json';
	const params = {machine: machineCaseSensitive.toLowerCase(), search: '', backgroundColor: '#333333'};
	gui.title('PAnTHer - controls');
	// if (navigator.userAgent.indexOf('Firefox/63')>-1) {$( "body" ).append('<button id="starter" style="align: center;height: 500px; width: 95%;background-color: #449944; font-size: 100px;" onClick="mystart()">START</button>');}
	function mystart() {
		panZoomPanther = svgPanZoom('#panther', {beforeZoom: myZoom, fit: false, contain: false});
		$("#sname").on("keydown", searchText);
		$('#starter').hide();
	}
	// Polyfill for parentNode.replaceChildren()
	if (typeof Element.prototype.replaceChildren !== 'function') {
		Object.defineProperty(Element.prototype, 'replaceChildren', {
			configurable: true,
			writable: true,
			value: function replaceChildren(...nodes) {
				// Remove all existing child nodes
				while (this.firstChild) {
					this.removeChild(this.firstChild);
				}
				// Append new DOM objects
				this.append(...nodes);
			}
		});
	}
	function toggleMachine(machine) {
		document.location = document.location.href.split('?')[0] + '?machine='+machine;
		/*if (document.location.search.indexOf('machine=')==-1) document.location = document.location.href + (document.location.href.indexOf('?')==-1? '?': '&') + 'machine='+machine;
		let search = document.location.search.split('machine=')[1].split('&')[0];
		document.location = document.location.href.replace('machine='+search, 'machine='+machine);*/
	}
	function compLink(event) {
		console.log('compLink()', event, document.getElementById("compdb").href);
		window.open(document.getElementById("compdb").href, '_blank').focus();
		event.stopPropagation();
		return false;
	}
	function searchText(e) {
		console.log('searchText()', e, e.keyCode || e.which, $("#sname").val().toUpperCase().replace('.','_'));
		if (e.keyCode == 13) findComponent($("#sname").val().toUpperCase().replace('.','_'));
		// return -1;
	}
	// if (navigator.userAgent.indexOf('Firefox/63')==-1) {gui.add(params, 'machine', conf.machineList).onChange(function() {toggleMachine(params.machine);});}
	gui.add(params, 'machine', conf.machineList).onChange(function() {toggleMachine(params.machine);});
	gui.add(params, 'search');
	gui.addColor(params, 'backgroundColor').onChange(function() {toggleParam('backgroundColor');});
	params.vlv = document.location.search.indexOf('vlv')>-1;
	gui.add(params, 'vlv').name('vlv & bst').onChange(function() {toggleParam('vlv');});
	params.ps = document.location.search.indexOf('ps')>-1;
	gui.add(params, 'ps').onChange(function() {toggleParam('ps');});
	const sstring = $('.controller.string').children().eq(1).children().eq(0);
	sstring.attr('id', 'sname');
	sstring.attr('name', 'sname');
	sstring.addClass("form-control sname");
	function findComponent(name) {
		let servicearea = false;
		console.log('lattice', lattice);
		if (lattice.servicearea) for (let i in lattice.servicearea.sections) {
			for (let j in lattice.servicearea.sections[i].components) {
				if (name.replace('.', '_')==lattice.servicearea.sections[i].components[j].name.replace('.', '_')) {servicearea = true;}
				for (let k in lattice.servicearea.sections[i].components[j].embedded) {
					if (name==lattice.servicearea.sections[i].components[j].embedded[k]) {servicearea = true;}
				}
			}
		}
		console.trace(name, servicearea, document.location.search.indexOf('servicearea'), document.location.search.indexOf('search='+name)); // return;
		if ((servicearea != document.location.search.indexOf('servicearea')>-1) && document.location.search.indexOf('search='+name)==-1) {
			document.location = './panther2d.php?machine='+machine+'&search='+name+(servicearea? '&servicearea': '');
		}
		if (name==null) name = document.getElementById('sname').value;
		for (let i=0; i<alias.length; i++) if (alias[i][1]==name) name = alias[i][0];
		document.getElementById('sname').value = name;
		if (typeof $('#'+name)[0] == 'undefined') return;
		console.log(name, window.innerWidth/2, $('#'+name)[0].getCTM().e, $('#'+name)[0].getCTM().f);
		// panZoomPanther.zoomAtPoint(10, {x: window.innerWidth/2 - $('#'+name)[0].getCTM().e, y: window.innerHeight/2 - $('#'+name)[0].getCTM().f})
		panZoomPanther.zoom(10);
		// leave a delay between zoom and pan
		setTimeout(mypan, 1200, name);
	}
	function mypan(name) {
		$('.label').show(); 
		const x = window.innerWidth/2 - $('#'+name)[0].getCTM().e + panZoomPanther.getPan().x;
		const y = window.innerHeight/2 - $('#'+name)[0].getCTM().f + panZoomPanther.getPan().y;
		const m = $("svg")[0].getTransformToElement($('#'+name)[0]);
		panZoomPanther.pan({x: x, y: y});
		setTimeout(pinhide, 100, name,  $('#'+name).eq(0).attr('transform'));
	}
	function pinhide(name, transform) {
		console.log(foundAnimate, foundScale);
		foundAnimate *= foundScale;
		if (foundAnimate>1.5) foundScale = 0.95;
		if (foundAnimate<1) {foundScale = 1.05; foundAnimate = 1;} else setTimeout(pinhide, 100, name, transform);
		$('#'+name).eq(0).attr('transform',transform+',scale('+foundAnimate+')');
	}
	// $(function() {$(".sname").autocomplete({source: names, close: function(event, ui) {findComponent($('#sname').val()); }, select: function(event, ui) {findComponent(ui.item.value); return false;}});});
	$(function() {$(".sname").autocomplete({source: names, select: function(event, ui) {findComponent(ui.item.value); return false;}});});
	function toggleParam(name) {
		if (name=='backgroundColor') {$('body').css('backgroundColor', params.backgroundColor); return;}
		const urlparam = {};
		let search = document.location.search.replace('?', '').split('&');
		if (search[0]=='') search.splice(0,1);
		const i=search.indexOf(name);
		if (i==-1) search.push(name); else search.splice(i,1);
		const res = search.join('&');
		document.location = document.location.href.split('?')[0]+(res.length? '?'+res: '');
	}
	async function subscribe() {
		let response = await fetch("./misc/talk.php?read");
		if (response.status == 502) {
			await subscribe();
		} else if (response.status != 200) {
			// An error - let's show it
			mylog('subscribe() ERROR ', response.statusText);
			// Reconnect in one second
			await new Promise(resolve => setTimeout(resolve, 1000));
			await subscribe();
		} else {
			// Get and show the message
			let message = await response.text();
			mylog('subscribe()', message);
			highlightobjects(message);
			// Call subscribe() again to get the next message
			await subscribe();
		}
	}
	// subscribe();

	function mylog(...args) {
		if (document.location.search.indexOf('debug')>-1) $('#debug').html($('#debug').html()+JSON.stringify(args).replaceAll(':',': ').replaceAll(',',', ')+'\n');
		else {console.trace.apply(null, args);}
	}
	function initIndex(lattice) {
		const index = [];
		for (let l in lattice.conf.index) {
			if (l=='start') continue;
			const cmd = "findComponent('"+lattice.conf.index[l].replace('.','_')+"')";
			index.push('<button onclick="'+cmd+'">'+l+'</button>');
		}
		$('body').append('<div style="position: absolute; left: 5px; bottom: 5px;">'+index.join(' ')+'</div>');
	}
	function init() {
		fetch(latticeFile).then((response) => {return response.json();}).then((flattice) => {
			lattice = flattice;
			if (Object.keys(lattice).length>0) {
				for (let i in lattice) {if (i!='conf') facilities.push(i);}
				for (let i in lattice) {
					if (i == 'conf') continue;
					// logic XOR https://stackoverflow.com/questions/2335979/is-there-anyway-to-implement-xor-in-javascript
					if ((document.location.search.indexOf('servicearea')==-1) != (i=='servicearea')) initLattice(lattice[i].sections, i); else initSearch(lattice[i].sections, i);
				}
				bpmInit(facilities); 
				if (document.location.search.indexOf('servicearea')>-1) initSearch(lattice.servicearea.sections, 'servicearea');
				if (typeof blm != 'undefined') blmMenu(lattice, facilities, params);
				if (typeof bpmData != 'undefined') bpmMenu(lattice, facilities, params);
				params.gotoAdmin = function() {document.location = './admin.php';};
				gui.add(params, 'gotoAdmin').name('Admin');
				params.goto3D =  function() {document.location = './panther.php?machine='+params.machine;}; gui.add(params, 'goto3D').name('3D');
				if (lattice.conf && lattice.conf.index) initIndex(lattice);
			}
			$('.scale').attr('transform', "scale(2)");
			// {$('<div><iframe style="width: 100%;height:250px;" src="../misc/gauge.html?dark&r1only=1&r=100&max=360&throttlingPeriod=50&apply=rotate&val='+0+'"></iframe></div>').insertBefore('.function');}
			// panZoomPanther = svgPanZoom('#panther', {beforeZoom: myZoom, fit: false, contain: false}); // https://github.com/bastienmoulia/svg-pan-zoom-rotate
			// if( /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
			if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
				panZoomPanther = svgPanZoom('#panther', {
					zoomEnabled: true,
					controlIconsEnabled: false,
					fit: 0,
					center: 1,
					maxZoom: maxZoom*2,
					customEventsHandler: eventsHandler,
					//beforeZoom: myZoom,
				});
			}
			else {
				panZoomPanther = svgPanZoom('#panther', {
					zoomEnabled: true,
					zoomScaleSensitivity: 0.3,
					controlIconsEnabled: false,
					fit: false,
					center: false,
					minZoom: 0.2,
					maxZoom: maxZoom,
					beforePan: myPan,
					beforeZoom: myZoom,
				});
			}
			if (document.location.search.indexOf('debug')>-1) {
				$('#tooltip').show();
				$('#tooltip').css('width', '100%');
				$('#tooltip').html('<textarea id="debug" style="height: 100px; width:100%;"></textarea>');
			}
			let pan = [window.innerWidth/2, window.innerHeight/2];
			if (document.location.search.indexOf('pan=')>-1) pan = document.location.search.split('pan=')[1].split('&')[0].split(',');
			if (document.location.search.indexOf('search=')>-1) findComponent(document.location.search.split('search=')[1].split('&')[0]);
			else {
				const zoom = document.location.search.indexOf('zoom=')>-1? document.location.search.split('zoom=')[1].split('&')[0]-0: 0.5;
				panZoomPanther.zoom(zoom);
				setTimeout(panZoomPanther.pan, 600, {x: pan[0], y: pan[1]});
			}
			if (state) {
				fetch(conf.stateSrcUrl, {cache: "no-store"}).then((response) => {return response.text();}).then((data) => {
					const statSrc = data.toUpperCase().split('.').join('_').split(',');
					for (let j=0; j<statSrc.length; j++) {
						// if (statSrc[j].split('/')[2]=='POWER_SUPPLY' || statSrc[j].split('/')[2]=='INJECTION' || statSrc[j].split('/')[2]=='EXTRACTION') 
							statSrc[j] = statSrc[j].split('/')[3].replace('PS', '');
					}
					for (let i=0; i<status.length; i++) { 
							if (status[i].name.indexOf('KICK')>-1) console.log('KICK state', i, status[i].name, statSrc);
						for (let j=0; j<statSrc.length; j++) {
							if (status[i].name.indexOf(statSrc[j])>-1) {status[i].statsrc = state; status[i].statindex = j;}
						}
					}
					// console.log('statSrc', data, statSrc, status);
				});
				setInterval(updateStatus, 1000);
			}
			if (vlv) {
				for (let i in conf.bstmap) { if (i.indexOf('.')>-1) conf.bstmap[i.replace('.','_')] = conf.bstmap[i];}
				fetch(conf.vlvSrcUrl, {cache: "no-store"}).then((response) => {return response.text();}).then((data) => {
					const vlvSrc = data.toUpperCase().substring(14).split(',');
					for (let i=0; i<vlvs.length; i++) { 
						for (let j=0; j<vlvSrc.length; j++) {
							const vlva = vlvSrc[j].split('/');
							if (vlva.length < 4) continue;
							const name = vlva[3].replace('.','_');
							if (vlvs[i].name.replace('.','_').indexOf(name)>-1) {vlvs[i].vlvsrc = state; vlvs[i].vlvindex = j; vlvs[i].type = 'vlv';}
							if (vlvSrc[j].split('/')[2].indexOf(conf.bstmap.base)>-1) {
								if (conf.bstmap[vlvs[i].name] && conf.bstmap[vlvs[i].name].indexOf(vlvSrc[j].split('/')[4])>-1) {
									vlvs[i].vlvsrc = 'bst'; vlvs[i].vlvindex = j; vlvs[i].type = 'bst';
								}
							}
						}
					}
					//console.log('vlvSrc', data, vlvSrc, vlvs);
				});
				setInterval(updateVlv, 1000);
			}
			$("#sname").on("keydown", searchText);
		});
	}
	function showStatus(i, stat) {
		if (stat == 0 || stat == 'null' || stat == '' || stat == 'ON' || stat == 'RUNNING' || (!fel1 && $('#'+status[i].name)[0].classList[0]=='fel1') || (!fel2 && $('#'+status[i].name)[0].classList[0]=='fel2')) {$('#'+status[i].name).hide();}
		else {$('#'+status[i].name).show(); document.getElementById(status[i].name).style.fill = conf.stateLabelColor[stat];}
		// console.log(i, status[i], stat);
	}
	function clearStatus() {
		$('.ps').hide();
	}
	function updateStatus() {
		fetch(conf.stateUrl, {cache: "no-store"}).then((response) => {return response.text();}).then((data) => {
			const statVal = data.split(';');
			// console.log(conf.stateUrl, statVal, status);
			for (let i=0; i<status.length; i++) {
				if (status[i].statsrc==state) {
					if (status[i].statindex) showStatus(i, statVal[status[i].statindex]);
					// console.log(statVal, status, status[i].name, i, status[i].statindex, statVal[status[i].statindex]);
				}
			}
			setTimeout(clearStatus, 600);
		});
	}
	function updateVlv() {
		fetch(conf.vlvUrl, {cache: "no-store"}).then((response) => {return response.text();}).then((data) => {
			const vlvVal = data.split(':')[1].split(';');
			// console.log('updateVlv()', conf.vlvUrl, vlvVal, vlvs);
			for (let i=0; i<vlvs.length; i++) {
				if (vlvs[i].type=='vlv') $('#'+vlvs[i].name).css('fill', vlvVal[vlvs[i].vlvindex]=='CLOSED'? 'yellow': (vlvVal[vlvs[i].vlvindex]=='OPENED'? 'limegreen': 'grey'));
				if (vlvs[i].type=='bst') {
					if (typeof vlvVal[vlvs[i].vlvindex] != 'string') continue;
					const val = vlvVal[vlvs[i].vlvindex].split(',');
					// console.log('updateVlv(): ', i, vlvs[i], vlvs[i].type, vlvs[i].vlvindex, vlvVal[vlvs[i].vlvindex], '#'+vlvs[i].name, vlvs[i].comp, val[0]=='true'? 'limegreen': (val[1]=='true'? 'yellow': 'grey'));
					$('#'+vlvs[i].name).css('fill', val[0]=='true'? 'limegreen': (val[1]=='true'? 'yellow': 'grey'));
				}
			}
		});
	}
	function rescale(x) {return x;}
	String.prototype.replaceAt = function(index, replacement) {
		return this.substring(0, index) + replacement + this.substring(index + replacement.length);
	};
	function evalId(base) {
		if (base.indexOf('.')>-1) return base;
		return base.replaceAt(base.lastIndexOf('_'), '.').replace('RTBPM','BPM');
	}
	function openTooltip(event) {
		if (document.location.search.indexOf('debug')==-1) {
			const type = this.href? this.href.baseVal.replace('#',''): (this.id.indexOf('BLM')>-1 || this.id.indexOf('BERGOZ')>-1? 'blm': '???');
			mylog('openTooltip()',type, this.id, event, event.clientY);
			$('#tooltip').css('left', event.clientX+30);
			$('#tooltip').css('top', event.clientY+30);
			document.getElementById('tooltipFrame').src = conf.tooltipApp+'?s='+type.replace('fast', '')+'&param='+this.id;
			console.log('openTooltip(event)', type.toLowerCase(), type.toLowerCase().indexOf('beamline'));
			document.getElementById('tooltip').style.display = 'block';
			if (hideTimeout!==false) clearTimeout(hideTimeout);
			hideTimeout = setTimeout(hideTooltip, 120000);
			document.getElementById('compdb').style.display = (type.indexOf('rv')==0 || type.indexOf('rc')==0 || type.indexOf('rid')==0 || type.indexOf('rd')==0 || type.indexOf('rps')==0 || type.indexOf('plc')==0)? 'none': 'block';
			const id = evalId(this.id);
			if (document.getElementById('compname')) document.getElementById('compname').innerHTML = id;
			document.getElementById('compdb').href = conf.compdb + id;
			document.getElementById("compdb").addEventListener("click", compLink);
			if (type.toLowerCase().indexOf('beamline')>-1) {
				document.getElementById('compdb').href = 'http://adam.elettra.trieste.it/projects/blcs/beamwatch/';
				document.getElementById('compdb').innerHTML = 'search '+this.id+' in ADAM Beamwatch <span id="compname"/>';
			}
			else if (machine=='elettra') document.getElementById('compdb').setAttribute("disabled", true);
			event.stopPropagation();
		}
		else {
			for (let l in lattice) {
				if (l=='confg') continue;
				let servicearea = false;
				for (let i in lattice[l].sections) {
					for (let j in lattice[l].sections[i].components) {
						if (this.id==lattice[l].sections[i].components[j].name.replace('.', '_')) {mylog('openTooltip()', lattice[l].sections[i].components[j], lattice[l].sections[i].components[j].position-document.location.search.split('offset=')[1].split('&')[0]);}
					}
				}
			}
		}
	}
	function hideTooltip() {
		if (hideTimeout!==false) clearTimeout(hideTimeout);
		hideTimeout = false;
		// mylog('hideTooltip');
		if (document.location.search.indexOf('debug')==-1) {
			document.getElementById('tooltipFrame').src = '';
			document.getElementById('tooltip').style.display = 'none';
		}
	}
	function transformLabel(x, y, beta, labelReverse) {
		if (typeof labelReverse == 'object') return "translate("+rescale(x)+" "+rescale(y)+") rotate("+(beta+labelReverse[0])+") translate("+labelReverse[1]+" "+labelReverse[2]+")";
		return labelReverse==180? "translate("+rescale(x)+" "+rescale(y)+") rotate("+(beta-90)+") translate(1800 100)":
				"translate("+rescale(x)+" "+rescale(y)+") rotate("+(beta+90)+") translate("+(labelReverse? -250: 250)+" "+(labelReverse? 200: 300)+")";
	}
	function appendLabel(id, labelclass, display, x, y, beta, labelReverse) {
		if ((beta+3600)%360 <180 && typeof labelReverse != 'object') labelReverse = [-90, -250, -100];
		appendSvg("text", {
			id: id+'label', 
			class: labelclass, 
			x:0, y:0, style:"display: "+display, fill:"white", stroke:"#eeeeee","stroke-width":10, "font-family":"Arial", "font-size":200, "font-weight":"bold", 
			"text-anchor": (labelReverse? "end": "start"),
			transform: transformLabel(x, y, beta, labelReverse)
		}, false, id);
	}
	function appendLabel2(param, labelclass, display, x, y, beta, labelReverse) {
		const id = param.name;
		const fontsize = labelclass.indexOf('bl')>-1? 800: 500;
		// console.log("appendLabel2()",param, labelclass, display, x, y, beta, labelReverse);
		if (labelclass.indexOf('bl')>-1 && typeof labelReverse != 'object') {
			labelReverse = [180, 17000, param.type=='beamlineUp'? -500: +800];
			if ((beta+3690)%360 < 180) labelReverse = [0, -14000, param.type=='beamlineUp'? 1000: -300];
		}
		else if ((beta+3600)%360 < 180 && typeof labelReverse != 'object') labelReverse = [-90, -250, -100];
		appendSvg("text", {
			id: id+'label', 
			class: labelclass, 
			x:0, y:0, style:"display: block", fill:"red", stroke:"pink","stroke-width":10, "font-family":"Arial", "font-size":fontsize, "font-weight":"bold", 
			"text-anchor": (labelReverse? "end": "start"),
			transform: transformLabel(x, y, beta, labelReverse)
		}, false, id);
	}
	function appendSvg(tagName, attrib, onClickCall=false, text=false, myclass=false) {
		const elem = document.createElementNS("http://www.w3.org/2000/svg", tagName);
		if (onClickCall) elem.addEventListener("click", onClickCall, false);
		if (text) {				
			const textNode = document.createTextNode(text);
			elem.appendChild(textNode);
		}
		const jelem = $(elem);
		if (myclass) {/*mylog(elem, jelem, myclass);*/ elem.classList.add(myclass);}
		for (let i in attrib) {
			jelem.attr(i, attrib[i]);
		}
		$("svg").append(jelem);
	}
	function appendSearch(component, facility) {
		// mylog('appendSearch()',component, facility);
		if (component) {
			const comp = component.type.replace('booster', '');
			if (comp && comp!=' ' && $('#'+comp)[0]) {
				const id = extractId(component.name);
				names.push(id[0]);
				if (facility=='servicearea') serviceareanames.push(id[0]);
				if (component.embedded) {
					for (let j=0; j<component.embedded.length; j++)  {names.push(component.embedded[j]); alias.push([id[0],component.embedded[j]]);}
				}
			}
		}
	}
	function appendComponent(components, x0, y0, x1, y1, facility) {
		const dx = x1 - x0;
		const dy = y1 - y0;
		const d = Math.sqrt(dx*dx + dy*dy);
		const beta = 180*Math.atan2(y0-y1, x0-x1)/Math.PI;
		if (components) for (let i=0; i<components.length; i++) {
			const comp = components[i].type.replace('booster', '');
			let x = x0+components[i].position/d*dx;
			let y = y0+components[i].position/d*dy;
			if (components[i].offset2d) {x += components[i].offset2d[0]; y += components[i].offset2d[1];}
			if (typeof blm != 'undefined' && comp=='blm') {
				const name = components[i].name.replace('BPM','BLM');
				// mylog('appendComponent(), ', name, blm.obj);
				blm.obj.push(name);
				blm.dir.push(beta);
				appendSvg("rect", {id:name, name:name, x:0, y:0, width:40, height:40, rx:20, ry:20, transform:"translate("+rescale(x)+" "+rescale(y)+") rotate("+(name.indexOf('_L')>-1? beta + 180: beta)+")"}, openTooltip, false, "blm");
			}
			if (typeof bpmData != 'undefined' && comp=='bpm') {
				// mylog('appendComponent()',components[i], x0, y0, x1, y1, beta, facility, 180*Math.atan2(y0-y1, x0-x1)/Math.PI);
				bpmData[facility].obj.push(components[i].name);
				bpmData[facility].dir.push(beta);
				bpmData[facility].pos.push([rescale(x), rescale(y)]);
			}
			if (typeof bpmData != 'undefined' && comp=='corrector') {
				corr[facility].obj.push(components[i].name);
				corr[facility].dir.push(beta);
				corr[facility].pos.push([x, y]);
			}
			if ($('#'+comp)[0]) {
				// mylog('components['+i+']',components[i]);
				const id = extractId(components[i].name);
				const section = components[i].name.indexOf('_')>-1? components[i].name.split('_')[1].split('.')[0]+' ': '';
				const offset = components[i].type == 'beamlineUp'? "-2100 -3500": "0 -200";
				const transform = "translate("+rescale(x)+" "+rescale(y)+") rotate("+(beta+180)+") translate("+offset+")";
				appendSvg("use", {href:"#"+comp, id: id[0], name:components[i].name, class: comp+' '+section+facility, style:"cursor: pointer", transform:transform}, openTooltip);
				if (components[i].type == 'label' || components[i].type == 'beamlineDown' || components[i].type == 'beamlineUp') 
					appendLabel2(components[i], section+facility, 'none', x, y, beta, components[i].labelReverse);
				else
					appendLabel(components[i].name, comp+' label '+section+facility, 'none', x, y, beta, components[i].labelReverse);
				names.push(id[0]);
				if (components[i].embedded) {
					for (let j=0; j<components[i].embedded.length; j++)  {names.push(components[i].embedded[j]); alias.push([id[0],components[i].embedded[j]]);}
				}
				if (id[1]) {names.push(id[1]); alias.push(id);}
				if (state) {
					if (components[i].ps) {
						for (let pi=0; pi<components[i].ps.length; pi++) {
							const name = components[i].ps[pi].replace('PS','').replace('.','_') + '_status';
							status.push({name: name});
							appendSvg('circle', {id: name, class: facility+' ps', style:"display: none", cx: 150+pi*100, cy: 200, transform:transform, r: 80, stroke: 10, strokeColor: 'blue', fill: 'gray'}, false, false, 'status');
						}
					}
					else {
						status.push({name: id[0]+'_status'});
						appendSvg('circle', {id: id[0]+'_status', class: facility+' ps', style:"display: none", cx: 200, cy: 200, transform:transform, r: 80, stroke: 10, strokeColor: 'blue', fill: 'gray'}, false, false, 'status');
					}
					if (components[i].name.toUpperCase().indexOf('KICK')>-1) console.log('PS: ', components[i].name, components[i].name.toUpperCase().indexOf('KICK'), status);
				}
				if (vlv && (components[i].type == 'vlv' || components[i].type == 'bst')) { 
					// appendSvg('rect', {id: id[0]+'_disable', style:"display: none", x: x+75, y: y-90, width: 50, height: 200, stroke: 10, fill: 'black'}, false, false, 'vlvs');
					vlvs.push({name: id[0], type: components[i].type});
				}
			}
		}
	}
	if (!String.prototype.replaceAll) {
		String.prototype.replaceAll = function(search, replace) {
			return this.split(search).join(replace);
		};
	}
	function extractId(name) {
		if (name.indexOf('(')>-1) {
			let tok = name.split('(');
			return [tok[0].replaceAll('.','_').replaceAll(' ','_').replace(/_+$/, ''), tok[1].replaceAll('.','_').replaceAll(' ','_').replaceAll(')','').replace(/_+$/, '')];
		}
		// .replace(/_+$/, '') => https://stackoverflow.com/questions/8141718/how-to-trim-specific-characters-from-the-end-of-the-javascript-string
		return [name.replaceAll('.','_').replaceAll(' ','_').replace(/_+$/, ''), false];
	}
	function highlightobjects(objclass) {
		$("use").css('opacity',0.3);
		$("text").css('opacity',0.3);
		$("."+objclass).css('opacity',1);
	}
	function magnifyobjects(objclass) {
		$("text").css('opacity',0.15);
		$("text."+objclass).css('opacity',1);
		$('.scale').attr('transform', "scale(1) translate(90,100)");
		let x = -40;
		let y = -40;
		let s = 3;
		if (objclass=="vlv") {x = -50; y = -50; s = 5;}
		$('.'+objclass+'scale').attr('transform', "scale("+s+") translate("+x+","+y+")");
	}
	function initSearch(sections, facility) { 
		console.log('initSearch()', sections, facility);
		for (i=0; i<sections.length; i++) { // if(i>1) break;
			if (sections[i].bending && sections[i].bending.type) {
				console.log('names.push()', sections[i].bending.name);
				names.push(sections[i].bending.name.replace('.','_'));
			}
			if (typeof sections[i].components == 'object') for (let j=0; j<sections[i].components.length; j++) appendSearch(sections[i].components[j], facility);
		}
	}
	function initLattice(sections, facility) { 
		initSearch(sections, facility);
		if (document.location.search.indexOf('facility=')>-1 && facility!=document.location.search.split('facility=')[1].split('&')[0]) return;
		if (typeof bpmData != 'undefined') {
			bpmData[facility] = {obj: [], dir: [], pos: []};
			corr[facility] = {obj: [], dir: [], pos: []};
		}
		// vacuum chamber
		let d = '';
		let m = true;
		let wall = false;
		for (let i=0; i<sections.length; i++) {
			d = d + (m? 'M ': ' L ')+rescale(sections[i].start.x)+' '+rescale(sections[i].start.z);
			if (i<sections.length-1 && typeof sections[i+1].chamber == 'undefined') {m = true;} else if (i<sections.length-1 && sections[i+1].chamber.type=="chamber") {m = false;}
			if (i<sections.length-1 && typeof sections[i+1].chamber != 'undefined' && sections[i+1].chamber.type=="wall") wall = true;
		}
		if (sections[0].chamber && sections[0].chamber.type=='chamber') d = d + ' Z';
		console.log('sections', sections);
		if (d!='') {
			if (wall) appendSvg("path", {d: d, fill: "none", stroke: "#990000", "stroke-dasharray": "200 200", "stroke-width": 50, id:"wall"+facility});
			else appendSvg("path", {d: d, fill: "none", stroke: "#999999", "stroke-width": 20, id:"chamber"+facility});
		}
		let j = 0;
		let i = sections.length - 1;
		let k = sections.length - 2;
		let alpha = 180/Math.PI*Math.atan2(sections[j].start.z-sections[i].start.z, sections[j].start.x-sections[i].start.x);
		for (i=0; i<sections.length; i++) { // if(i>1) break;
			j = (i + 1) % sections.length;
			k = (i + sections.length - 1) % sections.length;
			let beta = 180/Math.PI*Math.atan2(sections[j].start.z-sections[i].start.z, sections[j].start.x-sections[i].start.x);
			let gamma = (beta+alpha)/2;
			if (sections[k] && sections[j].start.z<sections[i].start.z && sections[i].start.z>sections[k].start.z) gamma = gamma + 180;
			if (alpha>beta && gamma<0) gamma = gamma + 180;
			if (sections[i].bending && sections[i].bending.type) {
				const section = sections[i].bending.name.indexOf('_')>-1? sections[i].bending.name.split('_')[1].split('.')[0]+' ': '';
				appendSvg("use", {href:"#"+sections[i].bending.type.replace('dipolefermi','bending'), id:sections[i].bending.name.replace('.','_'), class: 'bending '+section+facility, style:"cursor: pointer", transform:"translate("+rescale(sections[i].start.x)+" "+rescale(sections[i].start.z)+") rotate("+gamma+") translate(-600 -200)"}, openTooltip);
				appendLabel(sections[i].bending.name, 'bending '+section+facility, 'block', sections[i].start.x, sections[i].start.z, gamma+180, sections[i].bending.labelReverse);
				// appendSvg("text", {id:sections[i].bending.name+'label', class: 'bending '+section+facility, x:0, y:0, fill:"white", stroke:"#888888","stroke-width":10, "font-family":"Arial", "font-size":300, "font-weight":"bold", transform:"translate("+rescale(sections[i].start.x)+" "+rescale(sections[i].start.z)+") rotate("+gamma+") translate(-600 -250)"}, false, sections[i].bending.name);
			}
			alpha = beta;
			appendComponent(sections[i].components, sections[i].start.x, sections[i].start.z, sections[j].start.x, sections[j].start.z, facility);
			// if (typeof bpmData != 'undefined') bpmInit(facility); 
		}
	}
	$(document).ready(function() {
		$("svg").attr('height', window.innerHeight+'px');
		init();
	});

	var eventsHandler;
	let myhammer;
	eventsHandler = {
		haltEventListeners: ['touchstart', 'touchend', 'touchmove', 'touchleave', 'touchcancel','tap', 'pinch','pinchstart','pinchmove'], 
			init: function(options) {
			var instance = options.instance, initialScale = 1, pannedX = 0, pannedY = 0;
			// mylog('init', options, panZoomPanther);
			myhammer = Hammer(options.svgElement, {
				inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput
			});
			myhammer.get('pinch').set({enable: true});
			myhammer.on('panstart panmove', function(ev){
				if (ev.type === 'panstart') {
					pannedX = 0;
					pannedY = 0;
				}
				panZoomPanther.panBy({x: ev.deltaX - pannedX, y: ev.deltaY - pannedY});
				pannedX = ev.deltaX;
				pannedY = ev.deltaY;
			});
			myhammer.on('pinchstart pinchmove', function(ev){
				if (ev.type === 'pinchstart') {
					initialScale = panZoomPanther.getZoom();
					panZoomPanther.zoomAtPoint(initialScale * ev.scale, {x: ev.center.x, y: ev.center.y}, zoom, ev.scale);
					// mylog(''); mylog('panZoomPanther.zoomAtPoint('+(initialScale * ev.scale)+', {x: '+ev.center.x+', y: '+ev.center.y+'})');
				}
				if (ev.type === 'pinchmove') {
					oldZoom = zoom;
					zoom = initialScale * ev.scale;
					// mylog('zoom', zoom, ev.center.x);
					point.x = ev.center.x;
					visibleX = 0 - point.x/zoom;
					visibleWidth = document.getElementById('panther').clientWidth/zoom;
				}
				panZoomPanther.zoomAtPoint(initialScale * ev.scale, {x: ev.center.x, y: ev.center.y});
				zoom = panZoomPanther.getZoom();
				if (zoom>2) $('.label').show(); else $('.label').hide();
				// mylog('panZoomPanther.zoomAtPoint('+(initialScale * ev.scale)+', {x: '+ev.center.x+', y: '+ev.center.y+'})', zoom, ev.scale);
			});
			options.svgElement.addEventListener('touchmove', function(e){e.preventDefault(); });
		}, 
		destroy: function(){
			myhammer.destroy();
		}
	};
	function myPanZoomDelayed(event) {
		if (event) event.preventDefault();
		visibleX = 0 - point.x/zoom;
		visibleWidth = document.getElementById('panther').clientWidth/zoom;
		// mylog('myPanZoomDelayed, event', event, 'point', point, 'zoom:', zoom, 'visibleX', visibleX, 'visibleWidth', visibleWidth);
		myPanZoomTimer = null;
		oldZoom = zoom;
	}
	let firstUrl = true;
	function setUrl(name, value) {
		let t = + new Date();
		if (t - historytime < 100) return;
		historytime = t;
		parameters[name] = value;
		const pp = [];
		for (let i in parameters) {pp.push(i+'='+parameters[i]);}
		const url = document.location.origin+document.location.pathname+'?'+pp.join('&').replaceAll('=undefined', '').replace('search=','s=');
		// console.log('setUrl()',name, value, url);
		if (firstUrl) window.history.pushState({"html":'panther2d.php',"pageTitle":'PAnTHer'},"", url);
		else window.history.replaceState({"html":'panther2d.php',"pageTitle":'PAnTHer'},"", url);
		firstUrl = false;
	}
	function myPan(oldPan, newPan) {
		setUrl('pan', Math.round(newPan.x*100)/100+','+Math.round(newPan.y*100)/100);
		point.x = newPan.x;
		point.y = newPan.y;
		if (myPanZoomTimer == null && document.location.search.indexOf('&autoPanZoom')==-1) myPanZoomTimer = setTimeout(myPanZoomDelayed, panZoomTime);
		// mylog('myPan', p,q);
	}
	function myZoom(oldScale, newScale) {
		setUrl('zoom', Math.round(newScale*100)/100);
		zoom = newScale;
		if (newScale>2) $('.label').show(); else $('.label').hide();
		if (myPanZoomTimer == null && document.location.search.indexOf('&autoPanZoom')==-1) myPanZoomTimer = setTimeout(myPanZoomDelayed, panZoomTime);
		// mylog('myZoom', zoom);
	}
/*
https://github.com/dagrejs/dagre-d3/issues/202
*/
SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) {
    return elem.getScreenCTM().inverse().multiply(this.getScreenCTM());
};