/src/views/filmstripview.js

define([
  'underscore',
  'backbone',
  'lib/template',
  
  'views/listview',
  'views/sitesingleview'
], function (
  util,
  Backbone,
  template, 
  
  ListView,
  SiteSingleView
) {
  var superproto = ListView.prototype;
  var FilmstripView = ListView.extend({
    className: 'filmstrip',
    itemSize: 160, /* 150px + 10px padding */
    template: template('<ul class="menu"></ul>'),
    
    initialize: function (options) {
      options = options || {};
      util.defaults(options, {
        view: SiteSingleView,
        target: '.menu'
      });

      // Create a curried factory for views that makes sure their wrapping
      // element is an "li".
      this.createView = util.bind(this.createView, this, { tagName: 'li' });
      $(this.el).html(this.template());
      // Run superconstructor to bind events.
      superproto.initialize.call(this, options);
      
      var render = this.render;
      this.collection
        .bind('add', render, this)
        .bind('reset', render, this)
        .bind('remove', render, this);
    },
    
    resetViews: function (collection) {
      $(this.target).html('');
      collection.each(function (model, i) {
        setTimeout(util.bind(this.addView, this, model), i * 30);
      }, this);
    },
    
    render: function () {
      this.$('.menu').css({
        width: (this.itemSize * this.collection.length)
      });
      return this;
    }
  });
  
  return FilmstripView;
});