window.CMI or= {}

class CMI.Tabs

  @activate: (invoker) ->
    invoker = $(invoker) unless invoker instanceof jQuery
    return if invoker.length <= 0

    # fetch - links panel
    invokersPanel = invoker.parents('.cmi-tabs').first()
    return if invokersPanel.length <= 0

    # ensure indicator (bar below)
    @_ensureActiveIndicator(invokersPanel)

    # fetch - tabs unique name
    name = invokersPanel.data('cmi-tabs-name')
    return if name? == false || name.length <= 0

    # fetch - upcoming tab
    upcomingTab = @_tabFromInvoker invoker, name
    return if upcomingTab.length <= 0
    return if upcomingTab.hasClass 'cmi-tabs-active'

    # fetch - active tabs
    activeTabs = $("[data-cmi-tabs-name=#{name}].cmi-tabs-tab.cmi-tabs-active")

    # before triggers
    upcomingTab.trigger 'cmi.tabs.beforeShow'
    activeTabs.trigger 'cmi.tabs.beforeHide'

    # set and animate active indicator
    @_setAndAnimateActiveIndicator(invokersPanel, invoker)

    # show / hide
    upcomingTab.addClass 'cmi-tabs-active'
    activeTabs.removeClass 'cmi-tabs-active'
    invokersPanel.find('li').removeClass 'cmi-tabs-active'
    invoker.parents('li').first().addClass 'cmi-tabs-active'

    # after triggers
    upcomingTab.trigger 'cmi.tabs.show'
    activeTabs.trigger 'cmi.tabs.hide'


  # ---------------------------------------------
  # private

  # @nodoc
  @_ensureActiveIndicator: (invokersPanel) ->
    return if invokersPanel.find('.cmi-tabs-active-indicator').length > 0

    invokersPanel.append('<li class="cmi-li cmi-tabs-active-indicator"></li>')

  # @nodoc
  @_tabFromInvoker: (domElement, name) ->
    id = domElement.attr('data-cmi-tab-id').replace('#', '')
    $("[data-cmi-tabs-name=#{name}]##{id}").first()

  # @nodoc
  @_setAndAnimateActiveIndicator: (invokersPanel, invoker) ->
    indicator = invokersPanel.find('.cmi-tabs-active-indicator')

    # new position for active indicator
    position = invoker.offsetParent().position()
    left = position.left
    right = invokersPanel.innerWidth() - left - invoker.outerWidth()

    # moving direction
    indicator.removeClass('cmi-tabs-animate-right').removeClass('cmi-tabs-animate-left')
    if left < indicator.position().left
      indicator.addClass('cmi-tabs-animate-left')
    else
      indicator.addClass('cmi-tabs-animate-right')

    # animate indicator
    indicator.css({ left: "#{left}px", right: "#{right}px" })