let ville = 'Lescheraines';
recevoirTemperature(ville);

let button = document.querySelector('#changer');
button.addEventListener('click', () => {
  ville = prompt('Choisissez une ville :');
  recevoirTemperature(ville);
});

function recevoirTemperature(ville) {
  const url = 'https://api.openweathermap.org/data/2.5/weather?q=' + ville + '&appid=eb3e55ca0093756f2541d5ad27c5021c&units=metric';
  
  /* https://api.openweathermap.org/data/2.5/weather?q=Lescheraines&appid=eb3e55ca0093756f2541d5ad27c5021c&units=metric */ 
  
  let requete = new XMLHttpRequest();
  requete.open('GET', url);
  requete.responseType = 'json';
  requete.send();

  requete.onload = function() 
  {
    if (requete.readyState === XMLHttpRequest.DONE) 
	{
      if (requete.status === 200) {
        let reponse = requete.response;
        let ville = reponse.name;
        let temperature = reponse.main.temp;
		let temperatureArrondie = temperature.toFixed(1);

		let temps = reponse.weather[0].main;
        // DEBUG POUR FORCER LA PLUIE
        // let temps = 'Rain'; 

        document.querySelector('#ville').textContent = ville;
        document.querySelector('#temperature_label').textContent = temperatureArrondie;
        document.querySelector('#temps_label').textContent = temps;

		if (temps === 'Rain')
		{
			  let divPluie = document.querySelector('.pluie');
			  divPluie.style.display = 'block';
			  divPluie.style.visibility = 'visible';

			  let divNuages = document.querySelector('.nuages');
			  divNuages.style.display = 'block';
			  divNuages.style.visibility = 'visible';
		}
		if (temps === 'Fog')
		{
			  let divBrouillard = document.querySelector('.brouillard');
			  divBrouillard.style.display = 'block';
			  divBrouillard.style.visibility = 'visible';
		}
		if (temps === 'Clouds')
		{
			  let divNuages = document.querySelector('.nuages');
			  divNuages.style.display = 'block';
			  divNuages.style.visibility = 'visible';
		}
      }
	  else
	  {
        // alert('Un problème est intervenu, merci de revenir plus tard.');
      }
    }
	
	
	let currentDate = new Date();
	let currentHour = currentDate.getHours();

	
	/* IL FAIT NUIT */
	
	let heure_max = '19';
	let heure_min = '7';
    // DEBUG POUR FORCER LA NUIT
	// let heure_max = '0';
	// let heure_min = '25';
    // DEBUG POUR FORCER LE JOUR
	// let heure_max = '25';
	// let heure_min = '0';
	
	if (currentHour >= heure_max || currentHour < heure_min)
	{

	  let divChauveSouris = document.querySelector('.chauve-souris');
	  divChauveSouris.style.display = 'block';
	  divChauveSouris.style.visibility = 'visible';



	  let style = document.createElement('style');
	  style.textContent = `
		
							/* MONOCHROME :-) */
							:root {
							--rouge: 120,120,120;
							--rouge-toujours: 240,90,8;
							--jaune: 143,143,143; 
							--vert: 165,165,165; 
							--gris: 49,49,49; 
							--gris-clair: 221,221,221; 
							--gris-baleine: 162,162,162; 
							--noir: 0,0,0; 
							--blanc: 255,255,255; 
							--orange: 143,143,143; 
							--bleu: 176,176,176; 
							--bleu-fonce: 120,120,120; 
							--bleu-facebook: 120,120,120; 
							--ricard: 56,56,56; 
							--jaune-ricard: 155,155,155; 
							--cannabis: 120,120,120; 
							--rose: 181,181,181; 
							--violet: 120,120,120; 

							--rouge-fonce-pour-ribbon: 56,56,56; 
							--bleu-fonce-pour-ribbon: 56,56,56; 
							--vert-fonce-pour-ribbon: 56,56,56; 


							}
							
							.biere-colonne1 img {
								filter: grayscale(100%);
							}
							
							html {
									width: 100%;
									height: 100%;


									background: url(images/fond1_NB.jpg) ; 
									
									-webkit-background-size: cover;
									-moz-background-size: cover;
									-o-background-size: cover;

									background-size: cover;
									background-position: center center;
									background-attachment: fixed;
									background-repeat: no-repeat;									
							}
							
							
							
							
							
							/* HALO BLANC DE NUIT */
							.shadow-rouge, .pseudo-skew, .icones-footer, .role
							{
							  filter: drop-shadow(0 0 1.40rem);
							  animation: haloAnimation 2.2s infinite;
							}

							@keyframes haloAnimation {
							  0% {
								filter: drop-shadow(0 0 1.40rem rgba(var(--blanc), 1));
							  }
							  20% {
								filter: drop-shadow(0 0 1.2rem rgba(var(--blanc), 0.35));
							  }
							  80% {
								filter: drop-shadow(0 0 1.40rem rgba(var(--blanc), 1));
							  }
							}							


	  `;

	  document.head.appendChild(style);
	}	
	
	
  }
}