console.log('ready adress-editor-user.js');
function toImg(tSvg){
	//https://translated.turbopages.org/proxy_u/en-ru.ru.37d6bb59-67ade25e-b3d130b1-74722d776562/https/stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser
	
		const dataHeader = 'data:image/svg+xml;charset=utf-8'
		document.querySelector('#svg-container').innerHTML = tSvg.outerHTML;
		const $svg = document.querySelector('#svg-container svg');
		const $holder = document.getElementById('img-container');
		const destroyChildren = $element => {
		  while ($element.firstChild) {
			const $lastChild = $element.lastChild ?? false
			if ($lastChild) $element.removeChild($lastChild)
		  }
		}
		const loadImage = async url => {
		  const $img = document.createElement('img')
		  $img.src = url
		  return new Promise((resolve, reject) => {
			$img.onload = () => resolve($img)
			$img.onerror = reject
		  })
		}
		const serializeAsXML = $e => (new XMLSerializer()).serializeToString($e);
		const encodeAsUTF8 = s => `${dataHeader},${encodeURIComponent(s)}`;
		const encodeAsB64 = s => `${dataHeader};base64,${btoa(s)}`;
		const convertSVGtoImg = async e => {		  
		  const format = 'png'; 
		  destroyChildren($holder);		  
		  let $sample = '.template-background, rect, .contour, .text-curved ';
		  let $helpers = $svg.querySelectorAll($sample);
		  let $length = $helpers.length-1;	
		  for(let i=$length;i>=0;i--){
			if($svg.querySelectorAll($sample )[i])
				$svg.querySelectorAll($sample )[i].remove();
			}
			$helpers = $svg.querySelectorAll('.guideline');
			for(let i=0;i<$helpers.length;i++){
				$helpers[i].setAttribute('fill','none');
			 }
		  const svgData = encodeAsUTF8(serializeAsXML($svg));
		  const img = await loadImage(svgData);		  
		  const $canvas = document.createElement('canvas');
		  $canvas.width = $svg.clientWidth;
		  $canvas.height = $svg.clientHeight;
		  $canvas.getContext('2d').drawImage(img, 0, 0, $svg.clientWidth, $svg.clientHeight);
		  
		  const dataURL = await $canvas.toDataURL(`image/${format}`, 1.0)
		  //console.log(dataURL)
		  
		  const $img = document.createElement('img')
		  $img.src = dataURL
		  $holder.appendChild($img);
		  $svg.style.display='none';
		  //$img.style.display='none';
		  
		}
		convertSVGtoImg();
}

