// not animated collapse/expand
function togglePannelStatus(content) {
    var expand = (content.style.display == "none");
    content.style.display = (expand ? "block" : "none");
    toggleChevronIcon(content);
    expand = null;
}

// current animated collapsible panel content
var currentContent = null;

function togglePannelAnimatedStatus(content, interval, step) {
    // wait for another animated expand/collapse action to end    
    content=document.getElementById("divStickyToolbarContent"); 
    if (currentContent == null) {
        currentContent = content;
        var divAnimation = document.getElementById("divMainAnimation");
        divAnimation.style.bottom = "20px";
        var expand = (content.style.display == "none");
        if (expand) {
            content.style.display = "block";
            if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent))
            { divAnimation.style.bottom = "330px"; }
            else {
                divAnimation.style.bottom = "353px";
            }
        }

        var max_height = content.offsetHeight;
        var step_height = step + (expand ? 0 : -max_height);
        toggleChevronIcon(content);

        // schedule first animated collapse/expand event
        content.style.height = Math.abs(step_height) + "px";
        setTimeout("togglePannelAnimatingStatus(" + interval + "," + step
            + "," + max_height + "," + step_height + ")", interval);
        expand = null; 
        divAnimation = null; 
        max_height = null;
        step_height = null;
    }
}

function togglePannelAnimatingStatus(interval, step, max_height, step_height) {
    var step_height_abs = Math.abs(step_height);

    // schedule next animated collapse/expand event
    if (step_height_abs >= step && step_height_abs <= (max_height - step)) {
        step_height += step;
        currentContent.style.height = Math.abs(step_height) + "px";
        setTimeout("togglePannelAnimatingStatus(" + interval + "," + step
            + "," + max_height + "," + step_height + ")", interval);
    }
    // animated expand/collapse done
    else {
        if (step_height_abs < step)
            currentContent.style.display = "none";
        currentContent.style.height = "";
        currentContent = null;
    }
    step_height_abs = null;
    
}

// change chevron icon into either collapse or expand
function toggleChevronIcon(content) {   
    // var chevron = content.parentNode.firstChild.childNodes[1].childNodes[0];
    var chevron = document.getElementById("imgExpendCollapse")
    var expand = (chevron.src.indexOf("expand.png") > 0);
    chevron.src = chevron.src
        .split(expand ? "expand.png" : "collapse.png")
        .join(expand ? "collapse.png" : "expand.png");
    chevron = null;
    expand = null;
}