var highlighter = {
 init:function() {
  // the init function will initially collapse any and all nested lists within the LH subnav
  // is the named 'hook' present?
  if (document.getElementById('magNav') || document.getElementById('nav')) {
   this.el = (document.getElementById('magNav') || document.getElementById('nav'));
   // we MUST be WITHIN top level <ul> tags of el (because that firstchild will be the main ul itself and should always be visible)
   this.topLevel = this.el.getElementsByTagName('ul');
   // loop through the top level <ul> tags - those immediately within the el div:
   for (var i=0; i<this.topLevel.length; i++) {
    // if they have any <ul> children:
    this.nestedLists = this.topLevel[i].getElementsByTagName('ul');
    if (this.nestedLists.length >= 1) {
     // loop through and set to display of none...
     for(var c=0; c<this.nestedLists.length; c++) {
      this.nestedLists[c].style.display = 'none';
     }
    }
   }
   // stage 2 - call 'highlight' function
   highlighter.highlight();
  }
 },
 highlight:function() {
  // get the page id of the page we're in now: page ID is in the theme as a js var
  this.loc = String(pageId);
  // 1. Check for a tertiary set of tabbed navigation within #page:
  this.holder = document.getElementById('page');
  this.allUl = this.holder.getElementsByTagName('div');
  for (var i=0; i<this.allUl.length; i++) {
   if (this.allUl[i].className == 'tertiaryNav') {
    this.tertLinks = this.allUl[i].getElementsByTagName('a');
    for (var c=0; c<this.tertLinks.length; c++) {
     // grab the href of the link:
     this.href = String(this.tertLinks[c].getAttribute('href'));
     // search the href for 'pageId' then set the className of the parent <li> to 'selected'
     if (this.href.indexOf(this.loc) != -1) {
      this.tertLinks[c].parentNode.className = 'selected';
      // then break out of this inner loop
      break;
     }
    }
    // then break out of this loop
    break;
   }
  }
  // 2. Move next to the left hand subnav element - nested lists
  // is the named 'hook' present?
  if (document.getElementById('magNav') || document.getElementById('nav')) {
   this.el = (document.getElementById('magNav') || document.getElementById('nav'));
   // get ALL links present
   this.links = this.el.getElementsByTagName('a');
   // loop through:
   for(var i=0; i<this.links.length; i++) {
    // grab the href of the link:
    this.href = String(this.links[i].getAttribute('href'));
    // search the href for 'pageId' then set the className of the parent <li> to 'selected'
    if (this.href.indexOf(this.loc) != -1) {
     this.links[i].className = 'selected';
     // call to 'tree' traveller
     highlighter.expand(this.links[i]);
     // if this <a> tag has a <ul> immediately alongside it within the <li> then we are gonna display it - ie: you are in 'shorts' and there are 2 subcategories
     this.sib = this.links[i].parentNode.getElementsByTagName('ul');
     if (this.sib.length >= 1) {
      this.sib[0].style.display = 'block';
     }
    }
   }
  }
  // 3. Move finally to the top-level nav
  
 },
 expand:function(passedEl) {
  // expand() will recursively check for parent <ul> tags, and if they exist will ensure they are 'open' and the parent-sibling <a> set to 'selected'
  // 1. First parent is the possible UL which our passed <a> tag has come from - ie: <ul><li><a>
  this.listParent = passedEl.parentNode.parentNode;
  // if listParent is a <ul> then we know we're in a nested list:
  if (this.listParent.nodeName.toLowerCase() == 'ul') {
   // reinstate listParent's visibility:
   this.listParent.style.display = 'block';
   // so we are going to highlight the <a> tag that is the first child of the parent <li> - ie: <li><a></a>*listParent*<li>
   if (this.listParent.parentNode.firstChild.nodeName.toLowerCase() == 'a') {
    this.listParent.parentNode.firstChild.className = 'selected';
   }
   // call again, but this time pass the next <a> tag up in the chain:
   highlighter.expand(this.listParent.parentNode.firstChild);
  }
 }
}
//***********************************************************************************************************************************//
//  ONLOAD handler governs initialisation: addLoadEvent(FUNCTION);
//***********************************************************************************************************************************//
/*function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
 window.onload = func;
  } else {
 window.onload = function() {
   if (oldonload) {
  oldonload();
   }
   func();
 }
  }
}*/
// prep all links now:
//addLoadEvent(highlighter.init);