let browsabl = $('.col._browse.--chapter').children('._browse-chunk').children().length,
    books    = $('.lnk._browse-book'),
    chapters = $('.lnk._browse-chapter'),
    pages    = $('.lnk._browse-page'),
    chunk    = '._browse-chunk',
    shade    = 'rgba(0,0,0,0.07)';

const StartBrowse = () => {
  let book    = $('.block._browse-lnk','.col._browse.--book')[0],
      chapter = $('.block._browse-chunk','.col._browse.--chapter')[0],
      page    = $('.block._browse-chunk','.col._browse.--page')[0],
      pChild  = $(page)[0].children[0],
      bShade  = $(book)[0].children[0],
      cShade  = $(chapter)[0].children[0].children[0],
      pShade  = $(pChild)[0].children[0].children[0],
      tl      = gsap.timeline();

      tl
      .set(chunk,{display:'none'})
      .set([chapter,page,pChild],{display:"block"})
      .set([bShade,cShade,pShade],{backgroundColor:shade})
      ;
}

const HoverBook = (e) => {
  let ting    = $(e.target),
      label   = $(ting)[0].classList[2].slice(5),
      chapter = $(chunk + '.--' + label, '.col._browse.--chapter'),
      page    = $(chunk + '.--' + label, '.col._browse.--page'),
      pChild  = $(page)[0].children[0],
      cShade  = $(chapter)[0].children[0].children[0],
      pShade  = $(pChild)[0].children[0].children[0],
      tl      = gsap.timeline();

      tl
      .set(chunk,{display:'none'})
      .set([chapter,page,pChild],{display:"block"})
      .set([books,chapters,pages],{clearProps:"backgroundColor"})
      .set([ting,cShade,pShade],{backgroundColor:shade})
      ;
}

const HoverChap = (e) => {
  let ting       = $(e.target),
      aLabel     = $(ting)[0].classList[2].slice(5),
      bLabel     = $(ting)[0].classList[3].slice(8),
      cChunk     = $(chunk + '.--' + aLabel, '.col._browse.--chapter'),
      pChunkA    = $(chunk + '.--' + aLabel, '.col._browse.--page'),
      pChunkB    = $(chunk + '.--' + bLabel, pChunkA),
      pChunkBKid = $(pChunkB)[0].children[0].children[0];
      tl         = gsap.timeline();

      tl
      .set(chunk,{display:'none'})
      .set([cChunk,pChunkA,pChunkB],{display:"block"})
      .set([chapters,pages],{clearProps:"backgroundColor"})
      .set([ting,pChunkBKid],{backgroundColor:shade})
      ;
}

const HoverPage = (e) => {
  let ting = $(e.target),
      tl   = gsap.timeline();

      tl
      .set(pages,{clearProps:"backgroundColor"})
      .set(ting,{backgroundColor:shade})
      ;
}

$(function(){

  if (!$(body).hasClass('type-home')) {
    if (browsabl > 0) {
      StartBrowse();
      $('.lnk._browse-book').hover( function (e) { HoverBook(e); });
      $('.lnk._browse-chapter').hover( function (e) { HoverChap(e); });
      $('.lnk._browse-page').hover( function (e) { HoverPage(e); });
    }
  }

});