 )
 
 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>
     )
 )
 

    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()
  render: ->
    <div>
      <PageTitle />
      <div className="row">
        <div className="small-12 column">
          <PageContent ref="content" />

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

PageApp.model = new Page();
`

$ ->
