rcmEqualPanelHeights.coffee

app = angular.module "rcm"

###
  Equalize panel heights inside the info section.
  Example usage:

  <tabset>
    <tab rcm-equal-panel-heights>
    </tab>
  </tabset>
###
app.directive "rcmEqualPanelHeights", [
  "$document", "$timeout", ($document, $timeout) ->
    restrict: "A"

    link: (scope, element) ->

      equalizeHeights = ->
        $activeTab = $document.find(".tab-pane:visible")

        # XXX this should work for more than just info. the equal heights that used to be there worked across rows. See the old code
        # iterate through all rows with panels insite info section
        $activeTab.find(".info-section .row-fluid").each ->
          # find panels
          $panels = $(this).find(".panel")

          # grab the max panel height for the current row
          heights = $panels.map -> $(this).height()
          equalHeight = Math.max.apply(null, heights)

          # set the `min-height` for the all panels in the row
          $panels.each -> $(this).css("min-height", equalHeight)

      # equalize on tab activate
      elementScope = element.isolateScope()
      unregister = elementScope.$watch "active", (active) ->
        return unless active

        # wait some time until the tab is visible
        $timeout(equalizeHeights, 10)

        # all panels are equal now
        # unregister the watcher to save resources
        unregister()
]