if (!LFP) { error("LFP not loaded: menu"); }
if (!LFP.MENU) { error("LFP.MENU not loaded: menu"); }
LFP.MENU.options = {
  originalItems: ["TV", "News", "Sports", "Music", "Radio", "Watch", "Listen"],
  originalItemUrls: ["https://www.cbc.ca/television/", "https://www.cbc.ca/news", "https://www.cbc.ca/sports/", "https://www.cbc.ca/music/", "https://www.cbc.ca/radio", "https://gem.cbc.ca", "https://www.cbc.ca/listen/"],
  menuItemWidths: [],
  menuItems: [],
  menuItemUrls: [],
  childMenuItems: [],
  childMenuItemUrls: []
};
LFP.MENU.viewportWidth = null;
LFP.MENU.timeout = null;
LFP.MENU.resizeID = 0;
LFP.MENU.hasRegion = false;
LFP.MENU.init = function() {
  if (LFP.MENU.menu_label.length > 0) {
    LFP.MENU.options.originalItems.unshift(LFP.MENU.menu_label);
    LFP.MENU.hasRegion = true;
  }
  if (LFP.MENU.menu_url.length > 0) {LFP.MENU.options.originalItemUrls.unshift(LFP.MENU.menu_url);}
  LFP.MENU.setViewportWidth();
  for (var i = 0; i < LFP.MENU.options.originalItems.length; i++) {
    var itemWidth = Math.round(LFP.UTIL.getTextWidth(LFP.MENU.options.originalItems[i], "bold 15px Open Sans"));
    LFP.MENU.options.menuItemWidths.push(itemWidth);
  }
  LFP.MENU.sortByWidth(LFP.MENU.options.menuItemWidths, LFP.MENU.options.originalItems, LFP.MENU.options.originalItemUrls);
  
  document.getElementById('topNav').appendChild(LFP.MENU.makeUL(LFP.MENU.options.menuItems, LFP.MENU.options.menuItemUrls));
  if (LFP.MENU.options.childMenuItems.length !== 0) {
    let myMore = document.getElementById('myMore');
    myMore.appendChild(LFP.MENU.makeULChild(LFP.MENU.options.childMenuItems, LFP.MENU.options.childMenuItemUrls));
    myMore.onmouseover = LFP.MENU.toggleMore;
    myMore.onmouseout = LFP.MENU.toggleMore;
    let moreButton = document.getElementById("moreButton");
    moreButton.onfocus = LFP.MENU.triggerMoreOn;
    moreButton.onblur = LFP.MENU.triggerMoreOff;
  }
  let menuList = document.getElementById('menuList');
  if (LFP.MENU.hasRegion) {menuList.firstElementChild.classList.add("regionBorder");}

  let myHam = document.getElementById("hamButton");
  myHam.onclick = LFP.MENU.toggleHam;

  window.addEventListener('resize', function () {
    clearTimeout(LFP.MENU.resizeId);
    LFP.MENU.resizeId = setTimeout(LFP.MENU.doneResizing, 500);
  });

}
LFP.MENU.setViewportWidth = function () {
  LFP.MENU.viewportWidth = window.innerWidth || document.documentElement.clientWidth;
}
LFP.MENU.sortByWidth = function(array, array2, array3) {
  var comparator = 0;
  for (var i = 0; i < array.length; i++) {
    if (LFP.MENU.viewportWidth > 768) {
      if (comparator < (LFP.MENU.viewportWidth - 620)) {
        comparator = comparator += array[i];
        LFP.MENU.options.menuItems.push(array2[i]);
        LFP.MENU.options.menuItemUrls.push(array3[i]);
      } else {
        LFP.MENU.options.childMenuItems.push(array2[i]);
        LFP.MENU.options.childMenuItemUrls.push(array3[i]);
      }
    } else {
      if (comparator < (LFP.MENU.viewportWidth - 520)) {
        comparator = comparator += array[i];
        LFP.MENU.options.menuItems.push(array2[i]);
        LFP.MENU.options.menuItemUrls.push(array3[i]);
      } else {
        LFP.MENU.options.childMenuItems.push(array2[i]);
        LFP.MENU.options.childMenuItemUrls.push(array3[i]);
      }
    }
  }
}
LFP.MENU.populateList = function(list, labelArray, urlArray, itemClass, includeAria) {
  for (var i = 0; i < labelArray.length; i++) {
    var item = document.createElement('li');
    var a = document.createElement("a");
    a.textContent = (labelArray[i]);
    a.setAttribute('href', (urlArray[i]));
    if (includeAria) {
      a.setAttribute("role", "button");
      a.setAttribute("aria-disabled", "true");
    }
    item.appendChild(a);
    if (itemClass != null) {item.classList.add(itemClass);}
    list.appendChild(item);
  }
  return list;
}
LFP.MENU.makeUL = function(labelArray, urlArray) {
  var list = document.createElement('ul');
  list.setAttribute("id", "menuList");

  list = LFP.MENU.populateList(list, labelArray, urlArray, null, true);
  if (LFP.MENU.options.childMenuItems.length !== 0) {list.append(LFP.MENU.createMoreButton());}
  return list;
};
LFP.MENU.makeULChild = function(labelArray, urlArray) {
  var list = document.createElement('ul');
  list.setAttribute("id", "myDrop");
  list.setAttribute("class", "dropdown");
  list.setAttribute("aria-label", "submenu");
  
  list = LFP.MENU.populateList(list, labelArray, urlArray, "dropClass", false);
  return list;
};
LFP.MENU.makeResizedUL = function(array, urlArray) {
  var list = document.getElementById('menuList');

  list = LFP.MENU.populateList(list, array, urlArray, "menuClass", true);
  if (LFP.MENU.options.childMenuItems.length !== 0) {list.append(LFP.MENU.createMoreButton());}
  return list;
}
LFP.MENU.makeResizedChildUL = function(labelArray, urlArray) {
  var list = document.createElement('ul');
  list.setAttribute("id", "myDrop");
  list.setAttribute("class", "dropdown");
  list.setAttribute("aria-label", "submenu");

  list = LFP.MENU.populateList(list, labelArray, urlArray,"dropClass", false);
  return list;
}
LFP.MENU.createMoreButton = function() {
  var moreLi = document.createElement('li');
  moreLi.classList.add('more');
  moreLi.setAttribute('id', 'myMore');

  var moreButton = document.createElement("button");
  moreButton.setAttribute("id", "moreButton");
  moreButton.setAttribute("aria-expanded", "false");
  moreButton.insertAdjacentHTML('afterbegin', '<span>More</span><svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1.5L6 6.5L11 1.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  moreLi.appendChild(moreButton);
  return moreLi;
}
LFP.MENU.doneResizing = function() {
  var list = document.getElementById("menuList");
  while (list.hasChildNodes()) {list.removeChild(list.firstChild);}

  LFP.MENU.options.menuItems.splice(0, LFP.MENU.options.menuItems.length);
  LFP.MENU.options.childMenuItems.splice(0, LFP.MENU.options.childMenuItems.length);
  var menuLength = LFP.MENU.options.menuItems.length;

  LFP.MENU.setViewportWidth();
  LFP.MENU.sortByWidth(LFP.MENU.options.menuItemWidths, LFP.MENU.options.originalItems, LFP.MENU.options.originalItemUrls);
  document.getElementById('topNav').appendChild(LFP.MENU.makeResizedUL(LFP.MENU.options.menuItems, LFP.MENU.options.menuItemUrls));
  if (LFP.MENU.options.childMenuItems.length !== 0) {
    document.getElementById('myMore').appendChild(LFP.MENU.makeResizedChildUL(LFP.MENU.options.childMenuItems, LFP.MENU.options.childMenuItemUrls));
  }
  if (LFP.MENU.hasRegion) {list.firstElementChild.classList.add("regionBorder");}
}
LFP.MENU.toggleHam = function() {
  let hamContainer = document.getElementById("ham")
  hamContainer.classList.toggle("closed");
  hamContainer.classList.toggle("open");
  
  let topNavContainer = document.getElementById("topNav");
  topNavContainer.classList.toggle("closed");
  topNavContainer.classList.toggle("open");
  
  let hamButton = document.getElementById("hamButton");
  var a = document.querySelectorAll("#menuList li a");
  let ariaState = hamButton.getAttribute("aria-expanded");
  var x,y;
  x = (ariaState == "true") ? "false" : "true";
  y = (ariaState == "true") ? "true" : "false";
  hamButton.setAttribute("aria-expanded", x);           
  for(var i = 0; i < a.length; i++){
    a[i].setAttribute("aria-disabled", y)
  }
}
LFP.MENU.toggleMore = function() {
  var y = document.getElementById("moreButton").getAttribute("aria-expanded");
  y = (y == "true") ? "false" : "true";
  document.getElementById("moreButton").setAttribute("aria-expanded", y);
}
LFP.MENU.triggerMoreOn = function() {
  document.getElementById("moreButton").setAttribute("aria-expanded", true);
}
LFP.MENU.triggerMoreOff = function() {document.getElementById("moreButton").removeAttribute("aria-expanded");}

LFP.MENU.init();