app.pageInitFuncs.watchlistTabs = ->

# CALL FLOW:
# new tabLoader({
#    tabContainer: SELECTOR,
#    tab: TABSELECTOR,
#    success: ajaxSuccessCallback
# })
#   --> tabLoader.init()
#     --> $(SELECTOR TABSELECTOR).each( on-click: tabClickHandler )
# tabClickHandler
#   --> ajax call
#     --> success: ajaxSuccessCallback(data)
#
#
# tabLoader options:
#   tabContainer:     selector for element containing the tabs
#   tab:              selector for all tabs
#   contentContainer: selector for element to load content into (will destory existing contents)
#   success:          callback for ajax success, containing the resulting data/html
#                       success: function(tabLoader, data){ //do something }
#   error:            callback for ajax error, containing the resulting xhr and err
#                       error: function(tabLoader, xhr, xhrStatus, xhrErrString){ //do something }
#   complete:         callback after success or error, always called at end of ajax
#                       complete: function(tabLoader){ //do something }
  tabLoader = (options)->
    self = this
    @options = options
    @selector = options.tabContainer || '.ajax-tabs'
    @childSelector = options.tab || '.tab'
    @childSelector = @selector + ' ' + @childSelector
    @contentSelector = options.contentContainer || '.ajax-tabs-content'
    @loadingDiv = $ '<div class="loader-round"></div>'

    # setup eventHandlers which will trigger the ajaxRequest
    @init = ->
      $(@childSelector).each self.attachHandlers;
      self

    @attachHandlers = ->
      $(this).on 'click', self.tabClickHandler

    # click event: call ajax
    # note: "@" will be element clicked
    @tabClickHandler = (e) ->
      e.preventDefault()
      if self.preventCollision 1
        self.activeElement = @
        if typeof self.options.tabClick == 'function'
          self.options.tabClick self
        self.ajaxRequest @

    # build and send ajax, attach callback handlers
    @ajaxRequest = (element) ->
      $.ajax
        type    : 'GET'
        url     : $(element).data 'href'
        cache   : false
        dataType: 'json'
        success : self.ajaxSuccess
        error   : self.ajaxError

    # success: load the data
    @ajaxSuccess = (data) ->
      if typeof self.options.success == 'function'
        self.options.success self, data
      self.ajaxComplete()

    # error: cleanup
    @ajaxError = (xhr, status, errStr) ->
      if typeof self.options.error == 'function'
        self.options.error self, xhr, status, errStr
      self.ajaxComplete()

    # final cleanup
    @ajaxComplete = ->
      if typeof self.options.complete == 'function'
        self.options.complete self
      self.activeElement = null
      self.preventCollision 0


    @preventCollision = (status) ->
      # 1: begin, 0: end
      if status
        if !$(@selector).prop 'disabled'
          $(@selector).prop 'disabled', true
          $(@childSelector).css 'cursor','wait'
          $(@contentSelector).prepend @loadingDiv

          return true
      else
        $(@selector).removeProp 'disabled'
        $(@childSelector).css 'cursor',''
        $(@loadingDiv).remove()

      return false

    @init()

  jscrollCleanup = (tabLoader) ->
  # workaround for known jscroll bug: https://github.com/pklauzinski/jscroll/issues/77
    $(tabLoader.contentSelector)
      .unbind '.jscroll'
      .removeData 'jscroll'

  loadContent = (tabLoader, data) ->
    if data.replaceContent
      jscrollCleanup tabLoader

      # replaces targeted content (#watchlist-list)
      contentSelector = data.replaceContent.selector || tabLoader.contentSelector
      $(contentSelector).html data.replaceContent.content

      # show the watchlist guide if no results
      if !data.count
        $('.guide').show()

      # update the total on the tabs
      $(tabLoader.activeElement).closest('.count').html data.count

      # reveal lot images
      if ( typeof revealImages == 'function' )
        revealImages $('.vehicle-cards-content')
      else
        $(contentSelector + '.picture-wrap img').opacity 1

      app.pageInitFuncs.lazyLoad();
      $('.lazyload-next').hide();

      # change active tab
      $(tabLoader.childSelector).removeClass 'active'
      $(tabLoader.activeElement).addClass 'active'

  new tabLoader
    tabContainer: '.watchlist-tab-panel'
    contentContainer: '#watchlist-list'
    success: loadContent