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");
}
/**
 * Increases the opacity of the given element by 1% every 4ms until the opacity is one.
 *@param {String} elem Contains the id of the element for which the opacity is being increased.
 *@param {Number} num The integer value signifying the percentage opacity of the element.
 */
function fadeIn(elem, num) {
	document.getElementById(elem).style.opacity = num/100;
	if (num < 100) {
		window.setTimeout(function(){fadeIn(elem, num+1)},4);
	}
}

/**
 * Decreases the opacity of the given element by 1% every 4ms until the opacity is zero.
 *@param {String} elem Contains the id of the element for which the opacity is being decreased.
 *@param {Number} num The integer value signifying the percentage opacity of the element.
 */
function fadeOut(elem, num) {
	document.getElementById(elem).style.opacity = num/100;
	if (num > 0) {
		window.setTimeout(function(){fadeOut(elem, num-1)},4);
	}
}

/**
 * Changes the info button text and style. Begins the fade sequence to hide the info div.
 */
function hideInfo() {
	document.getElementById("btnInfo").innerHTML = "?";
	fadeOut("infoContainer", 100);
	document.getElementById("btnInfo").className = document.getElementById("btnInfo").className.replace(/\bbtn-danger\b/, "btn-info");
}

/**
 * Changes the info button text and style. Begins the fade sequence to show the info div.
 */
function showInfo() {
	document.getElementById("btnInfo").innerHTML = "X";
	fadeIn("infoContainer", 0);
	document.getElementById("btnInfo").className = document.getElementById("btnInfo").className.replace(/\bbtn-info\b/, "btn-danger");
}

/**
 * Switches the opacity of the information div from 0 to 1 or from 1 to 0.
 */
function switchInfoVisibility() {
	if (document.getElementById("infoContainer").style.opacity == 0) {
		showInfo();
	}
	else {
		hideInfo();
	}
}
Add comments for user defined functions. #kentprojects-40