var infoHidden = true;

function switchInfoVisibility() {
	if (infoHidden) {
		showInfo();
	}
	else {
		hideInfo();
	}
}

function hideInfo() {
	infoHidden = true;
	document.getElementById("btnInfo").innerHTML = "?";
	fadeOut("btnInfo", 100);
	document.getElementById("btnInfo").className = document.getElementById("btnInfo").className.replace(/\bbtn-danger\b/, "btn-info");
}

function fadeIn(elem, num) {
	document.getElementById("infoContainer").style.opacity = num/100;
	if (num < 100) {
		window.setTimeout(function(){fadeIn(elem, num+1)},4);
	}
}

function fadeOut(elem, num) {
	document.getElementById("infoContainer").style.opacity = num/100;
	if (num > 0) {
		window.setTimeout(function(){fadeOut(elem, num-1)},4);
	}
}

function showInfo() {
	infoHidden = false;
	document.getElementById("btnInfo").innerHTML = "X";
	fadeIn("btnInfo", 0);
	document.getElementById("btnInfo").className = document.getElementById("btnInfo").className.replace(/\bbtn-info\b/, "btn-danger");
}
@@ -1,125 +1,285 @@
-var infoHidden = true;%0A%0Afunction switchInfoVisibility() %7B%0A%09if (infoHidden) %7B%0A%09%09showInfo();%0A%09%7D%0A%09else %7B%0A%09%09hideInfo();%0A%09%7D%0A%7D%0A
+/**%0A * Increases the opacity of the given element by 1%25 every 4ms until the opacity is one.%0A *@param %7BString%7D elem Contains the id of the element for which the opacity is being increased.%0A *@param %7BNumber%7D num The integer value signifying the percentage opacity of the element.%0A */
 %0Afun
@@ -288,254 +288,446 @@
 ion 
-hi
+fa
 deIn
-fo() %7B%0A%09infoHidden = true;%0A%09document.getElementById(%22btnInfo%22).innerHTML = %22?%22;%0A%09fadeOut(%22btnInfo%22, 100);%0A%09document.getElementById(%22btnInfo%22).className = document.getElementById(%22btnInfo%22).className.replace(/%5Cbbtn-danger%5Cb/, %22btn-info%22);%0A%7D%0A
+(elem, num) %7B%0A%09document.getElementById(elem).style.opacity = num/100;%0A%09if (num %3C 100) %7B%0A%09%09window.setTimeout(function()%7BfadeIn(elem, num+1)%7D,4);%0A%09%7D%0A%7D%0A%0A/**%0A * Decreases the opacity of the given element by 1%25 every 4ms until the opacity is zero.%0A *@param %7BString%7D elem Contains the id of the element for which the opacity is being decreased.%0A *@param %7BNumber%7D num The integer value signifying the percentage opacity of the element.%0A */
 %0Afun
@@ -728,34 +728,35 @@
 */%0Afunction fade
-In
+Out
 (elem, num) %7B%0A%09d
@@ -774,39 +774,28 @@
 ElementById(
-%22infoContainer%22
+elem
 ).style.opac
@@ -810,36 +810,34 @@
 m/100;%0A%09if (num 
-%3C 10
+%3E 
 0) %7B%0A%09%09window.se
@@ -852,34 +852,35 @@
 (function()%7Bfade
-In
+Out
 (elem, num+1)%7D,4
@@ -865,33 +865,33 @@
 adeOut(elem, num
-+
+-
 1)%7D,4);%0A%09%7D%0A%7D%0A%0Afu
@@ -892,183 +892,445 @@
 %0A%7D%0A%0A
-function fadeOut(elem, num) %7B%0A%09document.getElementById(%22infoContainer%22).style.opacity = num/100;%0A%09if (num %3E 0) %7B%0A%09%09window.setTimeout(function()%7BfadeOut(elem, num-1)%7D,4);%0A%09%7D%0A%7D%0A
+/**%0A * Changes the info button text and style. Begins the fade sequence to hide the info div.%0A */%0Afunction hideInfo() %7B%0A%09document.getElementById(%22btnInfo%22).innerHTML = %22?%22;%0A%09fadeOut(%22infoContainer%22, 100);%0A%09document.getElementById(%22btnInfo%22).className = document.getElementById(%22btnInfo%22).className.replace(/%5Cbbtn-danger%5Cb/, %22btn-info%22);%0A%7D%0A%0A/**%0A * Changes the info button text and style. Begins the fade sequence to show the info div.%0A */
 %0Afun
@@ -1352,29 +1352,8 @@
 ) %7B%0A
-%09infoHidden = false;%0A
 %09doc
@@ -1410,23 +1410,29 @@
 fadeIn(%22
-btnInfo
+infoContainer
 %22, 0);%0A%09
@@ -1559,12 +1559,242 @@
 -danger%22);%0A%7D
+%0A%0A/**%0A * Switches the opacity of the information div from 0 to 1 or from 1 to 0.%0A */%0Afunction switchInfoVisibility() %7B%0A%09if (document.getElementById(%22infoContainer%22).style.opacity == 0) %7B%0A%09%09showInfo();%0A%09%7D%0A%09else %7B%0A%09%09hideInfo();%0A%09%7D%0A%7D

Add comments for user defined functions. #kentprojects-40