/*jshint multistr: true */
var closeUL = '</ul>';

var ChPlanMenuTxt = "Pour débuter&thinsp;:";
var ChPlanSubTxt = "Planifier mon projet";
var Ch1MenuTxt = "Partie 1&thinsp;:";
var Ch1SubTxt = "Mes premiers pas";
var Ch2MenuTxt = "Partie 2&thinsp;:";
var Ch2SubTxt = "Taille de la photo";
var Ch3MenuTxt = "Partie 3&thinsp;:";
var Ch3SubTxt = "Couleurs de la photo";
var Ch4MenuTxt = "Partie 4&thinsp;:";
var Ch4SubTxt = "Montage de l\'affiche";
var Ch5MenuTxt = "Partie 5&thinsp;:";
var Ch5SubTxt = "Couleurs de la photo de NY";
var Ch6MenuTxt = "Partie 6&thinsp;:";
var Ch6SubTxt = "Sélectionner la statue";
var Ch7MenuTxt = "Partie 7&thinsp;:";
var Ch7SubTxt = "Sélectionner le pont";
var Ch8MenuTxt = "Partie 8&thinsp;:";
var Ch8SubTxt = "Retouches";
var Ch9MenuTxt = "Partie 9&thinsp;:";
var Ch9SubTxt = "Couleur de la chemise";
var Ch10MenuTxt = "Partie 10&thinsp;:";
var Ch10SubTxt = "Brouillard sur la rivière";
var Ch11MenuTxt = "Partie 11&thinsp;:";
var Ch11SubTxt = "Placer le texte";
var Ch12MenuTxt = "Partie 12&thinsp;:";
var Ch12SubTxt = "Placer la photo d\'Isabelle";
var Ch13MenuTxt = "Partie 13&thinsp;:";
var Ch13SubTxt = "Exporter mon image";
var Ch14MenuTxt = "Partie 14&thinsp;:";
var Ch14SubTxt = "Le lave-auto";
var ChRetroMenuTxt = "Rétroaction finale";
var ChRetroSubTxt = "";

var ChPlan = localStorage.getItem('ChPlan');
var Ch1 = localStorage.getItem('Ch1');
var Ch2 = localStorage.getItem('Ch2');
var Ch3 = localStorage.getItem('Ch3');
var Ch4 = localStorage.getItem('Ch4');
var Ch5 = localStorage.getItem('Ch5');
var Ch6 = localStorage.getItem('Ch6');
var Ch7 = localStorage.getItem('Ch7');
var Ch8 = localStorage.getItem('Ch8');
var Ch9 = localStorage.getItem('Ch9');
var Ch10 = localStorage.getItem('Ch10');
var Ch11 = localStorage.getItem('Ch11');
var Ch12 = localStorage.getItem('Ch12');
var Ch13 = localStorage.getItem('Ch13');
var Ch14 = localStorage.getItem('Ch14');
var ChRetro = localStorage.getItem('ChRetro');

var currentPage = localStorage.getItem('currentPage');
var colorOn = "#F5BE00";
var colorOff = "white";

if (currentPage === "ChPlan") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (ChPlan === 'completed') {
	var MenuChPlan = '\
		<ul class="menu"> \
		<li class="check"><a href="ChPlan.php?lang=fr"><span style="color: ' + mycolor + ';">' + ChPlanMenuTxt + '<br> \
		<span class="menuSub">' + ChPlanSubTxt + '</span></span></a></li> \
		';
} else if (ChPlan === 'started') {
	var MenuChPlan = '\
		<ul class="menu"> \
		<li><a href="ChPlan.php?lang=fr"><span style="color: ' + mycolor + ';">' + ChPlanMenuTxt + '<br> \
		<span class="menuSub">' + ChPlanSubTxt + '</span></span></a></li> \
		';	
} else {
	var MenuChPlan = '\
		<ul class="menu menutopborder"> \
		<li><span class="grey">' + ChPlanMenuTxt + '<br> \
		<span class="menuSub">' + ChPlanSubTxt + '</span></li> \
		';
}

if (currentPage === "Ch1") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch1 === 'completed') {
	var MenuCh1 = '\
		<li class="check"><a href="ch1.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch1MenuTxt+'<br> \
		<span class="menuSub">'+Ch1SubTxt+'</span></span></a></li> \
		';
} else if (Ch1 === 'started') {
	var MenuCh1 = '\
		<li><a href="ch1.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch1MenuTxt+'<br> \
		<span class="menuSub">'+Ch1SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh1 = '\
		<li><span class="grey">'+Ch1MenuTxt+'<br> \
		<span class="menuSub">'+Ch1SubTxt+'</span></span></li> \
		';
}

