/* menu dropdown (mobile) */
function myFunction() {
    var x = document.getElementById("Topnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}


/* Topnav */
function changeLinks() {
  var links = document.getElementById('Topnav').getElementsByTagName('a');

  for (var i = 0; i < links.length; i++) {
	if (links[i].className == 'icon') continue;
	links[i].addEventListener('click', load, false);
  }
};

function load(e) {
  if (e.which != 1) return;
  var target = e.target;
  while (target.nodeName != 'A') {
    target = target.parentNode;
  }
  
  e.preventDefault();
  url = target.href

  var siblings = target.parentNode.childNodes
  for (i = 0; i < siblings.length; i++) {
    if (siblings[i].className != '' && siblings[i].className != 'active') continue;

    siblings[i].className="";
    if (siblings[i].href == url) {
      siblings[i].className="active";
    }
  }
  
  fetch(url, {credentials: 'same-origin'}).then(function(response) {
    return response.text()})
  .then(function(text){
    document.getElementById("content").innerHTML=text;
	changeLinks_headernav();
	document.getElementById('home_header').click();
  });
}

/* Headernav */
function changeLinks_headernav() {
  var links = document.getElementById('headernav').getElementsByTagName('a');

  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', load_headernav, false);
  }
};

function load_headernav(e) {
  if (e.which != 1) return;
  var target = e.target;
  while (target.nodeName != 'A') {
    target = target.parentNode;
  }
  
  e.preventDefault();
  url = target.href

  var siblings = target.parentNode.childNodes
  for (i = 0; i < siblings.length; i++) {
    if (siblings[i].className != '' && siblings[i].className != 'active') continue;

    siblings[i].className="";
    if (siblings[i].href == url) {
      siblings[i].className="active";
    }
  }
  
  destroyChart()
  fetch(url, {credentials: 'same-origin'}).then(function(response) {
    return response.text()})
  .then(function(text){
    document.getElementById("page").innerHTML=text;
	if (target.innerText == "API"){change_api();}
	loadMeters()
	loadPowerQualityOptions()
	loadSmiley()
	history.pushState(null, null,"#" + document.querySelector('.topnav .active').innerText + "/" + target.innerText);
  });
}
	
function change_api() {
  var links = document.getElementById('api').getElementsByTagName('a');

  for (var i = 0; i < links.length; i++) {
    links[i].addEventListener('click', load_api, false);
  }
};

function load_api(e) {
  if (e.which != 1) return;
  var target = e.target;
  while (target.nodeName != 'A') {
    target = target.parentNode;
  }
  
  e.preventDefault();
  url = target.href
  
  fetch(url).then(function(response) {
    return response.text()})
  .then(function(text){
	document.getElementById("content_api").innerHTML='<h2>'+ url +'</h2><iframe src="'+ url +'"></iframe>';
  });
}


/* History */
window.onpopstate = function () {
	var list = window.location.hash.substr(1).split('/');
	
	document.querySelectorAll('.topnav a').forEach(function(e) {
		if (e.innerText == list[0]) e.click();
	});
	
	document.querySelectorAll('.headernav a').forEach(function(e) {
		if (e.innerText == list[1]) e.click();
	});
	
}