﻿//
// Multipurpose, unobtrusive Visibility Toggle
// following the approach from www.bonrouge.com/~togglit
// but more generalized
//

function toggleChild(parentElement,hiddenElement,activate) {
    //parentElement
    //hiddenElement
    //activate      :boolean flag - apply active class
    //
    var activeClassName = "active";
    var hiddenClassName = "hide";
    var toggle = parentElement.getElementsByTagName(hiddenElement);
    for (var i=0; i < toggle.length; i++) {
        //Manipulate style inline
        //toggle[i].style.display=((toggle[i].style.display=="none") ? "block" : "none");
        
        //Or, apply a single class
        //toggle[i].className=((toggle[i].className==hiddenClassName) ? "" : hiddenClassName);
        
        //Or, handle multiple classes
        if (toggle[i].className.indexOf(hiddenClassName) < 0) {
             toggle[i].className += " " + hiddenClassName;
        }
        else {
            toggle[i].className = toggle[i].className.replace(hiddenClassName, "");
        }
    }
    if (activate) {
        if (parentElement.className.indexOf(activeClassName) < 0) {
            parentElement.className += " " + activeClassName;
        }
        else {
            //parentElement.className = parentElement.className.replace(new RegExp(" " + activeClassName + "\\b"), "");
            parentElement.className = parentElement.className.replace(activeClassName, "");
        }
    }
}

function ieHover(containerID,tagName,hoverClass) {
    // generalized from Son of Suckerfish, sfHover
	var elements = document.getElementById(containerID).getElementsByTagName(tagName);
	for (var i=0; i<elements.length; i++) {
		elements[i].onmouseover=function() {
			this.className+=" " + hoverClass;
		}
		elements[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" " + hoverClass + "\\b"), "");
		}
	}
}

function toggleChildByTagName(containerID,parentTag,childTag,hoverClass) {
    //var ccn = "clicker";
    var clickers = document.getElementById(containerID).getElementsByTagName(parentTag);
    if (window.attachEvent) { // ie hover
        ieHover(containerID,parentTag,hoverClass);
    } 
    for ( var i = 0; i < clickers.length; i++) {
        //clickers[i].className += " " + ccn;
        clickers[i].onclick=function() {toggleChild(this,childTag,true)}
        toggleChild(clickers[i],childTag,false);
    }
}
