var exec;

(function($){
	
	// Déclaration de la fonction
	$.fn.esiteLightbox = function(options){
		
		/**
		 * Liste des paramètres par défaut
		 */
		var defaults = {
			wrapper: null,
			listLightboxLinks: null,
			listMedias: null,
			id_gallery: null,
			currentPos: 0,
			box: null,
			boxElement: null,
			navEvent: false
		}
		
		/**
		 * $.extends se charge de récupérer les paramètres par défaut
		 * si les paramètres ne sont pas fournis à la fonction.
		 * 
		 * opts est le nouveau jeu de paramètre à utilliser dans le plugin 
		 */
		var opts = $.extend(defaults,options);
		
		/**
		 * Initialisation
		 */
		function init()
		{
			// On définit tous les élements de la boite
			opts.boxElement = ['.picture img','.slide-title','.urlWebsite','.description','.travaux','.arrows'];
			
			// On récupère tous les liens lightbox
			opts.listLightboxLinks = $(opts.wrapper).find('a[rel=gallery]');
			
			$(opts.listLightboxLinks).each(function(){
				$(this).bind('click', linkClickEvent);
			});
		}
		
		linkClickEvent = function(event){
			event.preventDefault();
			
			// Initialisation / Récupération variables
			opts.currentPos = 0;
			opts.navEvent = false;
			opts.id_gallery = $(this).attr('data-role-id');
			
			// Récupération de la liste des médias de la galerie
			$.post('gallery.php', 'id_gallery='+opts.id_gallery, function(xml){
				opts.listMedias = $(xml).find('item');
				start();
			});
		}
		
		start = function()
		{
			// Création de l'assombrissement
			var $div = $('<div id="shadow"></div>');
			
			$div.css({
				opacity: 0,
				background: '#000',
				width: $(document).width(),
				height: $(document).height(),
				position: 'absolute',
				left: 0,
				top: 0,
				'z-index': 5000
			});
			
			$('body').append($div);
			
			$div.animate({
				opacity: 1
			}, 500, box);
			
			$div.bind('click', function(){
				var $box = opts.box;
				var self = this;
				$box.animate({
					opacity: 0
				}, 500, function(){
					$(this).remove();
					$(self).animate({
						opacity: 0
					}, 500, function(){
						$(this).remove();
					});
				});
			});
			
			return $div;
		}
		
		box = function()
		{
			// Définition de la structure de la boîte
			opts.box = $('<div id="box" class="gallery_'+opts.id_gallery+'">'+
				'<div class="picture"></div>'+
				'<div class="infos">'+
					'<div class="wrapper-close"><a href="javascript:;" title="Fermer" class="close"><img src="images/slideshow-close.png" alt="Fermer (icone)" /></a></div>'+
					'<h2 class="slide-title"></h2>'+
					'<div class="urlWebsite"></div>'+
					'<div class="description"></div>'+
					'<div class="travaux"></div>'+
					'<ul class="arrows">'+
						'<li><a href="javascript:;" title="Précédent" class="prev">&lt;</a></li>'+
						'<li><a href="javascript:;" title="Suivant" class="next">&gt;</a></li>'+
					'</ul>'+
				'</div>'+
			'</div>');

			// On met l'opacité de la boîte à 0
			var $box = opts.box;
			$box.css({
				opacity: 0,
				left: ( $(window).width() /2 ) - 512,
				top: $(document).scrollTop() + 100
			});
			
			// Insertion du premier média de la liste
			changeMedia();
			
			// On lance l'animation
			startAnimation();
		}
		
		changeMedia = function()
		{
			var $box = opts.box;
			
			// On met l'opacité des éléments de la boîte à 0
			for(var i = opts.boxElement.length; i--;){
				var element = opts.boxElement[i];
				if (element != '.arrows'){
					$box.find(element).css({opacity:0});
				}
				if (element == '.picture img'){
					$('.picture').children().each(function(){
						$(this).remove();
					});
				} else if (element != '.arrows'){
					$(element).html('');
				}
			}
			
			var media = opts.listMedias[opts.currentPos];
			
			$box.find('.picture').append('<img src="'+$(media).find('url').text()+'" alt="" />');
			
			if ($(media).find('title').length > 0){
				$box.find('.slide-title').append($(media).find('title').text());
			}
			
			if ($(media).find('website').length > 0){
				$box.find('.urlWebsite').append('<a href="'+$(media).find('website').text()+'" title="Voir le site">'+$(media).find('website').text()+'</a>');
			}
			
			if ($(media).find('description').length > 0){
				$box.find('.description').append($(media).find('description').text());
			}
			
			if ($(media).find('travaux').length > 0){
				$box.find('.travaux').append($(media).find('travaux').text());
			}
			
			startAnimation();
		}
		
		startAnimation = function()
		{
			var $box = opts.box;
			
			$('body').append($box);
			
			// 1. Affichage box
			$box.animate({
				opacity: 1
			}, 100, function(){
				
				// 2. Affichage image
				$box.find('.picture').animate({
					opacity:1
				}, 100, function(){
					
					// 3. Affichage titre
					//var text = $box.find('.slide-title').text();
					//$box.find('.slide-title').html('');
					
					$box.find('.slide-title').animate({
						opacity:1
					}, 100, function(){
						
						// 3b. Affichage contenu du titre
						/*var total = text.length;
						var time = 1000;
						for (var i=0; i<total;i++){
							var c = text.substr(i,1);
							exec = function(){$box.find('.slide-title').append(c);};
							window.setTimeout("exec();", time);
							time = time + 1000;
						}*/
						
						//var text = $box.find('.urlWebsite').text();
						//$(text).css({opacity, 0});
						
						// 4. Affichage url
						$box.find('.urlWebsite').animate({
							opacity:1
						}, 100, function(){
							
							// 4b. Affichage contenu de l'url du site
							/*var text = $box.find('.urlWebsite').text();
							var total = text.length;

							for (var i=0; i<total;i++){
								var c = text.substr(i,1);
								$(c).animate({opacity:1}, 100);
							}
							
							var text = $box.find('.description').text();
							$(text).css({opacity, 0});*/
							
							// 5. Affichage description
							$box.find('.description').animate({
								opacity:1
							}, 100, function(){
								
								// 5b. Affichage contenu de l'url du site
								/*var text = $box.find('.description').text();
								var total = text.length;

								for (var i=0; i<total;i++){
									var c = text.substr(i,1);
									$(c).animate({opacity:1}, 100);
								}
								
								var text = $box.find('.travaux').text();
								$(text).css({opacity, 0});*/
								
								// 6. Affichage Travaux réalisés
								$box.find('.travaux').animate({
									opacity:1
								}, 100, function(){
									
									// 6b. Affichage contenu de l'url du site
									/*var text = $box.find('.travaux').text();
									var total = text.length;

									for (var i=0; i<total;i++){
										var c = text.substr(i,1);
										$(c).animate({opacity:1}, 100);
									}*/
									
									// 7. Affichage navigation
									$box.find('.arrows').animate({
										opacity:1
									}, 100, function(){
										if (opts.navEvent == false){
											addNavEvent();
											opts.navEvent = true;
										}
									});
									
									// 8. Bouton fermer
									$box.find('.close').bind('click', addCloseEvent);
								});
							});
						});
					});
				});
			});
		}

		addNavEvent = function(){
			// On rattache les évènement précédent/ suivant
			$('.prev').bind('click', function(event){
				event.preventDefault();
				if (opts.currentPos == 0){
					opts.currentPos = opts.listMedias.length - 1;
				} else {
					opts.currentPos = opts.currentPos - 1;
				}
				
				changeMedia();
				
			});
			
			// On rattache les évènement précédent/ suivant
			$('.next').bind('click', function(event){
				event.preventDefault();
				if (opts.currentPos == (opts.listMedias.length -1)){
					opts.currentPos = 0;
				} else {
					opts.currentPos = opts.currentPos + 1;
				}
				
				changeMedia();
				
			});
		}
		
		addCloseEvent = function(event){
			console.debug('close');
			event.preventDefault();
			
			var $box = opts.box;
			var self = this;
			
			$box.animate({
				opacity: 0
			}, 500, function(){
				$box.remove();
				$('#shadow').animate({
					opacity: 0
				}, 500, function(){
					$('#shadow').remove();
				});
			});
		}
		
		// 0. On lance la fonction d'initialisation
		opts.wrapper = this;
		init();
		
		// Toujours renvoyer l'objet jQuery pour le chaînage
		return this;
	}
})(jQuery);