/* ddotPaging (using Davis Dots to create virtual "pages" that can be navigated)
- - to be used in correspondence with a structure as below:
<div title="container div">
    <div> ... peer-level div = Page #1 ... </div>  
    <div> ... peer-level div = Page #2 ... </div>  
    <div> ... peer-level div = Page #3 ... </div>  
    <div> ... peer-level div = Page #4 ... </div>  
    <div class="ddotwrap">
        <div class="ddots">
            <div class="on" title="Page 1">Page 1</div>
            <div title="Page 2">Page 2</div>
            <div title="Page 3">Page 3</div>
            <div title="Page 4">Page 4</div>
        </div>
    </div>
</div>
*/
//function to control the onclick event for ddots (paging through divs)
function ddotPaging(node, page) {
    //grab all of the paged divs nodes
    var divs = node.parentNode.parentNode.parentNode.childNodes;
    var count = 0;
    for (var i = 0; i < divs.length; ++i) {
        //if it is a DIV (not whitespace) set all to style.display = 'none'; except for the desired page (AND the ddotwrap div)
        if (divs[i].nodeName == 'DIV') {
            if (count == page)
                divs[i].style.display = 'block';
            else if (divs[i].className != 'ddotwrap')
                divs[i].style.display = 'none';
            ++count;
        }
    }

    //same thing to remove class="on" from all ddots except for clicked
    var ddots = node.parentNode.childNodes;
    for (var i = 0; i < ddots.length; ++i) {
        ddots[i].className = '';
    }
    node.className = 'on';
    //set the text for Page x of y
    var span = node.parentNode.parentNode.childNodes;
    for (var i = 0; i < span.length; ++i) {
        if (span[i].nodeName == 'SPAN')
            span[i].innerHTML = page + 1;
    }
}



/* chooseDLtab (using a <dl> container to show dt/dd selected and hide all other dt/dd pairs)
- - structure as below:
    <dl id="mygroups-accordian">
        <dt onclick="chooseDLtab(this);">My Councils:</dt>
        <dd>
            <!--  Inner of Accordian -->
            . . .
            <!-- End Inner of Accordian -->
        </dd>
        <dt onclick="chooseDLtab(this);">My Committees:</dt>
        <dd>
            <!-- Inner of Accordian -->
            . . .
            <!-- End Inner of Accordian -->
        </dd>
        <dt onclick="chooseDLtab(this);">My Task Forces:</dt>
        <dd>
            <!-- Inner of Accordian -->
            . . .
            <!-- End Inner of Accordian -->
        </dd>
    </dl>
*/
//define the function to be called when the dt is clicked to open the accordian tab
function chooseDLtab(dtclick) {
    //var nodes = document.getElementById("home-ft-resources").getElementsByTagName('dt');
    var nodes = dtclick.parentNode.childNodes;
    //.getElementsByTagName('dt');
    var tempnode;
    for (var j = 0; j < nodes.length; j++) {
        tempnode = nodes[j];
        if (nodes[j] == dtclick) {
            //if this is the dt node that was clicked, set the css class to 'on' and make visible its corresponding dd
            nodes[j].className = 'on';
            while (tempnode.nextSibling != null) {
                tempnode = tempnode.nextSibling;
                if (tempnode.nodeName == "DD") {
                    tempnode.style.display = 'block';
                    break;
                }
            }
        } else if (nodes[j].nodeName == 'DT') {
            //otherwise, clear 'on' class where it exists and make the corresponding dt invisible
            nodes[j].className = nodes[j].className.replace('on', '');
            while (tempnode.nextSibling != null) {
                tempnode = tempnode.nextSibling;
                if (tempnode.nodeName == "DD") {
                    tempnode.style.display = 'none';
                    break;
                }
            }
        } //end if/else
    } //end for
} //end function

/* toggleDLtab (toggle between showing & hiding the dd when its corresponding dt is clicked)
- - simple <dl> structure for this:
    <dl class="widget">
        <dt onclick="toggleDLtab(this);">Title Output</dt>
        <dd>
            . . .
        </dd>
    </dl>
*/
//define the function to be called when the dt is clicked to toggle the state
function toggleDLtab(dtclick) {
    //if this is the dt node that was clicked, set the css class to 'on' and make visible its corresponding dd
    var display = (dtclick.className.toString().indexOf('off') != -1);
    if (display)
        dtclick.className = dtclick.className.toString().replace(' off', '').replace('off', '');
    else
        dtclick.className += ' off';
//    var display = (dtclick.className == 'off');
//    display ? dtclick.className = '' : dtclick.className = 'off';
    var tempnode = dtclick;
    while (tempnode.nextSibling != null) {
        tempnode = tempnode.nextSibling;
        if (tempnode.nodeName == "DD") {
            display ? tempnode.style.display = 'block' : tempnode.style.display = 'none';
            break;
        }
    }
} //end function