$(function () {
   var ftrindex = $('#ftrindex');
   var glostopics = $('#glossary-topics');
   var gloschanges = $('#glossary-changes');  
   var chapters = ['changes','topics'];
   var widget = $('.project-glossary-pane');
  
  //init gloss (called by hook)
  function initGlossary(data){ 
    
    $.each(chapters, function(i, object){
      renderGlossary(data,object)
    });
       
  }
  
  function renderGlossary(data, subject){
    var target=$('#glossary-'+subject);
    
     switch (subject)
     {
       case 'changes' :target.append($('<h2> Global developments </h2>'));;break;
       case 'topics' :target.append($('<h2> Topics </h2>'));;break;
     }    
     
     var $ul=$('<ul class="glos-ul">').appendTo(target);
   
    $.each(data[subject],function(i,object){
     var $li=$('<li>');
      var $i=$('<i class="fa-solid '+object.icon+'"></i>').appendTo($li);
      var $name=$('<span class="glos-name text-bigger">&nbsp;'+object.name+'</span>').appendTo($li);
      var $description=$('<p class="glos-p">'+object.description+'</p>').appendTo($li);
      $li.append('</li>');
      $ul.append($li);
    });

  
       
  }

  
  
  //if data object holder ftrindex has length, data is available
    if (ftrindex.length) {
        var ftrindexdata = ftrindex.data('handle');
      ftrindexdata.attachHook('glossary-project', 'glossary', initGlossary, {fields:chapters, sort:true});
      
    } else {
        //problem.
        console.log('#ftrindex has no length, abort mission.')
    }
  
}); //end function
/*******************************************************************/
/* ftrtch dino */
/* [type: JS] [file:project-glossary] [39.159] DESIGN*/
/*******************************************************************/
/* 0.5 D>D */
/* db 222 */