   # -- States & Properties
   propTypes:
     className : React.PropTypes.string
-    startMode : React.PropTypes.oneOf(['hours', 'minutes'])
+    display   : React.PropTypes.oneOf(['hours', 'minutes'])
+    format    : React.PropTypes.oneOf(['24hr', 'ampm'])
 
   getDefaultProps: ->
     className : ''
-    startMode : 'hours'
+    display   : 'hours'
+    format    : '24hr'
 
   getInitialState: ->
-    mode      : @props.startMode
     radius    : 0
 
   # -- Lifecycle


  componentWillUpdate: ->
    center = @_getCenter()
    if @state.center?.x != center.x && @state.center?.y != center.y
      @setState center: center

  componentWillUnmount: ->
    window.removeEventListener('resize', @handleResize)

    <div className={css.root}>
      <div ref="wrapper" className={css.wrapper} style={height: @state.radius * 2} >
        {
          if @props.display == 'minutes'
            <Minutes
              center={@state.center}
              onChange={@onMinuteChange}
              radius={@state.radius}
              spacing={@state.radius * 0.16} />
          else if @props.display == 'hours'
            <Hours
              center={@state.center}
              format={@props.format}
              onChange={@onHourChange}
              radius={@state.radius}
              spacing={@state.radius * 0.16} />
