/* animation Boite */

window.onDomReady(function(){
	var mask = $('magicbox-overlay');
	var contenant = $('magicbox');
	var fx = mask.effects({duration:1, transition: Fx.Transitions.Quart.easeOut});
	var fx2 = mask.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
	var fx3 = contenant.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
	var fx4 = mask.effects({duration: 1000, transition: Fx.Transitions.Quart.easeIn});
	var fx5 = contenant.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});

	$('ouvrirMagicBox').addEvent('click', function() {
		fx.start({
			'top': 0,
			'opacity':0
    		}).chain(function(){
	    		fx2.start({'opacity': .8});
		    	fx3.start.delay(500, fx3, {'top':0 });
		});
	});

	$('magicbox-overlay').addEvent('click',function(){
		fx4.start({'opacity':0});
    	fx5.start({'top':-850})
		.chain(function(){fx.start({'top':-1400});
	    });
    });

	$('fermerMagicBox').addEvent('click',function(){
		fx4.start({'opacity':0});
		fx5.start({'top':-850})
		.chain(function(){fx.start({'top':-1400});
    	});
	});
});

function ouvrirMagicBox() {
    var mask = $('magicbox-overlay');
    var contenant = $('magicbox');
    var fx = mask.effects({ duration: 1, transition: Fx.Transitions.Quart.easeOut });
    var fx2 = mask.effects({ duration: 1000, transition: Fx.Transitions.Quart.easeOut });
    var fx3 = contenant.effects({ duration: 1000, transition: Fx.Transitions.Quart.easeOut });
    var fx4 = mask.effects({ duration: 1000, transition: Fx.Transitions.Quart.easeIn });
    var fx5 = contenant.effects({ duration: 1000, transition: Fx.Transitions.Quart.easeOut });

    fx.start({
        'top': 0,
        'opacity': 0
        }).chain(function() {
            fx2.start({ 'opacity': .8 });
            fx3.start.delay(500, fx3, { 'top': 0 });
        });

        $('magicbox-overlay').addEvent('click', function() {
            fx4.start({ 'opacity': 0 });
            fx5.start({ 'top': -850 }).chain(function() {
                fx.start({ 'top': -1400 });
            });
        });
        $('fermerMagicBox').addEvent('click', function() {
            fx4.start({ 'opacity': 0 });
            fx5.start({ 'top': -850 }).chain(function() {
                fx.start({ 'top': -1400 });
            });
        });
}

function keepMagicBox() {
    var mask = $('magicbox-overlay');
    var contenant = $('magicbox');
    var fx = mask.effects({ duration: 0, transition: Fx.Transitions.Quart.easeOut });
    var fx2 = mask.effects({ duration: 0, transition: Fx.Transitions.Quart.easeOut });
    var fx3 = contenant.effects({ duration: 0, transition: Fx.Transitions.Quart.easeOut });
    var fx4 = mask.effects({ duration: 0, transition: Fx.Transitions.Quart.easeIn });
    var fx5 = contenant.effects({ duration: 0, transition: Fx.Transitions.Quart.easeOut });

    fx.start({
        'top': 0,
        'opacity': 0
        }).chain(function() {
            fx2.start({ 'opacity': .8 });
            fx3.start.delay(0, fx3, { 'top': 0 });
        });

        $('magicbox-overlay').addEvent('click', function() {
            fx4.start({ 'opacity': 0 });
            fx5.start({ 'top': -850 }).chain(function() {
                fx.start({ 'top': -1400 });
            });
        });
        $('fermerMagicBox').addEvent('click', function() {
            fx4.start({ 'opacity': 0 });
            fx5.start({ 'top': -850 }).chain(function() {
                fx.start({ 'top': -1400 });
            });
        });
}