const pageGroups = {
  main: {
    Tutorials: 'tutorials.html',
    Projects: 'projects.html',
    Blog: 'blog.html',
    Home: 'index.html',
    About: 'about.html',
    Contact: 'contact.html',
    Resume: 'resume.html'
  },
  mundus: {
    Title: 'Mundus',
    Introduction: 'introduction.html',
    History: 'history.html',
    'User Interface': 'user-interface.html',
    'Basic Concepts': 'basic-concepts.html'
  },
  mySqlConnectEntityFrameworkCSharp: {
    Title: 'Connect to MySql in C# and Entity Framework',
    Introduction: 'introduction.html',
    Preparation: 'preparation.html',
    Connecting: 'connecting.html'
  }
};

const pageInfo = {
  getPageGroup: function () {
    switch (document.getElementsByTagName('head')[0].id) {
      case 'main': return pageGroups.main;
      case 'mundus': return pageGroups.mundus;
      case 'mySqlConnectEntityFrameworkCSharp': return pageGroups.mySqlConnectEntityFrameworkCSharp;
    }
  },
  getPageToReturnTo: function (pageGroup) {
    switch (pageGroup) {
      case pageGroups.mundus: return pageGroups.main.Projects;
      case pageGroups.mySqlConnectEntityFrameworkCSharp: return pageGroups.main.Tutorials;
    }
  }
};

const current = {
  pageGroup: pageInfo.getPageGroup(),
  tab: document.getElementsByTagName('body')[0].id
};

const generator = {
  generateTabs: function (tabTitles) {
    let toReturn = '';
    tabTitles.forEach(item => { toReturn += `<a href="./${current.pageGroup[item]}" class="${item === current.tab ? 'selected-tab' : 'other-tab'}">${item}</a>`; });
    return toReturn;
  },
  generateFull: function () {
    const columnStyle = 'float: left; min-width: 33.33%;';

    document.getElementsByClassName('header')[0].innerHTML =
    `
      <div style="${columnStyle}">
        <span class="article-title">${current.pageGroup.Title}</span>
      </div>
      <div style="${columnStyle}">
        ${this.generateTabs(Object.keys(current.pageGroup).splice(1, Object.keys(current.pageGroup).length - 1))}
      </div>
      <div width=32px>
        <a href="../../${pageInfo.getPageToReturnTo(current.pageGroup)}" class="close" title="Back to Projects"><img src="../../img/ui/close.png" alt="Back" width="32" height="32"></a>
      </div>
    `;
  }
};

if (current.pageGroup !== pageGroups.main) {
  generator.generateFull();
} else {
  document.getElementsByClassName('header')[0].innerHTML = generator.generateTabs(Object.keys(current.pageGroup));
}