angular.module("teamRoster", [])
    .directive('teamRoster', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                game: '=',
                team: '=',
                playerSelection: '=',
                rosterLabel: '=',
                toggleAllPlayers: '&',
                togglePlayerSelection: '&'
            },
            template: '<div class="team-game-view-roster text-center">' + 
                        '<p class="players-label">{{rosterLabel}}</p>' +
                        '<div class="logo-container text-center">' +
                            '<img src="{{team.logoSrc}}" class="team-logo" alt="team logo">' +
                        '</div>' +
                        '<ul class="nav nav-pills">' + 
                            '<li ng-click="toggleAllPlayers()" ng-class="{active: playerSelection.isAll == true}"><a href="" ng-style="getActiveStyle(playerSelection.isAll == true)">All</a></li>' +
                            '<li ng-repeat="player in team.gameRoster" ng-click="handlePlayerClick($event, player);blurMe($event)" ng-class="{active: playerInSelection(player) == true}" ><a ng-style="getActiveStyle(playerInSelection(player) == true)">{{player.jerseyNum}}</a></li>' + 
                        '</ul>' +
                    '</div>',
            controller: function ($scope) {
                $scope.blurMe = function ($event) {
                  $event.target.blur();
                }

                $scope.getActiveStyle = function (getStyle) {
                    var returnStyle = {};

                    if (typeof $scope.team !== 'undefined') {
                        if (getStyle == true) {
                            returnStyle['background-color'] = '#'+ $scope.team.homePrimaryColor;
                            returnStyle['color'] = '#FFFFFF';
                            returnStyle['border-color'] = '#'+ $scope.team.homeSecondaryColor;
                        } else {
                            returnStyle['color'] = '#'+ $scope.team.homePrimaryColor;
                        }
                    }

                    return returnStyle;
                }

                $scope.handlePlayerClick = function (event, player) {
                    //if (event.metaKey || event.ctrlKey) {
                        $scope.togglePlayerSelection({
                            player: player
                        });
                    //}

                    //else {
                    //    $scope.selectAllPlayers();

                    //    $scope.togglePlayerSelection({
                    //        player: player
                    //    });
                    //}
                }

                $scope.playerInSelection = function (player) {
                    returnFlag = false;

                    if ($scope.playerIndexInSelection(player) >= 0) {
                        returnFlag = true;
                    }

                    return returnFlag;
                }

                $scope.playerIndexInSelection = function (player) {
                    returnIndex = -1;

                    for (var i=0;i<$scope.playerSelection.set.length;i++) {
                        if (player.id == $scope.playerSelection.set[i].id) {
                            returnIndex = i;
                            break;
                        }
                    }

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