angular.module('vision').directive 'autoScroll', ($compile) ->

  getSpinner = (scope) ->
    compile = $compile '''<div class="vision-loading-spinner
      layout-row layout-align-center-center">
        <md-progress-circular md-diameter="70" md-mode="indeterminate">
        </md-progress-circular>
      </div>'''
    return compile scope

  scope:
    autoScroll: '<'
    by: '<'
    limit: '='
  link: (scope, element, attrs) ->

    spinner = $compile('''
      <div class="layout-row layout-align-center-center flex-100" style="height:80px" ng-if='autoScroll.length > limit'>
        <md-progress-circular md-diameter="50" md-mode="indeterminate">
        </md-progress-circular>
      </div>
    ''')(scope)

    element.append spinner

    scope.limit ?= 10
    scope.by    ?= 10

    scope.limit = _.toNumber scope.limit
    scope.by = _.toNumber scope.by

    element.on 'scroll', _.debounce ->
      scrollHeight = element.get(0).scrollHeight
      scrollTop = element.scrollTop()
      height = element.height()
      if scrollTop + height + 100 >= scrollHeight
        scope.$apply -> scope.limit = scope.limit + scope.by
    , 500