/**************/
/* CONSTANTES */
/**************/

// Nombre de las cookies
const COOKIE_LANGUAGE_LITERAL = "language";
const COOKIE_ACCEPT_LITERAL = "accept_cookies";
const COOKIE_CONTROL_LITERAL = "cookies_control";
const COOKIE_UPDATE_LITERAL = "cookies_update";

// Tiempos de duración de las cookies
const COOKIE_LANGUAGE_TIME = 730;
const COOKIE_ACCEPT_TIME = 730;
const COOKIE_CONTROL_TIME = 1;
const COOKIE_UPDATE_TIME = 365;

// Colores de las pestañas de los productos cuando seleccionamos una entrada
const TAG_ORANGE_COLOR_BACKGROUND_FFEBCD = "FFEBCD";
const TAG_COLOR_DESCR_F5F5F5_PURPLE = "#e6e6fa";
const TAG_COLOR_SPEC_F5F5F5_PURPLE = "#e8e8f9";
const TAG_COLOR_DESCR_FFEBCD_ORANGE = "#ffebcd";
const TAG_COLOR_SPEC_FFEBCD_ORANGE = "#fcedd6";
const TAG_DESCRIPTION_ID = "description";
const TAG_SPECIFICATION_ID = "specification";

// Este parámetro lo usamos en la URL para saber que hemos pulsado el link de ventana modal de la página de cookies, para que nos vuelva a mostrar
// la ventana modal en el /home. Recuerda que al hacer un window.location.href toda instrucción que venga después de ella no se ejecuta por lo que tenemos que 
// andar con estos trucos para que se habra la ventanita
const COOKIE_PARAM = "?cp=t"; // Significado del parámetro: cp=t => cookie page=true => Que venimos de la página de cookies.html habiendo pulsado el link"ventana modal" = true

// Locale
const LOCALE_EN_US = 'en-US';
//const LOCALE_EN = 'en';
const LOCALE_ES_ES = 'es-ES';
const LOCALE_ES = 'es';

// Acciones
const ACTION_PRODUCTS = 'products';
const ACTION_ENTRIES = 'entries';
const ACTION_MENUS = 'category';
const ACTION_SUBMENUS = 'subcategory';

// Lo usaremos para checkear casa x milisegundos si hemos girado la pantalla de un móvil o tablet
const CHECK_ORIENTATION_TIME = 500;

// Lo usamos para que aparezca o no el botón de "Ir arriba" cuando hacemos scroll. 2000 entiendo que son ¿1950px?
 const LAST_SCROLL_TOP = 1950;
 
 // Constantes usadas para elimianr de la URL si es marca, menú o submenú cuando buscamos en la searchbox, que queda raro
 // Si cambiamos en el properties, cambiarlo aquí también
 const SEARCHBOXB_SPACE_BRAND_ES = " (marca)";
 const SEARCHBOXB_SPACE_BRAND_EN = " (brand)";
 const SEARCHBOXB_SPACE_MENU_ES = " (menú)";
 const SEARCHBOXB_SPACE_MENU_EN = " (menu)";
 const SEARCHBOXB_SPACE_SUBMENU_ES = " (submenú)";
 const SEARCHBOXB_SPACE_SUBMENU_EN = " (submenu)";
 
 const SAVE_ACTION = 'save';
 const DELETE_ACTION = 'delete';
 const DELETE_METHOD = 'DELETE';
 const POST_METHOD = 'POST';
 
 // ============================================================================

 /************/ 
 /* VARIABLES */
 /************/
 
// Variable usada para checkear casa x milisegundos si hemos girado la pantalla de un móvil o tablet
let checkOrientation = changeItemsCarousel();

// Variable usada para pintar el resto de entradas con javascript, las del botón "Mostrar más (entradas)". Será 1 al cargar la página home y sera este cant = 1 la que usemos
// al llamar a getMoreEntries() un vez se haya cargado la página por primera vez (<body onload="javascript: getMoreEntries();">) para que pueda formar el id restOf1,
// que es el primero que usamos para cargar las entradas la primera vez que carga la página home.html.
// Dentro de getMoreEntries() se va a ir incrementando para ir mostrando más entradas de 5 en 5 (si hay menos de 5 pués las que hubiese).
let cant = 1;

// Nos permite dormir antes de ejecutar la siguiente instrucción
let sleepMs = function(ms){
    return new Promise(resolve => setTimeout(resolve, ms));
};

// Mira cada 2 segundos si el elemento language existe, se ha pintado ya en la página. Es para poner cursor o no en el checkbox
/* Descomentar si volvemos a poner language como disabled */
let checkLanguageExist = setInterval(function() {
   if ($('#language').length) { // Aquí preguntamos si el campo con id=language existe o no
      if(!document.getElementById("language").checked)
      		document.getElementById("languageLabel").style.cursor = "pointer";
      else
      		document.getElementById("languageLabel").style.cursor = "default";

      clearInterval(checkLanguageExist); // Con esto le decimos que pare ya de seguir checkeando cada 2 segusndos a ver si existe el campo language
   }
}, 2000); // check every 2 s, si no no da tiempo a que haga bien el  if(!document.getElementById("language").checked)

// Mira cada 2 segundos si el elemento accept_cookies existe, se ha pintado ya en la página. Es para poner cursor o no en el checkbox
/* Descomentar si volvemos a poner accept_cookies como disabled */
let checkAcceptCookiesExist = setInterval(function() {
   if ($('#accept_cookies').length) { // Aquí preguntamos si el campo con id=accept_cookies existe o no
      if(!document.getElementById("accept_cookies").checked)
      		document.getElementById("accept_cookiesLabel").style.cursor = "pointer";
      else
      		document.getElementById("accept_cookiesLabel").style.cursor = "default";

      clearInterval(checkAcceptCookiesExist); // Con esto le decimos que pare ya de seguir checkeando cada 2 segusndos a ver si existe el campo language
   }
}, 2000); // check every 2 s, si no no da tiempo a que haga bien el  if(!document.getElementById("acceptCookies").checked)

// Redimensionamiento del titular de los productos según sea móvil o escritorio
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};
	
// ============================================

/************/
/* LISTENERS */
/************/

/*
// Gestionamos la barra de búsqueda y el icono de lenguaje según esté el navbar colapsado o no
window.addEventListener('resize', () => {
    document.querySelectorAll('.search-bar').forEach((elementBar) => { 
        if (window.innerWidth <= 1210) { // Usamos 1210 que es cuando colapsa el NavBar
            elementBar.style.display = 'none';
        } else {
            elementBar.style.display = 'block';
        }
    });
});
// Gestionamos la barra de búsqueda y el icono de lenguaje según esté el navbar colapsado o no
window.addEventListener('resize', () => {
    document.querySelectorAll('.search-bar-collapsed').forEach((elementBarCollapsed) => { 
        if (window.innerWidth <= 1210) { // Usamos 1210 que es cuando colapsa el NavBar
            elementBarCollapsed.style.display = 'block';
        } else {
            elementBarCollapsed.style.display = 'none';
        }
    });
});
*/

// Llamar a la función para cambiar los iconos cuando la página se carga
//window.addEventListener("load", changeIcons);
window.addEventListener("load", () => {
  changeIcons();
  getSearchBar();
});

// Ejecutar la misma función cuando el tamaño de la ventana cambie
//window.addEventListener("resize", changeIcons);
//window.addEventListener("resize", getSearchBar);
window.addEventListener("resize", () => {
  changeIcons();
  getSearchBar();
});

// NAVBAR
document.addEventListener("DOMContentLoaded", function () {
		
		// NAVBAR: Ésto lo usamos para que se desplieguen solos los submenús cuando pasamos el ratón por encima del menú sin tener que hacer click para que se desplieguen,
		// sólo con hacer hover se despliegan
	    const dropdowns = document.querySelectorAll(".nav-item.dropdown");
	    let timeout; // Variable para controlar el temporizador global
	
	    dropdowns.forEach(dropdown => {
		      const dropdownMenu = dropdown.querySelector(".dropdown-menu");
		
		      // Mostrar el submenú al pasar el cursor
		      dropdown.addEventListener("mouseenter", function () {
			        // Limpiar cualquier temporizador activo
			        clearTimeout(timeout);
			
			        // Ocultar otros submenús visibles
			        dropdowns.forEach(otherDropdown => {
				          if (otherDropdown !== dropdown) {
				          	  const otherMenu = otherDropdown.querySelector(".dropdown-menu");
				           	 otherMenu.style.display = "none";
				          }
			        });
			
			        // Mostrar el menú actual
			        dropdownMenu.style.display = "block";
		      });
		
		      // Ocultar el submenú al salir del área (sin retraso o con mínimo retraso)
		      dropdown.addEventListener("mouseleave", function () {
			        timeout = setTimeout(() => {
			          	dropdownMenu.style.display = "none";
			        }, 50); // Muy breve retraso (50ms) o puedes eliminar este retraso
		      });
	    });
	
 });
 
// Hacemos esto porque en móvil no funciona "changeItemsCarousel" y en escritorio no funciona "changeItemsCarousel()"
// Es que es flipante EDIT: parece que ya lo han arreglado... parece...

/*if(isMobile.any()){
	window.addEventListener("resize", changeItemsCarousel(), true);
	window.addEventListener("orientationchange", changeItemsCarousel(), true);
	window.addEventListener("deviceorientation", changeItemsCarousel(), true);
	window.addEventListener("resize", setEntryImageSize(), true);
	setInterval(checkOrientation(), 500);
}
else{*/
	// Para lo de { passive: false }:
	// 			https://stackoverflow.com/questions/42101723/unable-to-preventdefault-inside-passive-event-listener
	// 			https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners
	window.addEventListener("resize", changeItemsCarousel, { passive: false });
	window.addEventListener("orientationchange", changeItemsCarousel, { passive: false });
	//window.addEventListener("deviceorientation", changeItemsCarousel, true); // Funciona como el de arriba (orientationchange), al menos en este caso
	
	window.addEventListener("resize", setEntryImageSize, { passive: false });
	window.addEventListener("orientationchange", setEntryImageSize, { passive: false });
	
	setInterval(checkOrientation, CHECK_ORIENTATION_TIME);
//}

// Esto es por si giran el móvil que se llame también a la función "changeItemsCarousel"


// ============================================================================

/*****************/
/* EVENTOS JQUERY */
/*****************/

