/* ========================================================================

 * Bootstrap: collapse.js v3.3.7

 * http://getbootstrap.com/javascript/#collapse

 * ========================================================================

 * Copyright 2011-2016 Twitter, Inc.

 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

 * ======================================================================== */

/* jshint latedef: false */

+function ($) {

  'use strict';

  // COLLAPSE PUBLIC CLASS DEFINITION

  // ================================

  var Collapse = function (element, options) {

    this.$element      = $(element)

    this.options       = $.extend({}, Collapse.DEFAULTS, options)

    this.$trigger      = $('[data-toggle="collapse"][href="#' + element.id + '"],' +//这是一个复合选择器   href  data-target双保险

                           '[data-toggle="collapse"][data-target="#' + element.id + '"]')

    this.transitioning = null

    if (this.options.parent) {

      this.$parent = this.getParent()//不仅返回了父元素而且还还把子元素的状态做了标记，比如谁是打开的。。。

    } else {

      this.addAriaAndCollapsedClass(this.$element, this.$trigger)

    }

    if (this.options.toggle) this.toggle()

  }

  Collapse.VERSION  = '3.3.7'

  Collapse.TRANSITION_DURATION = 350

  Collapse.DEFAULTS = {

    toggle: true

  }

  Collapse.prototype.dimension = function () {

    var hasWidth = this.$element.hasClass('width')

    return hasWidth ? 'width' : 'height'

  }

  Collapse.prototype.show = function () {

    if (this.transitioning || this.$element.hasClass('in')) return

    var activesData

    var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')//得到active的

    if (actives && actives.length) {

      activesData = actives.data('bs.collapse')

      if (activesData && activesData.transitioning) return

    }

    var startEvent = $.Event('show.bs.collapse')//在这里触发这个事件   （未显示之前）

    this.$element.trigger(startEvent)

    if (startEvent.isDefaultPrevented()) return

    if (actives && actives.length) {

      Plugin.call(actives, 'hide')//隐藏

      activesData || actives.data('bs.collapse', null)//activesData  没有的话，，，就设为null  ？？？？

    }

    var dimension = this.dimension()

    this.$element

      .removeClass('collapse')

      .addClass('collapsing')[dimension](0)

      .attr('aria-expanded', true)

    this.$trigger

      .removeClass('collapsed')

      .attr('aria-expanded', true)

    this.transitioning = 1

    var complete = function () {

      this.$element

        .removeClass('collapsing')

        .addClass('collapse in')[dimension]('')

      this.transitioning = 0

      this.$element

        .trigger('shown.bs.collapse')

    }

    if (!$.support.transition) return complete.call(this)

    var scrollSize = $.camelCase(['scroll', dimension].join('-'))

    this.$element

      .one('bsTransitionEnd', $.proxy(complete, this))

      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])//在最后通过取scrollHeight值，设置height（因为已经设置了css过度，）这里才是真正核心的功能，得到了隐藏元素的高度scrollHeight

  }

  Collapse.prototype.hide = function () {

    if (this.transitioning || !this.$element.hasClass('in')) return

    var startEvent = $.Event('hide.bs.collapse')

    this.$element.trigger(startEvent)

    if (startEvent.isDefaultPrevented()) return

    var dimension = this.dimension()

    this.$element[dimension](this.$element[dimension]())[0].offsetHeight//在style里面设置高度（为过度需要）

    this.$element

      .addClass('collapsing')//添加css过度类

      .removeClass('collapse in')

      .attr('aria-expanded', false)

    this.$trigger

      .addClass('collapsed')

      .attr('aria-expanded', false)

    this.transitioning = 1

    var complete = function () {//完成后调用的方法，处理收尾工作，1:把没有用的去掉，2：触发hidden.bs.collapse（隐藏后回调事件）   感觉很科学的样子

      this.transitioning = 0

      this.$element

        .removeClass('collapsing')

        .addClass('collapse')

        .trigger('hidden.bs.collapse')

    }

    if (!$.support.transition) return complete.call(this)

    this.$element

      [dimension](0)//style里面的height设置为0，触发过度效果

      .one('bsTransitionEnd', $.proxy(complete, this))

      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)

  }

  Collapse.prototype.toggle = function () {

    this[this.$element.hasClass('in') ? 'hide' : 'show']()//toggle做的很地道啊

  }

  Collapse.prototype.getParent = function () {

    return $(this.options.parent)

      .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')//获取子元素

      .each($.proxy(function (i, element) {//对子元素进行。。。。

        var $element = $(element)

        this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)

      }, this))

      .end()

  }

  Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {//0:靶子元素，1：触发的元素（a）

    var isOpen = $element.hasClass('in')

    $element.attr('aria-expanded', isOpen)//expanded(扩大的，expand的过去式和过去分词)     记号

    $trigger

      .toggleClass('collapsed', !isOpen)

      .attr('aria-expanded', isOpen)

  }

  function getTargetFromTrigger($trigger) {//获取靶子元素

    var href

    var target = $trigger.attr('data-target')

      || (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7       #号前面的东西替换成''.     

    return $(target)

  }

  // COLLAPSE PLUGIN DEFINITION

  // ==========================

  function Plugin(option) {

    return this.each(function () {

      var $this   = $(this)

      var data    = $this.data('bs.collapse')

      var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)

      if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false

      if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))

      if (typeof option == 'string') data[option]()

    })

  }

  var old = $.fn.collapse

  $.fn.collapse             = Plugin

  $.fn.collapse.Constructor = Collapse

  // COLLAPSE NO CONFLICT

  // ====================

  $.fn.collapse.noConflict = function () {

    $.fn.collapse = old

    return this

  }

  // COLLAPSE DATA-API

  // =================

 $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {

    var $this   = $(this)

    if (!$this.attr('data-target')) e.preventDefault()

    var $target = getTargetFromTrigger($this)//

    var data    = $target.data('bs.collapse')

    var option  = data ? 'toggle' : $this.data()

    Plugin.call($target, option)

  })

  /**$('[data-toggle="collapse"]').collapse('toggle');**/

}(jQuery);