/**
 * @file input-multiling.js
 * @version 20191006 ms
 * @type JS
 * GUI-Komponente zur Darstellung mehrsprachiger Text-Input-Felder mit Landesflagge zum Umschalten der Sprache
 */

class KLangSelector {
	/**
	 * @class KLangSelector
	 * @constructor komplex
	 * @param parent
	 * @param w
	 * @param h
	 * @param langs
	 * @param lang
	 * @param {function} onChange
	 */
	constructor(parent,w,h,langs,lang,onChange){
		this.flag={
			de:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgMC4wOCAwLjA1Ij48cmVjdCB3aWR0aD0iMC4wNzk5OTk5OTgiIGhlaWdodD0iMC4wNTAwMDAwMDEiIHg9IjEuNDEyMzQ4N2UtMDMzIiB5PSI3LjQ1MDU4MDdlLTAxMCIgc3R5bGU9ImZpbGw6IzAwMDAwMCIvPjxyZWN0IHdpZHRoPSIwLjA3OTk5OTk5OCIgaGVpZ2h0PSIwLjAzMzMzMzMzMSIgeD0iMS40MTIzNDg3ZS0wMzMiIHk9IjAuMDE2NjY2NDUxIiBzdHlsZT0iZmlsbDojZGQwMDAwIi8+PHJlY3Qgd2lkdGg9IjAuMDc5OTk5OTk4IiBoZWlnaHQ9IjAuMDE2NjY2NjY2IiB4PSIxLjQxMjM0ODdlLTAzMyIgeT0iMC4wMzMzMzMyMzgiIHN0eWxlPSJmaWxsOiNmZmNlMDAiLz48L3N2Zz4=",
			en:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgMC44IDAuNSI+PGNsaXBQYXRoPjxwYXRoIGQ9Im0gMzAsMTUgaCAzMCB2IDE1IHogbSAwLDAgViAzMCBIIDAgeiBtIDAsMCBIIDAgViAwIHogbSAwLDAgViAwIGggMzAgeiIvPjwvY2xpcFBhdGg+PHBhdGggZD0iTSAyLjgzOTQ3MjhlLTUsNi4zMTA2ODcyZS01IFYgMC41MDA1OTA5MiBIIDAuNzk5OTcxNiBWIDYuMzEwNjg3MmUtNSB6IiBzdHlsZT0iZmlsbDojMDAyNDdkIi8+PHBhdGggZD0iTSAyLjgzOTQ3MjhlLTUsNi4zMTA2ODcyZS01IDAuNzk5OTcxNiwwLjUwMDU5MDkyIG0gMCwtMC41MDA1Mjc4MTMxMjggTCAyLjgzOTQ3MjhlLTUsMC41MDA1OTA5MiIgc3R5bGU9InN0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDowLjA4OTQ4Njc1Ii8+PHBhdGggZD0iTSAwLDAgNjAsMzAgTSA2MCwwIDAsMzAiIHRyYW5zZm9ybT0ibWF0cml4KDAuMDEzMzMyMzgsMCwwLDAuMDE2Njg0MjUsMi44Mzk0NzI4ZS01LDYuMzEwNjg3MmUtNSkiIGNsaXAtcGF0aD0idXJsKCN0KSIgc3R5bGU9InN0cm9rZTojY2YxNDJiO3N0cm9rZS13aWR0aDo0Ii8+PHBhdGggZD0iTSAwLjQwMDAwMDA0LDYuMzEwNjg3MmUtNSBWIDAuNTAwNTkwOTIgTSAyLjgzOTQ3MjhlLTUsMC4yNTAzMjU3OCBIIDAuNzk5OTcxNiIgc3R5bGU9InN0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDowLjE0OTE0NDU5Ii8+PHBhdGggZD0iTSAwLjQwMDAwMDA0LDYuMzEwNjg3MmUtNSBWIDAuNTAwNTkwOTIgTSAyLjgzOTQ3MjhlLTUsMC4yNTAzMjU3OCBIIDAuNzk5OTcxNiIgc3R5bGU9InN0cm9rZTojY2YxNDJiO3N0cm9rZS13aWR0aDowLjA4OTQ4Njc1Ii8+PC9zdmc+",
			pl:"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEwIiB2aWV3Qm94PSIwIDAgMC4yIDAuMTI1Ij48cmVjdCB3aWR0aD0iMC4yIiBoZWlnaHQ9IjAuMTI1IiB4PSIwIiB5PSI2LjkzODg5MzllLTAxOCIgc3R5bGU9ImZpbGw6I2ZmZmZmZiIvPjxyZWN0IHdpZHRoPSIwLjIiIGhlaWdodD0iMC4wNjI1IiB4PSIwIiB5PSIwLjA2MjUiIHN0eWxlPSJmaWxsOiNkYzE0M2MiLz48L3N2Zz4="
		};

		this.langs=langs;
		this.onChange=onChange;

		this.img=document.createElement("img");
		this.img.style.cursor="pointer";
		if(w) this.img.width=w;
		if(h) this.img.height=h;
		parent.appendChild(this.img);
		var m=this;
		/// add DOMEvent click
		this.img.addEventListener("click",function(e){m.Show();e.stopPropagation();});
		///add DOMEvent load
		this.img.addEventListener("load",function(){
			var w=this.offsetWidth,h=this.offsetHeight;
			if(!w){
				var c=this.cloneNode(true);
				document.body.appendChild(c);
				w=c.offsetWidth;h=c.offsetHeight;
				document.body.removeChild(c);
			}
			m.OnResize(w,h);
		});
		this.img.src=this.flag[lang];
	
		this.LangCaptions={"en":"English","de":"Deutsch","pl":"Polski"};
	}

