angular.module('fullscreenDialogApp', []).
directive('fullscreenDialog', function () {
  /**
   *  USAGE:
   *  Creates the full screen dialog
   *  <fullscreen-dialog><div class="dialog"></div></fullscreen-dialog>
   *
   *  Holds the content of the dialog
   *  <fullscreen-dialog><div class="dialog"><div class="content"></div></div></fullscreen-dialog>
   */
  return {
    controller: 'fsDialogController',
    link: fsDialogLinker,
    restrict : 'E',
    replace: true,
    transclude: true,
    scope: {
      visible: '@'
    },
    template : '<div class="dialog-container"><ng-transclude></ng-transclude></div>'
  }
  function fsDialogLinker(scope, element, attribute) {
    scope.$on('$destroy', function () {
      var bodyElement = document.getElementsByTagName("body")[0];
      bodyElement.classList.remove('noscroll');
    });
  }
}).
controller('fsDialogController', function ($scope) {
  var bodyElement = document.getElementsByTagName("body")[0];
  console.log(bodyElement);
  if($scope.visible == 'true') {
    $scope.showDialog();
  }
  else {
    $scope.hideDialog();
  }
  
  $scope.showDialog = function () {
    $scope.isPanelVisible = true;
    bodyElement.classList.add('noscroll');
  };
  $scope.hideDialog = function () {
    $scope.isPanelVisible = false;
    bodyElement.classList.remove('noscroll');
  };
});