angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).controller =
    function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {
        $scope.cards = [];
        $scope.deck = [];
        $scope.cardCols = []; // organized data
        $scope.numCols = 0;
        $scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
        $scope.sectionId = parseInt($stateParams.sectionId);
        $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
        $rootScope.currentSection = $scope.section;

        if (!UserService.isInSection($scope.sectionId)) {
            console.log('user is not enrolled in ' + $scope.sectionId);
            $state.go('addclass');
        }

        $scope.refreshColumnWidth = function() {
            avail = $window.innerWidth - 17;
            width = Math.floor(avail / Math.floor(avail / 250));
            $('.cardColumn').css({
                width: width + 'px',
                'font-size': 100 * width / 250 + '%'
            });
            $('.cardColumn .card.flashy').css({
                width: width - 12 + 'px',
                height: (width * 3 / 5) + 'px'
            });
        };

        $scope.refreshLayout = function() {
            numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));

            // check if we actually need to refresh the whole layout
            if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
            $scope.numCols = numCols;
            console.log('refreshing layout for ' + $scope.numCols + ' columns');
            $scope.cardCols = [];
            var cols = [];
            for (i = 0; i < $scope.numCols; i++) cols.push([]);
            $scope.cards.forEach(function(card, i) {
                card.colNum = i % $scope.numCols;
                cols[card.colNum].push(card);
            });
            for (i in cols) $scope.updateColRanks(cols[i]);
            console.log(cols);
            $timeout(function() {
                $scope.cardCols = cols;
                $timeout($scope.refreshColumnWidth);
            });

        };

        angular.element($window).bind('resize', $scope.refreshLayout);

        $scope.ws_host = window.location.origin.replace('http', 'ws');
        $scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
        $scope.deck_ws.onOpen(function() {
            console.log('deck ws open');
        });

        $scope.deck_ws.onMessage(function(message) {
            data = JSON.parse(message.data);
            console.log('message', data);
            card = new Flashcard(data.flashcard.id);
            if (data.event_type == 'card_pulled') {
                $scope.deck[card.id] = card;
            }
            if (data.event_type == 'card_unpulled') {
                $scope.deck[card.id] = undefined;
            }
            if (data.event_type == 'card_hidden') {
                $scope.hideCardFromGrid(card);
            }
        });

        $scope.cardInDeck = function(id) {
            return $scope.deck[id];
        };
        $scope.addCardToGrid = function(card) {
            var colNum = 0;
            var lowestCol = $scope.cardCols[0];
            var lowestColNum = 0;
            while (colNum < $scope.numCols) {
                if ($scope.cardCols[colNum].length == 0) {
                    lowestCol = $scope.cardCols[colNum];
                    break;
                } else if ($scope.cardCols[colNum].length < lowestCol.length) {
                    lowestCol = $scope.cardCols[colNum];
                    lowestColNum = colNum;
                    lowestColLen = $scope.cardCols[colNum].length;
                }
                colNum++;
            }
            console.log(card);
            $scope.cards.push(data);
            lowestCol.unshift(card);
            $scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card};
            $timeout($scope.refreshColumnWidth);

        };

        $scope.updateColRanks = function(col) {
            for (i in col)
                col[i].colRank = i;
        };
        $scope.hideCardFromGrid = function(card) {
            console.log('hiding', card);
            $scope.cardCols[card.colNum].splice(card.colRank, 1);
            $scope.updateColRanks($scope.cardCols[card.colNum]);
        };

        $http.get('/api/sections/' + $scope.sectionId + '/deck/').
            success(function(data) {
                for (i in data) $scope.deck[data[i].id] = data[i];
                console.log("got user's deck");
            }).
            error(function(err) {
                console.log('get deck failed');
            });

        $scope.$on('$destroy', function() {
            $scope.deck_ws.close();
            $rootScope.currentSection = {};
            $(document).off('keydown');
        });
    };