var ThumbnailGrid = new Class({
	Implements: [Events, Options],

	options: {
	  thumbnailContainerSelector: '.asset'
	},

  initialize: function(grid, options){
		this.setOptions(options);
		this.collection = [];
		this.grid = document.id(grid);
    this.current = 0;

		this.bound = {
      click: this.click.bind(this)
		};

    this.setup().processCollection();

		this.setCurrent(this.current);
	},

  setup: function(){
    this.collection = this.grid.getElements(this.options.thumbnailContainerSelector);
    return this;
  },

  processCollection: function(){
    this.collection.each(function(thumbnail){
      this.processThumbnail(thumbnail);
    }.bind(this));
    this.fireEvent.delay(100, this, 'processCollectionComplete');
    return this;
  },

  processThumbnail: function(thumbnail){
    this.attach(thumbnail);
    this.fireEvent('processThumbnail', thumbnail);
    return this;
  },

  attach: function(element, attach){
		attach = attach != null ? attach : true;
		var method = attach ? 'addEvents' : 'removeEvents';
    element[method]({
      'click': this.bound.click
    });
  },

  detach: function(element){
    this.attach(element, false);
  },

  click: function(event){
    event.preventDefault();
    var thumbnailContainer = event.target.getParent(this.options.thumbnailContainerSelector);
    var index = this.collection.indexOf(thumbnailContainer);
		if (this.current === index) return this;
    this.setCurrent(index);
		this.fireEvent('click', index);
    return this;
  },

  setCurrent: function(index){
    this.collection[this.current].removeClass('current');
    this.collection[index].addClass('current');
    this.current = index;
		return this;
  }

});