/*
 * @ngdoc module
 * @name material.components.backdrop
 * @description Backdrop
 */

/**
 * @ngdoc directive
 * @name mdBackdrop
 * @module material.components.backdrop
 *
 * @restrict E
 *
 * @description
 * `<md-backdrop>` is a backdrop element used by other components, such as dialog and bottom sheet.
 * Apply class `opaque` to make the backdrop use the theme backdrop color.
 *
 */

angular
  .module('material.components.backdrop', ['material.core'])
  .directive('mdBackdrop', function BackdropDirective($mdTheming, $animate, $rootElement, $window, $log, $$rAF, $document) {
    var ERROR_CSS_POSITION = "<md-backdrop> may not work properly in a scrolled, static-positioned parent container.";

    return {
        restrict: 'E',
        link: postLink
      };

    function postLink(scope, element, attrs) {

        // If body scrolling has been disabled using mdUtil.disableBodyScroll(),
        // adjust the 'backdrop' height to account for the fixed 'body' top offset
        var body = $window.getComputedStyle($document[0].body);
        if ( body.position == 'fixed') {
          var hViewport = parseInt(body.height,10) + Math.abs(parseInt(body.top,10));
          element.css({
            height : hViewport + 'px'
          });
        }

      // backdrop may be outside the $rootElement, tell ngAnimate to animate regardless
      if( $animate.pin ) $animate.pin(element,$rootElement);

      $$rAF(function(){

        // Often $animate.enter() is used to append the backDrop element
        // so let's wait until $animate is done...
        var parent = element.parent()[0];
        if ( parent ) {
          var styles = $window.getComputedStyle(parent);
          if (styles.position == 'static') {
            // backdrop uses position:absolute and will not work properly with parent position:static (default)
            $log.warn( ERROR_CSS_POSITION );
          }
        }

        $mdTheming.inherit(element, element.parent());
      });

    }

  });
