(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, Features, CookieService) {
    var namespace = $routeParams.namespace;
    var name = $routeParams.name;
    var imageid = $routeParams.image;

    $scope.imageSecurityCounter = 0;
    $scope.imagePackageCounter = 0;
    $scope.newUIExperiment = CookieService.get('quay.exp-new-sec-layout') == 'true';

    $scope.options = {
      'vulnFilter': ''
    };

    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.loadImageSecurity = function() {
      if (!Features.SECURITY_SCANNER) { return; }
      $scope.imageSecurityCounter++;
    };

    $scope.loadImagePackages = function() {
      if (!Features.SECURITY_SCANNER) { return; }
      $scope.imagePackageCounter++;
    };

    $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);
    };
  }
})();