	/**
	 * @fn Show
	 * @memberof KLangSelector
	 * Private method.
	 */
	Show(){
		if(this.win){this.Close();return;}
		var r=this.img.getBoundingClientRect();
		var x=r.right+pageXOffset;
		this.win=document.createElement("div");
		var st=this.win.style;st.position="absolute";st.right=(document.documentElement.clientWidth-x-2)+"px";st.zIndex="2099";st.border="1px solid #73808D";st.backgroundColor="#FFFFFF";st.padding="4px";
		if(document.documentElement.clientHeight-r.bottom>r.top)
			this.win.style.top=(r.bottom+1+pageYOffset)+"px";
		else
			this.win.style.bottom=(document.documentElement.clientHeight-r.top-pageYOffset+1)+"px";

		var t=document.createElement("table");st=t.style;st.borderSpacing="0";st.borderCollapse="collapse";this.win.appendChild(t);
		for(var a=0;a<this.langs.length;a++){
			var v=this.langs[a];
			var tr=t.insertRow();
			tr.style.cursor="pointer";
			this.HookEvent(tr,"click",this,"Hit",v);
			var td=tr.insertCell(0);st=td.style;st.lineHeight="0";st.verticalAlign="middle";st.padding="2px";
			var i=document.createElement("img");i.width="24";i.src=this.flag[v];td.appendChild(i);
			td=tr.insertCell(1);st=td.style;st.verticalAlign="middle";st.padding="2px";
			td.innerHTML=this.LangCaptions[v];
		}
		document.body.appendChild(this.win);
		this.win.addEventListener("click",function(e){e.stopPropagation()});
		var m=this;
		this.dmcl=document.addEventListener("click",function(){m.Close()});
	};

	/**
	 * @fn Resize
	 * @memberof KLangSelector
	 * Public method.
	 */
	Resize(){
		this.OnResize(this.offsetWidth,this.offsetHeight);
	};

	/**
	 * @fn OnResize
	 * @memberof KLangSelector
	 * Public method.
	 */
	OnResize(w,h){
	};

	/**
	 * @fn Close
	 * @memberof KLangSelector
	 * Private method.
	 */
	Close(){
		if(this.win){
			document.removeEventListener("click",this.dmcl);
			document.body.removeChild(this.win);delete this.win;
			this.OnClose();
		}
	};

