text: var template = '<header>Colchonator</header><div class="numVoicesContainer"></div>' + 
  	'<div class="bajotronContainer"></div>' +
  	'<div class="reverbContainer"></div>';
  
  
  function register() {
  	xtag.register('gear-colchonator', {
  		lifecycle: {
  			created: function() {
  				this.innerHTML = template;
  
  				this.numVoicesContainer = this.querySelector('.numVoicesContainer');
  				this.numVoices = document.createElement('gear-slider');
  				this.numVoices.label = 'num voices';
  				this.numVoices.min = 1;
  				this.numVoices.max = 10;
  				this.numVoices.step = 1;
  				this.numVoices.value = 1;
  				this.numVoicesContainer.appendChild(this.numVoices);
  
  				this.bajotronContainer = this.querySelector('.bajotronContainer');
  				this.bajotron = document.createElement('gear-bajotron');
  				this.bajotronContainer.appendChild(this.bajotron);
  
  				// TODO - hide some things like the number of voices in each bajotron (?)
  
  				this.reverbContainer = this.querySelector('.reverbContainer');
  				this.reverb = document.createElement('gear-reverbetron');
  				this.reverbContainer.appendChild(this.reverb);
  
  			}
  		},
  		methods: {
  
  			attachTo: function(colchonator) {
  				var that = this;
  
  				this.colchonator = colchonator;
  
  				this.numVoices.attachToObject(colchonator, 'numVoices', null, 'num_voices_change');
  
  				// reverb settings/gui
  				this.reverb.attachTo(colchonator.reverb);
  
  				// fake bajotron
  				this.bajotron.attachTo(colchonator.bajotron);
  
  			},
  
  			detach: function() {
  				//this.voice.removeEventListener('octave_change', this.octaveChangeListener, false);
  				//this.voice.removeEventListener('wave_type_change', this.waveTypeChangeListener, false);
  			}
  
  		}
  	});
  }
  
  module.exports = {
  	register: register
  };
  