<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.myHUE {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh;
	}
	.main-container {
		width: 80%;
		max-width: 1200px;
		background: #e0e0e0;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		border-radius: 8px;
		overflow: hidden;
	}

	.gradients {
		position: relative;
		height: 150px;
	}

	.colorGradient {
		height: 50px;
		width: 100%;
		position: absolute;
		top: 0;
	}

	.whiteGradient {
		height: 100px;
		width: 100%;
		position: absolute;
		top: 0;
	}
    .hueSlider {
		width: 50%;
		position: absolute;
		bottom: 5px;
		left: 50%;
		transform: translate(-50%, -50%);
	
	}

	.colorPreview {
		background: #fff;
		border: 2px solid #333;
		border-radius: 50%;
		width: 60px;
		height: 60px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -100%);
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
		display:none;
	}

	.bottom-flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 16px;
		padding: 16px;
		background: #e0e0e0;
	}

	.bottom-flex .item {
		background: #333;
		color: #fff;
		padding: 10px 20px;
		border-radius: 4px;
		text-align: center;
		font-size: 14px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	}

    #lightbulb {
        width: 40px;
        height: 40px;
        margin-top: 10px;
        border: 1px solid #000;
    }
    #xy {
        margin-top: 10px;
        font-size: 1.5em;
    }
    #brightnessSlider {
        margin-top: 20px;
    }

    .widget {
        width: 80px;
        height: 100px;
        border-radius: 10px;
        background: #fff0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 6px rgb(0 0 0 / .1);
        transition: all 0.3s;
        margin: 10px;
        cursor: pointer;
        position: relative;
    }
.widget-icon-container {
    aspect-ratio: 1; /* Fixe le rapport largeur/hauteur à 1:1 */
    width: 60px; /* Largeur fixe */
    height: 60px; /* Hauteur fixe, identique à la largeur */
    margin: 0px auto;
    border-radius: 50%; /* Garantit la forme ronde */
    border: 2px solid #fff; /* Couleur de la bordure */
    display: flex;
    align-items: center; /* Centre l'icône verticalement */
    justify-content: center; /* Centre l'icône horizontalement */
    overflow: hidden; /* Au cas où le contenu dépasse */
    box-sizing: border-box; /* Inclut la bordure dans les dimensions */
}

    .widget[data-reachable="false"] .widget-icon-container {
        border-color: gray;
    }
    .widget-icon {
        font-size: 48px;
        transition: color 0.3s;
        cursor: pointer;
        border-radius: 50%;
        background-color: #fff0;
    }
	.reachable-indicator {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: red;
		opacity: 0; /* Disque caché par défaut */
		transition: opacity 0.3s ease, background-color 0.3s ease;
	}
    .eteinte {
        filter: grayscale(100%);
        background-color: #fff0;
    }
	.widget .checkmark {
		position: absolute;
		top: 5px;
		left: 5px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background-color: green;
		color: white;
		font-size: 14px;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0; /* Cachée par défaut */
		transition: opacity 0.3s ease-in-out;
	}

	.widget.selected .checkmark {
		opacity: 1; /* Affichée quand le widget est sélectionné */
	}
    .widget-title {
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        margin-top: 10px;
    }
    .change-color-btn {
        margin-top: 20px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }
</style>

<div class="myHUE" id='HUE'></div>
<div class="myHUE" id='HUE2'></div>
<button class="change-color-btn" onclick="changeWidgetsColor('HUE', 'rgb(0, 255, 0)')">Changer la couleur de fond</button>
<button class="toggle-reachable-btn" onclick="toggleReachable('HUE2', 1)">Toggle Reachable Widget 2</button>

<script>
let selectedColorSet,isDragging=false;

function createWidgets(hueName, numberOfWidgets, isColor) {
	setTimeout(function() {
		const hue = document.getElementById(hueName);
		hue.innerHTML = '';
		addGradients(hueName,numberOfWidgets,isColor);
	}, 300);

}