$(document).ready(function(){
	
	// Listamos el resto de las entradas por fila
	// Cuando pulsamos el botón de mostrar más (entradas), llama a la función getMoreEntries y muestra las siguientes 5 entradas (o si hay 3 pues 3)
	$("#showMore").on("click", getMoreEntries);
	
	// =======================================
	
	// Hace que el tr entero de la tabla "últimas entradas" sea el link, si ponemos <a> queda mal, solo sería link el texto
    $('#tableUE tr').click(function(){
        window.location = $(this).attr('href'); // Ojoooo: aunque en HTML el atributo sea th:href aquí hacemos referencia a href simplemente
        return false;
    });
    
    // =======================================
    
    // COOKIES
	// Checkboxes de la página de cookies
	//función que activa o desactiva los checkboxes de la página de cookies según les demos con el puntero del ratón
	// Si la cookie accpetCookies no existe significa que nunca se ha aceptado las cookies, ni si quiera ha entrado en configuración de cookies
	// luego hay que mostrar la ventana modal de cookies hasta que las acepte o las configura, es un usuario nuevo.
  	if (!getCookie(COOKIE_ACCEPT_LITERAL)) {
        $('#cookieModal').modal('show');
        
        enablePointerLangAndAcceptCookies(); // Descomentar si volvemos a poner accept_cookies como disabled
    }
    
    // Ésto lo hacemos por si ha pulsado el botón de continuar navegando sin aceptar ninguna cookie y luego se mete en el enlace de políticas de cookies
    // y quiere habilitar las cookies estrictamente necesarias. No vamos a permitir que habiliten o deshabiliten a antojo como las no necesarias, o las habilitan y quedan
    // habilitadas para siempre o no las habilitan y quedan así, que si quieren habilitarlas salga la ventana modal y que las habiliten desde ahí
    /* Descomentar si volvemos a poner disabled en el input de language en el layout.html */
    $("#language_Div").click(function() {  
		if(!document.getElementById("language").checked){
			// Ahora nos vamos a la paǵina principal porque si nos quedamos en la página de cookies, al estar las dos tablas (la de la página de cookies y la de la modal), al ser
			// la misma tabla (pintada desde lauout.html usando fragment) con mismos id, names, etc se hace la picha un lío por lo que es mejor salir de la página de cookies
			//para qu no convivan las dos tablas a la vez (que en verdad es la misma tabla)
			//window.location.href = "/";
			window.location.href = setURLServer();
			
			// Y aquí le decimos que muestre la ventana modal
			$('#cookieModal').modal('show');
		}
    });
    
    // Ésto lo hacemos por si ha pulsado el botón de continuar navegando sin aceptar ninguna cookie y luego se mete en el enlace de políticas de cookies
    // y quiere habilitar las cookies estrictamente necesarias. No vamos a permitir que habiliten o deshabiliten a antojo como las no necesarias, o las habilitan y quedan
    // habilitadas para siempre o no las habilitan y quedan así, que si quieren habilitarlas salga la ventana modal y que las habiliten desde ahí
    /* Descomentar si volvemos a poner disabled en el input de accept_cookies en el layout.html */
    $("#acceptCookies_Div").click(function() {  
		if(!document.getElementById("accept_cookies").checked){
			// Ahora nos vamos a la paǵina principal porque si nos quedamos en la página de cookies, al estar las dos tablas (la de la página de cookies y la de la modal), al ser
			// la misma tabla (pintada desde lauout.html usando fragment) con mismos id, names, etc se hace la picha un lío por lo que es mejor salir de la página de cookies
			//para qu no convivan las dos tablas a la vez (que en verdad es la misma tabla)
			//window.location.href = "/";
			window.location.href = setURLServer();
			
			// Y aquí le decimos que muestre la ventana modal
			$('#cookieModal').modal('show');
			
		}
  });  
    
     // Checkbox language
     /* Descomentar si volvemos a poner como checkeables a language y accept_cookies
    $("#language").click(function() {  
 	 		actDes(COOKIE_LANGUAGE_LITERAL, COOKIE_LANGUAGE_TIME, $("#language").val());
 	 		
 	 		// Mostramos o no botón de lenguaje
           if($("#language").is(':checked') && document.getElementById("btnLanguage"))
			 	 document.getElementById("btnLanguage").style.display = "block";
		   else if(!$("#language").is(':checked') && document.getElementById("btnLanguage"))
		   		 document.getElementById("btnLanguage").style.display = "none";
    }); 
    */
    
    // Checkbox accept_cookies
    /* Descomentar si volvemos a poner como checkeables a language y accept_cookies
    $("#accept_cookies").click(function() {  
 	 		actDes(COOKIE_ACCEPT_LITERAL, COOKIE_ACCEPT_TIME, null);
    }); 
    */
    
    // Checkbox cookies_control
    $("#cookies_control").click(function() {  
		// Ambas instrucciones hacen lo mismo:
		//alert(document.getElementById("checkCookiesTable").parentNode.parentNode.getAttribute("id")); // Obtener el abuelo con javascript
		//alert($("#checkCookiesTable").parent().parent().attr('id')); // Obtener el abuelo con JQuery
		
		// Si no estamos en la ventana modal, guardamos la cookie directamente en cuanto hablitemos el checkbox. En la ventana modal hace falta presionar botón de guardar cookies
		/*if($("#checkCookiesTable").parent().parent().attr('id') == null ||
			typeof $("#checkCookiesTable").parent().parent().attr('id') == 'undefined' || //https://stackoverflow.com/questions/3390396/how-can-i-check-for-undefined-in-javascript
			$("#checkCookiesTable").parent().parent().attr('id') != "cookieModalTable")*/
       	 		actDes(COOKIE_CONTROL_LITERAL, COOKIE_CONTROL_TIME, null);
    });  
    
     // Checkbox cookies_update
    $("#cookies_update").click(function() {  
		// Ambas instrucciones hacen lo mismo:
		//alert(document.getElementById("checkCookiesTable").parentNode.parentNode.getAttribute("id")); // Obtener el abuelo con javascript
		//alert($("#checkCookiesTable").parent().parent().attr('id')); // Obtener el abuelo con JQuery
		
		// Si no estamos en la ventana modal, guardamos la cookie directamente en cuanto hablitemos el checkbox. En la ventana modal hace falta presionar botón de guardar cookies
		/*if($("#checkCookiesTable").parent().parent().attr('id') == null ||
			typeof $("#checkCookiesTable").parent().parent().attr('id') == 'undefined' || //https://stackoverflow.com/questions/3390396/how-can-i-check-for-undefined-in-javascript
			$("#checkCookiesTable").parent().parent().attr('id') != "cookieModalTable")*/
  		 		actDes(COOKIE_UPDATE_LITERAL, COOKIE_UPDATE_TIME, null);
    }); 
  
     // Si pulsamos el botón de aceptar todas las cookies...
    $("#acceptBtn").click(function(){
          acceptCookies($("#acceptBtn").val());

          // Mostramos botón de lenguaje
           if(document.getElementById("btnLanguage"))
			 	 document.getElementById("btnLanguage").style.display = "block";
			 	 
		 $("#cookieModal").modal("hide");
    });
    
    // Si pulsamos el botón de aceptar cookies estrictamente necesarias...
    $("#acceptStrictlyBtn").click(function(){
          acceptStrictlyCookies($("#acceptStrictlyBtn").val());
          
          // Mostramos botón de lenguaje
          /* Descomentar si vovlemos a poner como checkeables language y accept_cookies
           if(document.getElementById("btnLanguage"))
			 	 document.getElementById("btnLanguage").style.display = "block";
			*/
		    
		    $("#cookieModal").modal("hide");
    });
    
    // Si pulsamos el botón de aceptar cookies seleccionadas...
    $("#acceptSelected").click(function(){
          acceptSelectedCookies($("#acceptSelected").val());

          // Mostramos botón de lenguaje
          /* Descomentar si volvemos a poner como checkeables a language y accept_cookies
           if(document.getElementById("btnLanguage") && $("#language").is(':checked'))
			 	 document.getElementById("btnLanguage").style.display = "block";
			else
				 document.getElementById("btnLanguage").style.display = "none";
			*/

		   $("#cookieModal").modal("hide");
    });
    
    // Si pulsamos en refuse all cookies
    $("#closeBtn").click(function(){
		// Borramos las posibles cookies que haya
		eraseAllCookies();
	    
       // Si no acepta ninguna cookie, ni si quiera la de lenguaje, entonces no mostramos el botón de elegir idioma
       /* Descomentar si volvemos a poner como checkeables a language y accept_cookies
       if(document.getElementById("btnLanguage"))
			  document.getElementById("btnLanguage").style.display = "none";
		*/
		
		// Hacemos comprobarCheckBox(...) para que visualmente se muevan los checkboxes (si es que están en enabled) a disabled mientras desaparece la ventana 
		// modal, sólo es por efecto óptico y no porque se necesite hacer
        //comprobarCheckBox("language"); // Descomentar si volvemos a dejar seleccionar language y accept_cookies
        //comprobarCheckBox("accept_cookies"); // Descomentar si volvemos a dejar seleccionar language y accept_cookies
            
	   // Escondemos la ventana modal
       $('#cookieModal').modal('hide');
       
     });
     
    // Si pulsamos el botón de resetear cookies (solo para desarrollo)
    $("#btnReset").click(async function(){
		// Borramos las cookies
        eraseAllCookies();
        
        // Recargamos la página (realmente no haría falta pero si no lo hacemos quedan los checks enabled auqnue daría igual y a lo mejor asta preferible)
        location.reload();
        
        //Pausamos la carga de la ventana modal 1 segundo, si no, como va rápido, muestra la modal y luego recarga y vuelve a mostrar la modal y queda raro
        //Forma asíncrona (poner async que va antes de function)
        await sleepMs(1000); // 1 segundo
        $("#cookieModal").modal("show");
        
        /* Forma no asíncrona (quitar async arriba, en $("#btnReset").click(async function(){...})
        setTimeout(function(){
   			$("#cookieModal").modal("show");
		}, 1000); // 1 segundo de intervalo
		*/
        
    });
    
    // Botón que vuelve a la ventna modal principal desde configure
    $("#goBackBtn").click(function(){
			//reset();
			
			//$("#cookieModalConf").modal("hide");
        	//$("#cookieModal").modal("show");

        	document.getElementById("cookieModalLabel").style.display = "block";
        	document.getElementById("configureBtn").style.display = "block";
        	document.getElementById("cookieModalText").style.display = "block";

        	/*
        	if(document.getElementById("btnLanguageCookies"))
        		document.getElementById("btnLanguageCookies").style.display = "block";
        	*/

        	document.getElementById("cookieModalTable").style.display = "none";
        	document.getElementById("goBackBtn").style.display = "none";
       		//document.getElementById("acceptSelected").style.display = "none";
        	
        	//document.getElementById("acceptStrictlyBtn").style.display = "none";
        	document.getElementById("acceptStrictlyBtn").style.display = "block";
        	
        	//document.getElementById("closeBtn").style.display = "none";
        	document.getElementById("cookieModalLabelSettings").style.display = "none";
       		
       		// Desmarcamos el checkbox de las estricatemente necesarias pero aún no guardamos ninguna cookie
       		/* Descomentar si volvemos a poner language y accept_cookies como disabled */
       		document.getElementById("language").checked = "";
        	document.getElementById("language_actdes").value = disabled;
        	document.getElementById("accept_cookies").checked = "";
        	document.getElementById("accept_cookies_actdes").value = disabled;
    });
    
    // Esto se ejecuta cuando la ventana modal se abre
    /*
    $('#cookieModal').on('shown.bs.modal', function () {
  			$('#myInput').trigger('focus') // Ponemos el foco en un campo input
	})
	*/
	
    // Esta función se ejecuta cuando la ventana modal se cierra. La necesitamos para que quite de la URL el parámetro /?c=t que le pusimos
    // en la función modalWindow(), si es que se lo pusimos, claro...
    $("#cookieModal").on('hidden.bs.modal', function () {
		if(window.location.search == COOKIE_PARAM)
				/*
				Explicación interesante: https://qastack.mx/programming/22753052/remove-url-parameters-without-refreshing-page
				
				1- Para modificar la URL actual y añadir / inyección que (el nuevo URL modificada) como una nueva entrada a la lista de URL de la historia, el uso pushState:

						window.history.pushState({}, document.title, "/" + "my-new-url.html");

				2- Para reemplazar la URL actual sin agregarla a las entradas del historial, use replaceState:

						window.history.replaceState({}, document.title, "/" + "my-new-url.html");

				3- Dependiendo de su lógica de negocio , pushStateserá útil en casos como:
				
					    - Desea apoyar el botón de retroceso del navegador
					    - Desea crear una nueva URL, agregar / insertar / insertar la nueva URL en las entradas del historial y convertirla en la URL actual
					    - Permitiendo a los usuarios marcar la página con los mismos parámetros (para mostrar el mismo contenido)
					    - Para acceder mediante programación a los datos a través del stateObjanálisis luego desde el ancla
				*/
				
            	window.history.replaceState({}, document.title, "/home");
    });
    
    // Esta función carga el combo de search cada vez que hacemos click sobre él
	/*
    $('#searchInput').click(function(){
		let urlServer = setURLServer(); // Si estamos en localhost quedaría http://localhost:8080/ y si estamos en Tomcat externo quedaría http://192.168.1.140:8080/armark/
		
        $.ajax({
			    url:  urlServer + 'search/getEntries',
			    type: 'GET',
			    async : true,
			    success: function(respuesta) {
					      if(respuesta != null && respuesta != "" && respuesta != 'undefined' && respuesta.data.length > 0){ // Si hay entradas para mostrar...
							      let entriesSearchBox = [];
							      let idsSearchBox = [];
							      let tablasSearchBox = [];

							      $.each(respuesta.data, function(index, elemento) {
									  		 // elemento[0] es el id
									  		 // elemento[1] es el titulo, que es lo que queremos guardar en el array
									  		 // elemento[2] es el nombre de la tabla a la que pertenece cada resultado
									  		 idsSearchBox.push(elemento[0]);
									  		 entriesSearchBox.push(elemento[1]);
									  		 tablasSearchBox.push(elemento[2]);
							      });
							      
							      autocomplete(document.getElementById("searchInput"), document.getElementById("searchInputId"), document.getElementById("searchInputTabla"), idsSearchBox, entriesSearchBox, tablasSearchBox);
						  }
		   		 },
			    error: function() {
					      console.log("No se ha podido obtener la información");
					      window.location.href = urlServer + "error"; // Dejándo esto así nos lleva al error 500. Si ponemos /error/500 nos lleva la 404 y queremos el 500
					      //alert("No se ha podido obtener la información");
			    }
	 	});

        return false;
    });
	*/
    
    // NOTA: USAREMOS OPACITY Y NO DISPLAY:NONE O HIDE O SHOW O FADEIN O FADEOUT PORQUE NECESITAMOS QUE LE BOTÓN ESTÉ PINTADO DESDE EL PRINCIPIO
    // PARA QUE EL BOTÓN DE "VER MÁS" NO SE DESCOLOQUE CUANDO APAREZCA EL BOTÓN FLOTANTE. CON DISPLAY:NONE LO QUE HACEMOS ES QUE EL BOTÓN NO SE PINTE
    // Y LUEGO SÍ SE PINTA Y DESCOLOCA EL BOTÓN "VER MÁS". CON OPACITY HACEMOS QUE EL BOTÓN FLOTANTE ESTÉ PINTADO PERO INVISIBLE Y ASÍ PODEMOS COLOCAR
    // EL BOTÓN "VER MÁS" CENTRADO Y QUE NO SE NOS DESCENTRE
    // Cuando pulsamos en el "Ver más" para ver más entradas, mostramos le botón de subir arriba
    /*$("#showMore").click(function() {  
			//$("#floatingBtn").fadeIn(1000); 
			//$("#floatingBtn").show();
			//document.getElementById("spanShowMore").classList.add("ml-3");
			//document.getElementById("spanShowMore").classList.add("pl-3");
			//document.getElementById("spc").classList.add("mb-5");
			//document.getElementById("spc").classList.add("pb-5");
    });*/
    
    // Cuando pulsamos el botónd e subir arriba, pues subimos arriba
     $("#floatingBtn").click(function() {  
		$('body, html').animate({
			scrollTop: '0px'
		}, 300);
		document.getElementById("floatingBtn").style.opacity = "0";
		//$("#floatingBtn").hide();
		//$("#floatingBtn").fadeOut(300);
		//document.getElementById("showMore").style.removeProperty("margin-left");
	});
	
	// Llama a la función onScroll cuando hacemos scroll en la pantalla home
	// Con ésto hacemos que paraezca o desaparezca el botón de "ir a arriba" según hagamos scroll
	// ÉSTO PARA WIDE SCREENS
	$(window).on('scroll', onScroll); // For wide screens
	// Y ÉSTO ES PARA MÓVILES Y TABLETS
	$(document.body).scroll(function(){
			if ($(document.body).scrollTop() >= LAST_SCROLL_TOP) {
					//$("#floatingBtn").show();
					//$("#floatingBtn").fadeIn(300);
					if(document.getElementById("floatingBtn"))
							document.getElementById("floatingBtn").style.opacity = "1";
					//document.getElementById("showMore").style.marginLeft = "13%";
			}
			else{
					//$("#floatingBtn").hide();
					//$("#floatingBtn").fadeOut(300);
					if(document.getElementById("floatingBtn"))
							document.getElementById("floatingBtn").style.opacity = "0";
					//document.getElementById("showMore").style.removeProperty("margin-left");
			}
	});
	//$(document.body).on('touchstart', onScroll); // For mobiles and tablets
	//$(document.body).on('touchmove', onScroll); // For mobiles and tablets
	//$(document.body).on('touchend', onScroll); // For mobiles and tablets
	//$(document.body).on('touchcancel', onScroll); // For mobiles and tablets
	
});

