ProcessPage = (page)=>{
    var x, i, j, selElmnt, a, b, c;
    /* Look for any elements with the class "custom-select": */
    x = page.getElementsByClassName("custom-select");
    for (i = 0,leni=x.length; i < leni; i++) {
      //remove all formed element if exist
      sel = x[i].getElementsByClassName("select-selected");
      
      if(sel != null && typeof sel[0] != "undefined"){
         sela = sel[0].getElementsByClassName("select-items");
      if(sela != null && typeof sela[0] != "undefined"){
        sel[0].removeChild(sela[0]);
      }
        x[i].removeChild(sel[0]);
      }
      //get the user defined style
      var ustyle = x[i].Data("style");
      if(ustyle == null)ustyle="";
      //alert(ustyle);
       x[i].style.cssText += ustyle;

       var dstyle = x[i].Data("dropdown-style");
      if(dstyle == null)dstyle="";

      selElmnt = x[i].getElementsByTagName("select")[0];
      /* For each element, create a new DIV that will act as the selected item: */
      a = document.createElement("DIV");
      a.setAttribute("class", "select-selected");
      var selectop = selElmnt.options[selElmnt.selectedIndex];
      a.innerHTML = typeof selectop != "undefined"?selectop.innerHTML:"";
      x[i].appendChild(a);
      /* For each element, create a new DIV that will contain the option list: */
      b = document.createElement("DIV");
      b.setAttribute("class", "select-items select-hide pulse animate-fast");
      b.style.cssText = dstyle;
      for (j = 1,lenij=selElmnt.length; j < lenij; j++) {
        /* For each option in the original select element,
        create a new DIV that will act as an option item: */
        c = document.createElement("DIV");
        c.innerHTML = selElmnt.options[j].innerHTML;
        c.addEventListener("click", function(e) {
            /* When an item is clicked, update the original select box,
            and the selected item: */
            var y, i, k, s, h;
            s = this.parentNode.parentNode.getElementsByTagName("select")[0];
            
            h = this.parentNode.previousSibling;
            for (var i = 0,leni=s.length; i < leni; i++) {
              if (s.options[i].innerHTML == this.innerHTML) {
                s.selectedIndex = i;
                h.innerHTML = this.innerHTML;
                y = this.parentNode.getElementsByClassName("same-as-selected");
                for (k = 0,lenk=y.length; k < lenk; k++) {
                  y[k].removeAttribute("class");
                }
                this.setAttribute("class", "same-as-selected");
                break;
              }
            }
            h.click();
            if( typeof s.getAttribute("onchange") != "undefined" && s.getAttribute("onchange")  != ""){
              eval(s.getAttribute("onchange"));
            }
        });
        b.appendChild(c);
      }
      x[i].appendChild(b);
      a.addEventListener("click", function(e) {
        /* When the select box is clicked, close any other select boxes,
        and open/close the current select box: */
        if(!this.parentElement.classList.contains('focused'))this.parentElement.className += ' focused';
        e.stopPropagation();
        closeAllSelect(this);
        this.nextSibling.classList.toggle("select-hide");
        this.classList.toggle("select-arrow-active");
      });

      
    }
    
    
    //process textboxes
      var t;
      t = page.getElementsByClassName('bbwa-textbox-input');
      
      for(var s=0,lens=t.length;s<lens;s++){
          t[s].addEventListener("focus", function(e) {
            this.parentElement.className += ' focused';
          });
          t[s].addEventListener("blur", function(e) {
            this.parentElement.className = this.parentElement.className.replace(' focused','');
          });
          //Make on focus work for Calendar object
          /* if(t[s].classList.contains("Calendar")){
            t[s].addEventListener("focus", function(e) {
               e.target.click();
            });
          } */
      }


      //process tab buttons
      var tb = page.getElementsByClassName('bbwa-tabbutton');
      for(var s=0,lens=tb.length;s<lens;s++){
        if (tb[s] == tb[s].parentElement.firstElementChild) {
         if(tb[s].firstElementChild.checked == true)tb[s].firstElementChild.checked = false;
          //tb[s].firstElementChild.checked = !(tb[s].firstElementChild.checked;
          tb[s].firstElementChild.click();
        }
      }

      //return ;

      //proccess buttons (Timeout)
      var btns = page.getElementsByClassName('bbwa-button');
      for(var s=0,lens=btns.length;s<lens;s++){
        var btn = btns[s];
        var timmerspan = btn.getElementsByClassName('bbwa-button-timeout');
        if(timmerspan.length < 1)continue;
        //get the textcontent
        var txtContent = Number(timmerspan[0].textContent);
        if(txtContent > 0){
          //do time out
          Control.Button.DoTimeOut(timmerspan[0].id);
        }else{
          //hide the timer object
          timmerspan[0].style.display = 'none';
        }

      }

      //proce page indicator
      var inctors = page.getElementsByClassName('menu-bx-page-ind-bx');
      //console.log(inctors.length);
      for(var s=0,lens=inctors.length;s<lens;s++){
          var indind = inctors[s];
          //get the set indicators
          var indset = indind.getAttribute("data-indicator");
         
          if(indset != null && indset != ""){
            var indsetarr = indset.split("/");
            if(indsetarr.length == 2){
              var current = parseInt(indsetarr[0]);
              var total = parseInt(indsetarr[1]);
              if(total > 0){
                var indinnerhtml = "";
                
                for(var sd=1;sd<=total;sd++){
                  var del = (sd + 4) * 100;
                  var isactive = sd == current?"active":"";
                  indinnerhtml += '<div class="menu-bx-page-ind-bx-item w3-card fadeInUp animated fast '+isactive+'" style="animation-delay:'+del+'ms"></div>';
                }
                indind.innerHTML = indinnerhtml;
              }
            }
          }
      }

      //process autopops
      var autopup = page.getElementsByClassName('AutoPop');
      //there is no need for two autopop on a page
      //for(var ap=0; ap<autopup.length;ap++){
        //var pid = _GetID(autopup[ap]);
        Control.Popup.Show(autopup[0]);

        
      //}
}


