var ExpandingBoxes = new Class({
	
	Implements: [Options],
	
	options: {
		bigHeight: 190,
		bigWidth: 310,
		smallHeight: 55,
		smallWidth: 85
	},
	
	initialize: function(container, grid, options) {
		this.setOptions(options);
		boxes = container.getElements('.box');
		summaries = container.getElements('p');
		
		var oHeight = boxes[0].getStyle('height');
		var oWidth = boxes[0].getStyle('width');
		
		this.revealOne = new Fx.Preset(Fx.Presets.Unique, [{opacity:0}, {opacity:1}]);
		this.showAll = new Fx.Preset(Fx.Presets.All, {opacity:1});
		this.originalSize = new Fx.Preset(Fx.Presets.All, {height: oHeight, width: oWidth});
		
		this.gridReveal = new Fx.Preset(Fx.Presets.Grid, [
			[{width:this.options.bigWidth}, {height:this.options.bigHeight}],
			[{width:this.options.smallWidth}, {height:this.options.smallHeight}],
			grid
		]);
	
		this.fx = new Fx.Elements.Preset([summaries, boxes], {link:'chain'});
	
		boxes.each(function(box, i) {
			box.addEvent('mouseenter', this.expand.bind(this, i));
		}, this);
		
		$(document.body).addEvent('click', function(ev) {
			container.hasChild(ev.target) || this.reset();
		}.bind(this));
	},
	
	expand: function(i) {
		this.isReset = false;
		this.fx.start([this.revealOne, this.gridReveal], i);
	},
	
	reset: function() {
		this.isReset || this.fx.start([this.showAll, this.originalSize]);
		this.isReset = true;
	}
	
});