function addGradients(hueName,numberOfWidgets,isColor){
	let canvas,canvasW,height,width;
	let hueContainer = document.getElementById(hueName);
//main-container
	const mainContainer = document.createElement('div');
	mainContainer.classList.add('main-container');
	mainContainer.id=`${hueName}-mainContainer`;
	hueContainer.appendChild(mainContainer);
//gradients
	const gradContainer = document.createElement('div');
	gradContainer.classList.add('gradients');
	gradContainer.id=`${hueName}-gradients`;
	mainContainer.appendChild(gradContainer);
	
	width = gradContainer.clientWidth;
	height =100;


// gradients - white
	const bb = document.createElement('div');
	bb.id = `${hueName}-whiteGradient`;
	bb.classList.add('whiteGradient');
	//if (isColor) {
	//	bb.height='100px';
	//} else {
	//	bb.height='100%';
	//}
	canvasW = document.createElement('canvas');
	canvasW.id = `${hueName}-whiteCanvas`;
	canvasW.width = width;
	canvasW.height = height;
	bb.appendChild(canvasW);
	const ctxWhite = canvasW.getContext('2d');
	const whiteGradient = ctxWhite.createLinearGradient(0, 0, width, 0);
	whiteGradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
	whiteGradient.addColorStop(0.8, 'rgba(255, 240, 220, 1)');
	whiteGradient.addColorStop(1, 'rgba(255, 230, 200, 1)');
	ctxWhite.fillStyle = whiteGradient;
	ctxWhite.fillRect(0, 0, width, height);
	gradContainer.appendChild(bb);
	
    // SURVOL
	canvasW.addEventListener('mousemove', (event) => {
        togglePreviewVisibility(hueName, true);
        const { r, g, b } = getColorAtPosition(canvasW, event.clientX, event.clientY);
        const { x: cx, y: cy } = rgbToXY(r, g, b);
        if (!isNaN(cx) && !isNaN(cy)) {
            //output.textContent = `X: ${cx}, Y: ${cy}`;
            colorPreview.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
        }
		if (isDragging) {
			const { r, g, b } = getColorAtPosition(canvasW, event.clientX, event.clientY);
			selectedColor = { r, g, b };
			selectedXY = rgbToXY(r, g, b);
			changeWidgetsColor(hueName, selectedColor);
		}
    });

    // Gestion du toucher sur les canevas pour les écrans tactiles
    canvasW.addEventListener('touchmove', (event) => {
        togglePreviewVisibility(hueName, true);
        const touch = event.touches[0];
        const { r, g, b } = getColorAtPosition(canvasW, touch.clientX, touch.clientY);
        const { x: cx, y: cy } = rgbToXY(r, g, b);
        if (!isNaN(cx) && !isNaN(cy)) {
            output.textContent = `X: ${cx}, Y: ${cy}`;
            colorPreview.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
			//ENVOI PAR API WIDGET HTML AUX WIDGETS SELECTIONNES
        }
    });

    //MouseOut
    canvasW.addEventListener('mouseout', () => {
        togglePreviewVisibility(hueName, false);
		isDragging=false;
    });
	//Mousedown
	canvasW.addEventListener('mousedown', (event) => {
		isDragging=true;
		const { r, g, b } = getColorAtPosition(canvasW, event.clientX, event.clientY);
		selectedColor = { r, g, b };
		selectedXY = rgbToXY(r, g, b);
		changeWidgetsColor(hueName, selectedColor);

	});
	canvasW.addEventListener('mouseup', (event) => {
		isDragging=false;
	});
    //click
    canvasW.addEventListener('click', (event) => {
        const { r, g, b } = getColorAtPosition(canvasW, event.clientX, event.clientY);
        selectedColor = { r, g, b };
        selectedXY = rgbToXY(r, g, b);

        // Mise à jour de la couleur du pavé de prévisualisation et du bulbe
        updatePreviewColor(hueName,selectedColor);
        //lightbulb.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
        //output.textContent = `X: ${selectedXY.x}, Y: ${selectedXY.y}`;
		//alert(`X: ${selectedXY.x}, Y: ${selectedXY.y}`);
		//ENVOI PAR API WIDGET HTML AUX WIDGETS SELECTIONNES
		//APPLIQUE AUX WIDGET HTML AUX WIDGETS SELECTIONNES
		changeWidgetsColor(hueName, selectedColor);
		
    });

// gradients - color
	if (isColor){
		height=50;
		const cc = document.createElement('div');
		cc.id = `${hueName}-colorGradient`;
		cc.classList.add('colorGradient');
		canvas = document.createElement('canvas');
		canvas.id = `${hueName}-colorCanvas`;
		canvas.width = width;
		canvas.height = height;
		cc.appendChild(canvas);
		const ctxColor = canvas.getContext('2d');
		const spectralGradient = ctxColor.createLinearGradient(0, 0, width, 0);
		spectralGradient.addColorStop(0, 'red');
		spectralGradient.addColorStop(0.14, 'orange');
		spectralGradient.addColorStop(0.28, 'yellow');
		spectralGradient.addColorStop(0.42, 'green');
		spectralGradient.addColorStop(0.57, 'cyan');
		spectralGradient.addColorStop(0.71, 'blue');
		spectralGradient.addColorStop(0.85, 'magenta');
		spectralGradient.addColorStop(1, 'red');
		ctxColor.fillStyle = spectralGradient;
		ctxColor.fillRect(0, 0, width, height);
		gradContainer.appendChild(cc);
		
		//let colorCanvas = document.getElementById(`${hueName}-colorCanvas`);
		//let ctxColor = colorCanvas.getContext('2d');
		//canvas = document.getElementById(`${hueName}-colorCanvas`);
		canvas.addEventListener('mousemove', (event) => {
			togglePreviewVisibility(hueName, true);
			const { r, g, b } = getColorAtPosition(canvas, event.clientX, event.clientY);
			const { x: cx, y: cy } = rgbToXY(r, g, b);
			if (!isNaN(cx) && !isNaN(cy)) {
				//output.textContent = `X: ${cx}, Y: ${cy}`;
				colorPreview.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
			}
			if (isDragging){
				const { r, g, b } = getColorAtPosition(canvas, event.clientX, event.clientY);
				selectedColor = { r, g, b };
				selectedXY = rgbToXY(r, g, b);
				changeWidgetsColor(hueName, selectedColor);
			}
		});
		// Gestion du toucher sur les canevas pour les écrans tactiles
		canvas.addEventListener('touchmove', (event) => {
			togglePreviewVisibility(hueName, true);
			const touch = event.touches[0];
			const { r, g, b } = getColorAtPosition(canvas, touch.clientX, touch.clientY);
			const { x: cx, y: cy } = rgbToXY(r, g, b);
			if (!isNaN(cx) && !isNaN(cy)) {
				output.textContent = `X: ${cx}, Y: ${cy}`;
				colorPreview.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
			}
		});
		//MouseOut
		canvas.addEventListener('mouseout', () => {
			togglePreviewVisibility(hueName, false);
		});
		//Mousedown
		canvas.addEventListener('mousedown', (event) => {
			isDragging=true;
			const { r, g, b } = getColorAtPosition(canvas, event.clientX, event.clientY);
			selectedColor = { r, g, b };
			selectedXY = rgbToXY(r, g, b);
			changeWidgetsColor(hueName, selectedColor);
		});
		canvas.addEventListener('mouseup', (event) => {
		isDragging=false;
		});
		// Masquer le pavé lors du départ du survol des canevas
		canvas.addEventListener('mouseout', () => {
			togglePreviewVisibility(hueName, false);
			isDragging=false;
		});	
		// Gestion du clic pour sélectionner une couleur
		canvas.addEventListener('click', (event) => {
			const { r, g, b } = getColorAtPosition(canvas, event.clientX, event.clientY);
			selectedColor = { r, g, b };
			selectedXY = rgbToXY(r, g, b);

			// Mise à jour de la couleur du pavé de prévisualisation et du bulbe
			updatePreviewColor(hueName,selectedColor);
			//lightbulb.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
			//output.textContent = `X: ${selectedXY.x}, Y: ${selectedXY.y}`;
			//alert(`X: ${selectedXY.x}, Y: ${selectedXY.y}`);
		//ENVOI PAR API WIDGET HTML AUX WIDGETS SELECTIONNES
		//APPLIQUE AUX WIDGET HTML AUX WIDGETS SELECTIONNES
		changeWidgetsColor(hueName, selectedColor);
		});	
	}

	
//colorPreview		
	const pp = document.createElement('div');
	pp.id = `${hueName}-colorPreview`;
	pp.classList.add('colorPreview');
	//pp.textContent = '';
	gradContainer.appendChild(pp);
//flex container
	const bottomFlex = document.createElement('div');
	bottomFlex.classList.add('bottom-flex');
//brightnessSlider
	const slider = document.createElement('input');
	slider.type = 'range';
	slider.min = '0';
	slider.max = '100';
	slider.value = '50';
	slider.className = 'hueSlider';
	// Ajouter le slider au conteneur
	gradContainer.appendChild(slider);
// Add some flex items
for (let i = 1; i <= numberOfWidgets; i++) {
    const widget = document.createElement('div');
    widget.className = 'widget';
    widget.dataset.reachable = (i % 2 === 0);
    widget.id = `${hueName}-widget-${i}`;
    widget.innerHTML = `
        <div class="widget-icon-container">
            <div class="reachable">&nbsp;</div>
            <div class="widget-icon ${widget.dataset.reachable === 'false' ? 'eteinte' : ''}" data-id="${i}">💡</div>
        </div>
        <div class="widget-title">Widget ${i}</div>
        <div class="checkmark">✔</div> <!-- Coche verte -->
    `;
    bottomFlex.appendChild(widget);

    // Gestion de la sélection
    widget.addEventListener('click', function(event) {
        if (this.dataset.reachable === 'true') {
            if (event.target.classList.contains('widget-icon')) {
                return;
            }
            this.classList.toggle('selected'); // Ajout/Retrait de la classe 'selected'
        }
    });

    // Gestion de l'icône d'ampoule
    const bulb = widget.querySelector('.widget-icon');
    bulb.addEventListener('click', function(event) {
        if (bulb.parentElement.parentElement.dataset.reachable === 'true') {
            bulb.classList.toggle('eteinte');
            bulb.style.backgroundColor = bulb.classList.contains('eteinte') ? 'transparent' : 'white';
            event.stopPropagation();
        }
    }); 
}


// Append everything to the main container
	mainContainer.appendChild(gradContainer);
	mainContainer.appendChild(bottomFlex);
	
//EventsHandler


    //let lightbulb = document.getElementById('lightbulb');
    let colorPreview = document.getElementById(`${hueName}-colorPreview`);
    //let output = document.getElementById('xy');
    //let brightnessSlider = document.getElementById('brightnessSlider');
	
	
	
//survol	


    // Mise à jour de la couleur du bulbe en fonction du curseur de brillance
    //brightnessSlider.addEventListener('input', () => {
        //brightness = brightnessSlider.value / 100;
    //    const adjustedColor = adjustSaturation(selectedColor.r, selectedColor.g, selectedColor.b, brightness);
        //lightbulb.style.backgroundColor = `rgb(${adjustedColor.r}, ${adjustedColor.g}, ${adjustedColor.b})`;
    //});

}

