/* Toggles
    All 3 of these elements must be present:
    <DIV class=ToggleContainer>
        <H2 class="ToggleH2" onclick="toggle(this)">The clickable title</H2>  
        <DIV class="ToggleContent">The content that will be hidden / shown</div>
    </div>

    <H2 class="ToggleH2" onclick="toggle(this)" style="background-image: none;">The clickable title</H2>  <-- Use this one if not using an image button.

    Only the text in the ToggleContent div will be hidden.
    ToggleContainer must contain only 1 ToggleH2 and 1 ToggleContent classes.
    
    global variables:
    Define these in the top of the page to customize the toggle.
    
        ToggleImages : if false, the toggle images will not be used.
        ToggleImageOpen: the image to use for the open button
        ToggleImageClose: the image to use for the close button
        ToggleCloseAll: if false more than 1 element can be opened at one time
*/

if (!ToggleImages) {
    var ToggleImages = true;  // Uses images by default
}
if (!ToggleImageOpen) {
    var ToggleImageOpen = "url(expandbutton-close.gif)";  // Uses this image by default for the open button
}
if (!ToggleImageClose) {
    var ToggleImageClose = "url(expandbutton-open.gif)";  // Uses this image by default fot the close button
}
if (!ToggleCloseAll) {
    var ToggleCloseAll = true;  // By default, only one Toggle div can be opened
}

function toggleCloseAll(which, whichNotToClose) {
    // Close all Toggles
    // which = the div containing all the "ToggleContainer" classed Divs
    // l is the number of sibling "ToggleContainer"s
    l = which.childNodes.length;

    // We need to search all the siblings to close all the toggles
    for (i=0; i < l; i++) {
        // te = this element
        te = which.childNodes[i];

        if (te.className == "ToggleContainer" && te != whichNotToClose) {
            // We've found a sibbling, we need to search it for a "ToggleContent" to hide and
            // a "ToggleH2" to switch the +/- background
            // sl = number of elements in this toggleContainer
            sl = te.childNodes.length;
            for (j=0; j < sl; j++) {
            
                // tse = this sub-element
                tse = te.childNodes[j];
                if (te.childNodes[j].className) {
                    // hide this content
                    if (te.childNodes[j].className == "ToggleContent") {
                            te.childNodes[j].style.display = "none";
                    }
                    // Change this icon
                    if (te.childNodes[j].className == "ToggleH2" && ToggleImages) {
                         te.childNodes[j].style.backgroundImage = ToggleImageClose;
                    }
                }
            }               
        }
    }
}

function toggle(which) {
    // Close all Toggles before we open another
    if (ToggleCloseAll) {
        toggleCloseAll(which.parentNode.parentNode, which.parentNode); // Close all toggles EXCEPT this one
    }
    
    // Check all elements whithin this ToggleContainer    
    l = which.parentNode.childNodes.length;
    
    for (i = 0; i < l; i++) {
        cn = which.parentNode.childNodes[i];
        // Find the title h2 and the content div
        if (cn.className) { 
            if (cn.className == "ToggleH2") {
                title = which.parentNode.childNodes[i];
            }
            if (cn.className == "ToggleContent") {
                content = which.parentNode.childNodes[i];
            }
        }
    }

    // Toggle them on / off
    if (content.style.display != "inline") {
        content.style.display = "inline";
        if (ToggleImages) {
            title.style.backgroundImage = ToggleImageOpen;
        }    
    } else {
        content.style.display = "none";
        if (ToggleImages) {
            title.style.backgroundImage = ToggleImageClose;
        }
    }
}

function openToggle(which) {
    // To Open a Toggle by it's ID
    // Assign an id to the ToggleH2 classed <h2> tag
    
    findElement = document.getElementById(which);
    toggle(findElement)
}