function loadTabs(activeIndex, totalItems) { //we are passed the index of the active tab and the element (div) to display.
  
  //var totalItems = 5; //hard-code the number of list items here, as this will not change much note that changing this number will mean all the images will need to be altered to a new length      
  var previous = activeIndex - 1;
  var next = activeIndex + 1;
  var list = '';
  
  removeClasses(totalItems);
  setClasses(activeIndex, next, previous, totalItems);
   
  var divShow = document.getElementById('front-tabs-content-container-' + activeIndex);
  divShow.style.display = 'block';  
}
      

function removeClasses(totalItems) {
  for (var i = 1, ntabs = totalItems; i <= ntabs; i++) {
    list = document.getElementById('list' + i);
    list.className = '';
    
    divShow = document.getElementById('front-tabs-content-container-' + i);
    divShow.style.display ='none';
  }     
}


function setClasses(activeIndex, next, previous, totalItems) {
  
  /*
   *  This function can result in 10 possible class names for the list item which are all given
   *  their own backgrounds in the roadtech.css file.
   *
   *  first-active
   *  first-inactive
   *  first-inactive-previous
   *
   *  last-active   
   *  last-inactive
   *  last-inactive-next
   *
   *  inactive-next
   *  inactive-previous
   *  
   *  active
   *  inactive
   *
   */
  
  first = document.getElementById('list1');
  first.className = 'first-'  
  
  last = document.getElementById('list' + totalItems);
  last.className = 'last-'
  
  for (var i = 1, ntabs = totalItems; i <= ntabs; i++) {
    list = document.getElementById('list' + i);
            
    if (activeIndex == i) {
      list.className = list.className + 'active';
    } 
    else {
      list.className = list.className + 'inactive';
    }
        
    if (next == i) {
      list.className = list.className + '-next';
    }    
    if (previous == i) {
      list.className = list.className + '-previous';
      
    }
  }
}