if (currentPage === "Ch2") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch2 === 'completed') {
	var MenuCh2 = '\
		<li class="check"><a href="ch2.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch2MenuTxt+'<br> \
		<span class="menuSub">'+Ch2SubTxt+'</span></span></a></li> \
		';
} else if (Ch2 === 'started') {
	var MenuCh2 = '\
		<li><a href="ch2.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch2MenuTxt+'<br> \
		<span class="menuSub">'+Ch2SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh2 = '\
		<li><span class="grey">'+Ch2MenuTxt+'<br> \
		<span class="menuSub">'+Ch2SubTxt+'</span></span></li> \
		';
}

if (currentPage === "Ch3") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch3 === 'completed') {
	var MenuCh3 = '\
		<li class="check"><a href="ch3.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch3MenuTxt+'<br> \
		<span class="menuSub">'+Ch3SubTxt+'</span></span></a></li> \
		';
} else if (Ch3 === 'started') {
	var MenuCh3 = '\
		<li><a href="ch3.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch3MenuTxt+'<br> \
		<span class="menuSub">'+Ch3SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh3 = '\
		<li><span class="grey">'+Ch3MenuTxt+'<br> \
		<span class="menuSub">'+Ch3SubTxt+'</span></span></li> \
		';
}


if (currentPage === "Ch4") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch4 === 'completed') {
	var MenuCh4 = '\
		<li class="check"><a href="ch4.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch4MenuTxt+'<br> \
		<span class="menuSub">'+Ch4SubTxt+'</span></span></a></li> \
		';
} else if (Ch4 === 'started') {
	var MenuCh4 = '\
		<li><a href="ch4.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch4MenuTxt+'<br> \
		<span class="menuSub">'+Ch4SubTxt+'</span></span></a></li> \
		';			
} else {	
	var MenuCh4 = '\
		<li><span class="grey">'+Ch4MenuTxt+'<br> \
		<span class="menuSub">'+Ch4SubTxt+'</span></span></li> \
		';
}

if (currentPage === "Ch5") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch5 === 'completed') {
	var MenuCh5 = '\
		<li class="check"><a href="ch5.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch5MenuTxt+'<br> \
		<span class="menuSub">'+Ch5SubTxt+'</span></span></a></li> \
		';
} else if (Ch5 === 'started') {
	var MenuCh5 = '\
		<li><a href="ch5.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch5MenuTxt+'<br> \
		<span class="menuSub">'+Ch5SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh5 = '\
		<li><span class="grey">'+Ch5MenuTxt+'<br> \
		<span class="menuSub">'+Ch5SubTxt+'</span></span></li> \
		';
}

if (currentPage === "Ch6") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch6 === 'completed') {
	var MenuCh6 = '\
		<li class="check"><a href="ch6.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch6MenuTxt+'<br> \
		<span class="menuSub">'+Ch6SubTxt+'</span></span></a></li> \
		';
} else if (Ch6 === 'started') {
	var MenuCh6 = '\
		<li><a href="ch6.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch6MenuTxt+'<br> \
		<span class="menuSub">'+Ch6SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh6 = '\
		<li><span class="grey">'+Ch6MenuTxt+'<br> \
		<span class="menuSub">'+Ch6SubTxt+'</span></span></li> \
		';
}

if (currentPage === "Ch7") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch7 === 'completed') {
	var MenuCh7 = '\
		<li class="check"><a href="ch7.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch7MenuTxt+'<br> \
		<span class="menuSub">'+Ch7SubTxt+'</span></span></a></li> \
		';
} else if (Ch7 === 'started') {
	var MenuCh7 = '\
		<li><a href="ch7.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch7MenuTxt+'<br> \
		<span class="menuSub">'+Ch7SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh7 = '\
		<li><span class="grey">'+Ch7MenuTxt+'<br> \
		<span class="menuSub">'+Ch7SubTxt+'</span></span></li> \
		';
}

if (currentPage === "Ch8") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch8 === 'completed') {
	var MenuCh8 = '\
		<li class="check"><a href="ch8.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch8MenuTxt+'<br> \
		<span class="menuSub">'+Ch8SubTxt+'</span></span></a></li> \
		';
} else if (Ch8 === 'started') {
	var MenuCh8 = '\
		<li><a href="ch8.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch8MenuTxt+'<br> \
		<span class="menuSub">'+Ch8SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh8 = '\
		<li><span class="grey">'+Ch8MenuTxt+'<br> \
		<span class="menuSub">'+Ch8SubTxt+'</span></span></li> \
		';
}

if (currentPage === "Ch9") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch9 === 'completed') {
	var MenuCh9 = '\
		<li class="check"><a href="ch9.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch9MenuTxt+'<br> \
		<span class="menuSub">'+Ch9SubTxt+'</span></span></a></li> \
		';
} else if (Ch9 === 'started') {
	var MenuCh9 = '\
		<li><a href="ch9.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch9MenuTxt+'<br> \
		<span class="menuSub">'+Ch9SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh9 = '\
		<li><span class="grey">'+Ch9MenuTxt+'<br> \
		<span class="menuSub">'+Ch9SubTxt+'</span></span></li> \
		';
}