	/**
	 * @fn OnClose
	 * @memberof KLangSelector
	 * Public method.
	 */
	OnClose(){
		// can be overwritten
	};

	/**
	 * @fn Hit
	 * @memberof KLangSelector
	 * Private method.
	 */
	Hit(l){
		this.Close();
		this.img.src=this.flag[l];
		this.onChange(l);
	};

	/**
	 * @fn HookEvent
	 * @memberof KLangSelector
	 * @params o,eventName,target,funcName,funcParam
	 * Private method.
	 */
	HookEvent(o,eventName,target,funcName,funcParam){
		o.addEventListener(eventName,function(e){target[funcName](funcParam)});
	};
}

//function KMakeInputeMultiLing(o,langs,values,lang) {
//	var i=Math.floor((Math.random()*9999999999)+1);
//	return "<p id='ctrl"+i+"'></p><script>var ctrl"+i+"=new KMultiLingInput(document.getElementById('ctrl"+i+"'),'"+value.replace("'","\\'")+"',['"+langs.join("','")+"']);</script>";
//	o.kControl=new KMultiLingInput(o,langs.split(","),values?JSON.parse(values):{},lang?lang:langs.split(",")[0]);
//};

class KInputMultiLing{
	/**
	 * @class KInputMultiLing
	 * @constructor complex 
	 * @param o
	 * @param storeFunc
	 */
	constructor(o,storeFunc){
		this.langs=o.getAttribute("data-languages").split(",");
		var lang;
	
		/// @var {array} values @memberof KLangSelector
		this.values={};
	
		if(o.getAttribute("data-value")){
			var j=JSON.parse(o.getAttribute("data-value"));
			if(j){
				if(j.n) lang=j.n;
				if(j.s) this.values=j.s;
			}
		}
		if(o.getAttribute("data-language")) lang=o.getAttribute("data-language");
	
		/// @var lang @memberof KLangSelector
		this.lang=lang && this.langs.indexOf(lang)>-1?lang:this.langs[0];
	
		/// @var type @memberof KLangSelector
		this.type=o.tagName.toLowerCase();

		var style={},cs=window.getComputedStyle(o,null);
		for(var a=0;a<cs.length;a++) style[this.camelCase(cs[a])]=cs.getPropertyValue(cs[a]);
		this.w=o.clientWidth;
		this.h=o.clientHeight-parseInt(style.paddingTop)-parseInt(style.paddingBottom);

		this.value={s:this.values,n:this.lang};
		this.storeFunc=storeFunc;
		if(!storeFunc){
			this.hidden=document.createElement("input");
			this.hidden.type="hidden";
			this.hidden.id=o.id;
			this.hidden.name=o.name;
			this.hidden.value=JSON.stringify(this.value);
			o.parentNode.insertBefore(this.hidden,o);
			this.hidden.focus=function(){this.input.focus()};
		}

		/// @var {DOMNode::div} outer @memberof KInputMultiLing
		this.outer=document.createElement("div");
	
		var st=this.outer.style;
		st.backgroundColor=style.backgroundColor;
		st.width=this.w+"px";
		st.whiteSpace="nowrap";
		st.overflow="hidden";
		st.cssFloat="left";
		for(var key in style) if(key.substr(0,6)=="border" || key.substr(0,6)=="margin") this.outer.style[key]=style[key];
		o.parentNode.replaceChild(this.outer,o);
	
		/// @var {DOMNode::??} input @memberof KInputMultiLing type is tagType from construktor param o
		this.input=document.createElement(this.type);
		if(this.type=="input") this.input.type="text";
		if(o.maxLength > 0) this.input.maxLength=o.maxLength;
		if(o.rows) this.input.rows=o.rows;
		if(o.disabled) this.input.disabled=true;
		if(o.tabIndex) this.input.tabIndex=o.tabIndex;
		var st=this.input.style;
		st.margin=st.border="0";
		st.padding=style.paddingTop+" "+style.paddingRight+" "+style.paddingBottom+" "+style.paddingLeft;
		st.width=this.w+"px";
		st.height=this.h+"px";
		st.cssFloat="left";
		st.resize="none";
		st.outline="none";
		st.fontFamily=style.fontFamily;
		st.fontSize=style.fontSize;
		st.fontWeight=style.fontWeight;
		st.fontStyle=style.fontStyle;
	
		this.input.wrapped=true;
		this.outer.appendChild(this.input);
		var m=this;
		//this.input.onkeyup=function(){m.Store()};
		//this.input.onpaste=function(){setTimeout(function(){m.Store()},0)};
		//this.input.oncut=function(){setTimeout(function(){m.Store()},0)};
		this.input.onblur=function(){if(this.oldValue!=this.value) m.Store()};
	
		var marginSize=1;
		var h=this.h+parseInt(style.paddingTop)+parseInt(style.paddingBottom)-2*marginSize;
		if(this.type=="textarea") h=KInputMultiLing.prototype.lastH? KInputMultiLing.prototype.lastH : Number(this.input.rows)-2;
		KInputMultiLing.prototype.lastH=h;
	
		/// @var {KLangSelector} langSelector @memberof KInputMultiLing
		this.langSelector=new KLangSelector(this.outer,null,h,this.langs,this.lang,function(lang){m.ChangeLang(lang);m.input.focus();});
		st=this.langSelector.img.style;st.margin=marginSize+"px";st.verticalAlign="top";
		this.langSelector.OnResize=function(w,h){m.input.style.width=(m.w-w-2-parseInt(style.paddingLeft)-parseInt(style.paddingRight))+"px"};
		this.langSelector.OnClose=function(){m.input.focus()};
	
		this.Refresh();
	}

