/** 
 *	Library Gallery on header
 *
 *	@author Andrea Gatti
 *	@version 0.1
 *
 *	Requirements:
 *		mootools
 */

/** ------------------------------------------------------------------- */
/* Slideshow Gallery */




/* e.g. ssGallery('header-gallery', 'progress', '#progress .bar', images, '#header-gallery img', 'start', 'click', 'title-morph', 'title-small','title', 2000); */
function ssGallery_v2(gallery, progress, bar, imagePaths, output_images, activator, event, morpher, CSSmorph1, CSSmorph2, delay){
	var busy = false, timer, loadedImages = [], gallery = $(gallery), progress = $(progress), bar = $E(bar); 
			var images=imagePaths;
			progress.setStyle('visibility', 'hidden');
				
			$(activator).addEvent(event, function(e) {
				
				/* Animo il "bottone" starter -> fade su CSS1 */
				var myMorph = new Fx.Morph(morpher, {wait: false});
				myMorph.start(CSSmorph1);
				
				/* Creo un evento */
				e = new Event(e).stop();
				
				/* non faccio niente se sto giˆ facendo l'animazione */
				if (!busy) {
					busy = true;
			
					/* rimuovo immagini giˆ presenti */
					var galleryImgs = $$(output_images);
					if (galleryImgs.length > 0) galleryImgs.each(function(image) {	image.remove();	});
					
					/* visualizzo la barra di caricamento */
					progress.setStyle('visibility', 'visible');
					gallery.setStyle('display', 'block');
					
					/* inizio il download */
					new Asset.images(images, {
						/* mentre carico aggiorno la barra */
						onProgress: function(i) {
							if (i>images.length) { i = i - images.length }
							this.setStyles({
								'opacity': 0,
								'left': (gallery.getCoordinates().width / 2) - (this.width / 2)
							});
							loadedImages[i] = this;
							var percent = ((i) * progress.getStyle('width').toInt()) / images.length;
							bar.setStyle('width', percent).setHTML(i + ' / ' + images.length);
						},
						/* al download completato faccio partire l'animazione */
						onComplete: function() {
							/* nascondo la barra di caricamento */
							progress.effect('opacity').start(0);
							/* la galleri compare */
							var fx = gallery.effect('opacity').start(1);
							var imagenum = loadedImages.length;
							
							/* setto il delay di comparse delle immagini */
							timer = -2*delay;
							loadedImages.each(function(image, i) {
								timer += delay;
								/* inserisco l'immagine nella gallery */
								image.inject(gallery);						
								fx = function() {
									image.setStyle('margin-left', rnd(40)-20);
									image.setStyle('margin-top', rnd(40));
									var imgEffect = image.effect('opacity', {duration: delay});
									imgEffect.start(1).chain(function() {
										/* i start from 0 */
										if (i < imagenum ) {
											var imgEffect  = image.effect('opacity', {duration: delay*3});
											fxdel = function(){
												imgEffect.start(0).chain(function(){
													//image.remove();
												});
											}.delay(delay*7);
										} 
										if (i >= imagenum -1 ) {
											progress.setStyle('visibility', 'hidden');
											//remove all the photos loaded
											myMorph.start(CSSmorph2);
											busy = false;
										}
										
									});
									
								}.delay(timer*3);
								
							});
						}
					});
				}
			});
}



























/* Slideshow Gallery */
/* e.g. ssGallery('header-gallery', 'progress', '#progress .bar', images, '#header-gallery img', 'start', 'title-morph', 'title-small','title', 2000); */
function ssGallery(gallery, progress, bar, imagePaths, output_images, activator, morpher, CSSmorph1, CSSmorph2, delay){
	var busy = false, timer, loadedImages = [], gallery = $(gallery), progress = $(progress), bar = $E(bar); 
			var images=imagePaths;
			progress.setStyle('visibility', 'hidden');
				
			$(activator).addEvent('click', function(e) {
				var myMorph = new Fx.Morph(morpher, {wait: false});
				myMorph.start(CSSmorph1);
				e = new Event(e).stop();
				if (!busy) {
					var galleryImgs = $$(output_images);
					if (galleryImgs.length > 0) galleryImgs.each(function(image) {	image.remove();	});
					
					busy = true;
					progress.setStyle('visibility', 'visible');
					gallery.setStyle('display', 'block');
					new Asset.images(images, {
						onProgress: function(i) {
							if (i>images.length) { i = i - images.length }
							this.setStyles({
								'opacity': 0,
								'left': (gallery.getCoordinates().width / 2) - (this.width / 2)
							});
							loadedImages[i] = this;
							var percent = ((i + 1) * progress.getStyle('width').toInt()) / images.length;
							bar.setStyle('width', percent).setHTML(i + 1 + ' / ' + images.length);
						},
						onComplete: function() {
							progress.effect('opacity').start(0);
							var fx = gallery.effect('opacity').start(1);
							timer = -delay+800;
							loadedImages.each(function(image, i) {
								timer += delay;
								image.inject(gallery);
								fx = function() {
									var imgEffect = image.effect('opacity', {duration: delay});
									imgEffect.start(1).chain(function() {
										if (i < loadedImages.length - 1) {
											//this.start(0).chain(function() {
											//	image.remove();
											//});
										} else {
											busy = false;
											progress.setStyle('visibility', 'hidden');
											//remove all the photos loaded
											loadedImages.each(function(image, i) {
												var imgEffect = image.effect('opacity', {duration: delay});
												if (i < loadedImages.length - 1) {
													image.remove();
												} else {
													imgEffect.start(0).chain(function() {
														image.remove();
													});
												}
											});
											myMorph.start(CSSmorph2);
										}
									});
									
								}.delay(timer*3);
							});
						}
					});
				}
			});
}