function toggleViz(senderId, receiverId){
	var sender = document.getElementById(senderId);     // (button)
	var receiver = document.getElementById(receiverId); // (div container)
	var classAttributeName = 'class';
	//exit function if button is twice-clicked or either sender or reciever is unknown
	if(sender == null || receiver == null || sender == oldSender || receiver == oldReceiver){
		return;
	}
	
	//set the visibility of the old and new recievers
	if(oldReceiver != null){
		oldReceiver.style.display = 'none';
	}
	receiver.style.display = 'block';
	
	//set the active class on the sender button
	var senderClass = sender.getAttribute(classAttributeName);
	if(senderClass == null){
		classAttributeName = 'className'; //we're using IE, not gecko
		senderClass = sender.getAttribute(classAttributeName);	
	}
	if (senderClass == 'inner' || senderClass == 'active inner'){
		sender.setAttribute(classAttributeName, 'active inner');
	}else{
		sender.setAttribute(classAttributeName, 'active');
	}
	
	//remove the active class from the old sender button
	if(oldSender != null){
		var oldSenderClass = oldSender.getAttribute(classAttributeName);
		if (oldSenderClass == 'active' || oldSenderClass == 'active inner'){
			if (oldSenderClass == 'active inner'){
				oldSender.setAttribute(classAttributeName, 'inner');
			}else{
				oldSender.setAttribute(classAttributeName, '');
			}
		}else{
			oldSender.setAttribute(classAttributeName, '');
		}
	}
	
	//set the current sender and reciever as old 
	//so that the next time a button is pushed we know which buttons were pressed prior to that
	oldSender = sender;
	oldReceiver = receiver;
}
//must declare these two variables down below or they won't always be null the first time
var oldReceiver;
var oldSender;