// To make this script work you need to add the following to you style sheet (vector.css):
//  +--------------------------------------------------------------------+
//  |   #mw-panel { visibility: hidden !important; }                     |
//  |   #mw-head-base { margin-left: 0 !important; }                     |
//  |   #content { margin-left: 0 !important; }                          |
//  |   #left-navigation { margin-left: 1em !important; }                |
//  |   #footer { margin-left: 0 !important; }                           |
//  +--------------------------------------------------------------------+

// set viewport for mobile devices
myView = document.createElement("meta");
myView.setAttribute("name", "viewport");
myView.setAttribute("content",
  "width=device-width, initial-scale=1.0, minimal-scale=1.0, maximal-scale=1.0");
document.getElementsByTagName("head")[0].appendChild(myView);

// Insert head banner
myDiv = document.createElement("DIV");
myLink = document.createElement("A");
myDiv.appendChild(myLink);

myDiv.id = 'myNewBanner';
myDiv.setAttribute("style", "position: absolute; top: 5px; left: 15px; "
  + "font: 31pt Times; font-variant: small-caps; z-index: 999999;");
myDiv.className = 'noprint';

myLink.href = mw.config.get( 'wgArticlePath' ).replace('$1',  '');
myLink.setAttribute("style", "color: black; text-decoration: none;");
myLink.innerHTML = mw.config.get( 'wgSiteName' );
document.getElementById("mw-head").appendChild(myDiv);

function transferChildren(from, to) {
  if(typeof from == 'string') {
    from = document.querySelectorAll(from);
  }

  if(typeof to == 'string') {
    to = document.querySelector(to);
  }

  if(!from || !to) return;

  for(const child of from) {
    const li = document.createElement("LI");
    li.className = 'noprint mw-list-item';
    li.appendChild(child);
      
    to.appendChild(li);
  }
}

$(document).ready(function() {
  // place certain (less used) links in the footer
  transferChildren(
    "#t-permalink A, #t-cite A, #p-wikibase-otherprojects A",
    "#footer-places"
  );

  // language links
  const langChildren = document.querySelectorAll("#p-lang UL A");
  if(langChildren !== null && langChildren.length > 0) {
    const addLinks = document.querySelector('.wbc-editpage > a');
    if(addLinks !== null) {
      addLinks.innerHTML = 'Add language links';
    }

    //list
    const langList = document.createElement("UL");
    langList.id = 'langList';
    langList.style.fontSize = "0.8em";

    // interwiki list
    transferChildren(langChildren, langList);

    // language banner
    const lbanner = document.createElement("DIV");
    lbanner.id = "lbanner";
    lbanner.className = "catlinks noprint";
    lbanner.appendChild(langList);

    document.getElementById("content").appendChild(lbanner);
  }

  // Create a wiki menu for navigation and interaction links
  // node.cloneNode(true) doesn't copy css stuff properly
  const vectorMenu = document.getElementById('p-cactions');
  const newMenu = document.createElement("NAV");
  newMenu.id = 'faviconMenu';
  newMenu.innerHTML = vectorMenu.innerHTML.replace(/\bid="[^"]+"/g, '');
  newMenu.className = vectorMenu.className;
  newMenu.style.setProperty("display", "block", "important");
  
  // Change ids and clear content
  newMenu.querySelector('span').innerHTML =
    '<img src="https://upload.wikimedia.org/wikipedia/commons/b/b2/Hamburger_icon.svg" style="width: 19px;">';
  newMenu.querySelector('.vector-menu-content').innerHTML = `
<table><tr>
<td style="vertical-align: top;">
<h6>Wikipedia</h6>
<ul id="mainList"></ul>
</td>
<td style="vertical-align: top;">
  <h6>Contribute</h6>
  <ul id="contribList"></ul>
</td>
<td style="vertical-align: top;">
  <h6>Tools</h6>
  <ul id="toolsList" style="column-count: 2;"></ul>
</td></tr>
</table>`;

  // Insert newMenu
  const ln = document.getElementById('left-navigation');
  ln.insertBefore(newMenu, ln.firstChild);
  
  transferChildren("#p-navigation A", "#mainList");
  transferChildren("#p-interaction A", "#contribList");
  transferChildren("#p-tb A, #p-coll-print_export A", "#toolsList");

  // set some css for good and featured articles
  const style = document.createElement('style');
  const head = document.getElementsByTagName('head')[0];
  const css = document.createTextNode(`
#lbanner .GA:before {
  content: url('//upload.wikimedia.org/wikipedia/commons/4/42/Monobook-bullet-ga.png')
  ' ';
}
`);

  css.appendData( `
#lbanner .FA:before {
  content: url('//upload.wikimedia.org/wikipedia/en/d/d4/Monobook-bullet-star.png')
  ' ';
}
` );
  style.appendChild(css);
  head.appendChild(style);
});