function get_model_by_id(list, tid){
	
	for(let i=0; i<list.length;i++){
		if (list[i]['id']==tid) return list[i];
	}
	return false;
}
function size_validation(){
	var width = parseInt(document.querySelector('#tools-size-width').value);
	if (width>max_size) {
		document.querySelector('#tools-size-width').value = max_size;
	}
	min_size = parseInt(current_model_data.widths[0]);
	if (width<min_size) {
	}
	size_setup();
}
function size_setup(e){	
		
		var width = document.querySelector('#tools-size-width').value;
		if (width>max_size) {
			document.querySelector('#tools-size-width').value = max_size;
			width = max_size;
		}
		min_size = parseInt(current_model_data.widths[0]);
		if (width<min_size) {
		}
		if(e && e.key){
			if(e.key == "Enter" || e.key == "Escape"){
				e.target.blur();
			}
		}
		document.querySelector('#tools-size-height').value = parseInt(width / adress.kwh);
		var badges = document.querySelectorAll('#default-size button');
		for(var i=0;i<badges.length;i++){
			
			if(badges[i].dataset['width'] == width)
				badges[i].style.background = 'burlywood';	
			else 
				badges[i].removeAttribute('style');	
		}
	update_summ();	
}
function update_adress_gfx(){
	_e('update_adress_gfx()');
	adress.setText('street', document.querySelector('#tools-street-line').value);
	adress.setText('adress', document.querySelector('#tools-street-text').value);
	adress.setText('dom',document.querySelector('#tools-dom-text').value);
	var color_bar = document.querySelector('#tools-background-color');
	color = color_bar.options[color_bar.selectedIndex].value;
	color_bar.style.color = color;
	var inv = document.querySelector("#invert-checkbox").checked;
	current_model_data.inverted = inv?1:0;	
	if(inv){
		adress.layerColor('background', color);
		adress.layerColor('foreground', 'white');
	}else{
		adress.layerColor('foreground', color);
		adress.layerColor('background', 'white');
	}
	adress.resizeTextAll();
}
function cs(str){
	return str.replace(/[|#&$%@"<>+]/g, "");	
}

function update_model_data(){
	current_model_data['userdata']= {};
	current_model_data['userdata']['street'] = adress.getText('street');
	current_model_data['userdata']['adress'] = adress.getText('adress');
	current_model_data['userdata']['dom'] = adress.getText('dom');
	current_model_data['userdata']['size'] = document.querySelector('#tools-size-width').value +' см Х '+ document.querySelector('#tools-size-height').value+' см';
	
	current_model_data['userdata']['font'] = adress.getFont();
	current_model_data['userdata']['material'] = document.querySelector('#tools-material').value;
	current_model_data['userdata']['color'] = document.querySelector('#tools-background-color')[document.querySelector('#tools-background-color').selectedIndex].dataset['oracal'];
	current_model_data['userdata']['description'] = document.querySelector('#tools-description').value;
	for(let key in current_model_data['userdata']){		
		current_model_data['userdata'][key]  = cs(current_model_data['userdata'][key]);
	}
	current_model_data['userdata']['square'] = parseFloat((document.querySelector('#tools-size-width').value*document.querySelector('#tools-size-height').value)/10000);
	return current_model_data['userdata'];
	//_e(current_model_data['userdata']);
}
function getprice(){
	var $price = 
			{"pvc4":{"cost":5800,"name":"ПВХ 4мм"},"composite":{"cost":8000,"name":"Композит 3мм "}}
	$actual_price = JSON.parse(document.querySelector('#price_list').innerText);
	if ($actual_price)return $actual_price;
	return $price;
}
function math_cost(){
	var cost = 0;	
	var price = getprice();
	var modeldata = update_model_data();
	//_e(modeldata);
	var mcost = price[modeldata.material].cost;
	cost = mcost * modeldata.square;cost*=1.1;
	cost = (parseInt(cost/10))*10;
	if(cost<500)cost = 500;
	current_model_data['userdata']['summ'] = cost;
	return cost;
}
function update_summ(){
	var summ = math_cost();
	document.querySelector('#adress-cost').innerHTML = "Стоимость: "+summ+" рублей";
}
function set_tools_listeners(){
	
	/*
	#tools-street-text
	#tools-dom-text
	#tools-background-color
	#tools-size-width
	#tools-size-heght
	*/
	//adrtext = adress.getText('adress');
	//adrdom = adress.getText('dom');
	
	var height = adress.svg.viewBox.baseVal.height;
	var width = adress.svg.viewBox.baseVal.width;
	var kwh = width/height;
	adress.kwh = kwh;
	adress.basewidth = parseInt(width);
	adress.baseheight = parseInt(height);
	
	document.querySelector('#tools-street-line').value = adress.getText('street');
	document.querySelector('#tools-street-text').value = adress.getText('adress');
	document.querySelector('#tools-dom-text').value = adress.getText('dom');
	
	document.querySelector('#tools-street-line').addEventListener('keyup', update_adress_gfx);
	document.querySelector('#tools-street-text').addEventListener('keyup', update_adress_gfx);
	document.querySelector('#tools-dom-text').addEventListener('keyup', update_adress_gfx);
	
	document.querySelector('#tools-background-color').addEventListener('change', update_adress_gfx);
	
	document.querySelector('#tools-street-line').addEventListener('focus', () => document.querySelector('#tools-street-line').select());
	document.querySelector('#tools-street-text').addEventListener('focus', () => document.querySelector('#tools-street-text').select());
	
	document.querySelector('#tools-dom-text').addEventListener('focus', () => document.querySelector('#tools-dom-text').select());
	
	if (document.querySelector('#tools-fontlist'))
		document.querySelector('#tools-fontlist').addEventListener('change',set_gfx_font);
	
	document.querySelector("#invert-checkbox").addEventListener('change',update_adress_gfx);
	
	set_tool_sizes();
	
	document.querySelector('#tools-street-line').addEventListener('focus', () => document.querySelector('#tools-street-line').select());
	document.querySelector('#tools-street-line').addEventListener('change', update_adress_gfx);
	
	document.querySelector('#tools-material').addEventListener('change', update_summ);
	
	document.querySelector('#adress-order').addEventListener('click', setOrderReport);
	document.querySelector('#reset-adress').addEventListener('click', ()=>{use_origin_model(current_model_data.id);});
	
	var streetlines = document.querySelectorAll('.street-title');
	for(let i=0;i<streetlines.length;i++){
		streetlines[i].addEventListener('click', usestreettype);
	}
	var models = document.querySelectorAll('#models-roaster svg');
	for(let i=0;i<models.length;i++){
		models[i].addEventListener('click', selectmodel);
	}
	update_summ();
	update_adress_gfx();
}
function validPhone(){
	let regexp=/^[\+]{1}[7-9]{1}[\(]{1}[0-9]{3}[\)]{1}[\s]{1}[0-9]{3}[\-][0-9]{2}[\-][0-9]{2}$/i;
	let str=document.querySelector('#order-phone').value;
	return regexp.test(str);
}
function checkValidOrder(e){
	_e('checkValidOrder()');
	
	var applyButton  = document.querySelector('#applyButton');
	var title = document.querySelector('#phone-title');		
	
	
	if(validPhone()){
		applyButton.disabled = false;
		title.style.color = '';
		if (e && (e.key == 'Enter' || e.key == 'Escape')) applyButton.focus();
		}	
		else{
			applyButton.disabled = true;
			title.style.color = 'red';
		}
	
}	
function setOrderReport(){
	update_model_data();
	_e(current_model_data);
	var orderReport = document.querySelector('#adress-order-report');
	var toolBar = document.querySelector('#adress-toolbox-holder');
	var roaster = document.querySelector('#models-roaster');
	orderReport.style.display="none";
	orderReport.innerHTML = "<span id=\"order-header\">Оформление заявки</b></span>";
	var reporttext = document.createElement('div');
	reporttext.id = "report-text";
	//reporttext.innerHTML = JSON.stringify(current_model_data);
	var color = current_model_data['userdata']['color'];
	var colorname="";
	for(let i=0;i<colorlist.length;i++){
		if(color ==colorlist[i].oracal){
			colorname = colorlist[i].name;
			break;
		}
	}
	var materialName = getprice()[current_model_data['userdata']['material']]['name'];
	var html = "";
	html+="";
	html+="<div id=\"orderinfo\">";
		html+="";
		html+="<div>Адресный указатель №</b>"+current_model_data['id']+"</b></div>";
		html+="<div>Содержание: <b>"+current_model_data['userdata']['street'];
		html+=" "+current_model_data['userdata']['adress'];
		html+=", д."+current_model_data['userdata']['dom'];
		html+="</b></div>";
		html+="<div>Размер: <b>"+current_model_data['userdata']['size']+"</b></div>";
		html+="<div>Материал: <b>"+materialName+"</b></div>";
		
		html+="<div>Цвет:  <b>"+colorname+"</b> (Oracal "+current_model_data['userdata']['color']+"m)</div>";
		if(current_model_data['userdata']['description'].length>0)
			html+="<div>Доп.сведения: "+current_model_data['userdata']['description']+"</div>";
		html+="<span class=\"divider\"></span>";
		html+="<div>Cумма: <b>"+math_cost()+"</b> рублей</div>";	
		
	html+="</div>";
	html+="<span class=\"divider\"></span>";
		html+="<div class=\"tool-selector-container\">";
		html+="<div class=\"tool-title\" id=\"phone-title\">Введите номер телефона (111)111-11-11</div>";
		html+="<input class=\"tools-input\" type=\"tel\" id=\"order-phone\" placeholder=\"+7(___)___-__-__\" pattern=\"[+]{1}[0-9]{1} [0-9]{3}-[0-9]{3}-[0-9]{2}-[0-9]{2}\" />";
	html+="</div>";
	html+="<span class=\"divider\"></span>";
	
	
	reporttext.innerHTML = html;
	
	var cancelButton = document.createElement('button');
	cancelButton.innerHTML = "Назад";
	cancelButton.id = 'cancelButton';
	cancelButton.onclick = cancelOrderReport;
	
	var applyButton = document.createElement('button');
	applyButton.onclick = applyOrderReport;	
	applyButton.id = 'applyButton';
	applyButton.innerHTML = "Отправить заявку";
	applyButton.disabled = true;
	
	orderReport.appendChild(reporttext);
	orderReport.appendChild(cancelButton);
	orderReport.appendChild(applyButton);
	
	var phone = document.querySelector('#order-phone');
	phone.addEventListener('keyup',checkValidOrder);
	phone.onblur = checkValidOrder;	
	phone.addEventListener('click', function(){document.querySelector('#order-phone').select()});
	$(function() {$("#order-phone").mask("+7(999) 999-99-99");});
	
	orderReport.style.display="block";
	toolBar.style.display = 'none';
	roaster.style.display = 'none';
	
	var notifyer = document.createElement('div');
	notifyer.id = "pd-notifyer";
	notifyer.innerHTML = "Нажимая кнопку <strong>«Отправить заявку»</strong>, Вы даете согласие на обработку своих персональных данных.";
	orderReport.appendChild(notifyer);
	
	checkValidOrder();
}

function applyOrderReport(){
	_e('applyOrderReport()');
	current_model_data['userdata']['phone']=document.querySelector('#order-phone').value;
	if(validPhone()){
		sendorderdata(current_model_data,showreportstatus)
	}	
}
function showreportstatus(json){
	_e(json);
	var report_container = document.querySelector("#adress-order-report");
	var report_header = document.querySelector("#order-header");
	document.querySelector("#pd-notifyer").remove();
	document.querySelector("#phone-title").remove();
	document.querySelector("#order-phone").remove();
	document.querySelector("#applyButton").remove();
	document.querySelector("#cancelButton").remove();
	html="";
	if(json['recieve_status'] == 200){
		report_header.innerHTML = "Успешно! Заявка офрмлена.";	
		html +="<div id=\"order-responce\">";
		html +="<h1>Ваша заявка принята.</h1>";
		html +="<div class=\"h2\">В ближайшее время с вами свяжется менеджер для оформления заявки: доставка, монтаж, оплата заказа.</div>";
		html +="<a href=\"/client/order/"+json['ordnum']+"?cid="+json['clientid']+"\" class=\"h2\" target=_blank  >Заказ №"+json['ordnum']+"</a>";
		html +=" :: <a href=\"/client/order/"+json['ordnum']+"?cid="+json['clientid']+"\" class=\"h2\" target=_blank download ><small>[cохранить]</small></a>";
		html +="<button onclick=\"javascript:navigation.reload();\" >Спасибо</button>";
		html +="</div>";
	}
		else{
			report_header.innerHTML = "Произоша ошибка при отправке заявки";	
			html +="<div id=\"order-responce\">";
			html +="<h1>Что-то пошло не так.</h1>";
			html +="<div class=\"h2\">Произоша ошибка при отправке заявки</div>";
			html +="<div class=\"h2\">Попробуите оформить чуть позже.</div>";
			html +="<button onclick=\"javascript:navigation.reload();\" >Хорошо</button>";
			html +="</div>";
		}
	report_container.innerHTML += html;
}

function cancelOrderReport(){
	var orderReport = document.querySelector('#adress-order-report');
	var toolBar = document.querySelector('#adress-toolbox-holder');
	var roaster = document.querySelector('#models-roaster');
	orderReport.style.display="none";
	toolBar.style.display = 'block';
	roaster.style.display = 'block';
}
function usestreettype(t){
	var badges = document.querySelectorAll('.street-title');
	for(var i=0;i<badges.length;i++){
		badges[i].removeAttribute('style');
	}
	t.target.style.background = 'burlywood';
	document.querySelector('#tools-street-line').value = t.target.value;
	update_adress_gfx();
}

function setSize(t,e){
	var badges = document.querySelectorAll('#default-size button');
	for(var i=0;i<badges.length;i++){
		badges[i].removeAttribute('style');
	}
	document.querySelector('#tools-size-width').value = t.target.dataset['width'];
	t.target.style.background = 'burlywood';
	size_setup();
	
}
function set_tool_sizes(){
	var def_sizes_cont = document.querySelector('#default-size');
	def_sizes_cont.innerHTML = "";
	var khw = adress.kwh;
	var widths = current_model_data['widths'];
	for(let i=0;i<widths.length;i++){
		var size_button  = document.createElement('button');
		size_button.dataset['width'] = widths[i];
		size_button.innerHTML = widths[i]+' см X ' + parseInt(widths[i]/khw) + ' см';		
		def_sizes_cont.appendChild(size_button);
		size_button.addEventListener('click',setSize,(i)=>{return i;});
	}
	if(widths[1]){
		document.querySelector('#tools-size-width').value = widths[1];
		document.querySelector('#tools-size-height').value = parseInt(widths[1]/khw);
	}else if(widths[1]){
		document.querySelector('#tools-size-width').value = widths[0];
		document.querySelector('#tools-size-height').value = parseInt(widths[0]/khw);
	}else{
		document.querySelector('#tools-size-width').value = parseInt(adress.basewidth/10);
		document.querySelector('#tools-size-height').value = parseInt(adress.baseheight/10);
	}
	
	document.querySelector('#tools-size-width').addEventListener('keyup', size_setup);
	document.querySelector('#tools-size-width').addEventListener('change', size_setup);
	document.querySelector('#tools-size-width').addEventListener('focus', () => document.querySelector('#tools-size-width').select());
	document.getElementById('tools-size-width').onblur =  size_validation;
	//_e(current_model_data);
}
function set_tool_font(){
	var fontselector = document.querySelector('#tools-fontlist');
	if(!fontselector)return;
	var fontname = adress.getFont();
	//_e(fontname);
	for(let i=0;i<fontselector.length;i++){
		//_e(i+': '+fontselector.options[i].value);
		if(fontselector.options[i].value == fontname){
			fontselector.selectedIndex = i;
			break;
		}
	}
}
function set_gfx_font(){
	var fontselector = document.querySelector('#tools-fontlist');
	adress.setFont(fontselector.value);
	update_adress_gfx();
}
function selectmodel(e){
	el = e.target;
	while(el.tagName != 'svg'){
		el = el.parentElement;
		if(el.tagName == 'div') return consloe.warn('selection error');
	}
	useModel(el);
}
function selectmodel_id(id){
	return document.querySelector('#models-roaster #adress-model-'+id);
}
function use_origin_model(id){
	var model = selectmodel_id(id);
	if(model)useModel(model,true);
}

function pickupcolor(index){
	document.querySelector("#tools-background-color").selectedIndex = parseInt(index);
	update_adress_gfx();
}
function setOptionColor(color){
	var opt = document.querySelector("#tools-background-color");
	for(let i=0;i<opt.options.length;i++){
		if(opt.options[i].value == color){
			opt.selectedIndex = parseInt(i);
			return true;
		}
	}
	return false;
}
function useModel(svg, origin=false){
	var tid	 = parseInt(svg.id.replace('adress-model-',''));
		current_model_data = get_model_by_id(models_list, tid);
	document.querySelector('.topic i').innerHTML = 'Модель №'+tid;		
	
	
	var holder = document.querySelector('adress-place-holder');
	if(holder){
		holder.innerHTML = svg.outerHTML;
	}else{
		var editor = document.querySelector(adressContainer);
		editor.innerHTML = "";  
		holder = document.createElement('div');		
		holder.id = 'adress-place-holder';
		holder.innerHTML = svg.outerHTML;
		//holder.appendChild(svg);
		editor.appendChild(holder);		
	}
	
	
	model = document.querySelector(".img_preview-holder svg");
	//document.querySelector('#reset-adress').href = '/dashboard/editor/adressmodel/'+tid;
	document.querySelector('#reset-adress').addEventListener('click', 
				()=>{use_origin_model(current_model_data.id);});
	breadcrumplink = document.querySelector('#adressnpp');
	breadcrumplink.href = '/catalog/id/'+tid;
	breadcrumplink.querySelector('span').innerHTML = tid;
	adress = new AddresObject(model);
	
	var height = adress.svg.viewBox.baseVal.height;
	var width = adress.svg.viewBox.baseVal.width;
	var kwh = width/height;
	adress.kwh = kwh;
	
	adress.basewidth = parseInt(width);
	adress.baseheight = parseInt(height);
	if(origin){
		var fgcolor = adress.getLayerColor('foreground'),
			bgcolor = adress.getLayerColor('background');
		setOptionColor(fgcolor);
		document.querySelector('#tools-street-line').value = adress.getText('street');
		document.querySelector('#tools-street-text').value= adress.getText('adress');
		document.querySelector('#tools-dom-text').value = adress.getText('dom');
		document.querySelector('#invert-checkbox').checked = false;
	}
	
	set_tool_sizes();
	set_tool_font();
	update_summ();
	update_adress_gfx();
	document.querySelector("#editor-top_window").scrollIntoView();
}

function renderToolbar(){
	_e('renderToolbar()');
	var toolbox = document.createElement('div');
	toolbox.id = 'adress-toolbox-holder';
	if(document.querySelector('#toolbar-html')){
		toolbox.innerHTML = document.querySelector('#toolbar-html').innerHTML;
		document.querySelector('#toolbar-html').remove();
	}
	var toolsbar = document.querySelector('#adress-toolbox-holder'); 
	toolsbar.innerHTML = "";
	toolsbar.appendChild(toolbox);
	set_tools_listeners();
	set_tool_font();	
	/*******/
	_e('toolbar ready');
}
function renderEditor(){
	_e('renderEditor()');
	var editor = document.querySelector(adressContainer);
	var holder = document.createElement('div');
	editor.innerHTML = "";  
	holder.id = 'adress-place-holder';
	holder.appendChild(adress.svg);
	editor.appendChild(holder);
	
	_e('editor ready');
	setTimeout(function(){
	if(document.querySelector(".loader"))document.querySelector(".loader").remove();
	document.querySelector(".catalog_item").style.display = 'block';
	document.querySelector("#models-roaster").style.display = 'block';
	},1000);
	//update_adress_gfx();
}
function getCookie(name) {
  let cookie = document.cookie.split('; ').find(row => row.startsWith(name + '='));
  return cookie ? cookie.split('=')[1] : null;
}
function sendorderdata(data,callback){
	var url = '/dashboard/editor/acceptorder/'+data.id;
	var $csrf_token  = document.querySelector('[name=_token]').value;
	var repstat = 500;
	fetch(url, {
			method: "POST",
			headers: {
				//'Accept': 'application/json',
				'Content-Type': 'x-www-form-urlencoded',
				'X-CSRF-TOKEN': $csrf_token
			},
			credentials: 'include',
			body: JSON.stringify(data)
		})
		.then( (response) => {
			repstat = response.status;
			if (repstat == 200)
				return response.json();
			else 
				return {'recieve_status':repstat};
		})
		.then ((json)=>{json['recieve_status']=repstat; callback(json);})
}

function start(target){
	var target = document.querySelector(target);
	var s = document.createElement('script');
		s.type='text/json';
		s.src = '/api/svgedit/adressfont/json';
		s.id = 'fontlist';		
		document.body.appendChild(s);
		
		fetch("/api/svgedit/adressfont/css", {
		  method: "get",
		  headers: {
			'Accept': 'text/html',
			'Content-Type': 'text/html'
			}
		})
		.then( (response) => {
			_e(response.status);
			return response.text();
		})
		.then((data) => {
			//_e(data);
			var css = document.createElement('style');
				css.innerHTML = data;
				document.body.appendChild(css);
				var head  = document.getElementsByTagName('head')[0];
				var link  = document.createElement('link');
				//link.id   = cssId;
				link.rel  = 'stylesheet';
				link.type = 'text/css';
				link.href = '/css/adressmodel_usr_editor.css?'+parseInt(Math.random()*10000);
				//link.media = 'all';
				head.appendChild(link);
				imports.fonts = true;
				//update_adress_gfx();//renderEditor();
		});
		
		fetch("/api/svgedit/adressfont/colorpalete", {
		  method: "get",
		  headers: {
			'Accept': 'text/html',
			'Content-Type': 'text/html'
			}
		})
		.then( (response) => {
			_e(response);
			return response.text();
		})
		.then((data) => {
			//_e(data);
			//colorlist = (data);
			imports.colors = true;
		})
		.then ((e)=>{ 
		renderEditor();renderToolbar();
		document.fonts.ready.then(function () {
			var font = adress.getFont();
			var fready = document.fonts.check('1em '+font);
			_e('fonts ready');
			/*_e(font+'?'+fready);
			if(fready )update_adress_gfx();
			else _e('timeout '+font);*/
			//setTimeout(update_adress_gfx, 1000)
			}
		);
		document.fonts.onloadingdone = function (fontFaceSetEvent) {
			_e('onloadingdone we have ' + fontFaceSetEvent.fontfaces.length + ' font faces loaded');
			update_adress_gfx();
			//document.fonts.forEach((e)=>(_e(e.family)))
		};
		//
		})
		//.finally(setTimeout(update_adress_gfx, 1000));
	
}
var id = selected_model_id;
var min_size=25, max_size=180;
var model = document.querySelector(".img_preview-holder svg");
var holder = document.querySelector(".img_preview-holder").id = 'adress-editor';
var imports={}, colorlist ,fontlist;

var models_list = JSON.parse(document.querySelector('#adress_list').innerHTML);
    colorlist = JSON.parse(document.querySelector('#colors-palette').innerHTML);
	fontlist = JSON.parse(document.querySelector('#fontlist').innerHTML);

var current_model_data = get_model_by_id(models_list, id); 
var adressContainer =  '#adress-editor';
var	adress = new AddresObject(model);
start(adressContainer);




//adress.layerColor('foreground', 'red')
//adress.layerColor('background', '#2f5cbd')