 )
 
 PageTitle = React.createClass(
+  propTypes:
+    onTitleChange: React.PropTypes.func.isRequired
+    onTitleSubmit: React.PropTypes.func.isRequired
   getInitialState: ->
-    {title: page.name}
+    {
+      title: page.name
+      focus: false
+    }
+  toggleFocus: (e) ->
+    @setState({focus: !@state.focus}, -> @refs.input.getDOMNode().focus())
+  changeTitle: (e) ->
+    @setState({title: event.target.value}, -> @props.onTitleSubmit(@state.title))
+  handleSubmit: (e) ->
+    e.preventDefault()
+    @props.onTitleSubmit(@state.title)
   render: ->
+    pageTitleElem =
+      if @state.focus
+        <form id="pagenameform" className="pagename" onSubmit={@handleSubmit}>
+          <input id="pagenameinput" className="border-dotted" type="text" placeholder="no title" value={@state.title} onChange={@changeTitle} onBlur={@toggleFocus} ref="input" />
+        </form>
+      else
+        <h3 id="pagename" className="pageTitle border-dotted cursor-text" placeholder="no title" onClick={@toggleFocus}>
+          {@state.title}
+        </h3>
     return (
-      <div className="row">
-        <div className="small-12 column">
-          <section id="pagetitle" className="pagetitle">
-            <h3 id="pagename" className="pageTitle border-dotted cursor-text" placeholder="no title">
-              {this.state.title}
-            </h3>
-            <form id="pagenameform" className="pagename hide">
-              <input id="pagenameinput" className="border-dotted" type="text" placeholder="no title" defaultValue={this.state.title} />
-            </form>
-          </section>
-        </div>
-      </div>
+      <section id="pagetitle" className="pagetitle">
+        {pageTitleElem}
+      </section>
     )
 )
 

var PageApp = new Backbone.Marionette.Application();

PageApp.model = new Page();
`
PageApp.commands.setHandler("postContents", () ->
  ce = $("<pre />").html($("#content").children().first().children().first().html())
  if($.browser.webkit)
    ce.find("div").replaceWith(() -> return "\n" + this.innerHTML)
  if($.browser.msie)
    ce.find("p").replaceWith(() -> return this.innerHTML + "<br>")
  if($.browser.mozilla || $.browser.opera ||$.browser.msie )
    ce.find("br").replaceWith("\n")

  PageApp.model.set({
    name: $("#pagenameinput").val()
    content: ce.text()
  })
  PageApp.model.url = () -> return $("#contents").attr("action")
  PageApp.model.save()
)
`
PageApp.addRegions({
  titleRegion: "#pagetitle",
  contentRegion: "#content"
});

$("#pagenameform").submit(function(e){
  PageApp.execute("postContents");
  $("#pagename").text(PageApp.model.escape("name"));
  $("#pagename").show();
  $("#pagenameform").hide();
  return false;
});

var PageNameView = Marionette.ItemView.extend({
  el: '#pagename',

  template: false,

  initialize: function(){
    this.model.set("name", $("#pagenameinput").val());
    this.listenTo(this.model, "change:name", this.modelNameChanged);
  },

  events: {
    'click': 'showPageForm'
  },

  modelNameChanged: function(model){
    this.$el.html(model.escape("name"));
  },

  showPageForm: function(){
    this.$el.hide();
    var that = this;
    $("#pagenameform").show().focusout(function(){
      that.model.set("name", $("#pagenameinput").val());
      $("#pagenameform").hide();
      that.$el.show();
    }).click(function(){ return false; });
    setTimeout(function(){
      $("#pagenameinput").focus();
    }, 0);
  }
});
`

$ ->

    {content: page.content}
  componentDidMount: ->
    @focus()
  focus: ->
    @refs.editable.getDOMNode().focus()
  render: ->
