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');
          });
      };