<html>
  <head>
    <title>Quad's site</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="assets/favicon.png" type="image/png"/>
    <link rel="stylesheet" href="assets/fork-awesome/css/fork-awesome.min.css">
    <link href="style.css" rel="stylesheet" />
    <link href="assets/fonts/poppins/poppins.css" rel="stylesheet" />
  </head>
  <body>
    <div id="site">
    
      <div id="content">
        <div id="splits">
          <div id="split1">
            <img src="assets/avi.png" />
          </div>
          <div id="split2">
            <h1 class="title">Quad</h1>
          </div>
        </div>
        
        <div id="main-container">
          <div id="navbar">
            <div id="button1" class="nav-button">About</div>
            <div id="button2" class="nav-button">Contact</div>
            <div id="button3" class="nav-button">Projects</div>
          </div>
          
          <div id="page">
            <p class="initial-text">
              <i class="fa fa-arrow-up" aria-hidden="true"></i><br>
              Click a button!
            </p>
          </div>
          
        </div>
        <p class="notice">
          P.S Anime is for bakas
        </p>
      </div>
    </div>
    <script>
// Brace yourself for horrible JavaScript.
// This code doesn't really exist for any reason other than the lolz

// Find all our buttons
const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');
const button3 = document.getElementById('button3');

// Create variables that will get populated by loadContent() later
var page1 = "pages/about.html";
var page2 = "pages/contact.html";
var page3 = "pages/projects.html";

const contentArea = document.getElementById("page");

// Very bad function to get rid of the "active" class wherever it is atm
function resetButtons() {
  button1.className = "nav-button";
  button2.className = "nav-button";
  button3.className = "nav-button";
}

function httpGet(myUrl, callback) {
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.onreadystatechange = function() { 
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
      callback(contentArea, xmlHttp.responseText);
  }
  xmlHttp.open("GET", myUrl, true);
  xmlHttp.send(null);
}

function activatePage(navbutt, source) {
  resetButtons();
  navbutt.className += " active";
  console.log("there's absolutely no reason for this site to use ajax lmao");
  httpGet(source, setContent);
}

function setContent(target, payload) {
  target.innerHTML = payload;
}

function initialContent() {

  // Slap on all the event listeners
  button1.addEventListener('click', function() { 
    activatePage(button1, page1);
  }, false);
    button2.addEventListener('click', function() { 
    activatePage(button2, page2);
  }, false);
    button3.addEventListener('click', function() { 
    activatePage(button3, page3);
  }, false);

  setContent(contentArea, '<p class="initial-text"><i class="fa fa-arrow-up" aria-hidden="true"></i><br>Click a button!</p>');
}

initialContent();
    </script>
  </body>
</html>