const tabs = [
  { 
    head: 'responsive', 
    content: "responsive Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." 
  }, 
  { 
    head: 'accessible', 
    content: "accessible It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)." 
  }, 
  { 
    head: 'overscroll', 
    content: "overscroll Praesent vel sagittis orci. Etiam mollis erat a venenatis fringilla. Phasellus tempor semper nibh ut lacinia. Phasellus consectetur lorem nec velit finibus iaculis. Phasellus condimentum augue quis nulla congue porta. Nam dapibus imperdiet lectus, nec placerat nisl ultricies in. Cras tincidunt est placerat lorem dictum, vel condimentum velit luctus. Pellentesque maximus velit at vehicula posuere. Nulla posuere bibendum porttitor. Nullam nec nunc ultrices, faucibus lectus id, fringilla risus. Maecenas dignissim, nibh in tempor finibus, eros lacus rutrum mauris, ac sodales purus velit nec massa. Cras faucibus vehicula sem eleifend commodo. Sed rutrum velit quis ex tincidunt cursus. Maecenas porta fermentum elementum. Curabitur neque orci, rhoncus at tincidunt vitae, varius in dolor.Praesent vel sagittis orci. Etiam mollis erat a venenatis fringilla. Phasellus tempor semper nibh ut lacinia. Phasellus consectetur lorem nec velit finibus iaculis. Phasellus condimentum augue quis nulla congue porta. Nam dapibus imperdiet lectus, nec placerat nisl ultricies in. Cras tincidunt est placerat lorem dictum, vel condimentum velit luctus. Pellentesque maximus velit at vehicula posuere. Nulla posuere bibendum porttitor. Nullam nec nunc ultrices, faucibus lectus id, fringilla risus. Maecenas dignissim, nibh in tempor finibus, eros lacus rutrum mauris, ac sodales purus velit nec massa. Cras faucibus vehicula sem eleifend commodo. Sed rutrum velit quis ex tincidunt cursus. Maecenas porta fermentum elementum. Curabitur neque orci, rhoncus at tincidunt vitae, varius in dolor." 
  }, 
  { 
    head: 'more', 
    content: "more Sed consectetur, ipsum a ultrices dapibus, nulla dui ornare nunc, id accumsan massa dolor eu nisi. In lorem ipsum, semper ac porta vel, mollis eu velit. Nulla scelerisque metus nec arcu pharetra, et feugiat erat varius. Nam magna nisl, suscipit tincidunt pretium ut, egestas consectetur elit. Nulla fringilla augue a turpis tincidunt volutpat. Phasellus a arcu sed metus tempor viverra non vitae lectus. Suspendisse feugiat sagittis lorem non vehicula. Suspendisse potenti. Ut convallis iaculis magna, vitae pellentesque arcu ultrices id. Vestibulum elementum elementum mauris, et feugiat felis faucibus vitae. Aliquam elementum, ligula sed fermentum sagittis, turpis ante sollicitudin nibh, sit amet sollicitudin dui velit eu sapien.Sed consectetur, ipsum a ultrices dapibus, nulla dui ornare nunc, id accumsan massa dolor eu nisi. In lorem ipsum, semper ac porta vel, mollis eu velit. Nulla scelerisque metus nec arcu pharetra, et feugiat erat varius. Nam magna nisl, suscipit tincidunt pretium ut, egestas consectetur elit. Nulla fringilla augue a turpis tincidunt volutpat. Phasellus a arcu sed metus tempor viverra non vitae lectus. Suspendisse feugiat sagittis lorem non vehicula. Suspendisse potenti. Ut convallis iaculis magna, vitae pellentesque arcu ultrices id. Vestibulum elementum elementum mauris, et feugiat felis faucibus vitae. Aliquam elementum, ligula sed fermentum sagittis, turpis ante sollicitudin nibh, sit amet sollicitudin dui velit eu sapien." 
  },
  { 
    head: 'something', 
    content: "something Sed vulputate ornare odio, consequat lobortis urna tristique sagittis. Pellentesque rutrum est augue. Nulla elementum nunc ut odio porta efficitur. Donec pulvinar et ante nec interdum. Morbi sagittis elit eget ipsum elementum, vel aliquam justo eleifend. Phasellus auctor rhoncus ligula eget iaculis. Curabitur ac leo dignissim, tincidunt ligula porta, viverra tellus. Vestibulum tempus in turpis quis consectetur. Proin luctus maximus quam, ut dignissim felis gravida vitae. Fusce interdum est ligula, ut lacinia nunc consectetur at. Nunc diam quam, maximus vitae eros non, pharetra rhoncus elit. Nunc orci augue, feugiat eget accumsan eu, porta faucibus quam. Etiam tincidunt neque nulla, id egestas nibh mattis id. Praesent aliquet nibh ligula, et congue erat tincidunt id. Vestibulum ligula purus, consequat sit amet feugiat at, sollicitudin a urna.Sed vulputate ornare odio, consequat lobortis urna tristique sagittis. Pellentesque rutrum est augue. Nulla elementum nunc ut odio porta efficitur. Donec pulvinar et ante nec interdum. Morbi sagittis elit eget ipsum elementum, vel aliquam justo eleifend. Phasellus auctor rhoncus ligula eget iaculis. Curabitur ac leo dignissim, tincidunt ligula porta, viverra tellus. Vestibulum tempus in turpis quis consectetur. Proin luctus maximus quam, ut dignissim felis gravida vitae. Fusce interdum est ligula, ut lacinia nunc consectetur at. Nunc diam quam, maximus vitae eros non, pharetra rhoncus elit. Nunc orci augue, feugiat eget accumsan eu, porta faucibus quam. Etiam tincidunt neque nulla, id egestas nibh mattis id. Praesent aliquet nibh ligula, et congue erat tincidunt id. Vestibulum ligula purus, consequat sit amet feugiat at, sollicitudin a urna." 
  },
  { 
    head: 'twitter', 
    content: "twitter In ut egestas risus, ac pellentesque ligula. Proin pellentesque, magna id dictum blandit, sem diam ornare magna, sed iaculis sem eros nec metus. Integer vitae leo ut neque tempor hendrerit. In pulvinar nisl vel quam tempor, non aliquam enim convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean ex metus, commodo eu posuere non, dignissim et libero. Nulla id aliquam turpis. Ut fermentum lorem quis facilisis sodales. Duis iaculis erat nunc, in molestie nisi ultricies vitae. Proin ultricies ultrices turpis nec semper. Vestibulum nec lectus ut nisl suscipit vehicula. Mauris tempus feugiat lacus dictum malesuada. Duis dapibus urna justo, quis euismod tellus pretium id. Sed eu bibendum ante.In ut egestas risus, ac pellentesque ligula. Proin pellentesque, magna id dictum blandit, sem diam ornare magna, sed iaculis sem eros nec metus. Integer vitae leo ut neque tempor hendrerit. In pulvinar nisl vel quam tempor, non aliquam enim convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean ex metus, commodo eu posuere non, dignissim et libero. Nulla id aliquam turpis. Ut fermentum lorem quis facilisis sodales. Duis iaculis erat nunc, in molestie nisi ultricies vitae. Proin ultricies ultrices turpis nec semper. Vestibulum nec lectus ut nisl suscipit vehicula. Mauris tempus feugiat lacus dictum malesuada. Duis dapibus urna justo, quis euismod tellus pretium id. Sed eu bibendum ante." 
  },
  { 
    head: 'photos', 
    content: "photos Etiam convallis quis orci quis dictum. Proin lacinia convallis cursus. Fusce commodo elit vel odio gravida laoreet. Cras fringilla sed metus eu malesuada. Fusce at molestie ante. Morbi et fringilla nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Etiam convallis quis orci quis dictum. Proin lacinia convallis cursus. Fusce commodo elit vel odio gravida laoreet. Cras fringilla sed metus eu malesuada. Fusce at molestie ante. Morbi et fringilla nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus." 
  },
  { 
    head: 'mail', 
    content: "mail Sed ultricies magna ac dui rhoncus sagittis. Aliquam sodales mi a lorem interdum hendrerit. Cras porta, ipsum at gravida iaculis, tellus leo vehicula ligula, in sodales sem tellus non metus. Duis tristique purus faucibus, imperdiet nisi at, blandit risus. Proin porttitor, eros vitae scelerisque venenatis, est dolor feugiat purus, id laoreet dui odio eu orci. Donec ut tellus a ante tempus dictum et eu eros. Praesent pellentesque neque dolor, id placerat tortor maximus a. Phasellus vel purus a eros elementum venenatis. Maecenas at felis vitae justo maximus eleifend ut in ex. Praesent rhoncus malesuada tincidunt. Cras molestie est sem, et blandit sem hendrerit sed. Proin ornare volutpat quam, aliquam aliquet ipsum pulvinar a.Sed ultricies magna ac dui rhoncus sagittis. Aliquam sodales mi a lorem interdum hendrerit. Cras porta, ipsum at gravida iaculis, tellus leo vehicula ligula, in sodales sem tellus non metus. Duis tristique purus faucibus, imperdiet nisi at, blandit risus. Proin porttitor, eros vitae scelerisque venenatis, est dolor feugiat purus, id laoreet dui odio eu orci. Donec ut tellus a ante tempus dictum et eu eros. Praesent pellentesque neque dolor, id placerat tortor maximus a. Phasellus vel purus a eros elementum venenatis. Maecenas at felis vitae justo maximus eleifend ut in ex. Praesent rhoncus malesuada tincidunt. Cras molestie est sem, et blandit sem hendrerit sed. Proin ornare volutpat quam, aliquam aliquet ipsum pulvinar a."
  }
];
window.location.href = `#${tabs[0].head}`;