// ============================================

/*************/
/*	 FUNCIONES */
/*************/

// Función que setea una barra de búsqueda u otra dependiendo si la navbar está expandida o colapsada
function getSearchBar(){
	
		/*
		let placeHolder = "¿Qué estás buscando?"; // En español por defecto
		if(getCookieValue(COOKIE_LANGUAGE_LITERAL) == null || getCookieValueCOOKIE_LANGUAGE_LITERAL) == LOCALE_EN_US)
				placeHolder = "What are you looking for?";
		*/
		
		if (window.innerWidth <= 1210) {
					let sib = document.querySelector('.search-input-bottom');
					if(sib)
							sib.remove();
					
					if(document.getElementById('liSearchBar'))
						document.getElementById('liSearchBar').remove();
					
					// Creamos desde aquí el li de ulSearchBarCollapsed
					if(!document.getElementById("liSearchBarCollapsed"))
							document.getElementById("ulSearchBarCollapsed").innerHTML += getLiSearchBar("liSearchBarCollapsed", TXT_SEARCH_BUTTON);
		}
		else if (window.innerWidth > 1210 && window.innerWidth <= 1585) {
						
					if(document.getElementById('liSearchBarCollapsed'))
							document.getElementById('liSearchBarCollapsed').remove();
						
					if(document.getElementById('ulSearchBar')){
						//document.getElementById('liMagnifying').innerHTML = '<span class="input-group-text ml-auto" id="basic-addon"><img id="toggleInput" src="/images/magnifying-glass.svg" height="23" width="23" onclick="javascript: setBottomSearchBarEvent();" /></span>';
						document.getElementById('ulSearchBar').innerHTML = '<li class="nav-item only-magnifying" id="liSearchBar" style="cursor: pointer; text-align: right;"><img id="toggleInput" src="/images/magnifying-glass.svg" height="23" width="23" onclick="javascript: setBottomSearchBarEvent();" title="Buscar"/ alt="Buscar"></li>';
					}
					
					let sib = document.querySelector('.search-input-bottom');
					if(!sib){
							document.getElementById("inputContainer").innerHTML = '<input id="searchInput"  name="search_name" type="text" placeholder="Buscar" class="search-input-bottom">'
																																			 + '<input id="searchInputId" type="hidden" name="search_id" placeholder="Search">'
														  	    																			 + '<input id="searchInputTabla" type="hidden" name="search_tabla" placeholder="Search" >';
																																			  
					}
		}
		else{
					let sib = document.querySelector('.search-input-bottom');
					if(sib)
							sib.remove();
								
					if(document.getElementById('liSearchBarCollapsed'))
							document.getElementById('liSearchBarCollapsed').remove();
				
					// Creamos desde aquí el li de ulSearchBar
					if(!document.getElementById('liSearchBar') || (document.getElementById('liSearchBar') && document.getElementById('liSearchBar').classList.contains("only-magnifying")))
							document.getElementById("ulSearchBar").innerHTML = getLiSearchBar("liSearchBar", TXT_SEARCH_BUTTON);
		}
		
		// Reasignamos el evento de búsqueda al nuevo input creado con innerHTML arriba
		setSearchEvent("ulSearchBar");
		setSearchEvent("ulSearchBarCollapsed");
		setSearchEvent("inputContainer");

}

// Función que pinta la barra de búsqueda con el id correspondiente dependiendo del ul donde la pinte, que a su vez depende de si la navbar está colapsada o expandida
function getLiSearchBar(id, placeHolder){
		return ` 
						<li class="nav-item" id="` + id + `">
									  <div class="autocomplete" style="width: 100%;" id="divAutocomplete">
						     				<div class="input-group" id="divSearch">
						  							<input id="searchInput" name="search_name" placeholder="` + placeHolder + `" type="text" class="form-control search-input-class input-search-box" aria-label="` + placeHolder + `" aria-describedby="basic-addon">
						  							<span class="input-group-text ml-auto" id="basic-addon"><img id="toggleInput" src="/images/magnifying-glass.svg" height="23" width="23" onclick="javascript: setBottomSearchBarEvent();" /></span>
							  				</div>
							  	    		<input id="searchInputId" type="hidden" name="search_id" placeholder="Search">
							  	    		<input id="searchInputTabla" type="hidden" name="search_tabla" placeholder="Search" >
							  	    </div>
							  </li>
						`;
}

// Función que reasigna el evento al click sobre searchInput ya que acabamos de crear con innerHTML la barra de búsqueda y hay que reasignar el evento al input de la barra,
// si no lo hacemos no funcionaría
function setSearchEvent(ul){
		if(document.getElementById(ul)){

			document.getElementById(ul).addEventListener('mousedown', async function(event) { // Async porque abajo vamos a usar await
					
						if (event.target && event.target.id === 'searchInput') {
								
							   // Deshabilitamos el input para no poder escribir hasta que carguemos desde base de datos los datos de autocomplementado para mostrar en la searchbox
							   if(document.getElementById("searchInput")){
										document.getElementById("searchInput").style.backgroundColor = "white"; // Forzamos el fondo del input a white porque al deshabilitarlo hace un efecto raro y feo
										document.getElementById("searchInput").disabled = true; // Deshabilitamos el campo para no permitir la escritura a la espera de que se carguen los datos de base de datos y así pueda funcionar el autocomplete
								}
								
								// Con await nos aseguramos que no se ejecuta el if de abajo hasta que getSearchesFromServer() no haya 
								// terminado de recuperar todos los datos del searchbox de base de datos
								try{
										const data = await getSearchesFromServer();
										
										// Una vez recuperados los datos a mostrar en el searchbox de base de datos, volvemos a habilitar el campo input para escribir en él
										if(document.getElementById("searchInput")){
												document.getElementById("searchInput").disabled = false; // Habilitamos de nuevo el campo input para poder escribir en él
												document.getElementById("searchInput").focus(); // Hay que ponerle el focus en el input porque después del await de arriba el input lo pierde
										}
								}
								catch(	error) {
								    console.error(error);  // Puedes manejar el error aquí o mostrar un mensaje al usuario.
								    //alert(error);  // Por ejemplo, mostrar un mensaje de alerta.
								}
								
								//await wait(50); // Parece que el await de arriba no lo está haciendo bien, forzamos medio segundo de pausa
						}
				});
		}
}

// Función que reasigna el evento al click sobre la lupita ya que acabamos de crear con innerHTML la barra de búsqueda y hay que reasignar el evento al input de la barra,
// si no lo hacemos no funcionaría
function setBottomSearchBarEvent(){
		if (window.innerWidth > 1210 && window.innerWidth <= 1585) {
				// Reasignamos el evento sobre el icono de la lupa para pantallas más pequeñas en el que sólo aparece ese icono y no la searchbox.
				// Ésto lo que hace es desplegar la searchbox debajo de la navbar
				if (event.target && event.target.id === 'toggleInput') {
						if(document.getElementById('searchInput'))	
							document.getElementById('searchInput').style.display = 'block';
						
						if(document.getElementById("toggleInput")){
								   const toggleInput = document.getElementById('toggleInput');
								   const inputContainer = document.getElementById('inputContainer');
							       
								   // Ponemos el title a la lupa
								   toggleInput.title = "Buscar";
								   
								   // Alternar visibilidad del contenedor del input
							       if (inputContainer.style.display === null || inputContainer.style.display === 'none' || inputContainer.style.display === '') {
							           		inputContainer.style.display = 'block'; // Mostrar
											/*document.getElementById('searchInput').style.display = "block";
											document.getElementById('searchInputId').style.display = "block";
											document.getElementById('searchInputTabla').style.display = "block";*/
							       } else {
							           		inputContainer.style.display = 'none'; // Ocultar
							       }
						}
				}
		}
}

