/** @jsx React.DOM */

var ButtonBar = React.createClass({//{{{
    render: function() {
        var prefix = "btn btn-"
        var blocked_button  = prefix + ((this.props.mode === "blocked")  ? "primary" : "default");
        var blocking_button = prefix + ((this.props.mode === "blocking") ? "primary" : "default");
        return (
            <div className="btn-group btn-group-justified">
                <div className="btn-group">
                    <button type="button" className={blocked_button} onClick={this.props.toggleUI}>I'm Blocked</button>
                </div>
                <div className="btn-group">
                    <button type="button" className={blocking_button} onClick={this.props.toggleUI}>I'm Blocking</button>
                </div>
            </div>
        );
    }
});//}}}

var BlockedSearch = React.createClass({//{{{
    render: function() {
        return (
            <form role="form">
                <div className="form-group">
                    <label htmlFor="lic_or_tag" className="control-label">Licence Plate or Tag Number</label>
                    <input type="text" type="lic_or_tag" className="form-control" id="lic_or_tag" placeholder="1ABC456 or 1234"/>
                </div>
                <div className="btn-group btn-group-justified">
                    <div className="btn-group">
                        <button type="submit" className="btn btn-default">Search </button>
                    </div>
                </div>
            </form>
        );
    }
});//}}}

var BlockingSearch = React.createClass({//{{{
    render: function() {
        return (
            <form role="form">
                <div className="form-group">
                    <label htmlFor="lic_or_tag" className="control-label">Licence Plate or Tag Number</label>
                    <input type="text" type="lic_or_tag" className="form-control" id="lic_or_tag" placeholder="1ABC456 or 1234"/>
                </div>
                <div className="form-group">
                    <label htmlFor="name" className="control-label">Your Name</label>
                    <input type="text" type="name" className="form-control" id="name" placeholder="John Doe"/>
                </div>
                <div className="form-group">
                    <label htmlFor="leaving" className="control-label">When are you leaving (optional)</label>
                    <input type="text" type="leaving" className="form-control" id="leaving" placeholder="John Doe"/>
                </div>
                <div className="btn-group btn-group-justified">
                    <div className="btn-group">
                        <button type="submit" className="btn btn-default">Search </button>
                    </div>
                </div>
            </form>
        );
    }
});//}}}

var TopLevel = React.createClass({//{{{
    getInitialState: function() {
        return { mode: "blocked" }
    },
    toggleUI: function() {
        var newMode = this.state.mode === 'blocked' ? 'blocking' : 'blocked';
        console.log("test");
        this.setState({mode: newMode});
    },
    render: function() {
        var comp = this.state.mode === "blocked" ? <BlockedSearch/> :  <BlockingSearch/>;
        return (
            <div className="col-sm-6">
                <ButtonBar mode={this.state.mode} toggleUI={this.toggleUI}/>
                {comp}
            </div>
        );
    }
});//}}}

React.renderComponent(
    <TopLevel/>,
    document.getElementById('main')
);

@@ -452,32 +452,52 @@
          %3Cbutton
+ id=%22blocked_button%22
  type=%22button%22 c
@@ -663,24 +663,45 @@
      %3Cbutton
+ id=%22blocking_button%22
  type=%22butto
@@ -2997,32 +2997,33 @@
 gleUI: function(
+e
 ) %7B%0A        var 
@@ -3032,31 +3032,27 @@
 wMode = 
-this.state.mode
+e.target.id
  === 'bl
@@ -3056,16 +3056,23 @@
 'blocked
+_button
 ' ? 'blo
@@ -3073,19 +3073,18 @@
 ? 'block
-ing
+ed
 ' : 'blo
@@ -3089,40 +3089,12 @@
 lock
-ed';%0A        console.log(%22test%22)
+ing'
 ;%0A  
@@ -3232,17 +3232,16 @@
 arch/%3E :
- 
  %3CBlocki

make toggle work properly