class Tao.SlideBox.ElementBase extends TaoComponent

  @tag 'tao-slide-box'

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

  @attribute 'autoHide', 'autoDestroy', 'modal', 'withoutPadding', type: 'boolean'

  @attribute 'triggerSelector', 'triggerTraversal'

  @attribute 'direction', default: 'btt'

  @attribute 'size'

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

    @_initSize()
    @_bind()
    @_activeChanged() if @active

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

  _initSize: ->
    sizeProperty = if @direction in ['btt', 'ttb'] then 'height' else 'width'
    size = if (size = parseFloat(@size)) < 0
      "#{$(window)[sizeProperty]() + size}px"
    else
      @size
    @wrapper.css sizeProperty, size

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

    @on 'click', '.slide-box-wrapper > .link-close', =>
      @active = false

    @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'
    @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: ->
    @_unbindAutoHideEvent() if @autoHide
    if @active
      @_bindAutoHideEvent() if @autoHide
      $('body').addClass('slide-box-active')
      @namespacedTrigger 'show'
    else
      $('body').removeClass('slide-box-active')
      @namespacedTrigger 'hide'

  _autoHideEvent: ''

  _unbindAutoHideEvent: ->
    $(document).off "#{@_autoHideEvent}.tao-slide-box-#{@taoId}"

  _bindAutoHideEvent: ->
    $(document).on "#{@_autoHideEvent}.tao-slide-box-#{@taoId}", (e) =>
      return if e.target == @ || $.contains(@, e.target) || @triggerEl?.is(e.target)
      @active = false
      @_unbindAutoHideEvent()

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

  beforeCache: ->
    @reset()
    active = false

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