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

// IMAGES
var boxV = $('vignettes');
var fxV = boxV.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxG = $('fleche_gauche');
var fxG = boxG.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
var boxD = $('fleche_droite');
var fxD = boxD.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});

//////////////////////////////
boxG.setStyle('opacity', 0.2);


///// BOUTON GAUCHE
$('fleche_droite').addEvent('click', function(){
if(boxV.getStyle('margin-left').toInt() == 0){
fxV.start({'margin-left' : -770});
fxG.start({'opacity' : 1});
} else {
}});
$('fleche_droite').addEvent('click', function(){
if(boxV.getStyle('margin-left').toInt() == -770){
fxV.start({'margin-left' : -1540});
} else {
}});
//$('fleche_droite').addEvent('click', function(){
//if(boxV.getStyle('margin-left').toInt() == -1540){
//fxV.start({'margin-left' : -1870});
//fxD.start({'opacity' : 0.2});
//} else {
//}});
$('fleche_droite').addEvent('click', function(){
if(boxV.getStyle('margin-left').toInt() == -1540){
fxV.start({'margin-left' : -2310});
} else {
}});
$('fleche_droite').addEvent('click', function(){
if(boxV.getStyle('margin-left').toInt() == -2310){
fxV.start({'margin-left' : -3080});
} else {
}});
$('fleche_droite').addEvent('click', function(){
if(boxV.getStyle('margin-left').toInt() == -3080){
fxV.start({'margin-left' : -3190});
fxD.start({'opacity' : 0.2});
} else {
}});

///// BOUTON DROITE
$('fleche_gauche').addEvent('click', function(){
if(boxV.getStyle('margin-left').toInt() == -3190){
fxV.start({'margin-left' : -3080});
fxD.start({'opacity' : 1});
} else {
}});
$('fleche_gauche').addEvent('click', function(){
if(boxV.getStyle('margin-left').toInt() == -3080){
fxV.start({'margin-left' : -2310});
} else {
}});
$('fleche_gauche').addEvent('click', function(){
if(boxV.getStyle('margin-left').toInt() == -2310){
fxV.start({'margin-left' : -1540});
} else {
}});
$('fleche_gauche').addEvent('click', function(){
if(boxV.getStyle('margin-left').toInt() == -1540){
fxV.start({'margin-left' : -770});
} else {
}});
$('fleche_gauche').addEvent('click', function(){
if(boxV.getStyle('margin-left').toInt() == -770){
fxV.start({'margin-left' : 0});
fxG.start({'opacity' : 0.2});
} else {
}});

});