angular.module("gameHeaderWithPeriodControl", [])
    .directive('gameHeaderWithPeriodControl', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                slId: '=',
                game: '=',
                selectedPeriod: '=',
                selectPeriod: '&',
                manpowerSituations: '=',
                selectManpowerSituation: '&'
            },
            template: '<div id="{{slId}}" class="game-header-with-period-control clearfix">' +
                        //'<div class="team-identification text-center">' +
                        //    '<p class="team-name left">{{game.visitors.location}} {{game.visitors.name}}</p>' +
                        //    '<div class="img-container">' +
                        //        '<img src="{{game.visitors.logoSrc}}" class="team-logo" alt="team logo">' +
                        //    '</div>' +
                        //'</div>' +
                        '<div class="game-identification text-center">' +
                            '<p class="game-date"><small>{{game.date}}</small></p>' +
                            //'<p class="vs-text">VS</p>' +
                            '<img  src="{{game.league.logoSrc}}" class="league-logo" alt="league logo">' +
                            '<p class="period-label">Period</p>' +
                            '<div class="control-section" class="period-filter-control-section">' +
                                '<div class="periodfilter-control" class="text-center">' +
                                    '<div class="btn-group" role="group" id="periodfilter-control">' +
                                        '<button type="radio" class="btn btn-primary" ng-click="selectPeriodInternal(\'all\');blurMe($event)" ng-class="{active: selectedPeriod==\'all\'}">All</button>' +
                                        '<button ng-repeat="period in game.periods" type="radio" class="btn btn-primary" ng-click="selectPeriodInternal(period.id);blurMe($event)" ng-class="{active: selectedPeriod==period.id}">{{period.id}}</button>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                            '<p class="period-label">Manpower Situation</p>' +
                            '<div class="manpowersituationfilter-control" class="text-center">'+
                                '<div class="btn-group" role="group" id="manpowersituationfilter-control">'+
                                    '<button type="radio" class="btn btn-primary  " ng-click="selectManpowerSituationInternal(\'all\');blurMe($event) "ng-class="{active: manpowerSituations ==\'all\'}">All</button>'+
                                    '<button type="radio" class="btn btn-primary  " ng-click="selectManpowerSituationInternal(\'evenStrength\');blurMe($event) "ng-class="{active: manpowerSituations ==\'evenStrength\'}">ES</button>'+
                                    '<button type="radio" class="btn btn-primary" ng-click="selectManpowerSituationInternal(\'powerPlay\');blurMe($event) "ng-class="{active: manpowerSituations ==\'powerPlay\'}">PP</button>'+
                                    '<button type="radio" class="btn btn-primary ng-binding ng-scope"  ng-click="selectManpowerSituationInternal(\'shortHanded\');blurMe($event) "ng-class="{active: manpowerSituations ==\'shortHanded\'}">SH</button>' +
                                '</div>'+
                            '</div>'+
                        '</div>' +
                        //'<div class="team-identification text-center">' +
                        //    '<p class="team-name right">{{game.home.location}} {{game.home.name}}</p>' +
                        //    '<div class="img-container">' +
                        //        '<img src="{{game.home.logoSrc}}" class="team-logo" alt="team logo">' +
                        //    '</div>' +
                        //'</div>' +
                      '</div>',
            controller: function ($scope) {
                $scope.blurMe = function ($event) {
                  $event.target.blur();
                }

                $scope.selectPeriodInternal = function (periodId) {
                    $scope.selectPeriod({
                        periodId: periodId,
                        game: $scope.game
                    });

                }
                $scope.selectManpowerSituationInternal = function (manPowerSituation) {
                    $scope.selectManpowerSituation({
                        manPowerSituation: manPowerSituation,
                        game: $scope.game
                    });

                }
            } // end of controller
        }; // end of directoive factory
    })