function doFac(r, f, classes)
{
  if(f.facultative)
  {
    r.append(HTMLBuilder.switch({id: f.id+"_elem_cb", on:"<br>on", off:"off"},{},
                                { onclick: 'toggleEnable(\''+f.id+'_elem\')'}));
    /*var sw = r.append('<div class="switch col '+((classes)?classes:"")+'" ><br><label>\
              <input type="checkbox"  id="'+f.id+'_elem_cb" onclick="toggleEnable(\''+f.id+'_elem\')"> \
              <span class="lever"></span></label> </div>')*/
  }
}


class UIElement {
  constructor(rootData, data, root, parent=undefined)
  {
    this.type="ui";
    Object.assign(this, data);
    this.rootData=rootData;
    this.root=$("#"+root);
    this.rootId=root;
    this.uiId=registerUI(this);
    this.root.data( { "id" :this.uiId });
    this.prefix=root;
    this.parent=parent;
    this.subConstructor();
    this.elemId=this.rootId+"_elem";
      console.log("constructor #"+this.elemId)

    this.initStart();
    this.init();
    this.initEnd();
  }

  initStart(){}
  initEnd(){}
  subConstructor(){}

  resolveElement(e)
  {
    if(typeof e == "string" && e.length>1 && e[0]=='@' && e[1]=='/')
    {
      var l =  e.substr(2).split(':');
      var path = l[0];
      var mod = {};
      if(l.length>1)
      {
        var m = l.slice(1).join(':');
        var mm = m.replace(/(['"])?([a-z0-9A-Z_]+)(['"])?:/g, '"$2": ');
        mod=JSON.parse(mm.replace(/'/g, "\""));
      }
      return findPathInObject(this.rootData, path, mod);
    }
    return e;
  }

  getJson()
  {
    return $("#"+this.elemId).val();
  }

  setJson(e)
  {
    $("#"+this.elemId).val(e);
    return this;
  }

  val(f)
  {
    if(f==undefined) return this.getJson();
    this.setJson(f);
  }

  onDelete()
  {
    deleteUI(this);
    if(this.parent)
      this.parent.deleteChild(this.rootId);
  }

  reset(){this.val("")}
}
registerUiClass("element", UIElement);

class UIContainer extends UIElement {

  subConstructor(){
    this.index = {};
  }

  initFieldStart(f) {}
  initFieldEnd(f){}

  init_text(f) {return this._init_text(f, f.size?f.size:12); }
  init_textarea(f) { return this._init_textarea(f, f.size?f.size:12);}
  init_select(f){return this._init_select(f, f.size?f.size:12); }

  init()
  {
    this.root.empty();
    this.fields=this.resolveElement(this.fields);
    if(this.fields)
    {
      for(var i=0; i<this.fields.length; i++)
      {
        this.fields[i]=this.resolveElement(this.fields[i]);
        this.initFieldStart(this.fields[i]);
        this._init(this.root, this.fields[i]);
        this.initFieldEnd(this.fields[i]);
      }
    }
    this.root.find("select").formSelect();
  }

  _init(r, f)
  {
    var id = this.prefix+"_"+f.name;
    f.id=id;
    this.root.append(r);
    r.append(HTMLBuilder.div({id: id}));
    this.index[f.name]=newUiClass(f.type, this.rootData, f,id, this);
    return true;
  }

  getValue(name)
  {
    var id = this.prefix+"_"+name;
    var f = this.index[name];
    return f.val();
  }

  setValue(name, val)
  {
    var id = this.prefix+"_"+name;
    var f = this.index[name];


    if(f.facultative)
      $("#"+id+"_cb").prop('checked', val?true:false);

    f.val(val);
  }

  reset()
  {
    for (var key in this.index) {
        if (this.index.hasOwnProperty(key)) {
            this.setValue(key, undefined);
        }
    }
  }

  setJson(p)
  {
    for (var key in this.index) {
        if (this.index.hasOwnProperty(key)) {
            this.setValue(key, p[key]);
        }
    }
  }



  deleteChild(id)
  {
    delete this.index[id];
  }

  getJson()
  {
    var out={};
    for (var key in this.index) {
        if (this.index.hasOwnProperty(key)) {
          var p = this.index[key];
          if(p.facultative && !$("#"+p.id+"_cb").is(':checked'))
            continue;
          out[key]=this.getValue(key);
        }
    }
    return out;
  }

  foreach(fct)
  {
    for (var key in this.index) {
        if (this.index.hasOwnProperty(key)) {
          fct(key, this.index[key])
        }
    }
  }
}

registerUiClass("container", UIContainer);