window.addEvent('domready', function()
{
	var myEffects = new Fx.Styles('slidebox', {duration: 700, transition: Fx.Transitions.Expo.easeOut});
	var myElementsEffectsOut = new Fx.Elements($$('#slidebox form'), {duration: 100, transition: Fx.Transitions.linear});
	var myElementsEffectsIn = new Fx.Elements($$('#slidebox form'), {duration: 300, transition: Fx.Transitions.Expo});

	//Create a slide in
	$('slidein').addEvent('click', function(e){//add the click function (i.e on an anchor)
		new Event(e).stop();
		
		myEffects.start({
			'height': [0, 110],
			'top': [277, 160]
		});
		$$('#slidebox form').setStyles({display: 'block'});
		myElementsEffectsIn.start({
			'0': { //let's change the first element's opacity and width
				'opacity': [0,1]
			}
		});
	});
	
	//Create a slide out
	$('slideout').addEvent('click', function(e){//add the click function (i.e on an anchor)
		new Event(e).stop();
		myElementsEffectsOut.start({
			'0': { //let's change the first element's opacity and width
				'opacity': [1,0]
			}
		});

		myEffects.start({
			'height': [110, 0],
			'top': [160, 277]
		});		
	});
});