if (document.getElementById && document.getElementsByTagName && document.createElement) {
	document.write('<link rel="stylesheet" type="text/css" href="../css/hrc-styles.css" />');
	window.onload = initShowHide;
}

function initShowHide() {

	// Hide the container with all toggleable elements 
	document.getElementById('displaytoggle').style.display = 'none';
	var as = document.getElementById('human_nav_content').getElementsByTagName('a');

	for (var i = 0; i < as.length; i++) {
		as[i].onmouseover = function() {
			toggle(this);
			return false;
		}	
	}

}

function toggle(s) {
	// Retrieve the id of the toggleable section
	var id = s.href.match(/#(\w.+)/)[1];
	// Clone the activated toggleable element from the content pool
	var clone = document.getElementById(id).cloneNode(true);
	// This clone will be wrapped in a generated container element called 'cloneDiv' 
	// Try to get a reference to an existing container element
	var cloneDiv = document.getElementById('clonediv');
	// In case the container element already exists

	if (cloneDiv) {
		// Replace the previously cloned toggleable element with the new one
		cloneDiv.replaceChild(clone, cloneDiv.firstChild);	
		document.getElementById('feature_main').style.display = 'none';
	}
	// In case the container element isn't created yet
	else {
		// Create the container element
		var cloneDiv = document.createElement('div');
		// Add the id attribute and set its value
		cloneDiv.setAttribute('id', 'clonediv');
		// Put the cloned element in the cloned container
		cloneDiv.appendChild(clone);
		
		// Append the cloned container to the body of the document
		document.body.appendChild(cloneDiv);
	}
}