class Treeview {
  constructor(treeviewId,imageBaseUrl){
    this.treeviewId = treeviewId; 
    this.selected=null;
    this.imageBase=imageBaseUrl;
  };
  on(eventName,fn){
    var me = this;
    switch(eventName){
      case "select":{
document.querySelector(this.treeviewId).addEventListener("click",(event)=>{ if (event.target.nodeName=='SUMMARY'){
      if (me.selected != null){document.getElementById(me.selected).removeAttribute("selected");
                              }
  document.getElementById(event.target.id).setAttribute("selected","true");
 console.log(event.target.id);     
      me.selected=event.target.id;
      event.target.setAttribute("open",!event.target.parentNode.hasAttribute("open"));
      fn(event)
      }});
    break;}
    }
  }
  appendData(data,targetId){
    document.getElementById(targetId).parentNode.innerHTML += this.walkData(data);    
  };
  replaceData(data,targetId){
    if (targetId!=null){
      var target=document.getElementById(targetId);
      target.outerHTML = this.walkData(data)
    }
    else {
      var target = document.querySelector(this.treeviewId);
      target.innerHTML = this.walkData(data);
    }
  };
  walkData(data){
    var me=this;
    var buf = Object.keys(data).map((key)=>`<details><summary  id="${key}" ${Object.keys(data[key]).map((subkey)=>{return subkey != 'children'?`data-${subkey}="${data[key][subkey]}"`:' '}).join(' ')}><img class="icon" src="${me.imageBase}${data[key].icon?data[key].icon:data[key].children?'Folder.png':'Item.png'}"> </img>${data[key].label}</summary>
     ${data[key].children?me.walkData(data[key].children):""}</details>`); 
     return buf.join("\n")
  }; 
  open(id){
    var node = document.getElementById(id);
    while(node.parentNode.nodeName=="DETAILS"){
      node = node.parentNode;
      node.setAttribute("open","true");
    }
  };
  close(id){
    var node = document.getElementById(id).parentNode;
    node.removeAttribute("open");
    var detailNodes = node.querySelectorAll("DETAILS");
  console.log(detailNodes);  detailNodes.forEach((node)=>node.removeAttribute("open"));
  };
  select(id){
    this.open(id);
    document.getElementById(id).focus();
    document.getElementById(id).click();
  }
}

var data = {categories:{
  label:"Categories",
  description:"This identifies the different classes of objects in the data model",
  children:{
  "class:patient":{
    label:"Patients",
    type:"class:category",
    description:"Recipients of medical care services.",
    children:{
    "patient:janeDoe":{label:"Jane Doe", 
    icon:"Woman.png",           
    type:"class:patient",    
            description:"35 year old writer of mystery novels",
             postalCode:"98027",
            children:{
             "jd:plans":{
                label:"Plans",
                children:{
                  "plan:JDHI1":{label:"Health Insurance JDHI1", type:"class:plan",icon:"Plan.png"},
                  "plan:JDDI1":{label:"Dental Insurance JDDI1", type:"class:plan",icon:"Plan.png"},
                  "plan:JDVI1":{label:"Vision Insurance JDVI1", type:"class:plan",icon:"Plan.png"}
             
              }
            }
            }
            },
    "person:briannen":{label:"Briannen Storm",     
            description:"24 year old female medical examiner",
            icon:"Woman.png",
            type:"class:patient",        
             postalCode:"98041",
            children:{
              "bs:plans":{
                label:"Plans",
                children:{
                  "plan:BSHI1":{label:"Health Insurance BSHI1", type:"class:plan",icon:"Plan.png"},
                  "plan:BSDI1":{label:"Dental Insurance BSDI1", type:"class:plan",icon:"Plan.png"},
                  "plan:BSVI1":{label:"Vision Insurance BSVI1", type:"class:plan",icon:"Plan.png"}
             
                    }
                 }
              }
          },
      "person:thomasKey":{label:"Thomas Key",     
            description:"42 year old software architect",
            icon:"Man.png",
            type:"class:patient",        
             postalCode:"98043",
            children:{
              "group:KTplans":{
                label:"Plans",
                children:{
                  "plan:TKHI1":{label:"Health Insurance HI2", type:"class:plan",icon:"Plan.png"},
                  "plan:TKDI1":{label:"Dental Insurance DI2", type:"class:plan",icon:"Plan.png"},
                  "plan:TKVI1":{label:"Vision Insurance VI2", type:"class:plan",icon:"Plan.png"}
             
                    }
                 }
              }
          }
    }
  }
  }
}};

var physicians = {
  "class:physician":{
    label:"Physicians",
    type:"class:category",
    description:"Individual providers of medical care services",
    children:
    {"physician:drstrange":{
        label:"Dr. Stephen Strange",
        description:"Master of the Arcane",
        icon:"Doctor_Strange.jpg",
        type:"class:physician",
        children:{
         "class:specialty":{
            label:"Specialties",
           children:{
             "drdee:generalCare":{
               label:"General Practitioner",
               icon:"Doctor_Male.png",
               description:"Provides general intake and consultative services, primary care physician."
             },
             "drdee:pediatrics":{
               label:"Pediatrics",
               icon:"Pediatrics.png",
               description:"Provides care primarily for infants and children."
             }
           }
         }
       }
                        
     },
     "physician:drjones":{
       label:"Dr. Indiana Jones",
        description:"Archeologist Extraordinaire",
       type:"class:physician",
       icon:"Doctor_Male.png",
        children:{
           "class:specialty":{
              label:"Specialties",
             children:{
               "drjones:venomologist":{
                 label:"Venomologist",
                 icon:"Snake.png", 
                 description:"Specializes in the effects and symptons of bites from snakes, spiders and other venomous animals"
               }
             }
           }
         }
       },
     "physician:drWho":{
       label:"Doctor Who",
       type:"class:physician",
       icon:"Doctor_Who.jpg", 
       description:"Mad man in a blue box. ",
        children:{
           "class:specialty":{
              label:"Specialties",
             children:{
               "drjones:chronicologist":{
                 label:"Chronicologist",
                 icon:"Tardis.png",
                 description:"Specializes in time travel-related diseases"
                 
               }
             }
           }
         }
       }
    }
  }
};


var treeview = new Treeview(".treeview","https://s3-us-west-2.amazonaws.com/s.cdpn.io/620300/");
treeview.on("select",(event)=>{
  var node = event.target;
  var data = node.dataset
  display.innerHTML = `<div class="label">${data.label}</div>${data.description?`<div class="descr">${data.description}</div>`:''}`;
  console.log(event.target)
});
    treeview.replaceData(data);

    treeview.select("patient:janeDoe")
    treeview.appendData(physicians,"categories");