/**
 * @fileoverview This file provides the "catalog" directive. That directive is
 * used to create the catalog tree in the page. It is based on the
 * "ngeo-layertree" directive. And it relies on c2cgeoportal's "themes" web
 * service.
 *
 * Example:
 *
 * <app-catalog app-catalog-map="::mainCtrl.map"></app-catalog>
 *
 * Note the use of the one-time binding operator (::) in the map expression.
 * One-time binding is used because we know the map is not going to change
 * during the lifetime of the application.
 */
goog.provide('app.catalogDirective');

goog.require('app');
goog.require('app.GetLayerForCatalogNode');
goog.require('app.Themes');
goog.require('ngeo.layertreeDirective');


/**
 * @return {angular.Directive} The Directive Definition Object.
 */
app.catalogDirective = function() {
  return {
    restrict: 'E',
    scope: {
      'map': '=appCatalogMap',
      'currentTheme': '=appCatalogCurrenttheme'
    },
    controller: 'AppCatalogController',
    controllerAs: 'catalogCtrl',
    bindToController: true,
    template: '<div ngeo-layertree="catalogCtrl.tree" ' +
        'ngeo-layertree-map="catalogCtrl.map" ' +
        'ngeo-layertree-nodelayer="catalogCtrl.getLayer(node)" ' +
        'class="themes-switcher collapse in"></div>'
  };
};


app.module.directive('appCatalog', app.catalogDirective);



/**
 * @constructor
 * @param {angular.Scope} $scope Scope.
 * @param {app.Themes} appThemes Themes service.
 * @param {app.GetLayerForCatalogNode} appGetLayerForCatalogNode Function to
 *     create layers from catalog nodes.
 * @export
 * @ngInject
 */
app.CatalogController = function($scope, appThemes,
    appGetLayerForCatalogNode) {

  $scope.$watch(goog.bind(function() {
    return this['currentTheme'];
  }, this), goog.bind(function() {
    appThemes.getThemeObject(this['currentTheme']).then(goog.bind(
        /**
         * @param {Object} tree Tree object for the theme.
         */
        function(tree) {
          this['tree'] = tree;
        }, this));
  }, this));

  /**
   * @type {app.GetLayerForCatalogNode}
   * @private
   */
  this.getLayerFunc_ = appGetLayerForCatalogNode;
};


/**
 * Return the OpenLayers layer for this node. `null` is returned if the node
 * is not a leaf.
 * @param {Object} node Tree node.
 * @return {ol.layer.Layer} The OpenLayers layer.
 * @export
 */
app.CatalogController.prototype.getLayer = function(node) {
  var layer = this.getLayerFunc_(node);
  return layer;
};


/**
 * Add or remove layer from map.
 * @param {Object} node Tree node.
 * @export
 */
app.CatalogController.prototype.toggle = function(node) {
  var layer = this.getLayerFunc_(node);
  var map = this['map'];
  if (map.getLayers().getArray().indexOf(layer) >= 0) {
    map.removeLayer(layer);
  } else {
    map.addLayer(layer);
  }
};


app.module.controller('AppCatalogController', app.CatalogController);

@@ -643,24 +643,90 @@
 p.Themes');%0A
+goog.require('app.ThemesEventType');%0Agoog.require('goog.events');%0A
 goog.require
@@ -1740,182 +1740,263 @@
 %0A%0A  
-$scope.$watch(goog.bind(function() %7B%0A    return this%5B'currentTheme'%5D;%0A  %7D, this), goog.bind(function() %7B%0A    appThemes.getThemeObject(this%5B'currentTheme'%5D).then(goog.bind(%0A  
+/**%0A   * @type %7Bapp.Themes%7D%0A   * @private%0A   */%0A  this.appThemes_ = appThemes;%0A%0A  /**%0A   * @type %7Bapp.GetLayerForCatalogNode%7D%0A   * @private%0A   */%0A  this.getLayerFunc_ = appGetLayerForCatalogNode;%0A%0A  goog.events.listen(appThemes, app.ThemesEventType.LOAD,%0A
     
@@ -2001,18 +2001,16 @@
     /**%0A
-  
        *
@@ -2022,50 +2022,38 @@
 am %7B
-Object%7D tree Tree object for the theme.%0A  
+goog.events.Event%7D evt Event.%0A
     
@@ -2064,18 +2064,16 @@
 /%0A      
-  
 function
@@ -2073,20 +2073,19 @@
 unction(
-tree
+evt
 ) %7B%0A    
@@ -2092,179 +2092,245 @@
     
-  
 this
-%5B'tree'%5D = tree;%0A        %7D
+.setTree_();%0A      %7D, undefined
 , this)
-)
 ;
+%0A
 %0A  
-%7D, this));%0A%0A  /**%0A   * @type %7Bapp.GetLayerForCatalogNode%7D%0A   * @private
+$scope.$watch(goog.bind(function() %7B%0A    return this%5B'currentTheme'%5D;%0A  %7D, this), goog.bind(function(newVal, oldVal) %7B%0A    if (newVal !== oldVal) %7B
 %0A   
-*/%0A
+ 
   this.
-getLayerFunc_ = appGetLayerForCatalogNode;
+setTree_();%0A    %7D%0A  %7D, this));%0A
 %0A%7D;%0A
@@ -2647,24 +2647,322 @@
 layer;%0A%7D;%0A%0A%0A
+/**%0A * @private%0A */%0Aapp.CatalogController.prototype.setTree_ = function() %7B%0A  this.appThemes_.getThemeObject(this%5B'currentTheme'%5D).then(goog.bind(%0A      /**%0A       * @param %7BObject%7D tree Tree object for the theme.%0A       */%0A      function(tree) %7B%0A        this%5B'tree'%5D = tree;%0A      %7D, this));%0A%7D;%0A%0A%0A
 /**%0A * Add o

Make catalog listen to "load" events from appThemes