<div data-behavior="filters">
    <p data-behavior="event-toggler">
      Filters:
      <button data-behavior="enable" class="text-blue" style="display: none;">
        Turn on Events
      </button>
      <button data-behavior="disable" class="text-red">
        Turn off Events
      </button>
    </p>
    <p>
      <select data-behavior="numbers-filter">
        <option value="">Select any number</option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>
    </p>
    <p data-behavior="query-filter">
      <input type="text" data-behavior-target="query">
      <button type="button" data-behavior="submit-query">Search</button>
    </p>
  </div>
  

  var NumbersFilter = function( $root ) {
    var find = function( $root ) {
      return $.behavior.child( 'numbers-filter' ).of( $root );
    };

    var mount = function( root ) {
      find( $root ).on( 'change', function() {
        var value = $( this ).val();

        root.trigger( 'alert', [ 'number', value ] );
      });
    };

    var unmount = function() { find( $root ).off( 'change' ); };

    return { mount: mount, unmount: unmount };
  };

  var QueryFilter = function( root ) {
    var submitQuery = root.child( 'submit-query' );

    var mount = function( filters ) {
      submitQuery.on( 'click', function( e ) {
        e.preventDefault();

        var value = root.target( 'query' ).val();

        filters.trigger( 'alert', [ 'query', value ] )
      })
    };

    var unmount = function() { submitQuery.off( 'click' ) };

    return { mount: mount, unmount: unmount };
  };

  var FiltersComponent = (function() {
    var filters = $.behavior( 'filters' );
    var queryFilter = filters.child( 'query-filter' );

    filters.on( 'alert', function( _event, filter, value ) {
      var filterLabel = 'Filter: ' + filter;

      if ( value ) return alert( filterLabel + ' | value: ' + value );

      console.log( filterLabel + ' | There is nothing to alert. :(' );
    });

    var mountChildrenComponents = function( filters ) {
      NumbersFilter( this ).mount( filters );
      QueryFilter( queryFilter ).mount( filters );
    };

    var unmountChildrenComponents = function() {
      NumbersFilter( this ).unmount();
      QueryFilter( queryFilter ).unmount();
    };

    var mountEventToggler = function( filters ) {
      filters.child( 'event-toggler' ).ifPresent(function( buttons ) {
        var disableButton = buttons.child( 'disable' );
        var enableButton = buttons.child( 'enable' );
        var show = function() { this.show() };

        disableButton.on( 'click', function() {
          if ( confirm( 'Are you sure?' ) ) {
            $( this ).hide();
            filters.ifPresent( unmountChildrenComponents );
            enableButton.ifPresent( show );
          }
        });

        enableButton.on( 'click', function() {
          $( this ).hide();
          filters.ifPresent( mountChildrenComponents );
          disableButton.ifPresent( show );
        });
      })
    };

    return {
      mount: function() {
        filters.ifPresent( mountChildrenComponents );
        filters.ifPresent( mountEventToggler );
      }
    }
  }());

  FiltersComponent.mount();