function changeWidgetsColor(hueName, selectedColor) {
    // Sélectionner tous les widgets dans le conteneur correspondant au hueName
    const widgets = document.querySelectorAll(`#${hueName} .widget.selected`);

    // Boucle pour modifier la couleur de chaque widget sélectionné
    widgets.forEach(widget => {
        const widgetIcon = widget.querySelector('.widget-icon');
        widgetIcon.style.backgroundColor =  `rgb(${selectedColor.r}, ${selectedColor.g}, ${selectedColor.b})`; // Applique la couleur donnée
        widgetIcon.style.color = "#fff"; // Ajuste le contraste si nécessaire
    });
}



function toggleReachableANC(containerName, widgetId) {
	const widget = document.querySelector(`#${containerName}-widget-${widgetId}`);
	widget.dataset.reachable = widget.dataset.reachable === 'true' ? 'false' : 'true';
	if (widget.dataset.reachable === 'false') {
		widget.classList.remove('selected');
		const bulb = widget.querySelector('.widget-icon');
		bulb.classList.add('eteinte');
		bulb.style.backgroundColor = 'transparent';
	}
}


    
// Fonction pour ajuster la saturation d'une couleur en RGB
function adjustSaturation(r, g, b, saturation) {
	const avg = (r + g + b) / 3;
	r = avg + (r - avg) * saturation;
	g = avg + (g - avg) * saturation;
	b = avg + (b - avg) * saturation;

	return {
		r: Math.min(255, Math.max(0, r)),
		g: Math.min(255, Math.max(0, g)),
		b: Math.min(255, Math.max(0, b)),
	};
}

