/*
	krpano - super simple html5 text input plugin
*/

var krpanoplugin = function()
{
	var local = this;

	var krpano = null;
	var plugin = null;

	var inputelement = null;

	local.registerplugin = function(krpanointerface, pluginpath, pluginobject)
	{
		krpano = krpanointerface;
		plugin = pluginobject;

		inputelement = document.createElement("input");
		inputelement.type = "search";
		inputelement.id = "search_element";
		inputelement.name = "search_element";
		inputelement.autocomplete = "off";
		inputelement.style.width  = "100%";
		inputelement.style.height = "100%";
		inputelement.style.backgroundColor = "#FFFFFF";
		inputelement.style.color = "#333333";
		inputelement.style.textAlign = "center"
		inputelement.style.border = 0;
		inputelement.style.opacity = 1.0;
		
		//inputelement.style.outline = none;

		plugin.registerattribute("text", "", text_set, text_get);
    plugin.registerattribute("textval", inputelement.value);
		plugin.registerattribute("onchanged", null);



		inputelement.addEventListener("change", text_changed, true);
		//inputelement.addEventListener("search", text_changed);
		inputelement.addEventListener("keyup", text_changed, true);
		inputelement.addEventListener("mousedown", function(e){ e.stopPropagation(); }, true);
		inputelement.addEventListener('touchstart',text_click, false);

		plugin.sprite.appendChild(inputelement);

		document.getElementById('search_element').focus();

		// document.addEventListener('DOMContentLoaded', () => {
		//     Array.prototype.slice.call(document.querySelectorAll('input'))
		//         .filter((el) => el.hasAttribute('autofocus'))[0]
		//         .focus()
		// })

		//document.body.ontouchend = function() { document.querySelector('[name="search_element"]').focus(); };

		//krpano.call('trace(JS PLUGIN LOADED)');
	}

	function text_click()
	{
		//inputelement.focus();
		inputelement.blur();
	}


	local.unloadplugin = function()
	{
		plugin = null;
		krpano = null;
	}

	function text_set(newtext)
	{
    //alert(newtext);
    	if(newtext != null) {
			inputelement.value = unconvert(newtext);
    	}
	}

	function text_get()
	{
    	return convert(inputelement.value);
	}

	function text_changed()
	{
    	krpano.call(plugin.onchanged, plugin);
    	//console.log(this.value);
	}

	function convert(str)
	{
	    str = str.replace(/&/g, "&");
	    str = str.replace(/>/g, ">");
	    str = str.replace(/</g, "&#60;");
	    str = str.replace(/"/g, "ʺ");
	    str = str.replace(/'/g, "&#039;");
	    str = str.replace(/,/g, "&#44;");
	    return str;
	}

	function unconvert(str)
	{
	    str = str.replace(/&amp;/g, "&");
	    str = str.replace(/&#62;/g, ">");
	    str = str.replace(/&#60;/g, "<");
	    // str = str.replace(/"/g, "ʺ");
	    str = str.replace(/&#039;/g, "'");
	    str = str.replace(/&#44;/g, ",");
	    return str;
	}



};