initalise after ajax calls

(function($) {

  $.AnnotationsLayer = function(options) {

    jQuery.extend(true, this, {
      sidePanel:  null,
      bottomPanel:       null,
      regionController:  null,
      width:             $.DEFAULT_SETTINGS.imageView.annotationsList.width,
      parent:            null,
      stateEvents:       {},
      showList:          true,
      annotationUrls:    null,
      annotations:       [],
      commentAnnotations: 0,
      textAnnotations: 0,
      visible:        false,
      selectedAnnotation: null,
      annotationListCls: 'mirador-annotation-list'
    }, options);

    this.create();
  };


  $.AnnotationsLayer.prototype = {

    create: function() {
      var _this = this;
      var dfd = jQuery.Deferred(); 
      dfd.done( function() {
        _this.bottomPanel = new $.AnnotationBottomPanel({parent: _this});
        _this.regionController = new $.AnnotationLayerRegionController({parent: _this});
        _this.sidePanel = new $.AnnotationLayerSidePanel({parent: _this});
      });

      _this.getAnnotations(dfd);
      this.bindEvents();
    },

    get: function(prop) {
      return this[prop];
    },

    set: function(prop, value) {
      _this = this;
      this[prop] = value;
      _this.event(prop + ':set').publish(value);
    },
    
    event: function(id) {
      
      var event = id && this.stateEvents[id];

      if (!event) {

        this.callbacks = jQuery.Callbacks();

        event = {
          publish: this.callbacks.fire,
          subscribe: this.callbacks.add,
          unsubscribe: this.callbacks.remove
        };

        if (id) {
          this.stateEvents[id] = event;
        }
      }
      return event;
    },

    getAnnotations: function(dfd) {
      var _this = this;

      jQuery.each(_this.annotationUrls, function(index, url) {

        jQuery.ajax({
          url: url,
          dataType: 'json',
          async: true,

          success: function(jsonLd) {
            jQuery.each(jsonLd.resources, function(index, resource) {
              var annotation = {
                region: $.parseRegion(resource.on),
                title: null,
                content: resource.resource.full ? resource.resource.full.chars : resource.resource.chars,
                type: (resource.motivation).split(':')[1],
                id: $.genUUID()
              };          

              annotation.osdFrame = $.getOsdFrame(annotation.region);

              if (annotation.type === 'commenting') { _this.commentAnnotations++; } else { _this.textAnnotations ++; }
              _this.annotations.push(annotation);
            });
          },

          error: function() {
            console.log('Failed loading ' + uri);
          }
        });

      });
    },

    bindEvents: function() {
      var _this = this;
      
      // model events
      _this.event('visible:set').subscribe( function(value) {
        if (value === false) { _this.hide(); } else { _this.show(); }
      });
      _this.event('selectedAnnotation:set').subscribe( function(value) {
        console.log("selectedAnnotation Updated");
      });
      _this.event('annotationUrls:set').subscribe( function(value) {
        console.log("page updated");
      });
    },

    setVisible: function() {
      var _this = this;

      if (_this.get('visible') === false) {
        _this.set("visible", true);
      }  else {
        _this.set("visible", false);
      }
    },
    

    hoverAnnotationListing: function() {
      console.log('hovered listing');
    },

    append: function(item) {
      this.element.append(item);
    },

    show: function() {
      this.sidePanel.show();
      this.regionController.show();
      this.bottomPanel.show();
    },

    hide: function() {
      this.sidePanel.hide();
      this.regionController.hide();
      this.bottomPanel.hide();
    },

    render: function() {
      var _this = this; 
      var templateData = {
        annotations: this.annotations,
        annotationCount: this.annotations.length,
        imageAnnotationCount: this.commentAnnotations, // filtered
        textAnnotationCount: this.textAnnotations // filtered
      };
      // console.log(templateData);

      jQuery.each(this.annotations, function(index, annotation) {
        var elemString = '<div class="annotation" id="'+ annotation.id + '">',
        elem = jQuery(elemString)[0];

        // console.log(annotation);

        _this.parent.osd.drawer.addOverlay(elem, annotation.osdFrame);
      });
      this.bindEvents();
    }

  };

}(Mirador));