var FormeSelect = [];
var ListeCouleur = ["colorbase","colorcarre","colorone","colortwo","colorthree"]
//3 modes : 0 = couleurs // 1 = formes // 2 = personnaliser les cartes
var mode = 0;


function SelectShape(shape){
	//récupérer la forme
	var forme = "set"+shape;
	var selection = document.getElementById(forme);
	//Que si déjà selectionné
	var couleurBase = selection.style.backgroundColor;
	//désélection
	if(couleurBase[0] == "v" && couleurBase[1] == "a" && couleurBase[2] == "r"){
		//supprimé de la liste des selectionné
		var pos = FormeSelect.indexOf(shape);
		FormeSelect.splice(pos, 1);
		//récupérer la couleur
		var recupColor = getVarColor(couleurBase);
		ListeCouleur.push(recupColor);
		//mettre à jour la couleur
		selection.style.backgroundColor  = "#333";
		//document.getElementById("SettingName").innerHTML = recupColor;


	}else{ //selection
		if(FormeSelect.length > 4){
			alert("NON NON NOOOOOON");
		} else{
			FormeSelect.push(shape);
			//définir la couleur
			var couleur = "var(--" + ListeCouleur[0] + ")";
			selection.style.backgroundColor  = couleur;
			//Supprimer la couleur de la liste
			ListeCouleur.splice(0, 1);	
			//document.getElementById("SettingName").innerHTML = ListeCouleur.length;
		}	
	}	
}

function getVarColor(color){
	var getvar = color;
	getvar = getvar.substring(6,getvar.length-1);

	return getvar;
}

function varColorToHex(color){
	hex = getComputedStyle(document.documentElement).getPropertyValue(color);
	hex = hex.substring(1,hex.length);
	return hex;
}

function settingSuiv(){
	if(mode == 0){ //passage au mode forme
		document.getElementById('testSettings').innerHTML = "Les formes";
		document.getElementById('couleurs').style.display = "none";
		document.getElementById('forme').style.visibility = "visible";
		document.getElementById('SettingAfter').style.visibility = "collapse";
		document.getElementById('SettingBefore').style.visibility = "visible";
		mode = mode + 1;
	}
}

function settingPrec(){
	if(mode == 1){
		document.getElementById('testSettings').innerHTML = "Les couleurs";
		document.getElementById('couleurs').style.display = "";
		document.getElementById('forme').style.visibility = "collapse";
		document.getElementById('SettingAfter').style.visibility = "visible";
		document.getElementById('SettingBefore').style.visibility = "collapse";
		mode = mode - 1;
	}
}

function SettingClose(){
	document.getElementById('popup2').style.display = "none";
}

function settingOpen(){
	document.getElementById('popup2').style.display = "";
}