// Función que retorna una promesa que se resuelve después de un tiempo
function wait(ms) {
   	 	return new Promise(resolve => setTimeout(resolve, ms));
}

// Función que se va a buscar las searches al servidor (al controlador)
function getSearchesFromServer(){
		let urlServer = setURLServer(); // Si estamos en localhost quedaría http://localhost:8080/ y si estamos en Tomcat externo quedaría http://192.168.1.140:8080/armark/
		
		return new Promise((resolve, reject) => { // Necesitamos devolver una promesa para que funcione el await getSearchesFromServer() de function setSearchEvent(ul)
		        $.ajax({
					    url:  urlServer + 'search/getEntries',
					    type: 'GET',
					    async : true,
					    success: function(respuesta) {
							      if(respuesta != null && respuesta != "" && respuesta != 'undefined' && respuesta.data.length > 0){ // Si hay entradas para mostrar...
									      let entriesSearchBox = [];
									      let idsSearchBox = [];
									      let tablasSearchBox = [];
		
									      $.each(respuesta.data, function(index, elemento) {
											  		 // elemento[0] es el id
											  		 // elemento[1] es el titulo, que es lo que queremos guardar en el array
											  		 // elemento[2] es el nombre de la tabla a la que pertenece cada resultado
											  		 idsSearchBox.push(elemento[0]);
											  		 entriesSearchBox.push(elemento[1]);
											  		 tablasSearchBox.push(elemento[2]);
									      });
									      
									      autocomplete(document.getElementById("searchInput"), document.getElementById("searchInputId"), document.getElementById("searchInputTabla"), idsSearchBox, entriesSearchBox, tablasSearchBox);
										  
									  	  resolve(); // Indica éxito
								} else 
			                      		reject("No hay datos para mostrar, posiblemente aún no hay datos introducidos en la base de datos.");
				   		 },
					    error: function() {
							      console.log("No se ha podido obtener la información");
								  reject("Error al recuperar los datos del servidor.");
							      window.location.href = urlServer + "error"; // Dejándo esto así nos lleva al error 500. Si ponemos /error/500 nos lleva la 404 y queremos el 500
							      //alert("No se ha podido obtener la información");
					    }/*,complete: function() {
							// Esto se ejecuta siempre, independientemente del resultado de success o error
								//alert("A: " + document.getElementById("searchInput").disabled);
							//alert("D: " + document.getElementById("searchInput").disabled);
				       }*/
			 	});
		});
		
        //return true;
}
	
// Función relacionada con los listenera que me dice si el ancho de la pantalla es menor de 1200, para cambiar el icono de "Mostrar todos" del NavBar
// Esta función se usa para cambiar el icono según el tamaño de la ventana. No es un listener pero lo dejamos aquí porque tiene que ver con los listeners de abajo  window.addEventListener("load", changeIcons); y window.addEventListener("resize", changeIcons); 
function changeIcons() {
	  document.querySelectorAll('[id^="allIcon_"]').forEach((element) => { // Recorrer todos los elementos con id que empiecen con "allIcon_"
		    if (window.innerWidth <= 1210) { // Usamos 1210 que es cuando colapsa el NavBar
		      	element.src = "/images/default_all_white.svg"; // Cambia al ícono blanco
		    } else {
		      	element.src = "/images/default_all_black.svg"; // Cambia al ícono negro
		    }
	  });
	  
	  // Esto lo usamos porque conel navbar colapsado, cuando ibamos pasando entre las entradas de un submenú, que con el navbar tiene las 
	  // letras blancas, llegaba un momento que se ponían las letras negras y luego blancas otra vez y quedaba feo, hacía efecto feo
	  document.querySelectorAll('[id^="li-sub_"]').forEach((elementLi) => { // Recorrer todos los elementos con id que empiecen con "li-sub_"
	  	    if (window.innerWidth <= 1210) { // Usamos 1210 que es cuando colapsa el NavBar
	  			elementLi.style.color = "white";
	  	    } else {
	  			elementLi.style.color = "black";
	  	    }
	    });
		
		// Gestionamos la barra de búsqueda y el icono de lenguaje según esté el navbar colapsado o no
		document.querySelectorAll('.search-bar').forEach((elementBar) => { 
	        if (window.innerWidth <= 1210) {
	            elementBar.style.display = 'none';
	        } else {
	            elementBar.style.display = 'block';
	        }
	    });
		// Gestionamos la barra de búsqueda y el icono de lenguaje según esté el navbar colapsado o no
		document.querySelectorAll('.search-bar-collapsed').forEach((elementBarCollapsed) => { 
	        if (window.innerWidth <= 1210) {
	            elementBarCollapsed.style.display = 'block';
	        } else {
	            elementBarCollapsed.style.display = 'none';
	        }
	    });
}

// Función que setea la imagen a mostrar en la ventana modal que se abre cada vez que hacemos click en una imagen
function showImageModal(img, numImg, indice) {

	   // Configura el src de la imagen en el modal
	   if(document.getElementById('modalImage'))
       			document.getElementById('modalImage').src = img.src;
	   
	   // Le asignamos a la ventana el título resultante
	   if(document.getElementById('imageModalLabel'))
	   			document.getElementById('imageModalLabel').innerHTML = document.getElementById("tituloProd_" + indice).textContent + " - Image " + numImg;

	   // Muestra el modal
       $('#imageModal').modal('show');
}

// Función que setea la URL correcta del servidor para no tener problemas la dar de alta las newsletter desde cualquier URL,
// independientemente si estamos en localhost o producción, en /home, /index o /productos (por ahora,si añadimos nuevas rutas habrá que tratarlas también aquí).
// Si estamos en localhost quedaría http://localhost:8080/ y si estamos en Tomcat externo quedaría http://192.168.1.140:8080/armark/ y por culpa de este "/armark" enruta
// mal, por eso tenemos que hacer esto
function setURLServer(){

		//  EJEMPLOS:
    	//        http://192.168.1.140:8080/armark/category/1/ssss/subcategory/1/ffff => Obtenemos http://192.168.1.140:8080/armark (sin slash final)
    	//        http://localhost:8090/category/1/ssss/subcategory/1/ffff => Obtenemos http://localhost:8090 (sin slash final)
		var protocolo = window.location.protocol; // nos da como resultado http: o https: o el que sea (sí, los dos puntos (:) también nos lo da)
    	var host = window.location.host;
   	 	var urlCompleta = protocolo + '//' + host + '/'; // Necesitamos el slash final por tal y como lo tenemos montado.
    
	    // Si hay un puerto diferente del estándar (80 para HTTP, 443 para HTTPS), añádelo a la URL
	    /*if (window.location.port && window.location.port !== '80' && window.location.port !== '443') {
	        urlCompleta += ':' + window.location.port;
	    }*/

    	return urlCompleta;
    	
/*
	let urlServer = location.href;
	
	if(urlServer.includes("home"))
		urlServer = urlServer.split("home")[0];
	else if(urlServer.includes("index"))
		urlServer =  urlServer.split("index")[0];
	else if(urlServer.includes("entries"))
		urlServer =  urlServer.split("entries")[0];
	else if(urlServer.includes("products"))
		urlServer =  urlServer.split("products")[0];
	else if(urlServer.includes("one_product"))
		urlServer =  urlServer.split("one_product")[0];
	// Por subcategory no hace falta cribar ya que con category ya truncamos la URL por donde queremos
    //  EJEMPLOS:
    //        http://192.168.1.140:8080/armark/category/1/ssss/subcategory/1/ffff => http://192.168.1.140:8080/armark/ por un lado (el quenos interesa)
    //        y /1/ssss/subcategory/1/ffff por el otro (el cual desechamos).
    //
    //        http://localhost:8090/category/1/ssss/subcategory/1/ffff => http://localhost:8090/ por un lado (el quenos interesa)
    //        y /1/ssss/subcategory/1/ffff por el otro (el cual desechamos).
	else if(urlServer.includes("category")) 
		urlServer =  urlServer.split("category")[0];
	else if(urlServer.includes("policies")) 
		urlServer =  urlServer.split("policies")[0];
	else if(urlServer.includes("search")) 
		urlServer =  urlServer.split("search")[0];
		
	return urlServer;
	*/

/*	
		var protocolo = window.location.protocol;
    	var host = window.location.host;
   	 	var urlCompleta = protocolo + '//' + host;
    
	    // Si hay un puerto diferente del estándar (80 para HTTP, 443 para HTTPS), añádelo a la URL
	    /*if (window.location.port && window.location.port !== '80' && window.location.port !== '443') {
	        urlCompleta += ':' + window.location.port;
	    }*/
    /*
    	return urlCompleta;
    	*/
}

// ============================================================================

// Función que hace un submit y te envía al controlador correspondiente siempre que sea de la estructura, por ejemplo, ".../products/2/Samsung-Galaxy-S23"
function goToAccion(action, id, name){
		let urlServer = setURLServer();
      	window.location.href = urlServer + action + "/" + id + "/" + name;
}

// ============================================================================

