//So first we have a couple global variables. ContentHeight controls how tall a menu gets when opened
// - currently it is set to 200 pixels. TimeToSlide is the amount of time for the opening/closing animation, and it is currently set to 250 milliseconds. The opentAccordion variable holds the element id of the current open accordion menu. When there are none open, it is the empty string.

//Now for the function runAccordion. The first thing we do here is transform the menu index passed in into 
//the full element id, and hold it in the variable nID. If this is the currently open menu, then we are going 
//to close it, and so nID gets set to the empty string (i.e., there is no new menu to open). The next thing we 
//do is a setTimeout on a call to animate - a function which we will take a look at in a moment. And finally, 
//we set the global openAccordion to the new open accordion, nID.

var ContentHeight = 0;
var TimeToSlide = 200;
var openAccordion = '';


function runAccordion(index) {
    var nID = "Accordion" + index + "Content";
    if (openAccordion == nID)
        nID = '';

    ContentHeight = document.getElementById("Accordion" + index + "Content" + "_").offsetHeight;
    setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
      + openAccordion + "','" + nID + "')", 33);

    openAccordion = nID;
}


//And here we have the animate function:

function animate(lastTick, timeLeft, closingId, openingId) {
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var opening = (openingId == '') ? null : document.getElementById(openingId);
    var closing = (closingId == '') ? null : document.getElementById(closingId);


    if (timeLeft <= elapsedTicks) {

        if (opening != null)
            opening.style.height = 'auto';


        if (closing != null) {
            //closing.style.display = 'none';
            closing.style.height = '0px';
        }
        return;
    }

    timeLeft -= elapsedTicks;
    var newClosedHeight = Math.round((timeLeft / TimeToSlide) * ContentHeight);

    if (opening != null) {
        if (opening.style.display != 'block')
            opening.style.display = 'block';
        opening.style.height = (ContentHeight - newClosedHeight) + 'px';
    }

    if (closing != null)
        closing.style.height = newClosedHeight + 'px';

    setTimeout("animate(" + curTick + "," + timeLeft + ",'"
      + closingId + "','" + openingId + "')", 33);
}

//So the animate function takes 4 arguments - the last time the animation was updated, the amount of time 
//left before the animation should complete, the element id of the closing menu, and the element id of 
//the opening menu. The reason we care about time here is that the code always makes sure the animation 
//completes in the amount of time specified in TimeToSlide. If we didn't do that, on slow computers the 
//slide would have the potential to take much longer than TimeToSlide.

//Because of all that, the first thing we do in the animation function is figure out how much time has 
//passed since the last animation iteration. If that amount of time is greater than (or equal to) the 
//amount of time left in the animation (as specified in timeLeft), we finish the animation. We do this 
//by setting the opening menu (if there is an opening menu) to its full size, setting the size of the 
//closing menu (if there is one) to 0 and making it invisible, and then returning out, thereby ending 
//the animation.

//If there is still time left in the animation, we calculate the ratio of time left to the total time 
//in the animation, and multiply it by the the full menu height. This returns the new value for the 
//height of the closing menu. Now, if there is a menu we are opening, we first make sure it is visible 
//(because closed menus are initially invisible), and if it isn't we make it visible. Next we set the 
//new height, which is full menu height minus the new height of the closing menu (this way as one menu 
//closes, the other opens exactly in sync). Then, if there is a menu we are closing, we set its new 
//height.

//Finally, we do a new setTimeout call to animate, with the new values for the last time the animation 
//was updated and the amount of time left in the animation.-->