function MdWhiteframeDirective($log) {
  var DISABLE_DP = -1;
  var MIN_DP = 1;
  var MAX_DP = 24;
  var DEFAULT_DP = 4;

  return {
    link: postLink
  };

  function postLink(scope, element, attr) {
    var oldClass = '';

    attr.$observe('mdWhiteframe', function(elevation) {
      elevation = parseInt(elevation, 10) || DEFAULT_DP;

      if (elevation != DISABLE_DP && (elevation > MAX_DP || elevation < MIN_DP)) {
        $log.warn('md-whiteframe attribute value is invalid. It should be a number between ' + MIN_DP + ' and ' + MAX_DP, element[0]);
        elevation = DEFAULT_DP;
      }

      var newClass = elevation == DISABLE_DP ? '' : 'md-whiteframe-' + elevation + 'dp';
      attr.$updateClass(newClass, oldClass);
      oldClass = newClass;
    });
  }
}
@ngdoc directive
@module material.components.whiteframe
@name mdWhiteframe

@description
The md-whiteframe directive allows you to apply an elevation shadow to an element.

The attribute values needs to be a number between 1 and 24 or -1.
When set to -1 no style is applied.

### Notes
- If there is no value specified it defaults to 4dp.
- If the value is not valid it defaults to 4dp.
@usage
<hljs lang="html">
<div md-whiteframe="3">
  <span>Elevation of 3dp</span>
</div>
</hljs>

<hljs lang="html">
<div md-whiteframe="-1">
  <span>No elevation shadow applied</span>
</div>
</hljs>

<hljs lang="html">
<div ng-init="elevation = 5" md-whiteframe="{{elevation}}">
  <span>Elevation of 5dp with an interpolated value</span>
</div>
</hljs>