// Funciones referentes a search box
function autocomplete(inp, inpid, inptabla, ids, arr, tablas) {
  /*the autocomplete function takes two arguments,
  the text field element and an array of possible autocompleted values:*/
  var currentFocus;
  /*execute a function when someone writes in the text field:*/
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /*close any already open lists of autocompleted values*/
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /*create a DIV element that will contain the items (values):*/
      a = document.createElement("ul");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items doScroll");
      a.setAttribute("style", "border:1px solid black; background: white; list-style-type: none; padding: 0; margin: 0;");
      /*append the DIV element as a child of the autocomplete container:*/
      this.parentNode.appendChild(a);
      /*for each item in the array...*/
      for (i = 0; i < arr.length; i++) {
        /*check if the item starts with the same letters as the text field value:*/
        //if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
		/* Esto, en vez de lo de arriba que ckequea si empieza por lo que hemos escrito, lo que hace es ver si contien lo que hemos escrito*/
		if (arr[i].toUpperCase().includes(val.toUpperCase())) {
          /*create a DIV element for each matching element:*/
          b = document.createElement("li");
          //b.classList.add("doScroll");
          /*make the matching letters bold:*/
          // Esta linea no existía, la he hecho yo
          b.innerHTML = arr[i].substr(0, arr[i].toUpperCase().indexOf(val.toUpperCase()));
           //b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += "<strong style='color: blue;''>" + arr[i].substr(arr[i].toUpperCase().indexOf(val.toUpperCase()), val.length) + "</strong>";
          // b.innerHTML += arr[i].substr(val.length);
          b.innerHTML += arr[i].substr(val.length + arr[i].toUpperCase().indexOf(val.toUpperCase()), arr[i].length - 1);
          /*insert a input field that will hold the current array item's value:*/
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>"; // Este es para que muestre el li seleccionado en la search box
          b.innerHTML += "<input type='hidden' value='" + ids[i] + "'>"; // Este lo usamos en el controlador
          b.innerHTML += "<input type='hidden' value='" + tablas[i] + "'>"; // y este también lo usamos en el controlador
          /*execute a function when someone clicks on the item value (DIV element):*/
          b.addEventListener("click", function(e) {
              /*insert the value for the autocomplete text field:*/
              inp.value = this.getElementsByTagName("input")[0].value;
              inpid.value = this.getElementsByTagName("input")[1].value;
              inptabla.value = this.getElementsByTagName("input")[2].value;
              
              /*close the list of autocompleted values,
              (or any other open lists of autocompleted values:*/
              closeAllLists();
              
              // Hace click automático según seleccionameos una entrada de la searchbox. Si vamos a usar botón comentar las 2 lineas de abajo
              let urlServer = setURLServer();
              
              let searchInput =  replaceURLSearchBox($("#searchInput").val());
			  
              window.location.href = urlServer + "search/" + $("#searchInputId").val() + "/" + $("#searchInputTabla").val() + "/" + searchInput.replace(/ /g, "-"); 
          });
          a.appendChild(b);
        }
      }
  });
  /*execute a function presses a key on the keyboard:*/
  inp.addEventListener("keydown", function(e) {
	  var x = null;
	  var xx = null;
	  let numLi = 0;
	  
	  if(document.getElementById(this.id + "autocomplete-list")){
		      x = document.getElementById(this.id + "autocomplete-list");
		      xx = document.getElementById(this.id + "autocomplete-list"); // Igual que x, el de arriba, ya que x puede ser manipulado y/o cambiado
      		  numLi = document.getElementById(this.id + "autocomplete-list").getElementsByTagName("li").length;
       
		      if (x) x = x.getElementsByTagName("li");
		     
		      if (e.keyCode == 40 && currentFocus < numLi - 1) {
		        /*If the arrow DOWN key is pressed,
		        increase the currentFocus variable:*/
		        currentFocus++;
		        /*and and make the current item more visible:*/
		        addActive(x);
		        if(currentFocus >= 1 && currentFocus < arr.length)
		        	xx.scrollBy(0, 45);
		      } else if (e.keyCode == 38 && currentFocus != 0) { //up
		        /*If the arrow UP key is pressed,
		        decrease the currentFocus variable:*/
		        currentFocus--;
		        /*and and make the current item more visible:*/
		        addActive(x);
		        xx.scrollBy(0, -45);
		      } else if (e.keyCode == 13) {
		        /*If the ENTER key is pressed, prevent the form from being submitted,*/
		        e.preventDefault();
		        if (currentFocus > -1) {
		          /*and simulate a click on the "active" item:*/
		          if (x) x[currentFocus].click();
		        }
		      }
      }
  });
  function addActive(x) {
    /*a function to classify an item as "active":*/
    if (!x) return false;
    /*start by removing the "active" class on all items:*/
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /*add class "autocomplete-active":*/
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /*a function to remove the "active" class from all autocomplete items:*/
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /*close all autocomplete lists in the document,
    except the one passed as an argument:*/
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
  /*execute a function when someone clicks in the document:*/
  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
  });
}
// Función que elimina (marca), (menú), etc de la URL cuando pinchamos en una entrada d ela searchbox
function replaceURLSearchBox(title){
		  // Todo esto necesitamos hacerloporque si dejamos en la URL Samsung (Smartphones) o su conversión a Samsung-(Smartphones) en Java
		  // va a dar un error porque no va a encontrar un título que sea Samsung (Smartphones) o Samsung-(Smartphones), va a encontrar un título que sea Samsung
		  // y entonces no reconocerá la URL y va a petar, por eso, aunque se muestre Samsung (Smartphones) en la searchbox,  debemos ir al controlador de Java
		  // con Samsung sólo. Admás, en la URL queda mejor solo Samsung que Samsung-(Smartphones). Podríamos mirar para que quedase Samsung-Smartphones
		  // pero para Samsung-(marca) quedaría Samsung-marca o Samsung-Marca... no sé, no me convence hoy en día, si eso cambiarlo más adelante.
		  const regex = /\s\(([^)]+)\)/; // con \s le quitamos el espacio que hay entre Samsung y (Smartphones)
		  let searchInput = title.split(regex); // Divide en 2 la netrada de la searchbox Samsung (Smartphones): por una lado Samsung y por otro Smartphones. Nos quedamos con Samsung
		  																  // Mete un ¿espacio? al final, no sé por qué. Si aces un alert(searchInput) te muestra Samsung, Smartphones ,  Nota la última coma dando a entender que detrás de Samrphones hay algo
		  //let searchInput = title;
		  //alert(searchInput);
		  
		  /*
		  if(title.includes(SEARCHBOXB_SPACE_BRAND_ES))
					searchInput = title.replace(SEARCHBOXB_SPACE_BRAND_ES, "");
		  else if(title.includes(SEARCHBOXB_SPACE_BRAND_EN))
					searchInput = title.replace(SEARCHBOXB_SPACE_BRAND_EN, "");
		  else if(title.includes(SEARCHBOXB_SPACE_MENU_ES))
					searchInput = title.replace(SEARCHBOXB_SPACE_MENU_ES, "");
		  else if(title.includes(SEARCHBOXB_SPACE_MENU_EN))
		  			searchInput = title.replace(SEARCHBOXB_SPACE_MENU_EN, "");
		  else if(title.includes(SEARCHBOXB_SPACE_SUBMENU_ES))
					searchInput = title.replace(SEARCHBOXB_SPACE_SUBMENU_ES, "");
		  else if(title.includes(SEARCHBOXB_SPACE_SUBMENU_EN))
					searchInput = title.replace(SEARCHBOXB_SPACE_SUBMENU_EN, "");
			*/
					
		 return searchInput[0].trim(); // Hacemos el trim para quitar el espacio que queda cuando hemos dividido Samsung (Smartphones), quedaría Samsung%20 por un lado y Smartphones por el otro
		 												       // EDIT: ya se lo hemos quitado en la regex con \s pero aún así dejamos el trim() por si acaso
}
// Función que hace el submit de la search box cuando pulsamos el botón de buscar
function searchSubmit(){
		let urlServer = setURLServer();
		
		// Si hemos puesto en el searchbox un literal que no existe entonces ponemos todo a cero para que sepa a que controlador ir, si no es que queda una
		// url tipo http://localhost:8090/search///hgfhfghfgh y esos "///" nole gustan al Tomcat y casca, ni si quiera sabe a qué controlador tiene que ir.
		// Con esto de abajo la url quedaría http://localhost:8090/search/0/0/hgfhfghfgh y ya en el controlador mostramos un mensaje que lo escrito en 
		// la searchbox no existe en BBDD en el model.addAttribute();
		if($("#searchInputId").val() == null || $("#searchInputId").val() == "" || $("#searchInputTabla").val() == null || $("#searchInputTabla").val() == ""){
			$("#searchInputId").val(0);
			$("#searchInputTabla").val(0);
		}
		
		// Debemos quitar el (marca), (menú) o (submenú) si la entrada seleccionada del searchbox lo lleva ya que si no da fallo en la
		// comprobación que hacemos en Java
		/*
		let searchInput =  $("#searchInput").val();
		alert(searchInput);
		if(document.getElementById("searchInput").value.includes(" (marca)"))
				searchInput = document.getElementById("searchInput").value.split(' (marca)')[0];
		else if(document.getElementById("searchInput").value.includes(" (brand)"))
				searchInput = document.getElementById("searchInput").value.split(' (brand)')[0];
		else if(document.getElementById("searchInput").value.includes(" (menú)"))
				searchInput = document.getElementById("searchInput").value.split(' (menú)')[0];
		else if(document.getElementById("searchInput").value.includes(" (menu)"))
				searchInput = document.getElementById("searchInput").value.split(' (menu)')[0];
		else if(document.getElementById("searchInput").value.includes(" (submenú)"))
				searchInput = document.getElementById("searchInput").value.split(' (submenú)')[0];
		else if(document.getElementById("searchInput").value.includes(" (submenu)"))
				searchInput = document.getElementById("searchInput").value.split(' (submenu)')[0];
		*/

		$("#searchButton").attr("href", urlServer + "search/" + $("#searchInputId").val() + "/" + $("#searchInputTabla").val() + "/" + $("#searchInput").val().replace(/ /g, "-")); // Sustituímos los espacios por - para la URL
	
		// Esto lo que hace, una vez hemos seteado el href dinámico, es hacer un click automático sobre la etiqueta a. Por qué? Porque si bien en Firefox
		// sin esta linea funcionaba perfectamente (añadía el href a la etiqueta a e iba al controlador) en Chrome añadí a el href a la etiqueta a pero no iba al controlador.
		// Teníamos que volver a pulsar sobre a ya una ez seteado su href dinámico para que fuera al controlador. Por eso tenemos que simular un click sobre a, porque en Chrome
		// no lo hacía.
		//document.getElementById('comboProductos').click();
		document.getElementById("searchButton").click();
}

/*An array containing all the country names in the world:*/
//var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia","Turkey","Turkmenistan","Turks & Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];


// ============================================

// Pintamos del color correspondiente el borde inferior de las pestañas de los productos */
// NOTA: SI CAMBIAMOS COLORES O AÑADIMOS COLORES EN Constants.java HAY QUE ADAPTARLOS AQUÍ Y EN LOS <li> DE products.html
function checkTagBottomColor(color, index, tag){
	
	// Determinamos el color del borde de abajo de las pestañas
	let descrColor = TAG_COLOR_DESCR_F5F5F5_PURPLE;
	let specColor = TAG_COLOR_SPEC_F5F5F5_PURPLE;
	
	if(color.includes(TAG_ORANGE_COLOR_BACKGROUND_FFEBCD)){
		descrColor = TAG_COLOR_DESCR_FFEBCD_ORANGE;
		specColor = TAG_COLOR_SPEC_FFEBCD_ORANGE;
	}

	if(tag == TAG_DESCRIPTION_ID){
			//if(document.getElementById("description-tab" + i).classList.contains( 'active' )){
			document.getElementById("description-tab" + index).style.borderBottom = "1px solid " + descrColor;
			document.getElementById("specifications-tab" + index).style.borderBottom = "1px solid black";
	}
	else{
		    document.getElementById("description-tab" + index).style.borderBottom = "1px solid black";
			document.getElementById("specifications-tab" + index).style.borderBottom = "1px solid " + specColor;
	}
	
}

// ============================================

// Función para hacer aparecer o desaparecer el botón flotante de "Ir a arriba" cuando le damos al botón  "Mostrar más" (entradas)
// Con ésto hacemos que paraezca o desaparezca el botón de "ir a arriba" según hagamos scroll
function onScroll(){ 
	   let st = $(this).scrollTop();
	   //let st = document.getElementById('body-container').scrollTo(0, 0);
	   if (st < LAST_SCROLL_TOP){
	       	//$("#floatingBtn").hide();
	       	//$("#floatingBtn").fadeOut(300);
	       	if(document.getElementById("floatingBtn"))
	       		document.getElementById("floatingBtn").style.opacity = "0";
	       	//document.getElementById("showMore").style.removeProperty("margin-left");
	       	//document.getElementById("spanShowMore").classList.remove("ml-5");
		   	//document.getElementById("spanShowMore").classList.remove("pl-5");
	   }
	   else{
	      	//$("#floatingBtn").show();
	      	//$("#floatingBtn").fadeIn(300); 
	      	if(document.getElementById("floatingBtn"))
	      		document.getElementById("floatingBtn").style.opacity = "1";
	      	//document.getElementById("showMore").style.marginLeft = "13%";
	      	//document.getElementById("spanShowMore").classList.add("ml-5");
	      	//document.getElementById("spanShowMore").classList.add("pl-5");
	   }
}
	
// Función que añade un parámetro a la URL para saber que venimos de pulsar "ventana modal" en la página de cookies para que la muestre de nuevo
function modalWindow(){
	let urlServer = setURLServer(); // Si estamos en localhost quedaría http://localhost:8080/ y si estamos en Tomcat externo quedaría http://192.168.1.140:8080/armark/
	
	window.location.href = urlServer + "home" + COOKIE_PARAM;	
	//window.history.pushState({}, document.title, "/" + "my-new-url.html");
}

// Si pulsamos el botón de configurar cookies
function configureBtn(){
       // $("#cookieModal").modal("hide");
       // $("#cookieModalConf").modal("show");
       
        //configureCookies();
        
        document.getElementById("cookieModalLabel").style.display = "none";
        document.getElementById("configureBtn").style.display = "none";
        // Descomentar si descomentamos la selección de lenguaje en la ventana modal de cookies
        //document.getElementById("btnLanguageCookies").style.display = "none";
        document.getElementById("cookieModalText").style.display = "none";
        
        document.getElementById("cookieModalTable").style.display = "block";
        document.getElementById("goBackBtn").style.display = "block";
        //document.getElementById("acceptSelected").style.display = "block";
        document.getElementById("acceptStrictlyBtn").style.display = "block";
        //document.getElementById("closeBtn").style.display = "block";
        document.getElementById("cookieModalLabelSettings").style.display = "block";
        
        // Marcamos el checkbox de las estricatemente necesarias pero aún no guardamos ninguna cookie
        /* Descomentar si volvemos a poner language y accept_cookie a disabled */
        document.getElementById("language").checked = "checked";
    	document.getElementById("language_actdes").value = enabled;
    	document.getElementById("accept_cookies").checked = "checked";
    	document.getElementById("accept_cookies_actdes").value = enabled;
    	
    	enablePointerLangAndAcceptCookies(); //Descomentar si volvemos a poner language o accept_cookies como disabled
 }
    
