/**
 * @jsx React.DOM
 */
(function() {
    var DogFooder = React.createClass({
        getInitialState: function() {
            return {
                treats: 0
            }
        },

        giveTreat: function() {
            this.setState({
                treats: this.state.treats + 1
            });
        },

        takeTreat: function() {
            var treats = this.state.treats;
            if(treats == 0) return;

            this.setState({
                treats: treats - 1
            });
        },

        render: function() {
            var addButtonState = this.state.treats > 0 ? '' : ' disabled';

            return (
                <div>
                    <h3>Treats: {this.state.treats}</h3>
                    <br/>
                    <div>
                        <button className="btn btn-large btn-success" onClick={this.giveTreat}>Good dog!</button>
                        {'  '}
                        <button className={'btn btn-large btn-danger ' + addButtonState} onClick={this.takeTreat}>Bad dog!</button>
                    </div>
                </div>
            );
        }
    });

    React.renderComponent(<DogFooder />, document.getElementById('doggy-app'));
})();