var cartel;
var textoCartel;
var cartelTexto;

var timerID;
var X;
var Y;
var Xant;
var Yant;
var habilAyuda;
var habilAyuda2;
var ayuda = [];
var tiempoEspera = 500;

function capturarMouse(event){
    X = event.clientX + window.pageXOffset;
    Y = event.clientY + window.pageYOffset;
    if (habilAyuda2) mostrarAyuda();
}
function compara(){
    if ((Xant == X) && (Yant == Y) && habilAyuda){
        cartel.style.display = "block";
        mostrarAyuda();
        habilAyuda2 = true;
        habilAyuda = false;
    }
    Xant = X;
    Yant = Y;
}
function mostrarAyuda(){
    
    cartel.style.left = (X + (screen.width/200))+"px";
    cartel.style.top = (Y-(screen.height/16))+"px"; //todo: poner la posicion del catel relativa la tamaño
}
function iniciaAyuda(event){
    habilAyuda = true;
    cartelTexto.removeChild(textoCartel);
    textoCartel = document.createTextNode(ayuda[this.id]);
    cartelTexto.appendChild(textoCartel);
    timerID = setInterval(compara, tiempoEspera);
}
function iniciaAyudaClick(event){
    habilAyuda = true;
    cartelTexto.removeChild(textoCartel);
    textoCartel = document.createTextNode(ayuda[this.id]);
    cartelTexto.appendChild(textoCartel);
    cartel.style.display = "block";
    mostrarAyuda();
}
function ocultarAyuda(){
    cartel.style.display = "none";
    habilAyuda = false;
    habilAyuda2 = false;
    clearInterval (timerID);
}
function registraAyudaPasar(objeto, textoAyuda){
    objeto.onmouseover = iniciaAyuda;
    objeto.onmouseout = ocultarAyuda;
    ayuda[objeto.id] = textoAyuda;
}
function registraAyudaClick(objeto, textoAyuda){
    objeto.onclick = iniciaAyudaClick;
    objeto.onmouseout = ocultarAyuda;
    ayuda[objeto.id] = textoAyuda;
}
function initAyuda(){
    cartel = document.getElementById("cartel");
    cartelTexto = document.getElementById("cartelTexto");
    document.onmousemove = capturarMouse;
    timerID = setInterval(compara, tiempoEspera);
    textoCartel = document.createTextNode("hola");
    cartelTexto.appendChild(textoCartel);
    ocultarAyuda();
    
    registraAyudaClick(document.getElementById("ayudaAmplia"),"Aparecerán las rectas que contengan TODOS los ingredientes que seleccionaste combinados o no con otros ingredientes no elegidos.");
    registraAyudaClick(document.getElementById("ayudaExacta"),"Aparecerán las recetas que contengan ÚNICAMENTE los ingredientes que seleccionaste. La receta puede incluir algunos o todos los ingredientes elegidos.");
    registraAyudaClick(document.getElementById("ayudaSelecText"),"Escribí las primeras letras del ingrediente que buscás.");
    registraAyudaClick(document.getElementById("ayudaBuscarNombre"),"Escribí solo las palabras que pueden estar en el título de la receta que buscás.");
    
    
    
    /*
    entrada = document.getElementById("entrada");
    platoPrincipal = document.getElementById("platoPrincipal");
    guarnicion = document.getElementById("guarnicion");
    postre = document.getElementById("postre");
    bebida = document.getElementById("bebida");
    varios = document.getElementById("varios");
    cualquiera = document.getElementById("cualquiera");
    
    registraAyudaPasar(entrada,"Entrada");
    registraAyudaPasar(platoPrincipal,"Plato Principal");
    registraAyudaPasar(guarnicion,"Guarnicion");
    registraAyudaPasar(postre,"Postre");
    registraAyudaPasar(bebida,"Bebida");
    registraAyudaPasar(varios,"Varios");
    registraAyudaPasar(cualquiera,"Cualquiera");
    */
}