prototypeversion.js

document.addEventListener("DOMContentLoaded", function(event) {

  var nav = document.querySelector("nav");

  nav.addEventListener("click", function(event) {
    var selectedTab = document.querySelector(".selectedTab");
    if(selectedTab) selectedTab.classList.toggle("selectedTab");
    console.log(event.target.nodeName);
    if(event.target.nodeName === "SPAN") {
        event.target.parentElement.click();
        console.log("SPAN clicked");
    }
    else {
      //event.target.classList.toggle("selectedTab");
      tabholder.tabClicked(event.target.id);
      tabholder.listTabs();
      console.log(event.target.id);

    }

  });

});


function tabConst(id, selected) {
  this.id = id;
  this.selected = selected;
}

var tabFunctions = {
  selectTab : function() {
    this.selected = true;
  },
  unselectTab : function() {
    this.selected = false;
  }
}

var position = new tabConst("position", true);

var friend = new tabConst("friend", false);

var theme = new tabConst("theme", false);

var news = new tabConst("news", false);

function tabholderConst(tablist) {
  this.tablist = tablist;
}


var tabHolderFunctions = {
  listTabs : function() {
    for(var i = 0; i < this.tablist.length; ++i) {
      console.log(this.tablist[i]);
    }

  },
  addTabs : function(tab) {
    this.tablist.push(tab);

  },
  tabClicked : function(id) {
    console.log(id);
    for(var i = 0; i < this.tablist.length; ++i) {
      var cur = this.tablist[i];
      var tab = document.querySelector("#" + cur.id);
      if(cur.id != id) {
        cur.selected = false;
        tab.classList.remove("selectedTab");
      } else {
        cur.selected = true;
        tab.classList.add("selectedTab");
      }

    }

  }
}

tabholderConst.prototype = tabHolderFunctions;

var tabholder = new tabholderConst([position, friend, theme, news]);

tabholder.listTabs();