	/**
	 * @fn set
	 * @memberof KInputMultiLing
	 * @param value
	 * @param lang
	 * Private method.
	 */
	set(value,lang){
		if(!value) value={s:{}};
		if(!lang && value.n && this.langs.indexOf(value.n)>-1) lang=value.n;
		if(lang && this.langs.indexOf(value.n)>-1-1) this.lang=lang;
		this.values=value.s;
		this.Refresh();
	}

	/**
	 * @fn Refresh
	 * @memberof KInputMultiLing
	 * Private method.
	 */
	Refresh(){
		var v=this.values[this.lang];if(v==null || v==undefined) v="";
		this.input.value=v;
		this.input.oldValue=v;
	}

	/**
	 * @fn ChangeLang
	 * @memberof KInputMultiLing
	 * @param lang
	 * Public method.
	 */
	ChangeLang(lang){
		this.lang=lang;
		this.Refresh();
	}

	/**
	 * @fn Store
	 * @memberof KInputMultiLing
	 * Public method.
	 */
	Store(){
		this.values[this.lang]=this.input.value;
		this.value={s:this.values,n:this.lang};
		if(this.storeFunc) this.storeFunc(this.value); else this.hidden.value=JSON.stringify(this.value);
	}

	/**
	 * @fn camelCase
	 * @memberof KInputMultiLing
	 * @param input
	 * Private method.
	 */
	camelCase(input){
		return input.toLowerCase().replace(/-(.)/g,function(match, group1){return group1.toUpperCase()});
	}

	/**
	 * @fn focus()
	 * @memberof KInputMultiLing 
	 * Private method.
	 */
	focus(){
		this.input.focus()
	}
}

/**
 * @fn KInputMultilingInit
 */
function KInputMultilingInit(){
	var inputs=document.getElementsByTagName("input");
	for(var a=0;a<inputs.length;a++) if(inputs[a].type!="hidden" && !inputs[a].wrapped) if(inputs[a].getAttribute("data-languages")) new KInputMultiLing(inputs[a]);
	inputs=document.getElementsByTagName("textarea");
	for(a=0;a<inputs.length;a++) if(!inputs[a].wrapped) if(inputs[a].getAttribute("data-languages")) new KInputMultiLing(inputs[a]);
}

//window.addEventListener("load",function(){KInputMultilingInit()});