(function() {
  var cs;

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

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

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

  cs.Views.PeopleView = Backbone.View.extend({
    initialize: function(options) {
      _.bindAll(this);
      this.appModel = options.appModel;
      this.$el = $(this.el);
      if (cs.Data.loaded) {
        this.render();
      } else {
        this.options.appModel.bind('site-preloader-animation-in-complete', this.render);
      }
    },
    getInterview: function() {
      $.ajax({
        url: "" + cs.Data.index,
        data: {
          slug: 'staff',
          json: 'get_tag_posts',
          count: 1,
          custom_fields: 'people-page-image'
        },
        dataType: 'json',
        success: this.hazInterviewData
      });
    },
    hazInterviewData: function(data) {
      var $img, imageUrl, url, view;
      this.interview = new Backbone.Model();
      this.interview.set(data.posts[0]);
      url = this.interview.get('url').replace(window.location.origin, '');
      imageUrl = "" + cs.Data.templateDir + "/attachment-redirect.php?attachment_id=" + (this.interview.get('custom_fields')['people-page-image'][0]);
      $img = $("    <a href=\"" + url + "\" class=\"img\">      <img data-src=\"" + imageUrl + "\" src=\"" + cs.Data.blankImage + "\"/>    </a>    ");
      this.$('.red').append($img);
      view = new cs.Views.ImageView({
        el: $img,
        appModel: this.options.appModel
      });
      $img.bind('image-loaded', this.interviewImageLoaded);
      $img.bind('transition-complete', this.interviewImageLoaded);
    },
    interviewImageLoaded: function(e, data) {
      var url;
      this.$('.red').removeClass('loading');
      this.$('.red').animate({
        backgroundColor: '#d62828'
      }, 300);
      url = this.interview.get('url').replace(window.location.origin, '');
      this.$('.red').append("    <h4 class=\"title\">&nbsp;</h4>    <h3 class=\"name\"><a href=\"" + url + "\">" + (this.interview.get('title_plain')) + "</a></h3>    <div class=\"excerpt\">      " + (this.interview.get('excerpt')) + "      <a href=\"" + url + "\" class=\"go read-more\">read more</a>    </div>    ");
    },
    render: function() {
      var _this = this;
      cs.Data.people = _.shuffle(cs.Data.people);
      _.each(cs.Data.people, function(person) {
        var $el, view;
        $el = $("      <div class=\"person\">        <div class=\"image loading\">          <div class=\"img\">            <img data-src=\"" + cs.Data.templateDir + "/people/" + person.image + "\" src=\"" + cs.Data.blankImage + "\"/>          </div>        </div>        <p>          <span class=\"name\">" + person.name + "</span>          <span class=\"role\">" + person.role + "</span>              <span class=\"location\">" + person.location + "</span>            </p>      </div>      ");
        _this.$el.append($el);
        view = new cs.Views["ImageView"]({
          el: $el.find('.img'),
          appModel: _this.options.appModel
        });
      });
      this.$el.append("<div class=\"clearfix\"></div>");
      this.getInterview();
    }
  });

}).call(this);