document.addEventListener('DOMContentLoaded', function() {
    window.setTimeout(()=>{ProcessPage(document)},1);
    });
function closeAllSelect(elmnt) {
    /* A function that will close all select boxes in the document,
    except the current select box: */
    var x, y, i, arrNo = [];
    x = document.getElementsByClassName("select-items");
    y = document.getElementsByClassName("select-selected");
    for (let i = 0,leni=y.length; i < leni; i++) {
      if (elmnt == y[i]) {
        arrNo.push(i)
      } else {
        y[i].classList.remove("select-arrow-active");
      }
    }
    for (let i = 0,leni=x.length; i < leni; i++) {
        
      if (arrNo.indexOf(i)) {
          //alert(x[i].className);
        x[i].parentElement.className = x[i].parentElement.className.replace(' focused','');
        x[i].classList.add("select-hide");
      }
    }
  }
  
  /* If the user clicks anywhere outside the select box,
  then close all select boxes: */
  document.addEventListener("click", closeAllSelect);


  //the Control Objec
  var Control = {
    //General Methods
    Visibility:(selector,state)=>{
      var chkbx = _(selector);
        if(chkbx == null)return;
        
        if(_IsArray(chkbx)){
          for (var index = 0,lenind=chkbx.length; index < lenind; index++) {
            //alert(index)
            if(state){
              chkbx[index].classList.remove('w3-hide');
            }else{
              chkbx[index].classList.add('w3-hide');
            }
          }
        }else if(_IsObject(chkbx)){
          if(state){
            chkbx.classList.remove('w3-hide');
          }else{
            chkbx.classList.add('w3-hide');
          }
        }else{
          return;
        }
    },
    Filler:{
      FillerOwner:[],
    Process:function(owner,fillerid){
      //check the owner type
      //check if the owner is a check box
      if(owner.parentElement.classList.contains('bbwa-checkbox') ){
         //check the state
         if(!owner.checked){ //if not checked
          document.getElementById(owner.id+"_Marker").textContent = "";
          document.getElementById(owner.id+"_MarkerValue").value = "";
          return;
         }
      }

      //get the filler element by id
      var filler = document.getElementById(fillerid);
      if(filler == null)return;
      Control.Filler.FillerOwner[fillerid] = owner;
      //check if it is hidden: meaning it is to be displayed in a popup
      if(filler.classList.contains('w3-hide')){
        MessageBox.Popup(filler.innerHTML);
      }

    },
    Fill:function(fillbx,fillerid){
      //get the actionelement id and text content
      var id = fillbx.id;
      var cont = fillbx.textContent;
      //get the fillerowner using the fillerid
      if(typeof Control.Filler.FillerOwner[fillerid] == "undefined"){
        
      }else{
        //check if the owner is a check box
      if(Control.Filler.FillerOwner[fillerid].parentElement.classList.contains('bbwa-checkbox') ){
        //set the marker
        document.getElementById(Control.Filler.FillerOwner[fillerid].id+"_Marker").textContent = cont;
        document.getElementById(Control.Filler.FillerOwner[fillerid].id+"_MarkerValue").value = id;
      }
      }

      //close the popup
      MessageBox.ClosePopup();
      
    }
    },
    //Check box hadlers
    CheckBox:{
      Select:function(selector,state){
        // strict = strict || false;
        var chkbx = _(selector);
        if(chkbx == null)return;
        //alert(chkbx);
        if(_IsArray(chkbx)){
          for (var index = 0,lenin=chkbx.length; index < lenin; index++) {
            //alert(index)
            const element = chkbx[index];
            
            if(element.classList.contains('bbwa-checkbox')){
              //alert(element.firstElementChild);
              if(typeof element.firstElementChild.checked != _UND)element.firstElementChild.checked = state;
            }
            
          }
        }else if(_IsObject(chkbx)){
          if(chkbx.classList.contains('bbwa-checkbox')){
            if(typeof chkbx.firstChild.checked != _UND)chkbx.firstChild.checked = state;
          }
        }else{
          return;
        }
      },
      Disabled:function(selector,state){
        var chkbx = _(selector);
        if(chkbx == null)return;
        
        if(_IsArray(chkbx)){
          for (var index = 0,lenin=chkbx.length; index < lenin; index++) {
            //alert(index)
            const element = chkbx[index];
            
            if(element.classList.contains('bbwa-checkbox')){
              //alert(element.firstElementChild);
              if(typeof element.firstElementChild.disabled != _UND)element.firstElementChild.disabled = state;
            }
            
          }
        }else if(_IsObject(chkbx)){
          if(chkbx.classList.contains('bbwa-checkbox')){
            if(typeof chkbx.firstChild.disabled != _UND)chkbx.firstChild.disabled = state;
          }
        }else{
          return;
        }
      },
      Cumulate:(selector,display,num)=>{
        var chkbx = _(selector);
        if(chkbx == null)return;
        display = _(display);
        if(display == null)return;
        //get the text content
        var discont = parseFloat(display.textContent.replace(",",""));
        num = parseFloat(num);
        chkbx = _IsArray(chkbx)?chkbx:[chkbx];
        for (var index = 0,lenin=chkbx.length; index < lenin; index++) {
          //alert(index)
          const element = chkbx[index];
          if(element.classList.contains('bbwa-checkbox')){
            //alert(element.firstElementChild);
            if(typeof element.firstElementChild.checked != _UND){
              if(element.firstElementChild.checked){
                discont += num;
              }else{
                discont -= num;
              }
            }
          }
        }
        display.textContent = _Money(discont);
      }
    },

    //list box
    ListBox:{
      Package:function(listid){
        const listItems = document.querySelectorAll('#'+listid+' li');
        var listarr = [];
        for (var i = 0,leni=listItems.length; i < leni; i++) {
          //get the li
          let li = listItems[i];
          //check content type
          if(li.firstElementChild.classList.contains('bbwa-checkbox-cont')){
            let input = li.getElementsByTagName('input');
            if(input == null)continue;
            input = input[0];
            let inpid = input.id;
            let inpstatus = input.checked?1:0;
            //alert(li);
            let inpmarker = document.getElementById(inpid+"_Marker").textContent;
            let inpval = document.getElementById(inpid+"_MarkerValue").value;
            var chkobj = {"type":"checkbox","id":inpid,"state":inpstatus,"marker":inpmarker,"value":inpval}
            //add to main array
            listarr[listarr.length] = chkobj;
          }
        }
        return listarr;
      }
    },

    Button:{
      DoTimeOut:function(timmerobjid){
        timmerspan = document.getElementById(timmerobjid); 
        if(timmerspan == null)return;
        var txtContent = Number(timmerspan.textContent);
        txtContent -= 1;
        if(txtContent < 1){
          timmerspan.parentElement.style.display = 'none';
        }else{
          timmerspan.textContent = txtContent;
          setTimeout("Control.Button.DoTimeOut('"+timmerspan.id+"')",1000);
        }
      }
    },

    Popup:{
      Show:(popid,icon)=>{
        icon = icon || 'fas fa-exclamation';
        let popcont = (typeof popid == "object")?popid:document.getElementById(popid);
        if(popcont == null)return;
        MessageBox.Popup(popcont.innerHTML,icon);
      }
    },

    DynamicBox:{
      Add:(dyanmicBox)=>{
        //get all dynamic boxes in parent container
        //let alDyBx = dyanmicBox.parentElement.getElementsByClassName("bbwa-dynamicbox");
       //let idpref = alDyBx.length + 1;
        dyanmicBox.parentElement.insertBefore(_Cloner(dyanmicBox,false,true), dyanmicBox.nextSibling);
      }
    },
    TextBox:{
      AddSeperator:(obj,by,numdigit,len)=>{
        len = len||obj.value.length; by=by || '-';numdigit=numdigit||4;
        if(obj.value.replace(by,"").length > len && len > 0){
          obj.value=obj.value.substr(0,len + (((len/numdigit)-1) * by.length));return;
      }
      let val = obj.value.split(by);
       laste = val[val.length - 1]; 
       if(laste.length > numdigit){ 
         val[val.length - 1] = laste.substr(0,numdigit); val.push(laste.substr(numdigit));obj.value = val.join(by);obj.focus()
        }else{
          if(obj.value.substr(-1)==by)obj.value=obj.value.substr(0,obj.value.length - 1)
        } 
      }
    }
  }
  