(function() {
  var cs;

  cs = window.CS || (window.CS = {});

  cs.Data || (cs.Data = {});

  cs.Views || (cs.Views = {});

  cs.Views.ImageView = Backbone.View.extend({
    initialize: function(options) {
      _.bindAll(this);
      this.appModel = options.appModel;
      this.$el = $(this.el);
      this.$img = this.$el.find('img');
      if (cs.Data.loaded) {
        this.go();
      } else {
        this.appModel.bind('site-preloader-animation-in-complete', this.go);
      }
    },
    go: function() {
      var img, src;
      src = this.$img.data('src');
      this.$img.remove();
      img = new Image();
      img.src = src;
      this.$img = $(img);
      this.$el.append(this.$img);
      this.letImageInit();
    },
    letImageInit: function() {
      if (this.$img[0].complete) {
        this.imageLoaded();
      } else {
        this.$img.bind('load', this.imageLoaded);
      }
    },
    imageLoaded: function() {
      if (this.$el.parent().hasClass('loading')) {
        this.$el.parent().removeClass('loading');
      }
      this.$el.addClass('loaded');
      this.w = this.$img.width();
      this.h = this.$img.height();
      this.$el.css({
        width: this.w,
        height: this.h
      });
      this.$el.trigger('image-loaded', {
        width: this.w,
        height: this.h
      });
      this.$el.append("<div class=\"masked\"></div>");
      this.$(".masked").append(this.$img);
      this.$img.css({
        width: this.w,
        height: this.h
      });
      this.$(".masked").animate({
        height: this.h
      }, 700);
      this.$img.fadeTo(0, .7);
      this.$img.animate({
        opacity: 1
      }, 700, this.transitionComplete);
    },
    transitionComplete: function(e) {
      this.$el.trigger('transition-complete');
    }
  });

}).call(this);