var dom = Bloop.dom;

// components

var App = Bloop.createClass({
  render: function() {
    return dom.div(
      dom.span(this.state.number.val()),
      Toolbar({
        number: this.state.number
      })
    );
  }
});

var Toolbar = Bloop.createClass({
  updateNumber: function(value) {
    this.props.number.set(value);
  },
  
  render: function() {
    return dom.div(
      dom.button({
        onClick: this.updateNumber.bind(null, this.props.number.val() - 1)
      }, 'decrement'),
      dom.button({
        onClick: this.updateNumber.bind(null, this.props.number.val() + 1)
      }, 'increment')
    );
  }
});

var data = { number: 0 };

var cortex = new Cortex(data, function() {
  // Called whenever an update happened
  Bloop.renderComponent(app, document.body);
});

// render

var app = App({ state: cortex });
Bloop.renderComponent(app, document.body);