/*
 * This is the code for the collapsibles. It uses the following markup:
 *
 * <div class="collapsible">
 *   <div class="collapsibleHeader">
 *     A Title
 *   </div>
 *   <div class="collapsibleContent">
 *     <!-- Here can be any content you want -->
 *   </div>
 * </div>
 *
 * When the collapsible is toggled, then the dl will get an additional class
 * which switches between 'collapsedBlockCollapsible' and
 * 'expandedBlockCollapsible'. You can use this to style it accordingly, for
 * example:
 *
 * .expandedBlockCollapsible .collapsibleContent {
 *   display: block;
 * }
 *
 * .collapsedBlockCollapsible .collapsibleContent {
 *   display: none;
 * }
 *
 * If you add the 'collapsedOnLoad' class to the dl, then it will get
 * collapsed on page load, this is done, so the content is accessible even when
 * javascript is disabled.
 *
 * If you add the 'inline' class to the dl, then it will toggle between
 * 'collapsedInlineCollapsible' and 'expandedInlineCollapsible' instead of
 * 'collapsedBlockCollapsible' and 'expandedBlockCollapsible'.
 *
 */
 



// check for ie5 mac
var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    &&
    navigator.userAgent.indexOf('Mac') != -1
)

// check for W3CDOM compatibility
var W3CDOM = (!bugRiddenCrashPronePieceOfJunk &&
               document.getElementsByTagName &&
               document.createElement);

function hasClassName(node, className){
    if ($(node).attr("class") == undefined) return false;
    var classes = $(node).attr("class").split(" ");
    for (var i=0; i<classes.length; i++){
        if (classes[i] == className) return true;
    }
    return false;
}

function addClassName(node, className){
    $(node).addClass(className);
}

function replaceClassName(node, oldclass, newclass){
    if (hasClassName(node, oldclass)){
        $(node).removeClass(oldclass);
        $(node).addClass(newclass);
    }
}

function findContainer(node, func) {
    while (node != null) {
        if (func(node)) {
            return node;
        }
        node = node.parentNode;
    }
    return false;
};


function isCollapsible(node) {
    return hasClassName(node, 'collapsible');
};

function toggleCollapsible(event) {

    if (!event) var event = window.event; // IE compatibility

    if (!this.tagName && (this.tagName == 'DIV' || this.tagName == 'div')) {
        return true;
    }

    var container = findContainer(this, isCollapsible);
    if (!container) {
        return true;
    }

    var collapsed = (hasClassName(container, 'collapsedBlockCollapsible') ||
                     hasClassName(container, 'collapsedInlineCollapsible'));
    var key = container.id;
    
    if (collapsed) {
        (container, 'collapsedBlockCollapsible',
                         'expandedBlockCollapsible');
        replaceClassName(container, 'collapsedInlineCollapsible',
                         'expandedInlineCollapsible');
        setCollapsilbeRemote(key, false);
    } else {
        replaceClassName(container, 'expandedBlockCollapsible',
                         'collapsedBlockCollapsible');
        replaceClassName(container, 'expandedInlineCollapsible',
                         'collapsedInlineCollapsible');
        setCollapsilbeRemote(key, true);
    }
};

function setCollapsilbeRemote(key, collapse){
    if (collapse == true){
        var paras = 'c:boolean=True&k=' + key;
    } else {
        var paras = 'c:boolean=&k=' + key;
    }
    if (key) $.get('./setCollapseState?'+paras);
}

function activateCollapsibles() {

    if (!W3CDOM) {return false;}
    
    var collapsibles = $('div.collapsible');
    for (var i=0; i < collapsibles.length; i++) {
        var collapsible = collapsibles[i];

        var collapsible_header = $('div.collapsibleHeader', collapsible)[0];
        collapsible_header.onclick = toggleCollapsible;

        if (hasClassName(collapsible, 'inline')) {
            // the collapsible should be inline
            if (hasClassName(collapsible, 'collapsedOnLoad')) {
                replaceClassName(collapsible, 'collapsedOnLoad', 'collapsedInlineCollapsible');
            }
            else if (!hasClassName(collapsible, 'collapsedInlineCollapsible')){
                addClassName(collapsible, 'expandedInlineCollapsible');
            }
        } else {
            // the collapsible is a block
            if (hasClassName(collapsible, 'collapsedOnLoad')) {
                replaceClassName(collapsible, 'collapsedOnLoad', 'collapsedBlockCollapsible');
            }
            else if (!hasClassName(collapsible, 'collapsedInlinecollapsible')){
                addClassName(collapsible, 'expandedBlockCollapsible');
            }
        }
    }
};

$(document).ready(function(){ activateCollapsibles() });