var Phoebe = new Class({
	Implements: [Options],
	options: {
		height: 200,
		textBackgroundColor: '#000',
		textBackgroundOpacity: 1,
		transition: 'expo:out',
		transitionDuration: 300,
		width: 200
	},
	initialize: function(oRef, cOptions){
		this.setOptions(cOptions);
		
		oRef = $(oRef);
		
		this.image = oRef.getElement('img');
		this.title = oRef.getElement('h1');
		this.text = oRef.getElement('p');
		this.url = oRef.getElement('a').getProperty('href');
		this.ribbon = new Element('div').addClass('wrap').setStyles({
			'position': 'relative'
		}).set('morph', {
			'duration': this.options.transitionDuration, 
			'transition': this.options.transition, 
			'wait': true
		}).grab(this.image, 'top').grab(this.title, 'bottom').grab(this.text, 'bottom').inject(oRef);
		
		oRef.store('url', this.url).setStyles({
			'cursor': 'pointer',
			'height': this.options.height,
			'overflow': 'hidden',
			'position': 'relative',
			'width': this.options.width
		}).addEvents({
			'click': function(e){
				location.href = this.retrieve('url');
			},
			'mouseenter': function(e){
				e.stop();
				this.ribbon.morph({'top': (this.title.getSize().y + this.text.getSize().y - 2) * -1});
			}.bind(this),
			'mouseleave': function(e){
				e.stop();
				this.ribbon.morph({'top': this.title.getSize().y * -1});
			}.bind(this)
		});
		
		this.ribbon.morph({'top': this.title.getSize().y * -1});
	}
});