// Función que activa (crea) o deshabilita (borra) las cookies según le demos a check o no
function actDes(name, t, setLocale){
	
	if($("#" + name).is(':checked')){
            //$("#cookies_control_actdes").val('Activado');
            
            if(!getCookie(name) &&
              // Si no estamos en la ventana modal, guardamos la cookie directamente en cuanto hablitemos el checkbox. En la ventana modal hace falta presionar botón de guardar cookies
              ($("#checkCookiesTable").parent().parent().attr('id') == null ||
			   typeof $("#checkCookiesTable").parent().parent().attr('id') == 'undefined' || //https://stackoverflow.com/questions/3390396/how-can-i-check-for-undefined-in-javascript
			   $("#checkCookiesTable").parent().parent().attr('id') != "cookieModalTable")){
            	   if(name == COOKIE_LANGUAGE_LITERAL || (setLocale != null && setLocale != 'undefined')) // Si es la cookie de language se setea con la función setLanguageCookie(setLocale);
            	   		setLanguageCookie(setLocale);
            	   	else	
            	   		setCookie(name, true, t); // Sólo guardamos la cookie si no estamos en ventana modal, en ventana modal se gurdan a través de los botones de aceptar cookies
           	}
           	// Ya sea ventana modal o no, cada vez que cambiemos el checkbox tienen que aparecer el mensaje de enabled o disabled
            document.getElementById(name).checked = "checked";
            document.getElementById(name + "_actdes").value = enabled;
        } else{
	            //alert("No está activado");  
	            //$("#cookies_control_actdes").val('Desactivado');
	            // Borramos la cookie si no estamos en ventana modal, desde la ventana modal se aceptan o no pulsando los botones de aceptar cookies
	            if(($("#checkCookiesTable").parent().parent().attr('id') == null ||
			   		typeof $("#checkCookiesTable").parent().parent().attr('id') == 'undefined' || //https://stackoverflow.com/questions/3390396/how-can-i-check-for-undefined-in-javascript
			   		$("#checkCookiesTable").parent().parent().attr('id') != "cookieModalTable"))
	            		eraseCookie(name);
	            
	            // Ya sea ventana modal o no, cada vez que cambiemos el checkbox tienen que aparecer el mensaje de enabled o disabled
	            document.getElementById(name + "_actdes").value = disabled;
            }
    }  
 
 // Función que pone los checks en su correspondiente posición según carga la página de cookies
 function comprobarCheckBox(name){
	// Descomentar si volvemos a poner disabled en language y accept_coockies
	document.getElementById(name).checked = "checked";
    document.getElementById(name + "_actdes").value = enabled;
    
    /* Descomentar si volvemos a quitar disabled y poder elegir idioma y accept_cookies
	if(getCookie(name)){
		document.getElementById(name).checked = "checked";
        document.getElementById(name + "_actdes").value = enabled;
	}else{
		document.getElementById(name).checked = "";
		document.getElementById(name + "_actdes").value = disabled;
	}
	*/
}

// Función que recupera el valor de una cookie en especial pasándole el nombre de la cookie
function getCookieValue(cookieName) {
  const cookies = document.cookie.split('; '); // Divide las cookies en pares clave=valor
  for (const cookie of cookies) {
    const [name, value] = cookie.split('='); // Divide la clave del valor
    if (name === cookieName) {
      return decodeURIComponent(value); // Decodifica el valor
    }
  }
  return null; // Devuelve null si no se encuentra la cookie
}

// Función que setea una cookie
function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;SameSite=Lax"; // ¿Añadir Secure si queremos que la cookie sea en un contexto seguro (https)?

        /*
        if(cname == LANGUAGE_COOKIE_LITERAL){
        	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;secure";
        	alert(document.cookie);
        }
        */
        
        // Si estamos en la paǵina de cookies la recargamos para que aparezcan los checkbox de forma correcta (habilitados o no)
        //if(!!document.getElementById(cname)){ // 2 "!!"??? Eso  es doble negación, no? Es como un "sí" o qué quiere decir????
        if(document.getElementById(cname)){    // Con esto estamos comprobando que exista el elemento html a checkear y a darle valor.
        																			// Puede que no estemos en la paǵina de cookies cuando aceptamos o rechazamos las cookies en el mensajito
        																			// que mostramos y entonces intentaríamos hacer un checked = checked en un elemento que no existe
																					// Si existe el elemento en el DOM, esto nos devuelve true
				document.getElementById(cname).checked = "checked";
	        	document.getElementById(cname + "_actdes").value = enabled;
	    }
    }
   
 // Función que elimina todas las cookies
function eraseAllCookies(){
	    /*eraseCookie('language');
	    eraseCookie('acceptCookies');
	    eraseCookie('cookies_control');
	    eraseCookie('cookies_update');*/
	     let cookies = document.cookie.split(';');
	     for(let i = 0; i < cookies.length; i++) {
			 // cookies[i] nos devuelve, por ejemplo: language=es-Es, acceptCookies=true, etc... Nos queremos quedar sólo con el nombre, luego le hacemos un split a
			 // cookies[i] separando por '=' y nos quedamos con [0] aunque la verdad es que sin hacer este segundo split también estaba funcionando, no sé por qué...
			 //alert(cookies[i].split('=')[0]);
	         document.cookie = cookies[i].split('=')[0] +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
	     }
}

// Función que borra una cookie 
function eraseCookie(name) {   
	   //alert("Borra " + name);
       document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

// Función que nos dice si una cookie existe o no
function getCookie(cname) {
	
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) === ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) === 0) {
				//alert("ACookie existe");
                //return c.substring(name.length, c.length);
                return true;
            }
        }
    	//alert("ACookie NO existe");
        //return "";
        return false;
 }
    
// Si pulsamos el botón de aceptar todas las cookies...
function acceptCookies(setLocale){
		setLanguageCookie(setLocale);
		
	    setCookie(COOKIE_ACCEPT_LITERAL, true, COOKIE_ACCEPT_TIME);
	    /* Descomentar si volvemos a usar estas cookies o copiar esto para usar otras nuevas
        setCookie(COOKIE_CONTROL_LITERAL, true, COOKIE_CONTROL_TIME);
        setCookie(COOKIE_UPDATE_LITERAL, true, COOKIE_UPDATE_TIME);
        */
	   
        // Cerramos la ventana modal
        //$('#cookieModal').modal('hide');
        
        //cookieAlert.classList.remove("show");
        
        // dispatch the accept event
        //window.dispatchEvent(new Event("cookieAlertAccept"));
}

// Si pulsamos el botón de aceptar sólos las cookies necesarias...
function acceptStrictlyCookies(setLocale){
		setLanguageCookie(setLocale);
		
	    setCookie(COOKIE_ACCEPT_LITERAL, true, COOKIE_ACCEPT_TIME);
	    /* Descomentar si volvemos a usar estas cookies o copiar esto para usar otras nuevas
        eraseCookie(COOKIE_CONTROL_LITERAL);
	    eraseCookie(COOKIE_UPDATE_LITERAL);
        */
	   
        // Cerramos la ventana modal
        //$('#cookieModal').modal('hide');
        
        //cookieAlert.classList.remove("show");
        
        // dispatch the accept event
        //window.dispatchEvent(new Event("cookieAlertAccept"));
}

// Si presionamos el botón de aceptar las cookies seleccionadas por nosotros...
function acceptSelectedCookies(setLocale){
		// Estas son las estrictamente necesarias. EDIT: Hemos cambiado a que se puedan activar y desactivar, por lo que lo que vale es lo de abajo
		//setLanguageCookie(setLocale);
	    //setCookie(COOKIE_ACCEPT_LITERAL, true, COOKIE_ACCEPT_TIME);
	    
	    if(document.getElementById('language') && document.getElementById('language').checked)
			setLanguageCookie(setLocale);
		else
			eraseCookie(COOKIE_LANGUAGE_LITERAL);
			
		 if(document.getElementById('accept_cookies') && document.getElementById('accept_cookies').checked)
			setCookie(COOKIE_ACCEPT_LITERAL, true, COOKIE_ACCEPT_TIME);
		else
			eraseCookie(COOKIE_ACCEPT_LITERAL);
			
	    // Estas dependiendo cuál hemos seleccionado o no se guarda una y/u otra
	    /*
	    if(document.getElementById('cookies_control') && document.getElementById('cookies_control').checked)
			setCookie(COOKIE_CONTROL_LITERAL, true, COOKIE_CONTROL_TIME);
		else
			eraseCookie(COOKIE_CONTROL_LITERAL);
			
		 if(document.getElementById('cookies_update') && document.getElementById('cookies_update').checked)
			setCookie(COOKIE_UPDATE_LITERAL, true, COOKIE_UPDATE_TIME);
		else
			eraseCookie(COOKIE_UPDATE_LITERAL);
        */
	   
        // Cerramos la ventana modal
        //$('#cookieModal').modal('hide');
        
        //cookieAlert.classList.remove("show");
        
        // dispatch the accept event
        //window.dispatchEvent(new Event("cookieAlertAccept"));
}

// Función que setea correctamente el valor de la cookie de lenguaje
function setLanguageCookie(setLocale){
	if(setLocale == LOCALE_ES)
		setCookie(COOKIE_LANGUAGE_LITERAL, LOCALE_ES_ES); // Al no ponerle tiempo le decimos que dura sólo la sesión en curso
	else
		setCookie(COOKIE_LANGUAGE_LITERAL, LOCALE_EN_US); // Al no ponerle tiempo le decimos que dura sólo la sesión en curso
}

// Función que resetea todas las cookies -> SOLO PARA DESARROLLO
/*
function reset(){
		// Eliminamos todas las cookies
		eraseAllCookies();
	    // Recargamos la página para que nos aparezca la ventana modal de cookies
	    // EDIT: Por lo visto no hace falta que recarguemos la página para que vuelva a aparecer la ventana modal
		//location.reload();
		
	   // cookieAlert.classList.add("show");
}
*/

// Función que pinta o no el botón de lenguaje en función si hemos aceptado las cookies estrictamente necesarias o no
// La usaremos en <body onload="javascript: showLangButton();"> de cada página si volvemos a poner como checkeables language y accept_cookies
function  showLangButton(){
		if(document.getElementById("btnLanguage")){
				if(getCookie("language"))
						  document.getElementById("btnLanguage").style.display = "block";
				else
						  document.getElementById("btnLanguage").style.display = "none";
		}
}

// Función que habilita el puntero default en las cookies language y acceptCookies
function enablePointerLangAndAcceptCookies(){
	// Como nos vamos a la ventana modal y ahí el checkbox va a estar marcado sí o sí pues forzamos que el puntero sea default y no pointer.
		if(document.getElementById("languageLabel"))
			document.getElementById("languageLabel").style.cursor = "default";
				
        // Lo mismo para acceptCookies
		if(document.getElementById("accept_cookiesLabel"))
			document.getElementById("accept_cookiesLabel").style.cursor = "default";
}

 // ============================================================================
 
