sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}

	var sfEls = document.getElementsByClassName("nav2");
	for (var i=0; i<sfEls.length; i++) {
		var sfEls2 = sfEls[i].getElementsByTagName("li")
		for (var j=0; j<sfEls2.length; j++) {
			sfEls2[j].onmouseover=function() {
				this.className+=" sfhover";
			}
			sfEls2[j].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
			}
		}
	}

}
if (window.attachEvent) window.attachEvent("onload", sfHover);

function alternateAnyArea(area1id,area2id) {
	var area1 = document.getElementById(area1id);
	var area2 = document.getElementById(area2id);
	if(area1.style.display=='none') {
		area1.style.display='';
		area2.style.display='none';
	} else {
		area1.style.display = 'none';
		area2.style.display='';
	}
}
function toggleAnyArea(areaid) {
	var area = document.getElementById(areaid);
	if(area.style.display=='none') {
		area.style.display='';
	} else {
		area.style.display = 'none';
	}
}

// function getElementsByClass has three arguments. Class name (first argument), DOM node (by default it's a document) and tag name (for selecting only <tag> elements with specific class). Last two arguments are optional.

//First, getElementsByClass function selects all tags (every tag '*' or tags with name 'tagName' specified by user). Afterwards, in for-loop our function checks if given class name is in the className property string. If it is, it copies found element to another array 'el' which is returned to user at the end of function. 

function getElementsByClass( searchClass, domNode, tagName) {
	if (domNode == null) domNode = document;
	if (tagName == null) tagName = '*';
	var el = new Array();
	var tags = domNode.getElementsByTagName(tagName);
	var tcl = " "+searchClass+" ";
	for(i=0,j=0; i<tags.length; i++) {
		var test = " " + tags[i].className + " ";
		if (test.indexOf(tcl) != -1)
			el[j++] = tags[i];
	}
	return el;
}

function show1area(idname,classname) 
{

	// hide every element with class 'classname' 
	var areas = getElementsByClass(classname);
	for(i=0; i<areas.length; i++)
		areas[i].style.display = 'none';
	// hide every element with class 'classname'		
 	// show element with given idname
	document.getElementById(idname).style.display='';

}