fcf.module({
  name: "fcfControls:templates/vertical-tabs.wrapper.js",
  dependencies: ["fcfControls:templates/view.wrapper.js"],
  module: function(Wrapper){
    return class WrapperEx extends Wrapper{
      
      constructor(a_initializeOptions){
        super(a_initializeOptions);
      }

      onClick(a_event){
        this.setArg("tab", a_event.target.getAttribute("key"))
      }

      onArgTab(a_tabKey) {
        elemenets = fcf.select(this.getDomElement().parentElement,  "[id=" + this.getId() + "]>div>div>[content]");
        fcf.each(elemenets, function(a_key, a_element){
          var key = a_element.getAttribute("key");
          if (a_tabKey == key){
            a_element.style.display = "block";
          } else {
            a_element.style.display = "none";
          }
        });
        elemenets = fcf.select(this.getDomElement().parentElement,  "[id=" + this.getId() + "]>div>div>div>[tab]");
        fcf.each(elemenets, function(a_key, a_element){
          var key = a_element.getAttribute("key");
          if (a_tabKey == key){
            a_element.classList.add("active");
          } else {
            a_element.classList.remove("active");
          }
        });
      }

    };

  }
});
