gistfile1.txt

var esteescreen = {
  holder: null,
  proto: null,
  pollTime: 2500,
  itemIndex: 0,
  lastId: 0,
  newestItem: 0,
  tempNewest: 0,
  scrollLimit: 10000,
  isPolling: false,
  setup: function() {
    this.proto = $('.item.prototype').remove().removeClass('prototype');
    this.holder = $('#items');

    this.poll();
  },
  startPoll: function() {
    if (!this.isPolling) {
      this.isPolling = true;
      var _this = this;
      setTimeout(function() {
        _this.poll();
        },
        _this.pollTime
      );
    }
  },
  poll: function(temp) {
    var _this = this;

    $.get(
      'sec/get.php?' + (+new Date()),
      {
        limit: 1,
        newer: _this.lastId,
        order: 'ASC',
      },
      function(data) {
        try {
          data = JSON.parse(data);
          if (data.length > 0) {

            if (_this.lastId !== 0 && data[0].id !== _this.lastId) {
              _this.lastId = 0;
              _this.isPolling = false;
              _this.startPoll();
            } else {
              _this.addItem(data[0], temp).then(function() {
                _this.lastId = _this.lastId + 1;
                _this.isPolling = false;
                _this.startPoll();
              });
            }

          } else {
            _this.isPolling = false;
            _this.poll(true);
          }
        } catch (e) {
          _this.isPolling = false;
          console.error(e.message);
          _this.startPoll();
        }
      }
    ).fail(function(obj, type, msg) {
      console.error(msg);
      _this.startPoll();
    });
  },
  addItem: function(gram, temp) {
    var _this = this, d = $.Deferred(), $item = _this.proto.clone();

    $('.photo', $item).data('src', '../../sec/images/' + gram.filename);
    $('.name', $item).html(gram.first_name + ' ' + gram.last_name);
    $('.message', $item).html(gram.caption);
    $('.timestamp', $item)
      .attr('data-timestamp', gram.timestamp)
      .text(moment(parseInt(gram.timestamp, 10)).fromNow());

    _this.holder.append($item);

    _this.resetPage($item).then(
      function() {
        if (temp) {
          _this.tempNewest = gram.timestamp == _this.newestItem
            ? 0
            : gram.timestamp;
        } else {
          _this.newestItem = gram.timestamp;
        }
        _this.showItem($item).then(function() {
          d.resolve();
        });
      },
      function() {
        d.resolve();
      }
    );

    return d.promise();
  },
  showItem: function($item) {
    var _this = this,
      d = $.Deferred(),
      ph = $item.find('.photo-holder').first(),
      img = $item.find('.photo').first();

    ph.height(ph.height);

    ph.imagesLoaded().progress(function(instance, data) {}).always(function() {
      _this
        .adjustHeights()
        .then(function() {
          return _this.scrollPage($item);
        })
        .then(function() {
          $item.addClass('show');
          d.resolve();
        });
    });

    img.prop('src', img.data('src'));

    return d.promise();
  },
  adjustHeights: function() {
    var d = $.Deferred(),
      _this = this,
      items = this.holder.find('.thumbnail'),
      maxHeight = Math.max.apply(
        null,
        items
          .map(function() {
            // update timestamp while we're rooting through this garbage
            var stamp = $('.timestamp', $(this));
            stamp.text(moment(parseInt(stamp.data('timestamp'), 10)).fromNow());
            return $(this).height();
          })
          .get()
      );

    items.height(maxHeight);

    setTimeout(
      function() {
        d.resolve();
      },
      400
    );

    return d.promise();
  },
  scrollPage: function($item) {
    var d = $.Deferred();

    if (
      $item.offset().top + $item.outerHeight() - $(window).scrollTop() >
      $(window).height()
    ) {
      $('body').animate(
        {
          scrollTop: $item.offset().top + $item.outerHeight(),
        },
        {
          duration: 1500,
          easing: 'easeInOutQuad',
          complete: function() {
            d.resolve();
          },
        }
      );
    } else {
      d.resolve();
    }

    return d.promise();
  },
  resetPage: function($item) {
    var _this = this, d = $.Deferred();

    if ($item.offset().top + $item.outerHeight() > _this.scrollLimit) {
      _this.holder.animate(
        {
          opacity: 0,
        },
        {
          duration: 5000,
          complete: function() {
            _this.holder.empty();
            window.scrollTo(0, 0);
            _this.holder.css('opacity', 1);
            d.reject();
          },
        }
      );
    } else {
      d.resolve();
    }

    return d.promise();
  },
};

$(function() {
  esteescreen.setup();
});

$.extend($.easing, {
  easeOutQuad: function(x, t, b, c, d) {
    return (-c) * (t /= d) * (t - 2) + b;
  },
  easeInOutQuad: function(x, t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t + b;
    return (-c) / 2 * (--t * (t - 2) - 1) + b;
  },
});