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

var ChPlanMenuTxt = "Let's begin&thinsp;:";
var ChPlanSubTxt = "Planning my project";
var Ch1MenuTxt = "Part 1&thinsp;:";
var Ch1SubTxt = "My first steps";
var Ch2MenuTxt = "Part 2&thinsp;:";
var Ch2SubTxt = "Picture size";
var Ch3MenuTxt = "Part 3&thinsp;:";
var Ch3SubTxt = "Editing the colour";
var Ch4MenuTxt = "Part 4&thinsp;:";
var Ch4SubTxt = "The layout";
var Ch5MenuTxt = "Part 5&thinsp;:";
var Ch5SubTxt = "Colours on the NYC photo";
var Ch6MenuTxt = "Part 6&thinsp;:";
var Ch6SubTxt = "Selecting Miss Liberty";
var Ch7MenuTxt = "Part 7&thinsp;:";
var Ch7SubTxt = "Selecting the bridge";
var Ch8MenuTxt = "Part 8&thinsp;:";
var Ch8SubTxt = "Touch-ups";
var Ch9MenuTxt = "Part 9&thinsp;:";
var Ch9SubTxt = "Colour of the shirt";
var Ch10MenuTxt = "Part 10&thinsp;:";
var Ch10SubTxt = "Fog on the river";
var Ch11MenuTxt = "Part 11&thinsp;:";
var Ch11SubTxt = "Placing the text";
var Ch12MenuTxt = "Part 12&thinsp;:";
var Ch12SubTxt = "Placing Ms. Paige's picture";
var Ch13MenuTxt = "Part 13&thinsp;:";
var Ch13SubTxt = "Exporting my image";
var Ch14MenuTxt = "Part 14&thinsp;:";
var Ch14SubTxt = "The car-wash";
var ChRetroMenuTxt = "Final feedback";
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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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=en"><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;