// Función que obtiene maś entradas en la sección de abajo de la página principal
function getMoreEntries() {
	// location.href.split("home")[0] es lo mismo que http://192.168.1.140:8080/armark/ o que http://localhost:8080/
	// Podemos dar de alta un email desde cualquier URL:  /, /home, /index y /products (por ahora),  hay que hacer split por estas URLs
	// PROD
	/* 1º Forma
	let urlServerArray = location.href.split("/");
	let urlServer = urlServerArray[0] + "//" + urlServerArray[2] + "/"; // Si estamos en localhost quedaría http://localhost:8080/
	if(urlServerArray[3].includes("armark")) // Si estamos en Tomcat externo quedaría http://192.168.1.140:8080/armark/
		urlServer = urlServer + urlServerArray[3] + "/"; 
	*/
	
	//alert("0.. " + urlServerArray[0] + "   1..  " + urlServerArray[1] + "   2.. "  + urlServerArray[2] + "   3.. " + urlServerArray[3] + "   4..  " + urlServerArray[4] + "   5..  " + urlServerArray[5]);
	
	/* 2ª Forma */
	let urlServer = setURLServer(); // Si estamos en localhost quedaría http://localhost:8080/ y si estamos en Tomcat externo quedaría http://192.168.1.140:8080/armark/
		
	$.ajax({
	    url: urlServer + 'restOf/' + cant, // Con esto le decimos que se vaya al controlador que tenga esta url para procesar, en este caso está en HomeController.java 
						                                          // en @GetMapping(value = {"/restOf/{cant}"}), cuya función es  public ResponseEntity<Vo> listAllUsers(..){..} aunque nos da igual cómo
						                                          // se llame la función, ya vemos que como hacemos referencia a ella el porque tenga la url @GetMapping(value = {"/restOf/{cant}"}), como si a la función
						                                          // la queremos llamar function federica(..){..}
	    type: 'GET',
	    async : true,
	    success: function(respuesta) {
	      var listaUsuarios = $("#restOf" + cant);
	      
	      if(respuesta != null && respuesta != "" && respuesta != 'undefined' && respuesta.data.length > 0){ // Si hay entradas para mostrar...
		      $.each(respuesta.data, function(index, elemento) {
		      
			        var title = elemento[1].replace(/ /g, '-'); // Con esto ponemos guiones en los espacios del título para mostrarlo en la URL
			        //alert(document.getElementById("restOf1"));

			        // Miramos si añadimos la imagen por defecto o si en la BBDD había una imagen guardada
			        let imagenDB = '<img src="/images/default_entry.svg" class="img-radius" />'; // Por defecto consideramos que no hay imagen guardada en BBDD.
			        if(elemento[4] != null && elemento[4] != "" && elemento[4] != "undefined" && elemento[4] == "true") // Si sí hay imagen en guardada en BBDD
			        		imagenDB = '<img src="' + elemento[5] + '" class="img-radius" />'; // elemento[5] es la iamgen venida de BBDD
					
					let shortAndSeoDescription = ""; 
					// Miramos si hay descripción corta y de SEO. Entendemos que sí pero por si acaso
					if(elemento[2] != null && elemento[2] != "" && elemento[2] != "undefined") // Si sí hay imagen en guardada en BBDD
							shortAndSeoDescription = elemento[2];
							
			        listaUsuarios.append(
				        '<a href="' + urlServer + 'entries/' + elemento[0] + '/' + title + '" style="text-decoration: none;">'
				        +   '<hr/>'
				        +	'<div class="row">'
				        +	   '<div class="col-xl-4 col-lg-12">'
				        +			'<figure class="figure">'
	  					+				'<div class="box contenedor-img text-center" style="width: 145px; height: 145px;">'
						+					imagenDB
						+	   			'</div>'	
						+			'</figure>'
						+	   '</div>'	  
						+	   '<div class="col-xl-8 col-lg-12 mb-0">'
						+		   '<h5 class="text-uppercase font-weight-bold" style="color: #000000;">' + elemento[1] + '</h5>'
						+	       '<p style="color: #000000;" class="mt-1">' + shortAndSeoDescription + '</p>'
						+		   '<span class="figure-caption">' + elemento[3] + '</span>'
						+	   '</div>'
						+	'</div>'
						+'</a>'
			        );  
		      });
		      
		      // Aquí es donde vamos a añadir la siguiente tanda de entradas a mostrar si pulsamos el botón de mostrar más entradas
		      cant += 1;
		      
		      // Volvemos a hacer una petición al controlador solo para saber si hay más entradas para mostrar, ya que si
		      // en la última tanda de 5 son los últimos que hay y ha cuadrado que son 5, no sabemos si hay más o no y seguimos mostrando el botón.
		      // Entonces hacemos la llamada y si nos devuelve que respuesta2.data.length es cero es que no hay más que mostrar y quitamos el botón
		      // y tampoco creamos el <div id="restOf' + cant + '"></div>
		      $.ajax({
				    url: urlServer+ 'restOf/' + cant,
				    type: 'GET',
				    async : true,
				    success: function(respuesta2) {
						      if(respuesta2 != null && respuesta2 != "" && respuesta2 != 'undefined' && respuesta2.data.length > 0){
							      listaUsuarios.append(
							      		'<div id="restOf' + cant + '"></div>'
							      );
							  }
							  else
							  	  $("#showMore").hide();
						},
						error: function() {
						      console.log("No se ha podido obtener la información");
						      //alert("No se ha podido obtener la información");
					    }
				  });
		  }
		  
		  // Si no hay elementos para mostrar quitamos el botón de mostrar más entradas
		  /*if(respuesta.data.length < 5){ 
		  	$("#showMore").hide();
		  }*/
		  
	    },
	    error: function() {
	      console.log("No se ha podido obtener la información");
	      //alert("No se ha podido obtener la información");
	    }
	  });
	  
}

// ============================================================================

// Función que da de alta o de baja un mail para la Newsletter
function setNewsletter(action, method){
	// Get the snackbar DIV
	//let x = document.getElementById('snackbar');
	
	// location.href.split("home")[0] es lo mismo que http://192.168.1.140:8080/armark/ o que http://localhost:8080/
	// Podemos dar de alta un email desde cualquier URL:  /, /home, /index y /products (por ahora),  hay que hacer split por estas URLs
	// PROD
	/* 1º Forma
	let urlServerArray = location.href.split("/");
	let urlServer = urlServerArray[0] + "//" + urlServerArray[2] + "/"; // Si estamos en localhost quedaría http://localhost:8080/
	if(urlServerArray[3].includes("armark")) // Si estamos en Tomcat externo quedaría http://192.168.1.140:8080/armark/
		urlServer = urlServer + urlServerArray[3] + "/"; 
	*/
	
	//alert("0.. " + urlServerArray[0] + "   1..  " + urlServerArray[1] + "   2.. "  + urlServerArray[2] + "   3.. " + urlServerArray[3] + "   4..  " + urlServerArray[4] + "   5..  " + urlServerArray[5]);
	
	/* 2ª Forma */
	let email = document.getElementById('emailField').value;
	let urlServer = setURLServer(); // Si estamos en localhost quedaría http://localhost:8080/ y si estamos en Tomcat externo quedaría http://192.168.1.140:8080/armark/
	
	if(validateEmail(email)){
			$.ajax({
				headers: {          
									   Accept: "text/plain; charset=utf-8",         
									   "Content-Type": "text/plain; charset=utf-8"   
								  },
				// PROD => location.href.split("home")[0] es lo mismo que http://192.168.1.140:8080/armark/
			    url:  urlServer + 'newsletter/' + action + '/' + email,
			    // DEV
			    //url:  "/newsletter/" + action + "/" + email,
			    type: method,
			    dataType: "text", // Es como queremos que nos devuelva el controlador los datos, en este caso como un texto, como un String.
			                                    // Importante esta linea, por defecto "result" o "response" lo recibiremos aquí en javascript como objeto y no como String
			                                    // y no podremos enseñar el mensaje. EDIT: sí podemos enseñarlo pero tendremos que tratarlo como un objeto y de ahí coger
			                                    // el emnsaje, mucho más sencillo si le decimos que nos devuelva el texto directamente.
			    async : true,
			    success: function(result) {
						document.getElementById('emailField').value = ""; // Limpiamos el campo del email
			        	setMsgAlert("errorMsg", "successMsg", "successStrong", result, action);
			    },
			    error: function(response) {
						setMsgAlert("successMsg", "errorMsg", "errorStrong", null, action);
			    }
			});
	}
	else // Si el mail no tiene el formato correcto...
		setMsgAlert("successMsg", "errorMsg", "errorStrong", null, action);
	
}

// Funcíon que setea correctamente el mensaje a mostrar en la acción de la newsletter
function setMsgAlert(hide, show, inner, message, action){
	let msg = message;

	if(msg == null){ // Significa que es un mensaje de error y lo seteamos aquí
		msg = msgToastErr; // Por defecto creeremos que está dando de alta un mail
		
		if(action == DELETE_ACTION) // Si en verdad está dando de baja un mail, seteamos el mensaje correcto
			msg = msgToastErrDel;
	}
		
	 document.getElementById(hide).style.display = "none";
	 document.getElementById(show).style.display = "block";
	 document.getElementById(inner).innerHTML= msg;
	 
	 $('#' + show).fadeTo(7000, 500).slideUp(500);
}

// ============================================================================

// Función que comprueba que un email esté bien formado
function validateEmail(email) {
 	 const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  	 return re.test(email);
}

// ============================================================================

// Función que muestra el snackbar una vez que ya se han hecho todas las comprobaciones, inserciones o borrados pertienentes en BBDD
function showSnackbar(msg, x) {
	  x.textContent = msg;
	
	  // Add the "show" class to DIV
	  x.className = "show";
	
	  // After 3 seconds, remove the show class from DIV
	  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
	  
}

// ============================================================================

// Función que centra y corrige el  tamaño de las 2 primeras imágenes de las entradas en el home
function  setEntryImageSize(){
	 var width = document.documentElement.clientWidth;

	 // Volvemos a poner la clase crop para tamaños mayores o iguales a este. Esta clase lo que hace es centrar las imágenes de las 2 primeras entradas en home	 
	 if(width >= 768){
      	for(let i = 0; i <= 1; i++){
	     	if(document.getElementById('containerCrop_' + i))
      			document.getElementById('containerCrop_' + i).classList.add("container-crop");
      			
	     	if(document.getElementById('centerImg_' + i))
	     		document.getElementById('centerImg_' + i).classList.add("crop");
	    }
	     		
     }
     
    // Ésto lo hacemos para que cuando la pantalla sea de este tamaño el texto de "Publicado: 23 de Septiembre de 2023" quede debajo de la imagen bien colocado
    // Si no lo ponemos el texto de "Published" se va a la izquierda y queda mal. Pasa en la segunda imagen de las entradas en home auqnue tal como lo hemos puesto
    // también está para la imagen 1 aunque esta sí que lo hace bien aunque no le coloquemos este style.
    else if(width < 768){
     	for(let i = 0; i <= 1; i++){
			 if(document.getElementById('containerCrop_' + i))
     			document.getElementById('containerCrop_' + i).classList.remove("container-crop");

	     	if(document.getElementById('centerImg_' + i))
	     		document.getElementById('centerImg_' + i).classList.remove("crop");
		}
			     
     }
	 
}

