const workExperiance = document.getElementById("work-experiance");
const workExperianceContent = document.getElementById("work-experience-content");

const education = document.getElementById("education");
const educationContent = document.getElementById("education-content");

const documents = document.getElementById("documents");
const documentsContent = document.getElementById("documents-content");

const divContent = document.getElementById("content");

const widthCheck = 576;

education.addEventListener('click', () => {
  if(window.innerWidth > widthCheck){
    const educationBox = new WinBox({
      title: 'Education',
      x: "center",
      y: "center",
      width: "70%",
      height: "70%",
      mount: educationContent,
      onfocus: function () {
        this.setBackground('#0dcaf0')
      },
      onblur: function () {
        this.setBackground('#777')
      },
    })
  }else{
    divContent.innerHTML = "";
    divContent.appendChild(educationContent);
  }
})

workExperiance.addEventListener('click', () => {
  if(window.innerWidth > widthCheck){
    const workExperoanceBox = new WinBox({
      title: 'Work Experiance',
      x: "center",
      y: "center",
      width: "70%",
      height: "70%",
      mount: workExperianceContent,
      onfocus: function () {
        this.setBackground('#0dcaf0')
      },
      onblur: function () {
        this.setBackground('#777')
      },
    })
  }else{
    divContent.innerHTML = "";
    divContent.appendChild(workExperianceContent);
  }
})

documents.addEventListener('click', () => {
  if(window.innerWidth > widthCheck){
    const DocumentsBox = new WinBox({
      title: 'Documents',
      x: "center",
      y: "center",
      width: "70%",
      height: "70%",
      mount: documentsContent,
      onfocus: function () {
        this.setBackground('#0dcaf0')
      },
      onblur: function () {
        this.setBackground('#777')
      },
    })
  }else{
    divContent.innerHTML = "";
    divContent.appendChild(documentsContent);
  }
})

const divWidth = document.getElementById("width");
const buttons = document.getElementById("buttons");

let haha = function(){
  /*divWidth.innerText = window.innerWidth;*/
  if(window.innerWidth < widthCheck){
    buttons.classList.add("row");
  }else{
    buttons.classList.remove("row");
  }
}

haha();
setInterval(haha,250);