window._web_wire_evt_queue = [];

window._web_wire_queue_worker = function() {
  if (typeof web_ui_wire_handle_event === 'function') {
     while (window._web_wire_evt_queue.length > 0) {
        let evt = window._web_wire_evt_queue.shift();
        web_ui_wire_handle_event(JSON.stringify(evt));
     }
  }
  window.setTimeout(window._web_wire_queue_worker, 5);
};
window.setTimeout(window._web_wire_queue_worker, 15);

window._web_wire_put_evt = function(evt) { window._web_wire_evt_queue.push(evt); };

window._web_wire_event_info = function(e, id, evt) {
  let obj = {};
  if (e == 'input') {
     obj['data'] = evt.data;
     obj['dataTransfer'] = evt.dataTransfer;
     obj['inputType'] = evt.inputType;
     obj['isComposing'] = evt.isComposing;
     obj['value'] = document.getElementById(id).value;
  } else if (e == 'change') {
     obj['value'] = document.getElementById(id).value;
  } else if (e == 'mousemove' || e == 'mouseover' || e == 'mouseenter' || 
			 e == 'mouseleave' || e == 'click' || e == 'dblclick' || e == 'contextmenu' ||
			 e == 'mousedown' || e == 'mouseup' ) {
     obj['altKey'] = evt.altKey;
     obj['buttons'] = evt.buttons;
     obj['clientX'] = evt.clientX;
     obj['clientY'] = evt.clientY;
     obj['ctrlKey'] = evt.ctrlKey;
     obj['metaKey'] = evt.metaKey;
     obj['movementX'] = evt.movementX;
     obj['movementY'] = evt.movementY;
     obj['screenX'] = evt.screenX;
     obj['screenY'] = evt.screenY;
     obj['shiftKey'] = evt.shiftKey;
     obj['x'] = evt.x;
     obj['y'] = evt.y;
  } else if (e == 'keydown' || e == 'keyup' || e == 'keypress') {
     obj['key'] = evt.key;
     obj['code'] = evt.code;
     obj['altKey'] = evt.altKey;
     obj['ctrlKey'] = evt.ctrlKey;
     obj['metaKey'] = evt.metaKey;
     obj['repeat'] = evt.repeat;
     obj['shiftKey'] = evt.shiftKey;
  }
        // More events can be added like pointerEvent, clipboardEvent, etc.
  return obj;
};

window._web_wire_get_evts = function() {
   let v = _web_wire_evt_queue;
   _web_wire_evt_queue = [];
   return JSON.stringify(v);      // This needs no extra type info, as it is internally used only
};

window._web_wire_bind_evt_ids = function(win_nr, selector, event_kind) {
   try {
     let nodelist = document.querySelectorAll(selector);
     if (nodelist === undefined || nodelist === null) {
        return 'json:[]';
     }
     let ids = [];
     nodelist.forEach(function(el) { 
       let el_id = el.getAttribute('id');
       let el_tag = el.nodeName;
       let el_type = el.getAttribute('type');
       if (el_type === null) { el_type = ''; }
       if (el_id !== null) {
         el.addEventListener(event_kind, 
           function(e) {
              let obj = {evt: event_kind, id: el_id, selector: selector, window: win_nr, 
						 js_evt: window._web_wire_event_info(event_kind, el_id, e) };
              window._web_wire_put_evt(obj);
           }
         );
         let info = [ el_id, el_tag, el_type ];
         ids.push(info);
       }
    });
    return 'json:' + JSON.stringify(ids);
  } catch(e) {
    return 'json:[]';
  }
};

window._web_wire_resize_timeout = false;
window.addEventListener('resize', function() {
   clearTimeout(window._web_wire_resize_timeout);
   let f = function() {
	 let obj = { selector: 'global', evt: 'window-resize', h: window.outerWidth, w: window.outerHeight };
	 window._web_wire_put_evt(obj);
   };
   window._web_wire_resize_timeout = setTimeout(f, 250);
});

window._web_wire_x = window.screenX;
window._web_wire_y = window.screenY;
window._web_wire_move_interval = setInterval(function() {
   let x = window.screenX;
   let y = window.screenY;
   if (x != window._web_wire_x || y != window._web_wire_y) {
      window._web_wire_x = x;
      window._web_wire_y = y;
	  let obj = { selector: 'global', evt: 'window-move', x: x, y: y };
	  window._web_wire_put_evt(obj);
   }
}, 500);


document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    //if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
    //    alert("hi 1");
    //}

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
		let obj = { selector: 'global', evt: 'html-loaded' };
		window._web_wire_put_evt(obj);
    }
});
//document.body.onload = function() {
//	let obj = { selector: 'global', evt: 'html-loaded' };
//	window._web_wire_put_evt(obj);
//};