/**
 * Shows and hides on page popup windows. 
 * 
 * @parameter id - id of element to control
 */
function displayInPagePopup(id) {
    var el = document.getElementById(id);
    if(el.style.visibility == "hidden" || el.style.visibility == "") {
        el.style.visibility = "visible";
        el.style.height = "auto";
    } else {
        el.style.visibility = "hidden";
        el.style.height = "0px";
    }
    if(el.style.display == "none" || el.style.display == "") {
        el.style.display = "block";
        el.style.height = "auto";
    } else {
        el.style.display = "none";
        el.style.height = "0px";
    }
}

/**
 * Provides folding for documentation boxes
 *
 * @parameter id - id of doc box you want to fold.
 */
function box_fold(id) {
    var pin_up   = "<img alt=\"arrow up\" src=\"../../Images/Icons/ico_arrow_up.png\" />";
    var pin_down = "<img alt=\"arrow down\" src=\"../../Images/Icons/ico_arrow_down.png\" />";
    var el = document.getElementById(id);
    var pin = document.getElementById(id + "_pin");
    
    if(el.style.height == "280px") {
        el.style.height = "2em";
        setStyleByClass(id, "div", "category topleft", "visibility", "hidden");
        setStyleByClass(id, "div", "category topright", "visibility", "hidden");
        setStyleByClass(id, "div", "category botleft", "visibility", "hidden");
        setStyleByClass(id, "div", "category botright", "visibility", "hidden");
        setStyleByClass(id, "div", "category left", "visibility", "hidden");
        setStyleByClass(id, "div", "category right", "visibility", "hidden");
        pin.innerHTML = pin_down;
    } else {
        el.style.height = "280px";
        setStyleByClass(id, "div", "category topleft", "visibility", "visible");
        setStyleByClass(id, "div", "category topright", "visibility", "visible");
        setStyleByClass(id, "div", "category botleft", "visibility", "visible");
        setStyleByClass(id, "div", "category botright", "visibility", "visible");
        setStyleByClass(id, "div", "category left", "visibility", "visible");
        setStyleByClass(id, "div", "category right", "visibility", "visible");
        pin.innerHTML = pin_up;
    }
}

/**
 * Utility function to set styles by class within an identified tag
 *
 * @parameter id - id name
 * @parameter t - tag name
 * @parameter c - class name
 * @parameter p - CSS property
 * @parameter v - new value for p
 */
function setStyleByClass(id,t,c,p,v){
    var elements = document.getElementById(id).getElementsByTagName(t);
    for(var i = 0; i < elements.length; i++){
        var node = elements.item(i);
        for(var j = 0; j < node.attributes.length; j++) {
	        if(node.attributes.item(j).nodeName == 'class') {
		        if(node.attributes.item(j).nodeValue == c) {
			        eval('node.style.' + p + " = '" +v + "'");
		        }
	        }
        }
    }
}