       </div>
       <p>
         <label>Select Readings</label>
-        <SelectReadings/>
+        <SelectTopics planId={@state.id} selected={topics}/>
       </p>
+      <ul>
+        {_.map(topics, @renderTopics)}
+      </ul>
     </BS.Panel>
 
 module.exports = ReadingPlan

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

  renderOverlay: ->
    if !@state.isModalOpen
      return <span/>

    <BS.Modal backdrop={true} onRequestHide=@doneWithSelection>
      <div className="modal-body">
        <ul>
          <li>List</li>
          <li>of</li>
          <li>chapters</li>
          <li>and</li>
          <li>sections</li>
        </ul>
      </div>
      <div className="modal-footer">
        <BS.Button onClick={@handleToggle}>Close</BS.Button>

React = require 'react'
_ = require 'underscore'
BS = require 'react-bootstrap'
Router = require 'react-router'
Datepicker = (require 'react-widgets').DateTimePicker

{TaskPlanStore, TaskPlanActions} = require '../../flux/task-plan'

SectionTopic = React.createClass
  toggleSection:->
    @props.toggleSection(@props.section)
    
  render: ->
    isActive = 'info' if @props.active
    <BS.ListGroupItem 
      key={@props.section.id} 
      bsStyle= {isActive}
      onClick={@toggleSection}>{@props.section.number}. {@props.section.title}</BS.ListGroupItem>

SelectTopics = React.createClass
  mixins: [BS.OverlayMixin],
  getInitialState: -> { isModalOpen: false }

  getInitialState: ->
    {
      chapters: [
        {
          title: "Kinematics",
          number: "1",
          id: 123,
          children: [{
            title: "Kinematics in 1 dim",
            number: "1.1",
            id: 234
          }, {
            title: "Kinematics in 2 dim",
            number: "1.2",
            id: 235
          }, {
            title: "Kinematics in 3 dim",
            number: "1.3",
            id: 236
          }],
        },
        {
          title: "Mechanics",
          number: "2",
          id: 124,
          children: [{
            title: "Mechanics in 1 dim",
            number: "2.1",
            id: 237
          }, {
            title: "Mechanics in 2 dim",
            number: "2.2",
            id: 238
          }, {
            title: "Mechanics in 3 dim",
            number: "2.3",
            id: 239
          }],

        },
        {
          title: "Thermodynamics",
          number: "3",
          id: 125,
          children: [{
            title: "Thermodynamics in 1 dim",
            number: "3.1",
            id: 240
          }, {
            title: "Thermodynamics in 2 dim",
            number: "3.2",
            id: 241
          }, {
            title: "Thermodynamics in 3 dim",
            number: "3.3",
            id: 242
          }]
        }
      ]
    }

  handleToggle: ->
    @setState({
