/*
http://blog.paranoidferret.com/index.php/2007/10/22/javascript-and-css-tutorial-accordion-menus/
*/

// define 
//    var ContentHeight = 200; //pixels
//    var TimeToSlide = 250.0; //milliseconds
// prior to inclusion.

var openAccordion = '';

function runAccordion(index)
{
  var nID = "Accordion" + index + "Content";
  if(openAccordion == nID)
    nID = '';
  
  setTimeout("animateAccordion("
      + new Date().getTime() + "," + TimeToSlide + ",'"
      + openAccordion + "','" + nID + "')", 33);
  
  openAccordion = nID;
}

function animateAccordion(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 = ContentHeight + 'px';
    }
   
    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("animateAccordion(" + curTick + "," + timeLeft + ",'"
      + closingId + "','" + openingId + "')", 33);
}

/* usage: ******************************************************
<style type="text/css">
.AccordionTitle, .AccordionContent, .AccordionContainer
{ 
  position:relative;
  width:200px;
} 
.AccordionTitle
{ 
  height:20px;
  overflow:hidden;
  cursor:pointer;
  font-family:verdana, arial, Helvetica, sans-serif;
  color:#00789F;
  font-size:8pt;
  font-weight:bold;
  vertical-align:middle;
  text-align:center;
  background-repeat:repeat-x;
  display:table-cell;
  background-image:url('title_repeater.jpg');
  -moz-user-select:none;
} 
.AccordionContent
{ 
  height:0px;
  overflow:auto;
  display:none;
} 
.AccordionContainer
{ 
  margin-left: 3px;
  border-top: solid 1px #C1C1C1;
  border-bottom: solid 1px #C1C1C1;
  border-left: solid 2px #C1C1C1;
  border-right: solid 2px #C1C1C1;
} 
</style>

<!--[if lt IE 8]>
  <style type="text/css">
    .AccordionTitle div
    { 
      padding-top: 3px;
    } 
    .AccordionButton-top
    {
      margin-top: -1px;
    }
    .AccordionContainer
    { 
      padding-bottom: 1px;
    }
  </style>
<![endif]-->

<!--[if lt IE 7]>
  <style type="text/css">
    .AccordionTitle, .AccordionContent, .AccordionContainer
    { 
      width:176px;
    } 
    .AccordionContainer
    { 
      margin-left: 4px;
    } 
  </style>
<![endif]-->

<div id="AccordionContainer" class="AccordionContainer">
  <div class="AccordionButton-top" onclick="runAccordion(1);">
    <div class="AccordionTitle" onselectstart="return false;">
      <div>
        Accordion 1
      </div>
    </div>
  </div>
  <div id="Accordion1Content" class="AccordionContent">
    I Am Accordion 1.
  </div>

  <div class="AccordionButton" onclick="runAccordion(2);">
    <div class="AccordionTitle" onselectstart="return false;">
      <div>
        Accordion 2
      </div>
    </div>
  </div>
  <div id="Accordion2Content" class="AccordionContent">
    I Am Accordion 2.
  </div>
</div>

***************************************************************/