(function() {
  /**
   * Page to view the details of a single image.
   */
  angular.module('quayPages').config(['pages', function(pages) {
    pages.create('image-view', 'image-view.html', ImageViewCtrl, {
      'newLayout': true,
      'title': '{{ image.id }}',
      'description': 'Image {{ image.id }}'
    })
  }]);

  function ImageViewCtrl($scope, $routeParams, $rootScope, $timeout, ApiService, ImageMetadataService) {
    var namespace = $routeParams.namespace;
    var name = $routeParams.name;
    var imageid = $routeParams.image;

    var loadImage = function() {
      var params = {
        'repository': namespace + '/' + name,
        'image_id': imageid
      };

      $scope.imageResource = ApiService.getImageAsResource(params).get(function(image) {
        $scope.image = image;
        $scope.reversedHistory = image.history.reverse();
      });
    };

    var loadRepository = function() {
      var params = {
        'repository': namespace + '/' + name
      };

      $scope.repositoryResource = ApiService.getRepoAsResource(params).get(function(repo) {
        $scope.repository = repo;
      });
    };

    loadImage();
    loadRepository();

    $scope.downloadChanges = function() {
      if ($scope.changesResource) { return; }

      var params = {
        'repository': namespace + '/' + name,
        'image_id': imageid
      };

      $scope.changesResource = ApiService.getImageChangesAsResource(params).get(function(changes) {
        var combinedChanges = [];
        var addCombinedChanges = function(c, kind) {
          for (var i = 0;  i < c.length; ++i) {
            combinedChanges.push({
              'kind': kind,
              'file': c[i]
            });
          }
        };

        addCombinedChanges(changes.added, 'added');
        addCombinedChanges(changes.removed, 'removed');
        addCombinedChanges(changes.changed, 'changed');

        $scope.combinedChanges = combinedChanges;
        $scope.imageChanges = changes;
        $scope.initializeTree();
      });
    };

    $scope.initializeTree = function() {
      if ($scope.tree || !$scope.combinedChanges.length) { return; }

      $scope.tree = new ImageFileChangeTree($scope.image, $scope.combinedChanges);
      $timeout(function() {
        $scope.tree.draw('changes-tree-container');
      }, 100);
    };
  }
})();