     div {className:k}, [
       (div {className:"attr"}, [
         (React.createElement Member, iden)
-        (div {
-          id:"audi"
-          className:"audi valid-#{@state.valid}"
-          contentEditable:true
-          onKeyDown: @_audiKeyDown
-          onBlur:@_setAudi
-          }, audi.join(" "))
+        (React.createElement Audience, {audi,valid:@state.valid, onBlur:@_setAudi})
         (div {className:"time"}, @getTime())        
       ])
       (div {
           id:"writing"
           contentEditable:true
-          onFocus: @_focus
-          onBlur: @_blur
-          onInput: @_input
-          onPaste: @_input
-          onKeyDown: @_writingKeyDown
-          onKeyUp: @_writingKeyUp
-          onFocus: @cursorAtEnd
+          onPaste: @onInput
+          @onInput, @onFocus, @onBlur, @onKeyDown, @onKeyUp
         }, "")
-      div {id:"length"}, "0/62"
+       (div {id:"length",className:("valid-false" if @state.lengthy)}, "#{@state.length}/62")
       ]

      return true
    if v.length < 5 # zod/a is shortest
      return false
    v = v.split " "
    for a in v
      a = a.trim()
      valid = @_validateAudiPart(a)
    valid

  _setAudi: ->
    valid = @_validateAudi()
    StationActions.setValidAudience valid
    if valid is true
      v = $('#audi').text()
      if v.length is 0 then v = window.util.mainStationPath window.urb.user
      v = v.split " "
      for k,_v of v
        if _v[0] isnt "~" then v[k] = "~#{_v}"
      StationActions.setAudience v
      v
    else
      false


    StationStore.addChangeListener @_onChangeStore
    MessageStore.addChangeListener @_onChangeStore
    @$el = $ @getDOMNode()
    @$writing = $('#writing')
    @$writing.focus()
    if @get() 
      @$writing.text @get()
      @onInput()
    @interval = setInterval =>
        @$el.find('.time').text @getTime()
      , 1000
