chat.coffee

#= require 'module'
$ = jQuery

@module 'Hypo', ->
  class @Chat

    constructor: (@opt) ->
      @$container = $(@opt.container)
      @animation = new Hypo.ChatAnimation(container: @$container)

    registerEvents: ->
      @$container.on 'click', '#close-chat-btn', =>
        @$container.fadeOut(100)
        false

      $('#open-chat-btn').on 'click', =>
        @$container.fadeIn(100)
        false

      @$container.on 'submit', 'form', (e) =>
        input = $(e.target).find('input').last().val()
        @answer(input)
        @draw()

      @$container.on 'click', '.responses a', (e) =>
        @disableButtons()

        @answer(e.currentTarget.innerText)
        @writing()
        @reaction(e.target)
        @neextQuestion(e.target)
        @hideWriting()
        @draw()
        false

      @$container.on 'click', '.dialog-confirm .confirm-responses .btn-no', (e) =>
        $(e.target).closest('div').parent().fadeOut(100)

      @$container.on 'click', '.sent.message.item p', (e) =>
        @confirmDialog(e.target)

    draw: ->
      @animation.draw()

    confirmDialog: (target) ->
      answer_id = $(target).data('session-answer-id')
      html = @confirmTemplate(answer_id: answer_id)
      @animation.queue(html)

    reaction: (target) ->
      reaction = $(target).data('reaction')
      html = @questionTemplate(name: reaction) if reaction
      @animation.queue(html, 500)

    answer: (text) ->
      html = @answerTemplate(name: text) if text
      @animation.queue(html)

    neextQuestion: (target) =>
      @animation.queueAjax(target, 1000)

    writing: ->
      @animation.queueFx(=>
        @$container.find('#typing-indicator').fadeIn()
      )

    disableButtons: ->
      @$container.find('.responses a').addClass('disabled')

    hideWriting: ->
      @animation.queueFx(=>
        @$container.find('#typing-indicator').fadeOut()
      )

    questionTemplate: (question) ->
      HandlebarsTemplates['chat/question'](question)

    answerTemplate: (answer) ->
      HandlebarsTemplates['chat/answer'](answer)

    confirmTemplate: (answer) ->
      HandlebarsTemplates['chat/confirm'](answer)

confirm.hbs

<div class="dialog-confirm received message item" title="Change this answer?" style="display:none">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This and later answers will be deleted! Are you sure?</p>
  <div class="confirm-responses">
    <a class="btn btn-yes" data-session-answer-id={{answer_id}}>Yes</a>
    <a class="btn btn-no">No</a>
  </div>
</div>