text: // Base Foundation theme
  JSONEditor.defaults.themes.foundation = JSONEditor.AbstractTheme.extend({
    getChildEditorHolder: function() {
      var el = document.createElement('div');
      el.style.marginBottom = '15px';
      return el;
    },
    getSelectInput: function(options) {
      var el = this._super(options);
      el.style.minWidth = 'none';
      el.style.padding = '5px';
      el.style.marginTop = '3px';
      return el;
    },
    getSwitcher: function(options) {
      var el = this._super(options);
      el.style.paddingRight = '8px';
      return el;
    },
    afterInputReady: function(input) {
      if(this.closest(input,'.compact')) {
        input.style.marginBottom = 0;
      }
      input.group = this.closest(input,'.form-control');
    },
    getFormInputLabel: function(text) {
      var el = this._super(text);
      el.style.display = 'inline-block';
      return el;
    },
    getFormInputField: function(type) {
      var el = this._super(type);
      el.style.width = '100%';
      el.style.marginBottom = type==='checkbox'? '0' : '12px';
      return el;
    },
    getFormInputDescription: function(text) {
      var el = document.createElement('p');
      el.textContent = text;
      el.style.marginTop = '-10px';
      el.style.fontStyle = 'italic';
      return el;
    },
    getIndentedPanel: function() {
      var el = document.createElement('div');
      el.className = 'panel';
      el.style.paddingBottom = 0;
      return el;
    },
    getHeaderButtonHolder: function() {
      var el = this.getButtonHolder();
      el.style.display = 'inline-block';
      el.style.marginLeft = '10px';
      el.style.verticalAlign = 'middle';
      return el;
    },
    getButtonHolder: function() {
      var el = document.createElement('div');
      el.className = 'button-group';
      return el;
    },
    getButton: function(text, icon, title) {
      var el = this._super(text, icon, title);
      el.className += ' small button';
      return el;
    },
    addInputError: function(input,text) {
      if(!input.group) return;
      input.group.className += ' error';
      
      if(!input.errmsg) {
        input.insertAdjacentHTML('afterend','<small class="error"></small>');
        input.errmsg = input.parentNode.getElementsByClassName('error')[0];
      }
      else {
        input.errmsg.style.display = '';
      }
      
      input.errmsg.textContent = text;
    },
    removeInputError: function(input) {
      if(!input.errmsg) return;
      input.group.className = input.group.className.replace(/ error/g,'');
      input.errmsg.style.display = 'none';
    },
    getProgressBar: function() {
      var progressBar = document.createElement('div');
      progressBar.className = 'progress';
  
      var meter = document.createElement('span');
      meter.className = 'meter';
      meter.style.width = '0%';
      progressBar.appendChild(meter);
      return progressBar;
    },
    updateProgressBar: function(progressBar, progress) {
      if (!progressBar) return;
      progressBar.firstChild.style.width = progress + '%';
    },
    updateProgressBarUnknown: function(progressBar) {
      if (!progressBar) return;
      progressBar.firstChild.style.width = '100%';
    }
  });
  
  // Foundation 3 Specific Theme
  JSONEditor.defaults.themes.foundation3 = JSONEditor.defaults.themes.foundation.extend({
    getHeaderButtonHolder: function() {
      var el = this._super();
      el.style.fontSize = '.6em';
      return el;
    },
    getFormInputLabel: function(text) {
      var el = this._super(text);
      el.style.fontWeight = 'bold';
      return el;
    },
    getTabHolder: function() {
      var el = document.createElement('div');
      el.className = 'row';
      el.innerHTML = "<dl class='tabs vertical two columns'></dl><div class='tabs-content ten columns'></div>";
      return el;
    },
    setGridColumnSize: function(el,size) {
      var sizes = ['zero','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'];
      el.className = 'columns '+sizes[size];
    },
    getTab: function(text) {
      var el = document.createElement('dd');
      var a = document.createElement('a');
      a.setAttribute('href','#');
      a.appendChild(text);
      el.appendChild(a);
      return el;
    },
    getTabContentHolder: function(tab_holder) {
      return tab_holder.children[1];
    },
    getTabContent: function() {
      var el = document.createElement('div');
      el.className = 'content active';
      el.style.paddingLeft = '5px';
      return el;
    },
    markTabActive: function(tab) {
      tab.className += ' active';
    },
    markTabInactive: function(tab) {
      tab.className = tab.className.replace(/\s*active/g,'');
    },
    addTab: function(holder, tab) {
      holder.children[0].appendChild(tab);
    }
  });
  
  // Foundation 4 Specific Theme
  JSONEditor.defaults.themes.foundation4 = JSONEditor.defaults.themes.foundation.extend({
    getHeaderButtonHolder: function() {
      var el = this._super();
      el.style.fontSize = '.6em';
      return el;
    },
    setGridColumnSize: function(el,size) {
      el.className = 'columns large-'+size;
    },
    getFormInputDescription: function(text) {
      var el = this._super(text);
      el.style.fontSize = '.8rem';
      return el;
    },
    getFormInputLabel: function(text) {
      var el = this._super(text);
      el.style.fontWeight = 'bold';
      return el;
    }
  });
  
  // Foundation 5 Specific Theme
  JSONEditor.defaults.themes.foundation5 = JSONEditor.defaults.themes.foundation.extend({
    getFormInputDescription: function(text) {
      var el = this._super(text);
      el.style.fontSize = '.8rem';
      return el;
    },
    setGridColumnSize: function(el,size) {
      el.className = 'columns medium-'+size;
    },
    getButton: function(text, icon, title) {
      var el = this._super(text,icon,title);
      el.className = el.className.replace(/\s*small/g,'') + ' tiny';
      return el;
    },
    getTabHolder: function() {
      var el = document.createElement('div');
      el.innerHTML = "<dl class='tabs vertical'></dl><div class='tabs-content vertical'></div>";
      return el;
    },
    getTab: function(text) {
      var el = document.createElement('dd');
      var a = document.createElement('a');
      a.setAttribute('href','#');
      a.appendChild(text);
      el.appendChild(a);
      return el;
    },
    getTabContentHolder: function(tab_holder) {
      return tab_holder.children[1];
    },
    getTabContent: function() {
      var el = document.createElement('div');
      el.className = 'content active';
      el.style.paddingLeft = '5px';
      return el;
    },
    markTabActive: function(tab) {
      tab.className += ' active';
    },
    markTabInactive: function(tab) {
      tab.className = tab.className.replace(/\s*active/g,'');
    },
    addTab: function(holder, tab) {
      holder.children[0].appendChild(tab);
    }
  });
  