window.onload=function() {

  // get tab container
  var tabContainer = document.getElementById("tabContainer");
  // set current tab
  var navitem = tabContainer.querySelector("span");
  //store which tab we are on
  var ident = navitem.id.split("_")[1];
  navitem.parentNode.setAttribute("data-current",ident);
  //set current tab with class of activetabheader
  navitem.setAttribute("class","tabActiveHeader");
  /*
  var stageContainer = document.getElementById("stage");
  //hide two tab contents we don't need
  var pages = stageContainer.querySelectorAll(".stagePage");
  for (var i = 1; i < pages.length; i++) {
	pages[i].style.display="none";
  }
  */

  //this adds click event to tabs
  var tabs = tabContainer.querySelectorAll("span");
  for (var i = 0; i < tabs.length; i++) {
	tabs[i].onclick=displayPage;
  }
}

// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("stagePage_" + current).style.display="none";

  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("stagePage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}

function toggleSubmenu() {
	
	var current = document.getElementById("tabContainer").getAttribute("data-current");
	var submenu = document.getElementById('submenu');
	var defaultdiv = document.getElementById('toggledefault');
	var introvid = document.getElementById('introvid');
	
    if(submenu.style.display != 'block'){
		// pause video
		introvid.pause();
		
		// turn on target div
    	submenu.style.display = 'block';
		
		// turn off default div
		defaultdiv.style.display = 'none';
		
		// turn on stagePage
		document.getElementById("stagePage_" + current).style.display="block";
    } else {
		
		// turn off target div
    	submenu.style.display = 'none';
		
		// turn on default div
		defaultdiv.style.display = 'block';
		
		// turn off stagePage
		document.getElementById("stagePage_" + current).style.display="none";
	}
	
	/*
	// turn on stagePage_1
	var div = document.getElementById('stagePage_1');
    if(div.style.display != 'block'){
    	div.style.display = 'block';
    }
	*/
	// turn off toggleTag link
	/*
	var tab = document.getElementById('toggleTab');
	tab.parentNode.removeChild(tab);
	*/
}