window.addEvent('domready', function() {

	mySlideFX = new Array(5);
	myFadeFX = new Array(5);
	container = new Array(5);
	
	$$('#buttons .button').each(function(el,i){
		
		el.addEvent('mouseenter', function(){
			showFullButton(el,i);
		});
		
		el.addEvent('mouseleave', function(){
			hideFullButton(el,i);
		});
		
		var panel = el.getChildren('.container');
		var image = panel[0].getChildren('.image');
		container[i] = panel[0];
		mySlideFX[i] = new Fx.Tween(panel[0], {duration: 150, link:'cancel', property:'height'});
		myFadeFX[i] = new Fx.Tween(image[0], {duration: 150, link:'cancel', property:'opacity'});
		
		myFadeFX[i].set("0");
	});	
	
});

function showFullButton(el,i){
	
	mySlideFX[i].start("118px");
	myFadeFX[i].start("1");

}

function hideFullButton(el,i){
	
	mySlideFX[i].start("40px");
	myFadeFX[i].start("0");

}