if (currentPage === "Ch10") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch10 === 'completed') {
	var MenuCh10 = '\
		<li class="check"><a href="ch10.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch10MenuTxt+'<br> \
		<span class="menuSub">'+Ch10SubTxt+'</span></span></a></li> \
		';
} else if (Ch10 === 'started') {
	var MenuCh10 = '\
		<li><a href="ch10.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch10MenuTxt+'<br> \
		<span class="menuSub">'+Ch10SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh10 = '\
		<li><span class="grey">'+Ch10MenuTxt+'<br> \
		<span class="menuSub">'+Ch10SubTxt+'</span></span></li> \
		';
}

if (currentPage === "Ch11") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch11 === 'completed') {
	var MenuCh11 = '\
		<li class="check"><a href="ch11.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch11MenuTxt+'<br> \
		<span class="menuSub">'+Ch11SubTxt+'</span></span></a></li> \
		';
} else if (Ch11 === 'started') {
	var MenuCh11 = '\
		<li><a href="ch11.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch11MenuTxt+'<br> \
		<span class="menuSub">'+Ch11SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh11 = '\
		<li><span class="grey">'+Ch11MenuTxt+'<br> \
		<span class="menuSub">'+Ch11SubTxt+'</span></span></li> \
		';
}

if (currentPage === "Ch12") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch12 === 'completed') {
	var MenuCh12 = '\
		<li class="check"><a href="ch12.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch12MenuTxt+'<br> \
		<span class="menuSub">'+Ch12SubTxt+'</span></span></a></li> \
		';
} else if (Ch12 === 'started') {
	var MenuCh12 = '\
		<li><a href="ch12.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch12MenuTxt+'<br> \
		<span class="menuSub">'+Ch12SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh12 = '\
		<li><span class="grey">'+Ch12MenuTxt+'<br> \
		<span class="menuSub">'+Ch12SubTxt+'</span></span></li> \
		';
}

if (currentPage === "Ch13") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch13 === 'completed') {
	var MenuCh13 = '\
		<li class="check"><a href="ch13.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch13MenuTxt+'<br> \
		<span class="menuSub">'+Ch13SubTxt+'</span></span></a></li> \
		';
} else if (Ch13 === 'started') {
	var MenuCh13 = '\
		<li><a href="ch13.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch13MenuTxt+'<br> \
		<span class="menuSub">'+Ch13SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh13 = '\
		<li><span class="grey">'+Ch13MenuTxt+'<br> \
		<span class="menuSub">'+Ch13SubTxt+'</span></span></li> \
		';
}

if (currentPage === "Ch14") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (Ch14 === 'completed') {
	var MenuCh14 = '\
		<li class="check"><a href="ch14.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch14MenuTxt+'<br> \
		<span class="menuSub">'+Ch14SubTxt+'</span></span></a></li> \
		';
} else if (Ch14 === 'started') {
	var MenuCh14 = '\
		<li><a href="ch14.php?lang=fr"><span style="color: ' + mycolor + ';">'+Ch14MenuTxt+'<br> \
		<span class="menuSub">'+Ch14SubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuCh14 = '\
		<li><span class="grey">'+Ch14MenuTxt+'<br> \
		<span class="menuSub">'+Ch14SubTxt+'</span></span></li> \
		';
}


if (currentPage === "ChRetro") {
	var mycolor = colorOn;
} else {
	var mycolor = colorOff;
}

if (ChRetro === 'completed') {
	var MenuChRetro = '\
		<li class="check"><a href="chRetro.php?lang=fr"><span style="color: ' + mycolor + ';">'+ChRetroMenuTxt+'<br> \
		<span class="menuSub">'+ChRetroSubTxt+'</span></span></a></li> \
		';
} else if (ChRetro === 'started') {
	var MenuChRetro = '\
		<li><a href="chRetro.php?lang=fr"><span style="color: ' + mycolor + ';">'+ChRetroMenuTxt+'<br> \
		<span class="menuSub">'+ChRetroSubTxt+'</span></span></a></li> \
		';	
} else {
	var MenuChRetro = '\
		<li><span class="grey">'+ChRetroMenuTxt+'<br> \
		<span class="menuSub">'+ChRetroSubTxt+'</span></span></li> \
		';
}

var myMenu = MenuChPlan + MenuCh1 + MenuCh2 + MenuCh3 + MenuCh4 + MenuCh5 + MenuCh6 + MenuCh7 + MenuCh8 + MenuCh9 + MenuCh10 + MenuCh11 + MenuCh12 + MenuCh13 + MenuCh14 + MenuChRetro + closeUL;

document.getElementById("sidebar").innerHTML = myMenu;