var primerUI = new PrimerUI(document.body);
window.onload=async() =>{
  let root = document.body;
  await primerUI.insertScriptFile('https://code.jquery.com/jquery-3.6.0.min.js');
  primerUI.insertCSSFile('vendor/bootstrap/css/bootstrap.min.css');
  primerUI.insertCSSFile('vendor/bootstrap-icons/bootstrap-icons.css');
  primerUI.insertCSSFile('vendor/boxicons/css/boxicons.min.css');
  primerUI.insertScriptFile('vendor/bootstrap/js/bootstrap.bundle.min.js');
  await primerUI.insertScriptFile('vendor/typed.js/typed.min.js');
  await primerUI.insertCSSFile('css/style.css');

  makeLogin(root);
  Start();
}

function makeLogin(root) {
  $(root).css('background','url("img/bg.jpeg")');
  $(root).css('background-size','cover');
  $(root).css('background-position','center center');
  let section = primerUI.div({tag:'section',id:'login'});
  let container = primerUI.div({class:'container'},section);
  let center=primerUI.center(container);
  if (primerUI.width()>=1000)
    primerUI.image({src:'img/acer.svg',style:'width:20%'},center);
  else
    primerUI.image({src:'img/acer.svg',style:'width:30%'},center);
	primerUI.br(5,center);
	primerUI.label({text:'國土署計畫<br><br>海洋大學<br>',style:'font-weight:800;font-size:1.5em;color:gray'},center);	
	primerUI.br(2,center);
	primerUI.label({text:'裝置管理系統',style:'font-weight:800;font-size:1.5em;color:gray'},center);	
	primerUI.br(3,center);
  let p = primerUI.div({tag:'p',style:'height:2em'},center);
  span = primerUI.div({tag:'span',class:'typed',items:"進步,創新,挑戰,探索無止境",style:'font-size:1.5em;font-weight:bold;color:#80c343'},p);
  primerUI.br(1,center); 
  let div = primerUI.div({tag:'form',action:'/login',method:'post',style:'width:40%;color:#80c343;outline:none'},center);
  primerUI.input({class:'form-control',name:'name',type:'text',placeholder:"用戶名稱",style:'border-radius:1.5em;border:3px solid #80c343'},div);
  primerUI.input({class:'form-control',type:'password',placeholder:"用戶密碼",style:'margin-top:10px;border-radius:1.5em;border:3px solid #80c343',name:'password'},div);
  primerUI.br(1,div);
  primerUI.div({tag:'button',type:'submit',text:"登入",style:"outline-color:#80c343;font-size:1.25em;background:#80c343;border:0px;padding:10px 35px;color:#fff;border-radius:50px"},div);
  primerUI.br(2,center);
  primerUI.label({text:'Powered by Acer Being Communication Inc.',style:'color:white;background-color:#70b333;border-radius:1em;padding-left:5px;padding-right:5px'},center);
  $(section).css('display','none');
  root.appendChild(section);
  $(section).fadeIn(1500);
}

function Start() {
   const select = (el, all = false) => {
    el = el.trim()
    if (all) {
      return [...document.querySelectorAll(el)]
    } else {
      return document.querySelector(el)
    }
  }

  const on = (type, el, listener, all = false) => {
    let selectEl = select(el, all)
    if (selectEl) {
      if (all) {
        selectEl.forEach(e => e.addEventListener(type, listener))
      } else {
        selectEl.addEventListener(type, listener)
      }
    }
  }
  const typed = select('.typed')
  if (typed) {
    let typed_strings = typed.getAttribute('items')
    typed_strings = typed_strings.split(',')
    new Typed('.typed', {
      strings: typed_strings,
      loop: true,
      typeSpeed: 100,
      backSpeed: 50,
      backDelay: 1000
    });
  }
    /**
   * Easy on scroll event listener 
   */
     const onscroll = (el, listener) => {
      el.addEventListener('scroll', listener)
    }
}