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

// WEBDESIGN 1
var boxWEBDESIGN1 = $('webdesign_1');
var fxWEBDESIGN1 = boxWEBDESIGN1.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});

// WEBDESIGN
var boxV1 = $('webdesign_p1');
var fxV1 = boxV1.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxV2 = $('webdesign_p2');
var fxV2 = boxV2.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxV3 = $('webdesign_p3');
var fxV3 = boxV3.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxV4 = $('webdesign_p4');
var fxV4 = boxV4.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxV5 = $('webdesign_p5');
var fxV5 = boxV5.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});

// WEBDESIGN BOUTONS
var boxBT1 = $('webdesign1');
var fxBT1 = boxBT1.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxBT2 = $('webdesign2');
var fxBT2 = boxBT2.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxBT3 = $('webdesign3');
var fxBT3 = boxBT3.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxBT4 = $('webdesign4');
var fxBT4 = boxBT4.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxBT5 = $('webdesign5');
var fxBT5 = boxBT5.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});

// CONTENU
var boxCONTENU3 = $('contenu_3');
var fxCONTENU3 = boxCONTENU3.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxC1 = $('contenu_vroum3');
var fxC1 = boxC1.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxC2 = $('contenu_pilou');
var fxC2 = boxC2.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxC3 = $('contenu_kiwi');
var fxC3 = boxC3.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxC4 = $('contenu_runlesite');
var fxC4 = boxC4.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxC5 = $('contenu_coworking');
var fxC5 = boxC5.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});


//////////////////////////////

///// BOUTON FERME
$('webdesign1').addEvent('click', function(){
if(boxWEBDESIGN1.getStyle('height').toInt() == 0){
fxV1.start({'margin-top': 0});
boxBT1.setStyle('background-position', 'bottom');
boxBT2.setStyle('background-position', 'top');
boxBT3.setStyle('background-position', 'top');
boxBT4.setStyle('background-position', 'top');
boxBT5.setStyle('background-position', 'top');
} else {
}});
$('webdesign2').addEvent('click', function(){
if(boxWEBDESIGN1.getStyle('height').toInt() == 0){
fxV1.start({'margin-top': -200});
boxBT1.setStyle('background-position', 'top');
boxBT2.setStyle('background-position', 'bottom');
boxBT3.setStyle('background-position', 'top');
boxBT4.setStyle('background-position', 'top');
boxBT5.setStyle('background-position', 'top');
} else {
}});
$('webdesign3').addEvent('click', function(){
if(boxWEBDESIGN1.getStyle('height').toInt() == 0){
fxV1.start({'margin-top': -400});
boxBT1.setStyle('background-position', 'top');
boxBT2.setStyle('background-position', 'top');
boxBT3.setStyle('background-position', 'bottom');
boxBT4.setStyle('background-position', 'top');
boxBT5.setStyle('background-position', 'top');
} else {
}});
$('webdesign4').addEvent('click', function(){
if(boxWEBDESIGN1.getStyle('height').toInt() == 0){
fxV1.start({'margin-top': -600});
boxBT1.setStyle('background-position', 'top');
boxBT2.setStyle('background-position', 'top');
boxBT3.setStyle('background-position', 'top');
boxBT4.setStyle('background-position', 'bottom');
boxBT5.setStyle('background-position', 'top');
;
} else {
}});
$('webdesign5').addEvent('click', function(){
if(boxWEBDESIGN1.getStyle('height').toInt() == 0){
fxV1.start({'margin-top': -800});
boxBT1.setStyle('background-position', 'top');
boxBT2.setStyle('background-position', 'top');
boxBT3.setStyle('background-position', 'top');
boxBT4.setStyle('background-position', 'top');
boxBT5.setStyle('background-position', 'bottom');
;
} else {
}});

///// BOUTON OUVERT
$('webdesign1').addEvent('click', function(){
if(boxWEBDESIGN1.getStyle('height').toInt() == 200 && boxCONTENU3.getStyle('opacity').toInt() == 1){
fxV1.start({'margin-top': 0});
fxC1.start({'margin-top': 0});
boxBT1.setStyle('background-position', 'bottom');
boxBT2.setStyle('background-position', 'top');
boxBT3.setStyle('background-position', 'top');
boxBT4.setStyle('background-position', 'top');
boxBT5.setStyle('background-position', 'top');
} else {
}});
$('webdesign2').addEvent('click', function(){
if(boxWEBDESIGN1.getStyle('height').toInt() == 200 && boxCONTENU3.getStyle('opacity').toInt() == 1){
fxV1.start({'margin-top': -200});
fxC1.start({'margin-top': -400});
boxBT1.setStyle('background-position', 'top');
boxBT2.setStyle('background-position', 'bottom');
boxBT3.setStyle('background-position', 'top');
boxBT4.setStyle('background-position', 'top');
boxBT5.setStyle('background-position', 'top');
} else {
}});
$('webdesign3').addEvent('click', function(){
if(boxWEBDESIGN1.getStyle('height').toInt() == 200 && boxCONTENU3.getStyle('opacity').toInt() == 1){
fxV1.start({'margin-top': -400});
fxC1.start({'margin-top': -800});
boxBT1.setStyle('background-position', 'top');
boxBT2.setStyle('background-position', 'top');
boxBT3.setStyle('background-position', 'bottom');
boxBT4.setStyle('background-position', 'top');
boxBT5.setStyle('background-position', 'top');
} else {
}});
$('webdesign4').addEvent('click', function(){
if(boxWEBDESIGN1.getStyle('height').toInt() == 200 && boxCONTENU3.getStyle('opacity').toInt() == 1){
fxV1.start({'margin-top': -600});
fxC1.start({'margin-top': -1200});
boxBT1.setStyle('background-position', 'top');
boxBT2.setStyle('background-position', 'top');
boxBT3.setStyle('background-position', 'top');
boxBT4.setStyle('background-position', 'bottom');
boxBT5.setStyle('background-position', 'top');
} else {
}});

$('webdesign5').addEvent('click', function(){
if(boxWEBDESIGN1.getStyle('height').toInt() == 200 && boxCONTENU3.getStyle('opacity').toInt() == 1){
fxV1.start({'margin-top': -800});
fxC1.start({'margin-top': -1600});
boxBT1.setStyle('background-position', 'top');
boxBT2.setStyle('background-position', 'top');
boxBT3.setStyle('background-position', 'top');
boxBT4.setStyle('background-position', 'top');
boxBT5.setStyle('background-position', 'bottom');
} else {
}});


});