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

	var allImages = $$('div.rolling');
	var images = new Array();
	var dureeAnimation = 2000;
	var maxImgLoaded = 2;
	var delayChargement = 1000;

	// Variable d�finissant o� s'arr�te l'animation (verticalement)
	var myTop = -50;

	var rightFrom = 0;
	var topFrom = 350;

	var rightTo = rightFrom;
	var topTo = topFrom;

	// Permet de calculer la position 'right' qu'il faut pour n'importe quelle image
	var rightRight = function(image){
		return (window.getSize().x/2)-(image.getWidth()/2);
	}

	// Element du bouton next
	var next = $('imgNext');

	if(!Browser.Engine.trident){
    	next.setStyle('opacity','0');
	} else {
		next.setStyle('visibility', 'hidden');
	}


	var fadeElement = function(next, what){
		if(!Browser.Engine.trident){
			next.fade(what);
		} else {
			if(what == 0)
				next.setStyle('visibility', 'hidden');
			else
				next.setStyle('visibility', 'visible');
		}
	}


	// Position le bouton next au bon endroit
	next.setStyle('right', rightRight(next)-350);

	// Permet de connaitre le nombre d'images
	var myChainLength = 0;

	// Permet de connaitre l'id de l'image courante
	var cntI = 0;

	// Permet d'avoir le conteneur des diff�rentes images (au cas ou)
	var contentImg = $('contentImg');

	// Compte le nombre d'image � afficher dans la banni�re
	allImages.each(function(image) {
		images[myChainLength] = image;
		myChainLength++;
	});


	var loadNewImgs = function(i){


		//for (var i = cntI; $$('div.rolling').length != 0 && j < maxImgLoaded; i++){

			loadingImages = [images[i].get('src')+'']

			var loader = new Asset.images(loadingImages, {
			    onComplete: function() {


					var e = new Element('img', {
						'src': images[i].get('src'),
						'class': 'rolling'
					});

					images[i].dispose();

					images[i] = e;

					e.inject(contentImg);



						fadeElement(next, 0);

						var myEffects = new Fx.Morph(images[i], {duration: dureeAnimation});
						myEffects.start({
							'right': [rightFrom, rightRight(images[i])],
							'top': [topFrom, myTop]
						});

						next.removeEvents();
						images.each(function(image, j) {
							if(i != j)
								images[j].removeEvents();
						});


						(function(){

							next.addEvent('click', function(e){
								next.removeEvents();
								images[i].removeEvents();

								if (myChainLength == cntI){
									cntI = 0;
									fadeElement(next, 0);

									images.each(function(image, i) {
										var myEffects2 = new Fx.Morph(images[i], {duration: dureeAnimation});
										myEffects2.start({
											'right': [rightRight(images[i]), rightTo],
											'top': [myTop, topTo]
										});
									});

									(function(){ loadNewImgs((i+1)%myChainLength); }).delay(dureeAnimation);

									(function(){ fadeElement(next, 1); }).delay(2*dureeAnimation);
								} else {
									loadNewImgs((i+1)%myChainLength);
								}
							});

							images[i].addEvent('click', function(e){
								images[i].removeEvents();
								if (myChainLength == cntI){
									cntI = 0;
									fadeElement(next, 0);

									images.each(function(image, i) {
										var myEffects2 = new Fx.Morph(images[i], {duration: dureeAnimation});
										myEffects2.start({
											'right': [rightRight(images[i]), rightTo],
											'top': [myTop, topTo]
										});
									});

									(function(){ loadNewImgs((i+1)%myChainLength); }).delay(dureeAnimation);

									(function(){ fadeElement(next, 1); }).delay(2*dureeAnimation);
								} else {
									loadNewImgs((i+1)%myChainLength);
								}

							});

						}).delay(dureeAnimation);

						(function(){ fadeElement(next, 1); }).delay(dureeAnimation);


						cntI++;

			    }
			});

		//}



	}

	var addImage = function(i){

		if($$('div.rolling').length != 0 && cntI%maxImgLoaded == 0) {
			loadNewImgs(i);

		}


	}


	window.addEvent('resize', function(e){
		images.each(function(image, i) {
				if(image.get('class') == 'rolling'){
					image.setStyle('right', rightRight(image));
				}
		});
		next.setStyle('right', rightRight(next)-350);

	});


	/*
	var fx = new Fx.Morph(next, {duration:600, transition:Fx.Transitions.Elastic.easeOut});

	next.addEvent('mouseenter', function(){
		fx.start({
			'width': 50
		});
	});

	next.addEvent('mouseleave', function(){
		fx.start({
			'width': 64
		});
	});
	*/


	next.addEvent('click', function(e){
		addImage(cntI);
	});

	addImage(0);

	(function(){ fadeElement(next, 1); }).delay(dureeAnimation);


});