Untitled

var ParticipantFilter = new Class({

  initialize: function(filtersContainer, availableFilters) {
    this.filtersContainer = filtersContainer;
    this.availableFilters = availableFilters;
    this.addButton = $('add_filter');

    console.log(this.availableFilters);

    this.attachEvents();
  },

  attachEvents: function() {
    this.addButton.addEvent('click', this.addFilterSelect);
  },

  addFilterSelect: function() {
    var count = $$('.filter_wrapper').length;

    var filterWrapper = new Element('div', {
      id: "filter_wrapper_" + count,
        class: 'filter_wrapper',
    });

    var filterSelect = new Element('select', {
      id: "filter_select_" + count
    });

    this.availableFilters.each(function(filter, key){
      var filterOption = new Element('option', {
        value: key,
          text: filter.text
      });
      filterOption.inject(filterSelect);
    });

    filterSelect.addEvent('change', function(){
      addFilterOptions();
    });

    filterSelect.inject(filterWrapper);
    filterWrapper.inject(filtersContainer);
  },

  addFilterOptions: function() {
    console.log('add_filter_options');
  }

});