// some global variables, these should be set from the start caller on the page
var search = 'search box id here';
var arrowtoggle = false;
var messagetoggle = true;

// assocciate mouse over and mouse clicks to all the relevant headers and dts
function attachEventHandler(){
  var dts, h3s, i;
  dts = document.getElementById(search).getElementsByTagName('dt');
  h3s = document.getElementById(search).getElementsByTagName('h3');
  for(i = 0; i < dts.length; i++){
    if(dts[i]){
      dts[i].passitdown = i;
      // set up click event for a dt to open the dd
      dts[i].onclick = function(e){
        toggleItem(this.passitdown);
      }
      // mouse over to make dt behave like a link
      dts[i].onmouseover = function(e){
        this.style.cursor = 'pointer'
        this.style.textDecoration = 'underline';
      }
      // mouse out to make dt behave like a link
      dts[i].onmouseout = function(e){
        this.style.cursor = 'default'
        this.style.textDecoration = 'none';
      }
    }
  }
  for(i = 0; i < h3s.length; i++){
    if(h3s[i]){
      h3s[i].passitdown = i;
      // set up click event to open the dl
      h3s[i].onclick = function(e){
        toggleList(this.passitdown);
      }
      // mouse over to make the h3 behave like a link
      h3s[i].onmouseover = function(e){
        this.style.cursor = 'pointer'
        this.style.textDecoration = 'underline';
      }
      // mouse out to make the h3 behave like a link
      h3s[i].onmouseout = function(e){
        this.style.cursor = 'default'
        this.style.textDecoration = 'none';
      }
    }
  }
}

// called to hide all initially hidden elements
// a new addition for deep dls has been added to make them appear by default 
//  else you will never see them
function hidestuffs(){
  var dds, dls, i, j;
  dds = document.getElementById(search).getElementsByTagName('dd');
  dls = document.getElementById(search).getElementsByTagName('dl');
  // hide all dls - this happens first so the following section can reopen sub dls
  for(i = 0; i < dls.length; i++){
    if(dls[i]){
      dls[i].style.display = 'none';
    }
  }
  // this part has grown to account for dls within dds - nested dls
  // might want to revisit to make this even more general to become more robust at handling
  //  infintely nested dls
  for(i = 0; i < dds.length; i++){
    if(dds[i]){
      dds[i].style.display = 'none';
      var deepdls = dds[i].getElementsByTagName('dl');
      for(j = 0; j < deepdls.length; j++){
        if(deepdls[j]){ deepdls[j].style.display = 'block'; }
      }
    }
  }
  // hide the click here message
  if(messagetoggle){
    var mes = document.getElementById('clickMessage');
    if(mes){
      mes.style.display = 'none';
    }
  }
}

// used to hide and show dls - attached to h3s
function toggleItem(id){
  var dd, dt, i;
  dd = document.getElementById(search).getElementsByTagName('dd');
  dt = document.getElementById(search).getElementsByTagName('dt');
  if(dd[id]){
    // if hidden, show
    if(dd[id].style.display == 'none'){
      if(dt[id])
      if(arrowtoggle){ dt[id].style.backgroundPosition = '0px -14px'; }
      dd[id].style.display = 'block';
    }
    // else hide
    else{
      if(dt[id])
        if(arrowtoggle){ dt[id].style.backgroundPosition = '0px 0px'; }
      dd[id].style.display = 'none';
    }
  }
}

// used to hide and show dls - attached to dls
function toggleList(id){
  var dd, i;
  dl = document.getElementById(search).getElementsByTagName('dl');
  if(dl[id]){
    if(dl[id].style.display == 'none'){
      dl[id].style.display = 'block';
    }
    else{
      dl[id].style.display = 'none';
    }
  }
  // hide or show the message if it's been included
  if(messagetoggle){
    var mes = document.getElementById('clickMessage');
    if(mes){
      if(mes.style.display == 'none'){
        mes.style.display = 'block';
      }
      else{
        mes.style.display = 'none';
      }
    }
  }
}

// write text to the document
// header for the expandables
function writeH3(msg){
  document.write('<h3>'+msg+'</h3>');
}
// the click message - might change this to write a div and add an id to it - then move it to master or general
function writeClickMessage(msg){
  document.write('<div id="clickMessage">'+msg+'</div>');
}

// basically like a run command and/or a constructor
function start(val, arr, mes){
  search = val;
  arrowtoggle = arr;
  messagetoggle = mes;
  attachEventHandler();
  hidestuffs();
}