// Fonction pour convertir RGB en XY (système Hue)
function rgbToXY(r, g, b) {
	let red = r / 255;
	let green = g / 255;
	let blue = b / 255;

	// Gamma correction
	red = red > 0.04045 ? Math.pow((red + 0.055) / 1.055, 2.4) : red / 12.92;
	green = green > 0.04045 ? Math.pow((green + 0.055) / 1.055, 2.4) : green / 12.92;
	blue = blue > 0.04045 ? Math.pow((blue + 0.055) / 1.055, 2.4) : blue / 12.92;

	const x = red * 0.649926 + green * 0.103455 + blue * 0.197109;
	const y = red * 0.234327 + green * 0.743075 + blue * 0.022598;
	const z = red * 0.000000 + green * 0.053077 + blue * 1.035763;

	const xy = {
		x: x / (x + y + z),
		y: y / (x + y + z)
	};

	return { x: xy.x.toFixed(4), y: xy.y.toFixed(4) };
}

// Fonction pour récupérer la couleur à une position donnée
function getColorAtPosition(canvas, x, y) {
	const rect = canvas.getBoundingClientRect();
	const adjustedX = x - rect.left;
	const adjustedY = y - rect.top;
	const pixel = canvas.getContext('2d').getImageData(adjustedX, adjustedY, 1, 1).data;
	return { r: pixel[0], g: pixel[1], b: pixel[2] };
}