/* Función para mostrar más o menos items en el carrousel superior principal */
function changeItemsCarousel() {
    // Obtenemos el ancho de la pantalla
    var width = document.documentElement.clientWidth;

    //alert(width);
    
	// Ocultamos todos los carrouseles...
	/* Comprbar a ver si funciona
	for(var i = 1; i == 7; i++)
		$("#carouselSuperior" + i).hide();
	*/
	
	// ==================================
	$("#carouselSuperior7").hide();
	$("#carouselSuperior6").hide();
	$("#carouselSuperior5").hide();
    $("#carouselSuperior4").hide();
    $("#carouselSuperior3").hide();
    $("#carouselSuperior2").hide();
    $("#carouselSuperior1").hide();
	
    // ... y mostramos el que corresponda a la anchura de la pantalla
    if (width >= 1700)
      	$("#carouselSuperior7").show();
    else if (width >= 1400 && width < 1700)
        $("#carouselSuperior6").show();
    else if (width >= 1130 && width < 1400)
      	$("#carouselSuperior5").show();
    else if(width >= 900 && width < 1130)
      	$("#carouselSuperior4").show();
    else if(width >= 500 && width < 900)
      	$("#carouselSuperior3").show();
    else if(width >= 300 && width < 500)
      	$("#carouselSuperior2").show();
    else if(width < 300)
      	$("#carouselSuperior1").show();
    
    /*
     if(width < 768){
    	//$("#checkCookiesTable").hidden();
    	document.getElementById('checkCookiesTable').innerHTML = "";
    	//document.getElementById('checkCookiesTable').disabled = true;
    	document.getElementById('checkCookiesTable2').disabled = false;
    	
    	comprobarCheckBox("language");
		comprobarCheckBox("acceptCookies");
		comprobarCheckBox("cookies_control");
		comprobarCheckBox("cookies_update");
    }
    else
    {
    	//$("#checkCookiesTable").hidden();
    	document.getElementById('checkCookiesTable').disabled = false;
    	document.getElementById('checkCookiesTable2').disabled = true;
    	
    	comprobarCheckBox("language");
		comprobarCheckBox("acceptCookies");
		comprobarCheckBox("cookies_control");
		comprobarCheckBox("cookies_update");
    }
    */
      // ==================================
      
    // LO NUEVO --> No vale, Thymeleaf se crea en la parte del servidor, todos los atributos que empiecen por "th:" no funcionarán haciendo el replaceWith, ni append
    // ni nada de eso. Podríamos hacer que se vaya a servidor y luego pintarlo de alguna forma pero es que si estás redimensionando una ventana, por cada pixel
    // que redimensione se va a servidor, es una locura!!!
    /*
    var i = 7;

    if (width >= 1700)
      	i = 7;
    else if (width >= 1400 && width < 1700)
        i = 6;
    else if (width >= 1130 && width < 1400)
      	i = 5;
    else if(width >= 900 && width < 1130)
      	i = 4;
    else if(width >= 700 && width < 900)
      	i = 3;
    else if(width >= 500 && width < 700)
      	i = 2;
    else if(width < 500)
      	i = 1;
    

   $("#carouselSup").replaceWith(
		    '<div style="height: 160px;">'
		    
	    +  	'<div th:id="idCarousel' + i + '" class="carousel slide" style="margin-top: 60px;" data-ride="carousel" th:with="productsPerPage=' + i + ',pages=${#lists.size(productosCarousel) % productsPerPage} == 0 ? ${#lists.size(productosCarousel) / productsPerPage} : ${#lists.size(productosCarousel) / productsPerPage + 1}">'
	        
	        		 //Si hay más de un producto en el carrousel, ponemos las flechitas del carrousel, los indicadores
		+  		 '<ol class="carousel-indicators" th:if="' + i + ' > 2">'
	        		   //Primero por el class="active" recomendado para que aparezca en negrita el indicador de página según carga. No funcionó th:classappend
		+	     		'<li th:data-target="\'#idCarousel\'' + i + '" data-slide-to="0" class="active"></li>'
		    		    //El resto...
		+      		 '<li th:data-target="\'#idCarousel\'' + i + '" th:data-slide-to="${j}" th:each="j: ${#numbers.sequence(1, pages - 1, 1)}"></li>'
		+			 '</ol>'
			  
		    		 //Items
		+  		 '<div class="carousel-inner">'
		+	      		'<div class="carousel-item text-center align-items-center justify-content-center" th:each="k: ${#numbers.sequence(1, pages, 1)}" th:classappend="${k} == 1 ? active">'
		+	         		 '<a th:href="${productosCarousel[j - 1].nombre}" class="figure" style="margin: 30px;" th:each="j: ${#numbers.sequence(k * productsPerPage - productsPerPage + 1, k * productsPerPage, 1)}" th:if="${j <= #lists.size(productosCarousel)}">'
		+						'<img class="img-main-carousel" th:src="\'data:image/svg+xml;charset=UTF-8,\' + ${productosCarousel[j - 1].imagen1}">'
		+						'<div class="figure-caption text-center align-items-center justify-content-center" th:text="${productosCarousel[j - 1].nombre}"></div>'
		+						'<div class="figure-caption text-center align-items-center justify-content-center" th:text="${#locale.language} == #{code.locale.en} or ${#locale.language} == null ? \'&euro; \' + ${#numbers.formatDecimal(productosCarousel[j - 1].precio, 0, \'COMMA\', 2, \'POINT\')} : ${#numbers.formatDecimal(productosCarousel[j - 1].precio, 0, \'POINT\', 2, \'COMMA\')} + \' &euro;\'"></div>'
		+			 		 '</a>'
		+	     		 '</div>'
		+	 		 '</div>'
		
		    		 //Flechas de control
		+		      '<a class="carousel-control-prev" th:href="\'#idCarousel\'' + i + '" role="button" data-slide="prev">'
		+			      '<span class="carousel-control-prev-icon" aria-hidden="true"></span>'
		+			      '<span class="sr-only">Previous</span>'
		+			  '</a>'
		+			  '<a class="carousel-control-next" th:href="\'#idCarousel\'' + i + '" role="button" data-slide="next">'
		+			      '<span class="carousel-control-next-icon" aria-hidden="true"></span>'
		+			      '<span class="sr-only">Next</span>'
		+			  '</a>'
		
		+	  	  '</div>'
		
		+		'</div>'
	    );
    */
   
    // ==================================
    
    // Llamamos a esta función también para ver si expandemos o no el menú superior
    expandMenu(width); 
    
}

// ============================================================================

/* Añade o quita clase para expandir o no el navbar */
function expandMenu(width) {

    // Añadimos la clase o la quitamos para que se expanda el menú del navbar o se haga dropdown dependiendo de la anchura de pantalla del dispositivo
    if(width >= 1211) // En CSS es 1225
    	$("#idNavBar").addClass("navbar-expand");
    else
    	$("#idNavBar").removeClass("navbar-expand");
    
}

// ============================================================================

/*
function cambiarTexto() {
    var width = document.documentElement.clientWidth;
    //alert("AAA " + width);
    if (width >= 900){
      document.getElementById("smaller").style.fontSize = "xxx-large";
      document.getElementById("smaller").style.height = "75px";
    }else if (width < 900 && width > 700){
      document.getElementById("smaller").style.fontSize = "xx-large";
      document.getElementById("smaller").style.height = "72px";
    }else if(width < 600){
      document.getElementById("smaller").style.fontSize = "x-large";
      document.getElementById("smaller").style.height = "67px";
    }else if(width < 400){
      document.getElementById("smaller").style.fontSize = "100%";
      document.getElementById("smaller").style.height = "63px";
    }
}

// Hacemos esto porque en móvil no funciona cambiarTexto y en escritorio no funciona cambiarTexto()
// Es que es flipante
if(isMobile.any())
	window.addEventListener("resize", cambiarTexto());
else
	window.addEventListener("resize", cambiarTexto);
*/

// ============================================================================


// Hace que el tr entero de la tabla "últimas entradas" se el link, si ponemos <a> queda mal, solo sería link el texto
/*
$(document).ready(function(){
    $('#tableUE tr').click(function(){
        window.location = $(this).attr('href'); // Ojoooo: aunque en HTML el atributo se th:href aquí hacemos referencia a href simplemente
        return false;
    });
});
*/

// COOKIES
// Checkboxes de la página de cookies
//función que activa o desactiva los checkboxes de la página de cookies según les demos con el puntero del ratón
/*
$(document).ready(function(){  
	
	// Si la cookie accpetCookies no existe significa que nunca se ha aceptado las cookies, ni si quiera ha entrado en configuración de cookies
	// luego hay que mostrar la ventana modal de cookies hasta que las acepte o las configura, es un usuario nuevo.
  	if (!getCookie("acceptCookies")) {
        $('#cookieModal').modal('show');
    }
    
    // Checkbox cookies_control
    $("#cookies_control").click(function() {  
       	 actDes("cookies_control");
    });  
    
     // Checkbox cookies_update
    $("#cookies_update").click(function() {  
  		  actDes("cookies_update");
  }); 
}); 
*/

// ============================================================================

// Función que esconde el submenú si salimos del ratón de él. Si no es que se queda el submenú desplegado
function hideSubMenu(idSubmenu){
	
	//if(!isMobile.any()){ // Esta comprobación la estamos haciendo en la llamada a esta función, en layout.html
		var width = document.documentElement.clientWidth;

		// Si el menú está contraído no ocultamos el submenú, que hace una cosa extraña y queda mal, como que desaparece de repente y desplaza
		// los elementos del menú y no queda bien
		if(width >= 1100)
			document.getElementById(idSubmenu).setAttribute("class", "dropdown-menu");
	//}
}

// Función para que no haga scroll de la web cuando estamos pulsando en el menú. Ocurre en pantallas pequeñas donde la barra del menú al darle al botón
// para expandir el menú es muy gorda para mostrar las opciones del menú.
// Solo para móvil. Es que para PC hace un efecto muy feo porque esconde o muestra la barra de scroll a la derecha y hace que la página se mueva y queda muy mal.
// Así que solo para pantallas móviles.
function blockScroll(){
		//if(isMobile.any()) // Esta comprobación la estamos haciendo en la llamada a esta función, en layout.html
			$("html, body").css("overflow","hidden");
}

// Función para que haga scroll de la web cuando estamos fuera del menú. También colapsa el menú para que no quede abierto. Ocurre en pantallas pequeñas
// donde la barra del menú al darle al botón para expandir el menú es muy gorda para mostrar las opciones del menú.
// Solo para móvil. Es que para PC hace un efecto muy feo porque esconde o muestra la barra de scroll a la derecha y hace que la página se mueva y queda muy mal.
// Así que solo para pantallas móviles.
function releaseScroll(){
		if(isMobile.any())
			$("html, body").css("overflow","scroll");

		// Aquí tratamos el tema de los submenús (ya sea para móvil o para PC), que si lo abres con el browser como si fuéramos a testear para móvil, así pequeño, y luego le das a hacer scroll (por lo que se colapsa el menú),
		// al expandir el browser a un tamaño normal el submenú queda abierto. Pues con lo siguiente evitamos eso:
        // Sabemos cuántas entradas de menú hay pero no cuáles de esas entradas tienen submenú, así que preguntamos por los submenús posibles que podrían formarse si 
        // existen, y si existen entonces los cerramos.
		for(var i = 0; i < menuSize; i++) // menuSize está declarado en el layout.html como variable global, por eso lo podemos usar aquí sin tener que definirlo en este archivo ( javascript.js)
			if(document.getElementById("submenu" + i)) // Esto pregunta si este elemento (este submenú) existe, y si existe pues lo colapsamos
				document.getElementById("submenu" + i).setAttribute("class", "dropdown-menu"); // Colapsamos el submenú si hay alguno abierto
			
		document.getElementById("navbarNav").setAttribute("class", "collapse navbar-collapse pl-3"); // Colapsamos el menú entero
}

// ====================================================================

// Ésto es para menú y submenús del navbar. Necesitamos esta función porque tal como estaba montado el <a> sólo funciona si pulsas en el icono o en el texto, no si pulsas en el resto del <li>
// Con esta función hacemos que funcione en el resto del <li>
function setLinkMenuAndSubmenu(id){
	// Lo único que hacemos es que cuando pulsemos en cualquier sitio del <li> realmente hacemos click en el <a>
	document.getElementById(id).click();
}

/*
$(document).ready(function(){
    
     // Si pulsamos el botón de configurar cookies
    $("#configureBtn").click(function(){
        $("#cookieModal").modal("hide");
        configureCookies();
    });
    
     // Si pulsamos el botón de aceptar cookies...
    $("#acceptBtn").click(function(){
          $("#cookieModal").modal("hide");
          acceptCookies();
    });
    
    // Si pulsamos el botón de resetear cookies (solo para desarrollo)
    $("#btnReset").click(function(){
        reset();
        $("#cookieModal").modal("show");
    });
    /*
    $("#myModal").on('hidden.bs.modal', function () {
            alert("Esta accion se ejecuta al cerrar el modal")
    });
    */
/*
});
*/