// here is stored the state of a element
//   0 - closed
//   1 - open (if having 3 states only half open)
//   2 - open (3 states)
var expanded_array=new Array(); 

// creates and loads the title images
var expand_open = new Image(12,12);
var expand_closed = new Image(12,12);
var expand_closed2 = new Image(12,12);

// Expand function
// Expand/Collapses a column
// id - the given id
// state - current state
// no_states - number of states (2 or 3)
function expand(id, state, no_states, called) {

   // animating is done by looping this function until done is TRUE
   var done = false;

   // div.offsetHeight is easier to write than document.getElementById(id+'_div').offsetHeight
   var div = document.getElementById(id+'_div');
   var table = document.getElementById(id+'_table');
   var td = document.getElementById(id+'_td');

   div.style.overflow = 'hidden';

   // ends the function if id is given incorrectly or the table isn't made correctly
   if (!div) return;

   // if the state of the element isn't stored -> store it
   if (!expanded_array[id]) {
      expanded_array[id] = {
         state: state
      }
   }

   o = expanded_array[id];

   // if fully open ->
   if (o.state == no_states - 1)  {

      // simply reduces the height to ½ every
      div.style.height = div.offsetHeight/2 + "px";

      // if the height is 2 or below ->
      if (div.offsetHeight <= 2) {

         // hide the column
         div.style.height = "0px";
         td.style.display = 'none';
         done = true;

         // changes the text in the title
         o.state = 0;
      }
   }


   // if 2 states and closed ->
   if (o.state == 0 && no_states == 2 && !done) { 
      td.style.display = '';
      // 1st time -> ½ of the original height, 2nd -> 3/4, 3rd -> 7/8 etc.
      div.style.height = div.offsetHeight + ((table ? table.offsetHeight : auto) - div.offsetHeight)/2 + "px";

      // if the height is 2 or more below the original size
      if (div.offsetHeight >= ((table ? table.offsetHeight : auto) - 2)) {

         // height to original
         div.style.height = (table ? table.offsetHeight : auto) + "px";
         done = true;
         o.state = o.state + 1;
      }
   }

   // if having 3 states and not fully open
   if (o.state < no_states && no_states == 3 && !done) {

      // the 1st part
      var td1 = document.getElementById(id+'_1');
      // the 2nd part
      var td2 = document.getElementById(id+'_2');

      // show 2nd part
      if (o.state == 1) {
         if (!called) div.style.height = (td1 ? td1.offsetHeight : auto) + "px";
         td2.style.display = '';
         div.style.height = div.offsetHeight + ((table ? table.offsetHeight : auto) - div.offsetHeight)/2 + "px";

         if (div.offsetHeight >= ((table ? table.offsetHeight : auto) - 2)) {
            div.style.height = (table ? table.offsetHeight : auto) + "px";
            done = true;
            o.state = o.state + 1;
         }
   
      }

      // show 1st part
      if (o.state == 0) {
         td.style.display = '';
         div.style.height = div.offsetHeight + ((td1 ? td1.offsetHeight : auto) - div.offsetHeight)/2 + "px";

         if (div.offsetHeight >= ((td1 ? td1.offsetHeight : auto) - 2)) {
            div.style.height = (td1 ? td1.offsetHeight : auto) + "px";
            done = true;
            o.state = o.state + 1;
         }
   
      }
   }

   // keeps looping until done
   if (!done) setTimeout("expand('"+id+"', "+state+", "+no_states+", true)", 20);
   return false;
}