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();
                }
            }
        }],
    };
}]);