import '../services/formationsDirCtrl';
  
  angular.module('fr.formations', ['fr.formationsDirCtrl'])
  
  .directive('formations', ['formationsDirCtrl', '$window', '$timeout', function (formationsDirCtrl, $window, $timeout) {
      return {
          scope: { lineup: '=', incidents: '=', showMissing: '=', match: '=', isProbable: '=' },
          templateUrl: '/views/ng/formations/formations.html?17',
          controllerAs: 'ctrl',
          controller: ['$scope', '$element', function ($scope, $element) {
              var ctrl = this;
              var formations = new formationsDirCtrl($scope);
              var MIN_HORIZONTAL_WIDTH = 760;
              var HEIGHT_WIDTH_RATIO = 66.67;
              var elField;
  
              this.$onInit = init;
  
              function init() {
                  setOrientation();
  
                  $timeout(afterRender, 0);
  
                  formations.init();
              }
  
              function afterRender() {
                  elField = $element.find('.field');
  
                  setBackground();
  
                  $window.onresize = function () {
                      setOrientation();
                      setBackground();
  
                      $scope.$apply();
                  };
              }
  
              function setBackground() {
                  if (ctrl.isVertical) {
                      ctrl.bgSizeX = Math.round(HEIGHT_WIDTH_RATIO * elField.height() / elField.width());
                      ctrl.bgSizeY = 100;
                  } else {
                      ctrl.bgSizeX = 100;
                      ctrl.bgSizeY = Math.round(HEIGHT_WIDTH_RATIO * elField.width() / elField.height());
                  }
              }
  
              function setOrientation() {
                  var prevOrientation = ctrl.isVertical;
  
                  var width = $element.width();
  
                  if (width >= MIN_HORIZONTAL_WIDTH) {
                      $scope.isVertical = ctrl.isVertical = false;
                  } else {
                      $scope.isVertical = ctrl.isVertical = true;
                  }
  
                  if (prevOrientation !== undefined && ctrl.isVertical !== prevOrientation) {
                      formations.init();
                  }
              }
          }],
      };
  }]);