/*
	Class:		OverlaySlide
	Author:		Tom Kentell
	Version:	0.1
	Date:		14/01/2010
*/

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

	options: {
		overlaySlide: '.overlay',
		parentElement: 'li',
		overlayLink: 'cancel',
		overlayTransition: Fx.Transitions.Sine.easeIn,
		slideDuration: '500'
	},

	initialize: function(options) {
		this.setOptions(options);

		// overlay
		$$(this.options.overlaySlide).each(function(overlay) {
			overlay.setStyles({display:'block'});
			var overlayHeight = overlay.getSize().y;
			overlay.setStyles({height:0}); // need to be set separately or will read height as 0 (above), display none gives 0 height

			var slideFx = new Fx.Morph(overlay, {duration:this.options.slideDuration, link:this.options.overlayLink, transition:this.options.overlayTransition});

			$$(overlay).getParent(this.options.parentElement)[0].addEvents({
				'mouseenter': function() {
					slideFx.clearChain();
					slideFx.start({ 'margin-top':[0, parseInt('-'+overlayHeight)], 'height':[0, overlayHeight] });
				}.bind(this),

				'mouseleave': function() {
					slideFx.start({ 'margin-top':[parseInt('-'+overlayHeight), 0], 'height':[overlayHeight, 0] });
				}.bind(this)
			});
		}.bind(this));
	}
});