const makeActive = (tabHead) => {
  tabHead.setAttribute('active', true);
  tabHead.click();
  tabHead.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
}

for(const tab of tabs) {
  const tabHead = document.createElement('a');
  tabHead.setAttribute('href', `#${tab.head}`);
  tabHead.innerText = tab.head;
  tabHead.setAttribute('tabindex', 0);
  window.location.href.split('#')[1] === tab.head ?
    makeActive(tabHead) : 
    tabHead.removeAttribute('active');
  nav.append(tabHead);
  
  const tabContent = document.createElement('article');
  tabContent.setAttribute('id', tab.head);
  tabContent.innerText = tab.content;
  tabContent.setAttribute('tabindex', 0);
  section.append(tabContent);
}

const tabHeadNodeList = document.querySelectorAll('a');
const tabHeadNodeArray = Array.from(tabHeadNodeList);

const setLinkActive = (target) => {
  if(target.tagName === 'A') {
    for(const tabHead of tabHeadNodeArray) {
      window.location.href.split('#')[1] === tabHead.getAttribute('href').split('#')[1] ? 
      makeActive(tabHead) : tabHead.removeAttribute('active');
    }
  }
}

nav.addEventListener('click', (e) => {
  window.location.href = `#${e.target.getAttribute('href').split('#')[1]}`;
  setLinkActive(e.target);
});

nav.addEventListener('keyup', (e) => {
  window.location.href = `#${e.target.getAttribute('href').split('#')[1]}`;
  setLinkActive(e.target);
});

section.addEventListener('scroll', () => {
  clearTimeout(section.scrollEndTimer);
  section.scrollEndTimer = setTimeout(determineActiveTabSection, 100);
});

const determineActiveTabSection = () => {
  const i = section.scrollLeft / section.clientWidth;
  const matchingNavItem = tabHeadNodeArray[i];
  window.location.href = `#${matchingNavItem.getAttribute('href').split('#')[1]}`;
  matchingNavItem && setLinkActive(matchingNavItem);
};