 
   getInitialState: ->
     period_name: @props.activeTab.name
+    showModal: false
+
+  close: ->
+    @setState({showModal: false})
+
+  open: ->
+    @setState({showModal: true})
 
   validate: (name) ->
     error = PeriodStore.validatePeriodName(name, @props.periods, @props.activeTab.name)

    </BS.Modal>

  render: ->
    <BS.OverlayTrigger
      ref='overlay'
      rootClose={true}
      trigger='click'
      overlay={@renderForm()}>
        <BS.Button bsStyle='link' className='edit-period'>
          <i className='fa fa-pencil' />
          Rename <CourseGroupingLabel courseId={@props.courseId}/>
        </BS.Button>
    </BS.OverlayTrigger>

    if not @state.invalid
      id = @props.activeTab.id
      PeriodActions.save(@props.courseId, id, period: {name: @state.period_name})
      @close()

  renderForm: ->
    formClasses = ['modal-body', 'teacher-edit-period-form']
