(function($) {

	var container;
	var elements;
	var settings;
	var arrayLi = {};
	var liAvailable = 0;
	var firstCarouselVisible;
	var lastCarouselVisible;
	
	$.fn.jgallery = function(options) {
        return this.each(function() {   
            $.jgallery(this, options);
        });
    };
	
	$.jgallery = function(conteneur, options) {
		var base = this;
		container = conteneur;
		
		settings = {
			speed : 'fast',
			widthThumbList: "auto",
			heightThumbList: "auto",
			imgViewerId: "viewer",
			widthImgViewer: "auto",
			heightImgViewer: "auto",
			activeClass: "active",
			navThumbs: true,
			navBigImg: true,
			loaderImage: "images/loader.gif", // A venir
			scroll: 1 // A venir
		};
		
		if (options)
            $.extend(settings, options);
			
		//Recupere tous les images 
		elements = $(conteneur).find("li");
		
		//Creation du conteneur principal
		$(conteneur).after(
			$(document.createElement("div"))
				.addClass('jgallery')
				.append(
					$(document.createElement("div"))
						.attr("id",settings.imgViewerId)
						.css({
							'position' : 'relative',
							'overflow' : 'hidden',
							'width': '100%',
							'height': '100%'
						}),
					$(document.createElement("img"))
						.attr({
							'src' : settings.loaderImage,
							'alt' : 'Chargement'
						})
						.css({
							'z-index' : -1,
							'position' : 'absolute',
							'top' : '40%',
							'left' : '45%'
						})
						
				)
				.css({
					'width': settings.widthImgViewer,
					'height': settings.heightImgViewer
				})
		)
		//Creation de la liste des miniatures
		$(conteneur).after(
			
			$(document.createElement("div"))
				.addClass('jgallery-carousel')
				.append(
					$(document.createElement("div"))
						.addClass('jgallery-thumbs')
						.append(
							$(document.createElement("ul"))
								.css({
										'left' : 0,
										'margin' : 0,
										'padding' : 0
									})
						)
						.css({
							'position' : 'relative',
							'overflow' : 'hidden',
							'width': '100%',
							'height': '100%'
						})
				)
				.css({
					'width': settings.widthThumbList,
					'height': settings.heightThumbList
				})
		);
		
		//On cache la thumbslist existante
		$(conteneur).css('display', 'none');
		
		//On creee la navigation par fleches sur limage agrandit
		if(settings.navBigImg == true) {
			//Bouton suivant
			var btnNext = $(document.createElement("a"))
								.attr("href","javascript:void(0)")
								.addClass('nav-next nav-viewer')
								.append('<span> > </span>')
								.click(function(e) {
									e.preventDefault();
									$.jgallery.goto($('.jgallery-thumbs li[rel="'+_getNextElt()+'"]'));
								});
			//Bouton precedent
			var btnPrev = $(document.createElement("a"))
								.attr("href","javascript:void(0)")
								.addClass('nav-prev nav-viewer')
								.append('<span> < </span>')
								.click(function(e) {
									e.preventDefault();
									$.jgallery.goto($('.jgallery-thumbs li[rel="'+_getPrevElt()+'"]'));
								});
			$('.jgallery').append(btnNext).append(btnPrev);
		}
		
		
		//On parcours tous les elements de la galerie
		elements.each(function(i) {
			var active = (i == 0) ? 'active' : '';
			
			//Creation des images thumb 
			$('.jgallery-thumbs > ul').append(
				$(document.createElement("li"))
					.addClass('thumbs-'+i)
					.attr('rel', i)
					.append(
						$(this).children('a').html()
					)
			);
			//Creation des images dans le conteneur principal
			$('#'+settings.imgViewerId).append(
				$(document.createElement("div"))
					.addClass('jgallery-image jgallery-image-'+i+' '+active)
					.attr('rel', i)
					.append(
						$(document.createElement("img"))
							.attr({
								alt: "",
								src: $(this).children('a').attr("href")
							}),
						$(document.createElement("div"))
							.addClass('desc-img')
							.append(
								$(this).children('a').attr("title")
							)
							.css({
								'display' : 'none',
								'width': settings.widthImgViewer
							})
					)
					.css({
						'display' : 'none',
						'z-index' : 0,
						'left' : 0
					})
			);
		})
		//Initialise la premiere photo selectionne
		//$('.jgallery-image').css('display', 'block');
		$('.jgallery-image').eq(0)
				.css('z-index', 2)
				.css('display', 'block')
				.find('.desc-img')
				.css('display', 'block');
		
		//Creation du carousel
		$.jgallery.carousel();
		
		//Creation des evenements sur la liste des miniatures
		$('.jgallery-thumbs li').click(function(e){
										e.preventDefault();
										$.jgallery.goto($(this));
								});
			
		//On selectionne le premier
		$.jgallery.highlight($('.jgallery-thumbs li:first'));
	};
	
	$.jgallery.highlight = function(elt){
		$('.jgallery-thumbs li')
			.not(elt)
			.removeClass(settings.activeClass)
			.animate({opacity:0.4}, settings.speed);
		elt
			.addClass(settings.activeClass)
			.animate({opacity:1}, settings.speed);
	};
	
	$.jgallery.goto = function(thumbElt) {
		//On charge la photo suivante
		if($('#'+settings.imgViewerId).find('.active').attr('rel') != thumbElt.attr('rel')) {
		
			//Descative les evenements sur les clicks
			$('.jgallery-thumbs li').unbind('click');
			$('.nav-viewer').unbind('click');
		
			var nextElt = $('#'+settings.imgViewerId).find('div[rel="'+thumbElt.attr('rel')+'"]');
			$.jgallery.highlight(thumbElt);
			
			if(settings.navThumbs) {
				$.jgallery.slideto(thumbElt);
			}
					
			nextElt
				.css('z-index', 1)
				.addClass('active')
				.css('display', 'block')
				.find('.desc-img')
				.fadeIn();	
				
			$('#'+settings.imgViewerId)
				.find('.active')
				.not(nextElt)
				.removeClass('active')
				.animate(
					{
						'left' : '-'+settings.widthImgViewer+'px'
					},
					{
						duration : settings.speed,
						queue : true,
						complete : function() {
										$(this).css({
											'left': 0,
											'z-index': 0,
											'display' : 'none'
										});
										nextElt.css('z-index', 2);
										
										$('.jgallery-thumbs li').click(function(e){
																		e.preventDefault();
																		$.jgallery.goto($(this));
																});
										$('.nav-next').click(function(e){
																e.preventDefault();
																$.jgallery.goto($('.jgallery-thumbs li[rel="'+_getNextElt()+'"]'));
														});
										$('.nav-prev').click(function(e){
																e.preventDefault();
																$.jgallery.goto($('.jgallery-thumbs li[rel="'+_getPrevElt()+'"]'));
														});
									}
					}
				)
				.find('.desc-img')
				.fadeOut(settings.speed)
		}
	};
	
	$.jgallery.carousel = function() {
		//On recupere la taille du ul
		var ulWidth = 0;
		var ulWidthWithoutPadding = 0;
		$('.jgallery-thumbs ul li').each(function(i) {
			arrayLi[i] = $(this).outerWidth();
			ulWidth = ulWidth +  $(this).outerWidth();
			ulWidthWithoutPadding = ulWidthWithoutPadding + $(this).width()
			if(ulWidthWithoutPadding > $('.jgallery-thumbs').width() && liAvailable == 0){
				liAvailable = i;
			}
		});
		
		//On definit lesquels sont afficher des le debut
		firstCarouselVisible = 0;
		lastCarouselVisible = liAvailable-1;
		
		$('.jgallery-thumbs ul').css({
									'position' : 'absolute',
									'width' : ulWidth+'px',
									'height' : '100%'
								});
								
		$('.jgallery-thumbs li').css('float', 'left');
		
		if(settings.widthThumbList >= ulWidth) {
			$('.nav-carousel').remove();
			$('.jgallery-thumbs ul').css({
				position : 'static',
				margin : 'auto'
			});
			return ;
		}
		
		$('.jgallery-carousel').append(
								$(document.createElement("a"))
									.attr({
										'href' : 'javascript:void(0)'
									})
									.addClass('nav-carousel nav-carousel-next')
									.append('<span> > </span>')
									.click(function(e) {
										e.preventDefault();
										$.jgallery.slideto($('.jgallery-thumbs li').eq(lastCarouselVisible+1));
									}),
								$(document.createElement("a"))
									.attr({
										'href' : 'javascript:void(0)'
									})
									.addClass('nav-carousel nav-carousel-prev')
									.append('<span> < </span>')
									.click(function(e) {
										e.preventDefault();
										$.jgallery.slideto($('.jgallery-thumbs li').eq(firstCarouselVisible-1));
									})
			
							);
	}
	
	$.jgallery.slideto = function(elt) {
		if(settings.widthThumbList >= $('.jgallery-carousel ul').width()) {
			return false;
		}
		//On supprime levenement click
		$('.nav-carousel').unbind('click');
	
		var pos = parseInt(elt.attr('rel'));
		var widthElt = 0;
		if(isNaN(pos)) {
			pos = 0;
		}
		
		if(pos < firstCarouselVisible || pos > lastCarouselVisible) {
			if(pos > lastCarouselVisible) {
				var nbElt = parseInt(lastCarouselVisible) - pos;
				lastCarouselVisible = pos;
				firstCarouselVisible = pos - (liAvailable-1);
			} else {
				var nbElt = parseInt(firstCarouselVisible) - pos;
				firstCarouselVisible = pos;
				lastCarouselVisible = pos + (liAvailable-1);
			}
			// A faire : traiter les largeurs des <li> separement
			widthElt = nbElt*$('.jgallery-thumbs li').outerWidth();
		}		
		
		var slideLeft = parseInt($('.jgallery-thumbs ul').css('left')) + parseInt(widthElt);

		$('.jgallery-thumbs ul').animate({
								'left' : parseInt(slideLeft)+'px'
							},
							{
								duration : settings.speed,
								queue : true,
								complete : function() {
												$('.nav-carousel-next').click(function(e) {
													e.preventDefault();
													$.jgallery.slideto($('.jgallery-thumbs li').eq(lastCarouselVisible+1));
												});
												$('.nav-carousel-prev').click(function(e) {
													e.preventDefault();
													$.jgallery.slideto($('.jgallery-thumbs li').eq(firstCarouselVisible-1));
												});
											}
							});
	}
	
	_getNextElt = function(){
		var idNext = $('#'+settings.imgViewerId).children('div.active').next().attr('rel');
		if(isNaN(parseInt(idNext))) {
			idNext = $('#'+settings.imgViewerId).children('div').eq(0).attr('rel');
		}
		
		return idNext;
	}
	_getPrevElt = function(){
		var idNext = $('#'+settings.imgViewerId).children('div.active').prev().attr('rel');
		if(isNaN(parseInt(idNext))) {
			idNext = $('#'+settings.imgViewerId).children('div').eq($('#'+settings.imgViewerId).children('div').size()-1).attr('rel');
		}
		
		return idNext;
	}
	
	
})(jQuery);