class Tao.Dialog.Element extends TaoComponent

@tag 'tao-dialog'

@attribute 'active', type: 'boolean', observe: true

@attribute 'modal', 'withCloseButton', 'autoDestroy', 'autoActivate', type: 'boolean'

@attribute 'closeSelector', default: '.remove-dialog'

@attribute 'triggerSelector', 'triggerTraversal', 'size'

_connected: ->
  @wrapper = @jq.find('.tao-dialog-wrapper')
  @content = @jq.find('.tao-dialog-content')
  @triggerEl = if @triggerTraversal && @triggerSelector
    @jq[@triggerTraversal]?(@triggerSelector)
  else if @triggerSelector
    $ @triggerSelector

  @_initSize()
  @_bind()

  if @autoActivate
    @reflow()
    @active = true
  else if @active
    @_activeChanged()

_disconnected: ->
  @triggerEl?.off ".tao-slide-box-#{@taoId}"
  @off()

_initSize: ->
  if _.isNumber(size = parseFloat @size)
    @wrapper.width size

_bind: ->
  @on 'click', (e) =>
    @active = false if @withCloseButton && e.target == @
    null

  @on 'click', ".tao-dialog-wrapper > .link-close, #{@closeSelector}", =>
    @active = false
    null

  @on 'transitionend', @_afterTransition.bind(@)

  if @triggerEl && @triggerEl.length > 0
    @triggerEl.on "click.tao-slide-box-#{@taoId}", (e) =>
      @active = true

_beforeActiveChanged: (active) ->
  if active
    @_prepareShowTransition()
  else
    @_prepareHideTransition()
  null

_prepareShowTransition: ->
  @namespacedTrigger 'beforeShow'
  @content.css
    maxHeight: $(window).height() - 40
  @jq.show()
  @reflow()
  @_duringTransition = 'show'

_prepareHideTransition: ->
  @namespacedTrigger 'beforeHide'
  if @jq.is(':visible') && @wrapper.css('opacity') * 1 > 0
    @_duringTransition = 'hide'
  else
    @reset()

_afterTransition: (e) ->
  return unless $(e.target).is(@wrapper) && e.originalEvent.propertyName == 'opacity'
  if @_duringTransition == 'show'
    @namespacedTrigger 'afterShow'
  else if @_duringTransition == 'hide'
    @reset()
    @namespacedTrigger 'afterHide'
  @_duringTransition = false
  null

_activeChanged: ->
  if @active
    $('body').addClass('tao-dialog-active')
    @namespacedTrigger 'show'
  else
    $('body').removeClass('tao-dialog-active')
    @namespacedTrigger 'hide'

setContent: (content) ->
  @content.empty().append content
  @

remove: ->
  @namespacedTrigger 'beforeRemove'
  @jq.remove()
  @namespacedTrigger 'remove'
  @

reset: ->
  if @autoDestroy
    @remove()
  else
    @jq.hide()
  @

beforeCache: ->
  @reset()
  active = false

TaoComponent.register Tao.Dialog.Element