var activepanel      = 0;  // 0 indexed reference to the currently active panel
var panelseparation  = 25; // vertical pixel separation between adjacent panels


/****************************************************
* serviceheaderclick(thing)
*
* Event handler for mouse click on service category
***************************************************/

function serviceheaderclick(sender)
{
   // find the panel whose header has been clicked on
   var panel   = sender.parentNode.parentNode;
   
   // infer the panel index from its z-index
   var panelindex = parseInt(panel.style.zIndex);
   
   // if the clicked panel isn't already active
   if (panelindex != activepanel)
   {
    // need to reposition everything to make this appear active
      if (panelindex > activepanel)
      {
         // new panel is lower on the page than the previously active panel
         // move everything from old+1 to new to the top 
         for (var i = (activepanel + 1); i <= panelindex; ++i)
         {
            var idpaneltomove = "servicepanel" + i;
            document.getElementById("servicepanel" + i).style.top = (i * 25) + 'px';
         } 
      }
      else
      {
         // panel is higher on the page than the previously active panel
         // move everything from new + 1 to old to the bottom
         for (var i = (panelindex + 1); i <= activepanel; ++i)
         {
            var idpaneltomove = "servicepanel" + i;
            document.getElementById("servicepanel" + i).style.top = (327 - ((6 - i) * 25)) + 'px';          
         }           
      }
      // finally, make this the new active panel
      activepanel = panelindex;
   }
   else
   {
      // user has clicked on the active panel
   }
}