$(function() {

// goutte
	function goutte() {
		$("#goutte").animate({ 
			top: '250px'
			}, 1000, 'easeInQuad', ligneA
		);
		
	}
	
// module A
	function ligneA() {
		$('#onde').css({visibility:'visible'});
		$('#fleche').css({visibility:'visible'});
		$('#ligne').css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=70px'
			}, 1000, ligneAv
		);
		$("#fleche").animate({ 
			left: '+=70px'
			}, 1000
		);
	}
	function ligneAv() {
		$("#lvA").css({visibility:'visible', left: '150px'	});
		$("#lvA").animate({ 
			height: '150px',
			top: '-=130px'
			}, 500, ligneAB
		);
	}	
// module B
	function ligneAB() {
		$("#boiteA").css({visibility:'visible'});
		$("#dateA").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneBv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneBv() {
		$("#lvB").css({visibility:'visible', left: '170px'	});
		$("#lvB").animate({ 
			height: '145px',
			top: '-=105px'
			}, 500, ligneBC
		);
	}	
// module C
	function ligneBC() {
		$("#boiteB").css({visibility:'visible'});
		$("#dateB").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneCv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneCv() {
		$("#lvC").css({visibility:'visible', left: '190px'	});
		$("#lvC").animate({ 
			height: '175px',
			top: '-=155px'
			}, 500, ligneCD
		);
	}	
// module D
	function ligneCD() {
		$("#boiteC").css({visibility:'visible'});
		$("#dateC").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneDv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneDv() {
		$("#lvD").css({visibility:'visible', left: '210px'	});
		$("#lvD").animate({ 
			height: '220px',
			top: '-=180px'
			}, 500, ligneDE
		);
	}	
// module E
	function ligneDE() {
		$("#boiteD").css({visibility:'visible'});
		$("#dateD").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneEv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneEv() {
		$("#lvE").css({visibility:'visible', left: '230px'	});
		$("#lvE").animate({ 
			height: '100px',
			top: '-=80px'
			}, 100, ligneEF
		);
	}	
// module F
	function ligneEF() {
		$("#boiteE").css({visibility:'visible'});
		$("#dateE").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneFv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneFv() {
		$("#lvF").css({visibility:'visible', left: '250px'	});
		$("#lvF").animate({ 
			height: '95px',
			top: '-=55px'
			}, 100, ligneFG
		);
	}	
// module G
	function ligneFG() {
		$("#boiteF").css({visibility:'visible'});
		$("#dateF").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneGv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneGv() {
		$("#lvG").css({visibility:'visible', left: '270px'	});
		$("#lvG").animate({ 
			height: '225px',
			top: '-=205px'
			}, 500, ligneGH
		);
	}	
// module H
	function ligneGH() {
		$("#boiteG").css({visibility:'visible'});
		$("#dateG").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneHv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneHv() {
		$("#lvH").css({visibility:'visible', left: '290px'	});
		$("#lvH").animate({ 
			height: '220px',
			top: '-=180px'
			}, 500, ligneHI
		);
	}	
// module I
	function ligneHI() {
		$("#boiteH").css({visibility:'visible'});
		$("#dateH").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneIv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneIv() {
		$("#lvI").css({visibility:'visible', left: '310px'	});
		$("#lvI").animate({ 
			height: '150px',
			top: '-=130px'
			}, 500, ligneIJ
		);
	}	
// module J
	function ligneIJ() {
		$("#boiteI").css({visibility:'visible'});
		$("#dateI").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneJv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneJv() {
		$("#lvJ").css({visibility:'visible', left: '330px'	});
		$("#lvJ").animate({ 
			height: '120px',
			top: '-=80px'
			}, 100, ligneJK
		);
	}	
// module K
	function ligneJK() {
		$("#boiteJ").css({visibility:'visible'});
		$("#dateJ").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneKv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneKv() {
		$("#lvK").css({visibility:'visible', left: '350px'	});
		$("#lvK").animate({ 
			height: '125px',
			top: '-=105px'
			}, 100, ligneKL
		);
	}	
// module L
	function ligneKL() {
		$("#boiteK").css({visibility:'visible'});
		$("#dateK").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneLv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneLv() {
		$("#lvL").css({visibility:'visible', left: '370px'	});
		$("#lvL").animate({ 
			height: '95px',
			top: '-=55px'
			}, 100, ligneLM
		);
	}	
// module M
	function ligneLM() {
		$("#boiteL").css({visibility:'visible'});
		$("#dateL").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneMv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneMv() {
		$("#lvM").css({visibility:'visible', left: '390px'	});
		$("#lvM").animate({ 
			height: '100px',
			top: '-=80px'
			}, 100, ligneMN
		);
	}	
// module N
	function ligneMN() {
		$("#boiteM").css({visibility:'visible'});
		$("#dateM").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneNv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneNv() {
		$("#lvN").css({visibility:'visible', left: '410px'	});
		$("#lvN").animate({ 
			height: '145px',
			top: '-=105px'
			}, 500, ligneNO
		);
	}	
// module O
	function ligneNO() {
		$("#boiteN").css({visibility:'visible'});
		$("#dateN").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneOv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneOv() {
		$("#lvO").css({visibility:'visible', left: '430px'	});
		$("#lvO").animate({ 
			height: '150px',
			top: '-=130px'
			}, 100, ligneOP
		);
	}	
// module P
	function ligneOP() {
		$("#boiteO").css({visibility:'visible'});
		$("#dateO").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, lignePv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function lignePv() {
		$("#lvP").css({visibility:'visible', left: '450px'	});
		$("#lvP").animate({ 
			height: '95px',
			top: '-=55px'
			}, 500, lignePQ
		);
	}	
// module Q
	function lignePQ() {
		$("#boiteP").css({visibility:'visible'});
		$("#dateP").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneQv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneQv() {
		$("#lvQ").css({visibility:'visible', left: '470px'	});
		$("#lvQ").animate({ 
			height: '200px',
			top: '-=180px'
			}, 100, ligneQR
		);
	}	
// module R
	function ligneQR() {
		$("#boiteQ").css({visibility:'visible'});
		$("#dateQ").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneRv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneRv() {
		$("#lvR").css({visibility:'visible', left: '490px'	});
		$("#lvR").animate({ 
			height: '195px',
			top: '-=155px'
			}, 100, ligneRS
		);
	}	
// module S
	function ligneRS() {
		$("#boiteR").css({visibility:'visible'});
		$("#dateR").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneSv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneSv() {
		$("#lvS").css({visibility:'visible', left: '510px'	});
		$("#lvS").animate({ 
			height: '250px',
			top: '-=230px'
			}, 100, ligneST
		);
	}	
// module T
	function ligneST() {
		$("#boiteS").css({visibility:'visible'});
		$("#dateS").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneTv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneTv() {
		$("#lvT").css({visibility:'visible', left: '530px'	});
		$("#lvT").animate({ 
			height: '245px',
			top: '-=205px'
			}, 100, ligneTU
		);
	}	
// module U
	function ligneTU() {
		$("#boiteT").css({visibility:'visible'});
		$("#dateT").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneUv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneUv() {
		$("#lvU").css({visibility:'visible', left: '550px'	});
		$("#lvU").animate({ 
			height: '175px',
			top: '-=155px'
			}, 100, ligneUV
		);
	}	
// module V
	function ligneUV() {
		$("#boiteU").css({visibility:'visible'});
		$("#dateU").css({visibility:'visible'});
		$("#ligne").animate({ 
			width: '+=20px'
			}, 200, ligneVv
		);
		$("#fleche").animate({ 
			left: '+=20px'
			}, 200
		);
	}
	function ligneVv() {
		$("#lvV").css({visibility:'visible', left: '570px'	});
		$("#lvV").animate({ 
			height: '145px',
			top: '-=105px'
			}, 500, utopie
		
		);
	}
// utopie
	function utopie() {
		$("#boiteV").css({visibility:'visible'})
		$("#dateV").css({visibility:'visible'});
		$("#point").css({visibility:'visible'});
		$("#lignevV").css({visibility:'visible'});
		$("#lignevV").animate({ 
			height: '+=100px'
			}, 200, application
		);
	}
// utopie
	function application() {
		$("#utopie").css({visibility:'visible'});
		$("#flecheV").css({visibility:'visible'});
		$("#ligneV").css({visibility:'visible'});
		$("#flecheV").animate({ 
			left: '+=100px'
			}, 500, toggles
		
		);
		$("#ligneV").animate({ 
			width: '100px'
			}, 500
		
		);
	}

	function plie(lettre,delta) {
		if ($("#boite"+lettre).next('.boite').position().left-$("#boite"+lettre).position().left >=delta/2) {
			$('#ligne').animate({ 
				width: '-='+ delta +'px'
				}, 1500
			); 
			$('#fleche').animate({ 
				left: '-='+ delta +'px'
				}, 1500
			); 
			$('.sup'+lettre).animate({ 
				left: '-='+ delta +'px'
				}, 1500
			); 
			$('#resume'+lettre).animate({top: '-=30px', left: '-=20px'},'slow').css({visibility:'hidden'});
		}
		else {
			$('#ligne').animate({ 
				width: '+='+ delta +'px'
				}, 1500
			); 
			$('#fleche').animate({ 
				left: '+='+ delta +'px'
				}, 1500
			); 
			$('.sup'+lettre).animate({ 
				left: '+='+ delta +'px'
				}, 1500
			); 
			$('#resume'+lettre).animate({top: '+=30px', left: '+=20px'},'slow').css({visibility:'visible'});
			if ($('#presentation').css('display')=='none') {
				var pos_cadre=$("html").attr('offsetWidth')/2-$("#boite"+lettre).offset().left-delta/2;
			}
			else {
				var pos_cadre=600-$("#boite"+lettre).offset().left;
			}
			$('#cadre').animate({left: "+="+pos_cadre+"px"},'slow');
		}
	}
	function plieV(delta) {
		if ($("#point").position().left-$("#boiteV").position().left >=delta/2) {
		$('#ligne').animate({ 
			width: '-='+ delta +'px'
			}, 1500
		); 
		$('#fleche').animate({ 
			left: '-='+ delta +'px'
			}, 1500
		); 
		$('.supV').animate({ 
			left: '-='+ delta +'px'
			}, 1500
		); 
		$('#resumeV').animate({top: '-=30px', left: '-=20px'},'slow').css({visibility:'hidden'});
		}
		else {
		$('#ligne').animate({ 
			width: '+='+ delta +'px'
			}, 1500
		); 
		$('#fleche').animate({ 
			left: '+='+ delta +'px'
			}, 1500
		); 
		$('.supV').animate({ 
			left: '+='+ delta +'px'
			}, 1500
		); 
		$('#resumeV').animate({top: '+=30px', left: '+=20px'},'slow').css({visibility:'visible'});
		var pos_cadre=600-$("#boiteV").offset().left;
		$('#cadre').animate({left: "+="+pos_cadre+"px"},'slow');
		
		}
	}


	function toggles() {
		var delta='500';
		$("#application").css({visibility:'visible'});
		$("#cadre").animate({left:'+=250px'},'slow',function(){$("#presentation").show('slow');});
		//toggles
		$('#boiteA').click(function () {plie('A',delta);});
		$('#closeA').click(function () {plie('A',delta);});
		$('#boiteB').click(function () {plie('B',delta);});
		$('#closeB').click(function () {plie('B',delta);});
		$('#boiteC').click(function () {plie('C',delta);});
		$('#closeC').click(function () {plie('C',delta);});
		$('#boiteD').click(function () {plie('D',delta);});
		$('#closeD').click(function () {plie('D',delta);});
		$('#boiteE').click(function () {plie('E',delta);});
		$('#closeE').click(function () {plie('E',delta);});
		$('#boiteF').click(function () {plie('F',delta);});
		$('#closeF').click(function () {plie('F',delta);});
		$('#boiteG').click(function () {plie('G',delta);});
		$('#closeG').click(function () {plie('G',delta);});
		$('#boiteH').click(function () {plie('H',delta);});
		$('#closeH').click(function () {plie('H',delta);});
		$('#boiteI').click(function () {plie('I',delta);});
		$('#closeI').click(function () {plie('I',delta);});
		$('#boiteJ').click(function () {plie('J',delta);});
		$('#closeJ').click(function () {plie('J',delta);});
		$('#boiteK').click(function () {plie('K',delta);});
		$('#closeK').click(function () {plie('K',delta);});
		$('#boiteL').click(function () {plie('L',delta);});
		$('#closeL').click(function () {plie('L',delta);});
		$('#boiteM').click(function () {plie('M',delta);});
		$('#closeM').click(function () {plie('M',delta);});
		$('#boiteN').click(function () {plie('N',delta);});
		$('#closeN').click(function () {plie('N',delta);});
		$('#boiteO').click(function () {plie('O',delta);});
		$('#closeO').click(function () {plie('O',delta);});
		$('#boiteP').click(function () {plie('P',delta);});
		$('#closeP').click(function () {plie('P',delta);});
		$('#boiteQ').click(function () {plie('Q',delta);});
		$('#closeQ').click(function () {plie('Q',delta);});
		$('#boiteR').click(function () {plie('R',delta);});
		$('#closeR').click(function () {plie('R',delta);});
		$('#boiteS').click(function () {plie('S',delta);});
		$('#closeS').click(function () {plie('S',delta);});
		$('#boiteT').click(function () {plie('T',delta);});
		$('#closeT').click(function () {plie('T',delta);});
		$('#boiteU').click(function () {plie('U',delta);});
		$('#closeU').click(function () {plie('U',delta);});
		$('#boiteV').click(function () {plieV(delta);});
		$('#closeV').click(function () {plieV(delta);});
	}
	setTimeout(goutte,200);
	$('#cadre').draggable({ axis: 'x' });

	
});