                                         span className: 'fa fa-long-arrow-right'
 
 
-    _initFrame: ->
+    toggleHeaders: (e) ->
+        e.preventDefault()
+        e.stopPropagation()
+        state =
+            headers: not @state.headers
+        if @props.inConversation and not @state.active
+            state.active = true
+        @setState state
+
+    toggleActive: (e) ->
+        if @props.inConversation
+            e.preventDefault()
+            e.stopPropagation()
+            if @state.active
+                @setState { active: false, headers: false }
+            else
+                @setState { active: true, headers: false }
+
+    displayNextMessage: (next)->
+        if not next?
+            if @props.nextID?
+                next = @props.nextID
+            else next = @props.prevID
+        if next?
+            @redirect
+                direction: 'second'
+                action: 'message'
+                parameters: next
+        else
+            @redirect
+                direction: 'first'
+                action: 'account.mailbox.messages'
+                parameters:
+                    accountID: @props.message.get 'accountID'
+                    mailboxID: @props.selectedMailboxID
+                fullWidth: true
+
+    onReply: (args) ->
+        @setState composing: true, composeAction: ComposeActions.REPLY
+
+    onReplyAll: (args) ->
+        @setState composing: true, composeAction: ComposeActions.REPLY_ALL
+
+    onForward: (args) ->
+        @setState composing: true, composeAction: ComposeActions.FORWARD
+
+    onDelete: (args) ->
+        alertError   = LayoutActionCreator.alertError
+        alertSuccess = LayoutActionCreator.alertSuccess
+        message      = @props.message
+        if @props.nextID?
+            next = @props.nextID
+        else next = @props.prevID
+        if (not @props.settings.get('messageConfirmDelete')) or
+        window.confirm(t 'mail confirm delete', {subject: message.get('subject')})
+            MessageActionCreator.delete message, (error) =>
+                if error?
+                    alertError "#{t("message action delete ko")} #{error}"
+                else
+                    @displayNextMessage next
+
+    onCopy: (args) ->
+        LayoutActionCreator.alertWarning t "app unimplemented"
+
+    onMove: (args) ->
+        newbox = args.target.dataset.value
+        alertError   = LayoutActionCreator.alertError
+        alertSuccess = LayoutActionCreator.alertSuccess
+        if @props.nextID?
+            next = @props.nextID
+        else next = @props.prevID
+        if args.target.dataset.conversation?
+            conversationID = @props.message.get('conversationID')
+            ConversationActionCreator.move conversationID, newbox, (error) =>
+                if error?
+                    alertError "#{t("conversation move ko")} #{error}"
+                else
+                    alertSuccess t "conversation move ok"
+                    @displayNextMessage next
+        else
+            oldbox = @props.selectedMailboxID
+            MessageActionCreator.move @props.message, oldbox, newbox, (error) =>
+                if error?
+                    alertError "#{t("message action move ko")} #{error}"
+                else
+                    alertSuccess t "message action move ok"
+                    @displayNextMessage next
+
+    onMark: (args) ->
+        flags = @props.message.get('flags').slice()
+        flag = args.target.dataset.value
+        alertError   = LayoutActionCreator.alertError
+        alertSuccess = LayoutActionCreator.alertSuccess
+        switch flag
+            when FlagsConstants.SEEN
+                flags.push MessageFlags.SEEN
+            when FlagsConstants.UNSEEN
+                flags = flags.filter (e) -> return e isnt FlagsConstants.SEEN
+            when FlagsConstants.FLAGGED
+                flags.push MessageFlags.FLAGGED
+            when FlagsConstants.NOFLAG
+                flags = flags.filter (e) -> return e isnt FlagsConstants.FLAGGED
+        MessageActionCreator.updateFlag @props.message, flags, (error) ->
+            if error?
+                alertError "#{t("message action mark ko")} #{error}"
+            else
+                alertSuccess t "message action mark ok"
+
+    onConversation: (args) ->
+        id     = @props.message.get 'conversationID'
+        action = args.target.dataset.action
+        alertError   = LayoutActionCreator.alertError
+        alertSuccess = LayoutActionCreator.alertSuccess
+        switch action
+            when 'delete'
+                ConversationActionCreator.delete id, (error) ->
+                    if error?
+                        alertError "#{t("conversation delete ko")} #{error}"
+                    else
+                        alertSuccess t "conversation delete ok"
+            when 'seen'
+                ConversationActionCreator.seen id, (error) ->
+                    if error?
+                        alertError "#{t("conversation seen ok ")} #{error}"
+                    else
+                        alertSuccess t "conversation seen ko "
+            when 'unseen'
+                ConversationActionCreator.unseen id, (error) ->
+                    if error?
+                        alertError "#{t("conversation unseen ok")} #{error}"
+                    else
+                        alertSuccess t "conversation unseen ko"
+
+    onHeaders: (event) ->
+        event.preventDefault()
+        messageId = event.target.dataset.messageId
+        document.querySelector(".conversation [data-id='#{messageId}']")
+            .classList.toggle('with-headers')
+
+    addAddress: (address) ->
+        ContactActionCreator.createContact address
+
+MessageContent = React.createClass
+    displayName: 'MessageContent'
+
+    getInitialState: ->
+        return {
+            messageDisplayHTML: @props.messageDisplayHTML
+        }
+
+    shouldComponentUpdate: (nextProps, nextState) ->
+        return not(_.isEqual(nextState, @state)) or not (_.isEqual(nextProps, @props))
+
+    render: ->
+        if @state.messageDisplayHTML and @props.html
+            div className: 'row',
+                if @props.imagesWarning
+                    div
+                        className: "imagesWarning content-action",
+                        ref: "imagesWarning",
+                            span null, t 'message images warning'
+                            button
+                                className: 'btn btn-default',
+                                type: "button",
+                                ref: 'imagesDisplay',
+                                onClick: @displayImages,
+                                t 'message images display'
+                iframe
+                    'data-message-id': @props.message.get 'id'
+                    className: 'content',
+                    ref: 'content',
+                    sandbox: 'allow-same-origin allow-popups',
+                    allowTransparency: true,
+                    frameBorder: 0,
+        else
+            div className: 'row',
+                #div className: "content-action",
+                #    button
+                #       className: 'btn btn-default',
+                #       type: "button",
+                #       onClick: @displayHTML,
+                #       t 'message html display'
+                div className: 'preview',
+                    p dangerouslySetInnerHTML: { __html: @props.rich }
+                    #p null, @props.text
+
+    _initFrame: (type) ->
         panel = document.querySelector "#panels > .panel:nth-of-type(2)"
-        if panel? and not @state.composing
+        if panel? and not @props.composing
             panel.scrollTop = 0
         # - resize the frame to the height of its content
         # - if images are not displayed, create the function to display them

    componentWillReceiveProps: (props) ->
        state =
            active: props.active
        if props.message.get('id') isnt @props.message.get('id')
            @_markRead @props.message
            state.messageDisplayHTML   = props.settings.get 'messageDisplayHTML'

                    ]
                    rules.forEach (rule, idx) ->
                        styleEl.sheet.insertRule rule, idx
                    doc.body.innerHTML = @props.html
                    updateHeight = ->
                        rect = doc.body.getBoundingClientRect()
                        frame.style.height = "#{rect.height + 80}px"
                    updateHeight()
                    doc.body.addEventListener 'load', updateHeight, true
                else
                    # try to display text only
                    @setState messageDisplayHTML: false

            if type is 'mount'
                frame.addEventListener 'load', loadContent
            else
                loadContent()

    componentDidMount: ->
        @_initFrame('mount')

    componentDidUpdate: ->
        @_initFrame('update')

    displayImages: (event) ->
        event.preventDefault()
        @setState messageDisplayImages: true

    displayHTML: (event) ->
        event.preventDefault()
        @setState messageDisplayHTML: true
