document.observe('dom:loaded', function() {
	$$('a.expandable').each(function(element) {
		var hidden_element = element.up('li').down('div');
		element.onclick = function() {
			if (this.hasClassName('expanded')) {
				new Effect.Fade(hidden_element, {duration: 0.3, afterFinish: function() {
					element.removeClassName('expanded');
					new Effect.Morph(element, {style: {width: '150px', height: '100px', left: '0px', top: '0px'}, duration: 0.8});
				}});
			} else {
				new Effect.Morph(element, {style: {width: '550px', height: '250px', left: '-400px', top: '-150px'}, duration: 0.8, afterFinish: function() {
					new Effect.Appear(hidden_element, {duration: 0.3});
					element.addClassName('expanded');
				}})
			}
			return false;
		}
	});
});