document.addEventListener('DOMContentLoaded', function() {
  /* Создание содержания */
  let
    rollUp = 'Свернуть',
    expand = 'Развернуть',
    output = document.createDocumentFragment(),
    entryContent = document.querySelector('.entry-content'),
    headers2 = entryContent.querySelectorAll('h2'), // Ищем заголовки только в блоке с контентом
    headers3 = entryContent.querySelectorAll('h3'),
    wrapper = document.createElement('nav'),
    title = document.createElement('div'),
    ul = document.createElement('ul'),
    divCloseOpen = document.createElement('div'), // div для кнопки скрыть Содержимое
    tocLabel = document.querySelector('.toc-label'); // Нужно разместить элемент с этим классом где нужно вывести TOC
  wrapper.classList.add('toc-block');
  title.style.fontWeight = 'bold';
  title.textContent = 'Содержание:';
  output.appendChild(wrapper);
  wrapper.appendChild(title);
  wrapper.appendChild(ul);
  divCloseOpen.classList.add('toc-close-open');
  divCloseOpen.innerHTML = rollUp;
  ul.after(divCloseOpen);
  /* Добавляем один класс для всех h2 и h3 и получаем все заголовки */
  headers2.forEach(function(item, index) {
    item.classList.add('header-toc');
  });
  headers3.forEach(function(item, index) {
    item.classList.add('header-toc');
  });
  let allHeaders = document.querySelectorAll('.header-toc');
  allHeaders.forEach(function(item, index) {
    let
      li = document.createElement('li'),
      link = document.createElement('a');
    if (item.id === '') {
      item.id = 'id-' + index;
    }
    link.href = '#' + item.id;
    link.textContent = item.textContent;
    li.appendChild(link);
    if (item.localName == 'h3') {
      let tocBlockUl = wrapper.querySelector('.toc-block ul');
      if (tocBlockUl.lastChild.lastChild.localName == 'ul') {
        tocBlockUl.lastChild.lastChild.appendChild(li);
      } else {
        let ul_h3 = document.createElement('ul');
        ul_h3.appendChild(li);
        ul.lastChild.appendChild(ul_h3);
      }
    } else {
      ul.appendChild(li);
    }
  });
  tocLabel.appendChild(output);
  // Массив ссылок в блоке toc (оглавление)
  var toc;
  // Массив контента (ссылки относятся к контенту)
  var content = [];
  // Вызов функции prepare после загрузки HTML
  prepare();
  sync();
  /* Эта функция получает все ссылки и содержимое toc (оглавление) и сохраняет тему */
  function prepare() {
    // Получить все ссылки toc (оглавление)
    toc = document.querySelectorAll('.toc-block a');
    // Получить контент, чтобы ссылка ссылалась на него
    toc.forEach(function(link) {
      var id = link.getAttribute("href");
      var element = document.querySelector(id);
      content.push(element);
    });
    // Синхронизировать toc (оглавление) с частью контента, которая видна в окне просмотра при прокрутке
    window.addEventListener("scroll", sync, false);
  }
  /*
  Эта функция проверяет, виден ли элемент в области просмотра
  @argument {String} элемент, который нам нужно проверить
  @returns true, если элемент виден в окне просмотра, иначе вернуть false 
   */
  function isElementInViewport(element) {
    // Получить позицию элемента
    var rect = element.getBoundingClientRect();
    // Вернуть true, если часть элемента видна
    return (rect.bottom >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight));
    // Пока нам нужно проверить, весь ли элемент виден в окне просмотра
    // return (rect.top >= 0 &&
    // rect.bottom <= (window.innerHeight || document.documentElement.clientHeight));
  }
  /* Эта функция выделяет ссылки toc (оглавление), которые видны в области просмотра */
  function sync() {
    // Проверить весь контент
    for (var i = 0; i < content.length; i++) {
      // Если контент виден, добавить класс highlight, иначе убрать highlight
      if (isElementInViewport(content[i])) {
        toc[i].classList.add('highlight');
      } else {
        toc[i].classList.remove('highlight');
      }
    }
  }
  /* Функция свернуть Содержимое */
  var tocCloseOpen = document.querySelector('.toc-close-open');
  tocCloseOpen.addEventListener('click', hiddenCloseClick);

  function hiddenCloseClick(elem) {
    if (elem.target.textContent == rollUp) {
      elem.target.textContent = expand;
    } else {
      elem.target.textContent = rollUp;
    }
    let x = document.querySelector('.toc-block > ul');
    x.classList.toggle('close');
  };
  /* Функция делает сайдбар липким если есть Содержание */
  var tocBlock = document.querySelector('.toc-block');
  var sidebar = document.querySelector('.toc-label');
  if (window.screen.width > 757) {
    if (tocBlock) {
      sidebar.classList.add('sticky-block');
    }
  } else {
    let tocCloseOpen = document.querySelector('.toc-close-open');
    // Если есть Содержание то сварачиваем его для мобильной версии
    if (tocCloseOpen) {
      if (tocCloseOpen.textContent == rollUp) {
        tocCloseOpen.textContent = expand;
      } else {
        tocCloseOpen.textContent = rollUp;
      }
      let x = document.querySelector('.toc-block > ul');
      x.classList.toggle('close');
    }
  }
}, false); // конец addEventListener DOMContentLoaded