Mapeate.Web = function(mapeate, entradas){

    const self = this, 
          diccionario = {};
    let iniciado = false, 
        hilo_de_proceso = null;

    const constructor = () => {

        mapeate.print("info", "mapeate_web_construyendose");

        mapeate.print("ok", "mapeate_web_construido");
    
    };

    this.iniciar = callback => {

        const terminar = estado => typeof callback == "function" && callback(estado);

        if(iniciado){
            terminar(false);
            return false;
        };
        iniciado = true;

        hilo_de_proceso = mapeate.anadir_hilo_de_proceso(hilo_de_proceso_metodo);

        (JSON.parse(atob(entradas.diccionario)) || []).forEach(elemento => diccionario[elemento.clave] = {
            links : elemento.links.map(link => mapeate.vistas.coger("elemento_diccionario_link", {
                tipo : link.replace(/^[^\:]+\:\/{2}([^\/]+)(\/.*)?$/, "$1").replace(/[^a-z0-9]+/gi, "_"), 
                link : link
            })).join(""), 
            descripcion : elemento.descripcion.map(parrafo => `<p>` + parrafo + `</p>`).join("")
        });

        addEventListener("mouseover", analizar_estado);

        console.log(diccionario);

        terminar(true);

        return true;
    };

    const hilo_de_proceso_metodo = () => {

        mapeate.si_mismo.querySelectorAll("[data-diccionario-sin-procesar]").forEach(elemento => {
            elemento.setAttribute("data-diccionario", elemento.getAttribute("data-diccionario-sin-procesar"));
            elemento.setAttribute("onmouseover", mapeate.nombre_objeto + ".web.activar_diccionario(this, event);");
            elemento.removeAttribute("data-diccionario-sin-procesar");
        });

    };

    this.marcar_elemento_diccionario = (elemento, evento) => elemento.setAttribute("data-encima", true);

    this.desmarcar_elemento_diccionario = (elemento, evento) => elemento.setAttribute("data-encima", false);

    this.activar_diccionario = (elemento, evento) => {

        elemento.hasAttribute("data-diccionario-hash") || 
        elemento.setAttribute("data-diccionario-hash", mapeate.hash());

        const hash = elemento.getAttribute("data-diccionario-hash");

        self.marcar_elemento_diccionario(elemento);

        if(mapeate.si_mismo.querySelector(".diccionario-elemento[data-diccionario-hash=" + hash + "]"))
            return;

        const texto = elemento.innerText, 
              limites = elemento.getBoundingClientRect(), 
              pestana = elemento.appendChild(document.createElement("fieldset")), 
              clave = elemento.getAttribute("data-diccionario"), 
              cuerpo = document.querySelector("body"), 
              [clave_x, clave_y] = [
                  limites.x > cuerpo.offsetWidth / 2 ? "right" : "left", 
                  limites.y > cuerpo.offsetHeight / 2 ? "bottom" : "top"
              ];

        pestana.setAttribute("class", "diccionario-elemento");
        pestana.setAttribute("data-diccionario-hash", hash);
        if(limites.x > cuerpo.offsetWidth / 2)
            pestana.style.right = (cuerpo.offsetWidth - limites.right) + "px";
        else 
            pestana.style.left = limites.left + "px";
        if(limites.y > cuerpo.offsetHeight / 2){
            console.log(cuerpo.offsetHeight - limites.bottom + elemento.offsetHeight);
            pestana.style.bottom = (cuerpo.offsetHeight - limites.bottom + elemento.offsetHeight) + "px";
        }else 
            pestana.style.top = (limites.top + elemento.offsetHeight) + "px";

        pestana.innerHTML = mapeate.vistas.coger("elemento_diccionario", {
            ...diccionario[clave], 
            texto : texto
        });

    };

    const analizar_estado = evento => {

        let elemento = evento.target, 
            eliminar = true, 
            hash;

        do{
            if(elemento.hasAttribute && elemento.hasAttribute("data-diccionario-hash")){
                eliminar = false;
                hash = elemento.getAttribute("data-diccionario-hash");
                break;
            };
        }while(elemento = elemento.parentNode);

        document.querySelectorAll(".diccionario-elemento").forEach(elemento => (
            eliminar || elemento.getAttribute("data-diccionario-hash") != hash
        ) && elemento.remove());

    };

    constructor();

};