var activeDiv = "fi1";

	function showText(id) {	
		document.getElementById(id+'o').style.visibility="visible";
	}
	
	function hideText(id) {
		document.getElementById(id+'o').style.visibility="hidden";
	}
	
	function showFI(id) {
		// replace t with fi to get corresponding featured div image
                if(!document.getElementById(id)){ return false; }
		var featId = id.replace("t", "fi");
		// check that the show Id is not the same as active id (i.e. selecting the active feature image)
		if(featId !== activeDiv) {
			// hide the current feature image div
			document.getElementById(activeDiv).style.display = "none";
			// show the newly selected one
			document.getElementById(featId).style.display = "block";
			
			// disable thumbnail links on current fi image thumb and hide the overlay
			document.getElementById(id).onmouseover = "";
			document.getElementById(id).onmouseout = "";
			document.getElementById(id+"o").style.visibility = "hidden";
			
			// reactive thumbnail options on previous featured image thumb and show the overlay
			var prevFeatThumb = activeDiv;
			prevFeatThumb = prevFeatThumb.replace("fi", "t");
			document.getElementById(prevFeatThumb).onmouseover = function(){hideText(this.id)};
			document.getElementById(prevFeatThumb).onmouseout = function(){showText(this.id)};
			document.getElementById(prevFeatThumb+"o").style.visibility = "visible";
			// update the active div variable
			activeDiv = featId;
		}  
	}