// Fonction pour mettre à jour la couleur du pavé de prévisualisation
function updatePreviewColor(containerName,selectedColor) {
	let colorPreview=document.getElementById(`${containerName}-colorPreview`);
	colorPreview.style.backgroundColor = `rgb(${selectedColor.r}, ${selectedColor.g}, ${selectedColor.b})`;
}

// Fonction pour afficher ou masquer colorPreview
function togglePreviewVisibility(containerName, isVisible) {
    let colorPreview = document.getElementById(`${containerName}-colorPreview`);
    colorPreview.style.display = isVisible ? 'block' : 'none';
    
}
function toggleReachable(containerName, widgetId) {
    // Sélectionne le widget par son ID
    const widget = document.getElementById(`${containerName}-widget-${widgetId}`);

    if (!widget) {
        console.error(`Widget avec l'ID "${containerName}-widget-${widgetId}" introuvable.`);
        return;
    }

    // affiche la caractéristique 'reachable'
    const isReachable = widget.dataset.reachable === 'true';
    widget.dataset.reachable = isReachable ; //? 'false' : 'true';

    // Met à jour l'apparence en fonction de l'état 'reachable'
    const iconContainer = widget.querySelector('.widget-icon-container');
    const icon = widget.querySelector('.widget-icon');
    let redLed = widget.querySelector('.reachable-indicator');

    // Si le disque rouge n'existe pas encore, on le crée
    if (!redLed) {
        redLed = document.createElement('div');
        redLed.classList.add('reachable-indicator');
        widget.appendChild(redLed);
    }

    if (widget.dataset.reachable === 'false') {
        // Si non reachable, grise l'icône et affiche le disque rouge
        iconContainer.style.borderColor = 'gray';
        icon.classList.add('eteinte');
        icon.style.backgroundColor = 'transparent';
        redLed.style.backgroundColor = 'red';
        redLed.style.opacity = '1';
    } else {
        // Si reachable, rétablit les couleurs normales et rend le disque transparent
        iconContainer.style.borderColor = '#fff';
        icon.classList.remove('eteinte');
        icon.style.backgroundColor = 'white';
        redLed.style.backgroundColor = 'transparent';
        redLed.style.opacity = '0';
    }
}


//test
		createWidgets('HUE',9,true);
		createWidgets('HUE2',3,false);
		//fgtoul
</script>
