   mixins: [Router.State]
 
   getInitialState: ->
-    {id: @getParams().id}
+    if (@getParams().id)
+      return {id: @getParams().id}
+    else
+      TaskPlanActions.create()
+      return {id: TaskPlanStore.getCreateKey()}
 
-  componentWillMount: ->
-    # Fetch the task if it has not been loaded yet
-    TaskPlanStore.addChangeListener(@update)
-
-  componentWillUnmount: ->
-    TaskPlanStore.removeChangeListener(@update)
+  componentWillMount: -> TaskPlanStore.addChangeListener(@update)
+  componentWillUnmount: -> TaskPlanStore.removeChangeListener(@update)
 
   update: ->
-    @setState({})
+    @setState({
+      id: @state.id,
+      topics: TaskPlanStore.getTopics(@state.id)
+    })
 
   setDueAt: (value) ->
     TaskPlanActions.updateDueAt(@state.id, value)
 
   setTitle: (value) ->
     TaskPlanActions.updateTitle(@state.id, value)
+    
+  savePlan: ->
+    TaskPlanActions.save(@state.id)
+
+  renderTopics: (topic) ->
+    <li>{topic}</li>
 
   render: ->
     id = @getParams().id
     footer = <BS.Button bsStyle="primary">Publish</BS.Button>
     headerText = if id then 'Edit Reading' else 'Add Reading'
     dueDate = if @state.due_at then @state.due_at else @props.due_at
+    topics = TaskPlanStore.getTopics(@state.id)
 
     <BS.Panel bsStyle="default" className="create-reading" footer={footer}>
       <h1>{headerText}</h1>

      </div>
      <p>
        <label>Select Readings</label>
        <SelectReadings/>
      </p>
    </BS.Panel>

module.exports = ReadingPlan

  render: ->
    <BS.Button onClick={@handleToggle} bsStyle="primary">Edit Readings</BS.Button>

  toggleSection: (section) ->
    if (TaskPlanStore.hasTopic(@props.planId, section.id))
      TaskPlanActions.removeTopic(@props.planId, section.id)
    else
      TaskPlanActions.addTopic(@props.planId, section.id)

  renderSections: (section) ->
    active = TaskPlanStore.hasTopic(@props.planId, section.id)
    <SectionTopic active={active} section={section} toggleSection={@toggleSection}/>
    
  renderChapterPanels: (chapter, i) ->
    sections = _.map(chapter.children, _.bind(@renderSections, this))
    header = <h2>{chapter.number}. {chapter.title}</h2>

    <BS.Panel key={chapter.id} header={header} eventKey={chapter.id}>
      <BS.ListGroup>
        {sections}
      </BS.ListGroup>
    </BS.Panel>

  renderOverlay: ->
    if !@state.isModalOpen
      return <span/>
  
    chapters = _.map(@state.chapters, _.bind(@renderChapterPanels, this))

    <BS.Modal backdrop={true} onRequestHide=@doneWithSelection>
      <div className="modal-body">
        <BS.Accordion>
          {chapters}
        </BS.Accordion>
      </div>
      <div className="modal-footer">
        <BS.Button onClick={@handleToggle}>Close</BS.Button>
