var total = 0;

$("#right").click(function(){
	$(this).attr('clicked',true);
	//si l'élément est active (en animation) on fait rien
	if($(this).data("active")) return;
	//on met le drapeau d'élément en animation
	$(this).data("active",true);
	
	var top ;
	
	if($(this).data("enBas")){//on est en bas
		top = "270px";//on va vers le haut
		$(this).data("enBas",false);//on ne sera plus en bas
		total = total - 1;
		
		if (total == 0){	
		 $("#power").animate( { width:"330px" }, 500);	
		}	
		if (total == 1){	
		 $("#power").animate( { width:"240px" }, 500);	
		}
		if (total == 2){	
		 $("#power").animate( { width:"100px" }, 500);	
		}
		if (total == 3){	
		 $("#power").animate( { width:"0px" }, 500);	
		}
	}
	
	else{//on est en haut, on passe ici pour la première fois car "enBas" pas défini
		top = "+=93px";//on va vers le bas
		$(this).data("enBas",true);//on sera en bas
		total = total + 1;
		
		if (total == 0){	
		 $("#power").animate( { width:"330px" }, 500);	
		}	
		if (total == 1){	
		 $("#power").animate( { width:"240px" }, 500);	
		}

		
		if (total == 2){	
		 $("#power").animate( { width:"100px" }, 500);	
		}

		
		if (total == 3){	
		 $("#power").animate( { width:"0px" }, 500);	
		}
	}
	$(this).animate(
			{"top":top},//on anime
			function(){//fonction de callback à la fin de l'anim
			$(this).data("active",false);//on est plus en état anim
			}
			);
	});

			
$("#right1").click(function(){
							//si l'élément est active (en animation) on fait rien
						if($(this).data("active")) return;
						//on met le drapeau d'élément en animation
						$(this).data("active",true);
						$(this).attr('clicked',true);
						
						var top ;
						
						if($(this).data("enBas")){//on est en bas
							top = "270px";//on va vers le haut
							$(this).data("enBas",false);//on ne sera plus en bas
							total = total - 1;	
						if (total == 0){	
						 $("#power").animate( { width:"330px" }, 500);	
						}	
						if (total == 1){	
						 $("#power").animate( { width:"240px" }, 500);	
						}
						
						if (total == 2){	
						 $("#power").animate( { width:"100px" }, 500);	
						}
						
						if (total == 3){	
						 $("#power").animate( { width:"0px" }, 500);	
						}		
					}
						else{//on est en haut, on passe ici pour la première fois car "enBas" pas défini
							top = "+=93px";//on va vers le bas
							$(this).data("enBas",true);//on sera en bas
							total = total + 1;
							if (total == 0){	
							 $("#power").animate( { width:"330px" }, 500);	
							}	
							if (total == 1){	
							 $("#power").animate( { width:"240px" }, 500);	
							}

							
							if (total == 2){	
							 $("#power").animate( { width:"100px" }, 500);	
							}

							
							if (total == 3){	
							 $("#power").animate( { width:"0px" }, 500);	
							}
						}
						$(this).animate(
								{"top":top},//on anime
								function(){//fonction de callback à la fin de l'anim
									$(this).data("active",false);//on est plus en état anim
								}
								);
						
					});

$("#right2").click(function(){
						//si l'élément est active (en animation) on fait rien
						if($(this).data("active")) return;
						//on met le drapeau d'élément en animation
						$(this).data("active",true);
						$(this).attr('clicked',true);
						
						var top ;
						
						if($(this).data("enBas")){//on est en bas
							top = "270px";//on va vers le haut
							$(this).data("enBas",false);//on ne sera plus en bas
							total = total - 1;
							
							if (total == 0){	
							 $("#power").animate( { width:"330px" }, 500);	
							}	
							if (total == 1){	
							 $("#power").animate( { width:"240px" }, 500);	
							}
							
							if (total == 2){	
							 $("#power").animate( { width:"100px" }, 500);	
							}

							if (total == 3){	
							 $("#power").animate( { width:"0px" }, 500);	
							}
						}
						else{//on est en haut, on passe ici pour la première fois car "enBas" pas défini
							top = "+=93px";//on va vers le bas
							$(this).data("enBas",true);//on sera en bas
							total = total + 1;	
							
							if (total == 0){	
							 $("#power").animate( { width:"330px" }, 500);	
							}	
							if (total == 1){	
							 $("#power").animate( { width:"240px" }, 500);	
							}

							
							if (total == 2){	
							 $("#power").animate( { width:"100px" }, 500);	
							}

							
							if (total == 3){	
							 $("#power").animate( { width:"0px" }, 500);	
							}						
						}
						$(this).animate(
								{"top":top},//on anime
								function(){//fonction de callback à la fin de l'anim
									$(this).data("active",false);//on est plus en état anim
								}
								);	
					});