/*
 * Slideshow - v1.0 - 2013-10-01
 * http://piwitheme.fr/
 *
 */
 
(function($){
	$.fn.slideshow = function(args){

	// Variables
		var defaults = 
			{
			displayPlayPause	: true,
			autoPlay			: false,
			displayNextPrev		: true,
			thumb_always		: true,
			navType				: 'nav',			//thumb, nav or no
			styleSlideshow		: 'Fade',			//Fade or Slide
			target				: '_self',			//_blank or _self
			speed				: 200,
			width				: 400,
			height				: 300,
			thumb_width			: 60,
			thumb_height		: 60,
		};
		
		var options 			= $.extend(defaults, args);

		this.each(function(){  
			var ele 			= this,
				n_thumb			= Math.floor((options.width) / options.thumb_width),
				cont_h			= options.height - 100;
				
			if(options.navType == 'thumb'){
				cont_h			= options.height - (options.thumb_height + 60);
			};

			var v_ele = 
				{
				playOn			: false,
				i_img			: 0,
				m_s 			: 0,
				interval		: '',
				thumb_i			: 1,
				imgsLength		: options.imgs.length,
				speed			: options.speed,
				style			: options.styleSlideshow,
				s_w 			: options.width,
				n_thumb			: n_thumb,
				playOnT			: false,
				navThumb_w		: '',
			};
			
			$(ele).data('e',v_ele); 
			$(ele).width(options.width).height(options.height).addClass(options.styleSlideshow + ' slideshow').append($('<div />').addClass('slidecontent').append($('<div />').addClass('contener_slideshow').append($('<ul />').height(cont_h))).append($('<div/>').addClass('control_slideshow')));
			
						
			//mise en place des images
			$(document).ready(function(){
				$.each(options.imgs, function(i, img){
					var $imag		= img.src,
						$alt 		= img.alt,
						$title		= img.title,
						$url 		= img.url,
						$descr		= img.descr,
						$height 	= img.height,
						$width		= img.width;
						
						if(typeof $descr === 'undefined'){	
							var divDescr	= ""
						}else{
							var	divDescr	=[$('<div />').addClass('descr').html($descr)]
						};
						
						if(typeof $url === 'undefined'){
							var blockImg 	= [$('<div />').append(divDescr).append($('<img />').attr({'src':$imag , 'alt':$alt , 'title':$title }))]
						}else{
							var	blockImg	= [$('<a />').attr({'href':$url , 'target':options.target}).append(divDescr).append($('<img />').attr({'src':$imag , 'alt':$alt , 'title':$title }))]
						}
						
					$('ul',ele).append($('<li />').addClass('img-' + i).append($('<div />').addClass('contenerImg').width(options.width).height(cont_h).append(blockImg)));

					
				_resizeSlideshowImag(ele, i, $height,$width);

				});
				
	
//slide_____________________________________________________________________________________________
				if(options.styleSlideshow == 'Slide'){
					var $ul_w = (options.imgs.length + 1) * options.width;
					$('ul', ele).wrap($('<div />').addClass('slideCont')).width($ul_w);
					$('ul', ele).prepend($('ul li:last-child', ele).clone().css('margin-left','-'+ options.width +'px')); 
					$('ul', ele).append($('ul li:nth-child(2)', ele).clone()); 
					$('li:nth-child(2)',ele).addClass('activ');		
				};
				
//fade___________________________________________________________________________________________________________
				if(options.styleSlideshow == 'Fade'){
					$('li' ,ele).css('display','none')
					$('li',ele).first().show().addClass('activ')
				};
			
//bouton play/pause________________________________________________________________________________________________________________________
				if(options.displayPlayPause == true){
					$('.control_slideshow', ele).append($('<div />').addClass('slideshow_control'))
				};

//auto démarage____________________________________________________________________________________________________________
				if(options.autoPlay == true){
						_start(ele)
					$('.slideshow_control',ele).addClass('pause');
					$(ele).data('e').playOn = true;
					_navShow(ele)
				}else{
					$('.slideshow_control',ele).addClass('play');
					_pause(ele);
					$(ele).data('e').playOn = false;
				}
				
			});	
			

//lien/thumb de navigation__________________________________________________________________________________________________________________________
			if(options.navType == 'nav' || options.navType == 'thumb'){
				$('.control_slideshow', ele).append($('<div />').addClass('clt_thumb')).append($('<div/>').addClass('link'));
				if(options.navType == 'nav'){
					$('.clt_thumb', ele).hide();
					for(	var i = 0;
							i < options.imgs.length; 
							i++){
						$('.link', ele).append($('<span />').attr({'id':i,'class':'slideshow-' + i + ' nav-link slideshow-link','imag':i}).html(i+1));
						$('.nav-link',ele).first().addClass('selected');
					}
				};
				
				if(options.navType == 'thumb'){
					if(options.thumb_always == false){
						$('.link', ele).hide();
					}else{
						$('.clt_thumb', ele).hide()
					};
					var $resize_thumb_w 	= ((options.width-(n_thumb * 5))/n_thumb),
						$r 					= options.thumb_width/options.thumb_height,
						$rezise_thumb_h		= $resize_thumb_w / $r,
						$navThumb_w			= options.imgs.length * ($resize_thumb_w + 6);
					$(ele).data('e').$navThumb_w	= $navThumb_w;
					$('.link', ele).width(options.width).height(options.thumb_height + 10);
					$('.link', ele).append($('<div />').addClass('nav-thumb-content').height($rezise_thumb_h + 10).width($navThumb_w));
					$.each(options.imgs, function(i, img){
						var imag	= img.src;
						$('.nav-thumb-content', ele).append($('<span />').addClass('slideshow-' + i + ' nav-link slideshow-thumb').attr('imag', i).width($resize_thumb_w).height($rezise_thumb_h).append($('<img />').attr({'class':'thumb','src':imag})));
					});
					if($navThumb_w > options.width){
						$('.nav-thumb-content', ele).wrap($('<div />').addClass('nav-thumb-slide').width( options.width));
						$('.link', ele).append($('<div />').addClass('thumb_control thumb-left')).append($('<div />').addClass('thumb_control thumb-right'));
					}
				}
			};
			
//flèche next/previous_______________________________________________________________________________________________________________________
			if(options.displayNextPrev == true){
				$('.contener_slideshow', ele).append($('<div />').addClass('nav prev').height(cont_h)).append($('<div />').addClass('nav next').height(cont_h));
			};
	
//________________________________________action___________________________________________________________________________________________________________
			
//click flèche de navigation___________________________________________________________________________________________________________________________
			$('.next', ele).on('click', function(){
				_rotate(ele);
				_thumbSlide(ele)
			});
			
			$('.prev',ele).on('click', function()	{
				if($(ele).data('e').i_img == 0){
					$(ele).data('e').i_img = options.imgs.length - 2
				}else{
					$(ele).data('e').i_img = $(ele).data('e').i_img - 2
				};
				if(options.styleSlideshow == 'Fade'){
					_rotate(ele);
					_thumbSlide(ele)
				}else{
					$(ele).data('e').m_s = $(ele).data('e').m_s + (2 * options.width);
					_rotate(ele);
					_thumbSlide(ele)
				}
			});

//click sur un lien/thumb_________________________________________________________________________________________________________________________________
			$('.nav-link',ele).on('click', function(){
				$(ele).data('e').playOnT = $(ele).data('e').playOn;
				if($(ele).data('e').playOn == true){
					$(ele).data('e').playOn = false;
					_pause(ele);
				}		
				var $new_i_img 	= parseInt($(this).attr('imag')),
					$r;
					$r 	= $new_i_img - ($(ele).data('e').i_img + 1)
				$(ele).data('e').m_s 	= $(ele).data('e').m_s - ($r * options.width);
				$(ele).data('e').i_img 	= $new_i_img - 1;
				_rotate(ele);
				if ($(ele).data('e').playOnT == true){
					$(ele).data('e').playOn = true;
					_start(ele)
				}
			});

//ouvrir les thumb______________________________________________________________________________________________________________________________________________
			$('.clt_thumb',ele).on('click', function(){
				$(this).toggleClass('show');
				$('.link', ele).slideToggle('slow');
			});
			
//bouton play/pause_____________________________________________________________________________________________________________________________________________
			$('.slideshow_control', ele).on('click',function() {
				$(this).toggleClass('play pause');
				if (($(ele).data('e').playOn) == true){
					$(ele).data('e').playOn = false;
					_pause(ele)
				}else{
					$(ele).data('e').playOn = true;
					_start(ele)
				}
			});
			
//mouse over image_______________________________________________________________________________________________________________________________________________
		$('.contener_slideshow', ele).find('img').hover(function() {
			$(ele).data('e').playOnT = $(ele).data('e').playOn;
			if($(ele).data('e').playOn == true){
				$(ele).data('e').playOn = false;
				_pause(ele);
			}
			$(this).parent().find('.descr').slideDown(200, function() {
				$(this).clearQueue();
			});	
		}, function() {
			if ($(ele).data('e').playOnT == true){
				$(ele).data('e').playOn = true;
				_start(ele)
			}
			$(this).parent().find('.descr').slideUp(200, function() {
				$(this).clearQueue();
			});
		});	
		
//mouse over nav
		$('.nav', ele).hover(function() {
			$(ele).data('e').playOnT = $(ele).data('e').playOn;
			if($(ele).data('e').playOn == true){
				$(ele).data('e').playOn = false;
				_pause(ele);
			}
			
		}, function() {
			if ($(ele).data('e').playOnT == true){
				$(ele).data('e').playOn = true;
				_start(ele)
			}
		});

		
//nav thumb________________________________________________________________________________________________________________________________________________
			$('.thumb-right',ele).on('mousedown',function(){
				$('.nav-thumb-content', ele).animate({
					left: (-($(ele).data('e').navThumb_w -  options.width))
				}, 1000)
			}).mouseup(function(){
				$('.nav-thumb-content', ele).stop()
			});
			
			$('.thumb-left',ele).on('mousedown',function(){
				$('.nav-thumb-content', ele).animate({
					left:0 
				}, 1000)
			}).mouseup(function(){
				$('.nav-thumb-content', ele).stop()
			});

//___________________________________________Fonctions_____________________________________________________________________________________
//resize and center image__________________________________________________________________________________________________________________
				
				function _resizeSlideshowImag (ele, i, $img_h,$img_w){
					
						var $img		= $('ul li.img-' + i +' img ',ele),
							$descr		= $img.prev(),
							$img_r 		= $img_h/$img_w,
							$box_h 		= cont_h,
							$box_w 		= options.width,
							$box_r 		= $box_h/$box_w,
							$new_h,
							$new_w;
						if(($img_h > $box_h) || ($img_w > $box_w)){
							if($box_r < $img_r){
								$new_h 	= $box_h - 30;
								$new_w 	= $box_h / $img_r
							}else{
								$new_h 	= ($box_w * $img_r) - 30;
								$new_w 	= $box_w
							};
	
						}else{
							$new_h 	= $img_h;
							$new_w	= $img_w;
						};
						var $left	= ($(ele).data('e').s_w / 2)-($new_w / 2) + 'px',
							$top	= ($box_h / 2)-($new_h / 2) + 'px';
						$img.css({
							width	: $new_w + 'px',
							height	: $new_h + 'px',
							left	: $left,
							top		: $top,
						});
						$descr.css(
							{
							left	: $left,
							width	: $new_w + 'px',
							height	: $new_h/4 + 'px',
							bottom	: (($box_h / 2)-($new_h / 2)) + 'px',							
						})
									console.debug($top);

				};
				
//animation________________________________________________________________________________________________________________________________			
			function _rotate(ele) {	
				var style = $(ele).data('e').style;
				if(style == 'Fade'){
				_fade(ele)
				}else{
				_slide(ele)
				}
			};
			
//start animation______________________________________________________________________________________________________________________________			
			function _start(ele) {
				$(ele).data('e').interval = setTimeout(function(){
					if($(ele).data('e').playOn == false){
						_navShow(ele);
					};
					_rotate(ele);
					_start(ele)
				},$(ele).data('e').speed)
			};

//fade animation_____________________________________________________________________________________________________________________________		
			function _fade(ele) {
				if($(ele).data('e').i_img == ($(ele).data('e').imgsLength - 1)){
					$(ele).data('e').i_img = -1
				};
				$('.activ',ele).removeClass('activ').fadeOut(1000);
				$('.selected',ele).removeClass('selected');
				$('.img-' + ($(ele).data('e').i_img + 1), ele).fadeIn(1500).addClass('activ');
				$('.slideshow-' + ($(ele).data('e').i_img + 1), ele).addClass('selected');
				$(ele).data('e').i_img++;
				if(($(ele).data('e').playOn) == false){
					_navShow(ele)
				}else{
					_thumbSlide(ele)
				};
			};

//slide animation_____________________________________________________________________________________________________________________________			
			function _slide(ele) {
				if($(ele).data('e').i_img == $(ele).data('e').imgsLength - 1){
					$(ele).data('e').i_img = -1
				}
				$(ele).data('e').m_s = $(ele).data('e').m_s - $(ele).data('e').s_w;
				$('.slideCont ul',ele).animate({
					marginLeft: $(ele).data('e').m_s
				}, 800, function(){
					$('.activ',ele).removeClass('activ');
					$('.selected',ele).removeClass('selected');
					$('.img-' + ($(ele).data('e').i_img + 1), ele).addClass('activ');
					$('.slideshow-' + ($(ele).data('e').i_img + 1),ele).addClass('selected');
					$(ele).data('e').i_img++;
					if ($(ele).data('e').i_img ==  0 ){
						$('.slideCont ul',ele).css('margin-left','0px');
						$(ele).data('e').m_s = 0
					};
					if(($(ele).data('e').playOn) == false){
						_navShow(ele)
					}else{
						_thumbSlide(ele)
					};
				})
			};

		
//stop animation______________________________________________________________________________________________________________________________			
			function _pause(ele) {
				clearTimeout($(ele).data('e').interval );
				_navShow(ele)
			};
//navigation___________________________________________________________________________________________________________________________________			
			function _navShow(ele) {
				$('.thumb_control',ele).each(function(){
					if($(ele).data('e').playOn == true){
						$(this).hide()
					}else{
						$(this).show()
					}
				});
				$('.nav',ele).each(function(){
					if($(ele).data('e').playOn == true){
						$(this).hide()
					}else{
						if($(ele).data('e').i_img == 0){
							$('.prev',ele).hide();
							$('.next',ele).show()
						}else if($(ele).data('e').i_img == $(ele).data('e').imgsLength - 1){
							$('.next',ele).hide();
							$('.prev',ele).show()
						}else{
							$(this).show()
						}
					}
				})
			};
//thumb slide_________________________________________________________________________________________________________________________________________
			function _thumbSlide(ele) {
				if(options.navType == 'thumb'){
					var $a 				= ($(ele).data('e').i_img)/$(ele).data('e').n_thumb,
						$thumbcontent 	= $('.nav-thumb-content', ele);
					if($a < 0){
						$a = 0
					}
					$(ele).data('e').thumb_i = Math.floor($a);
					var m_r = ( $(ele).data('e').thumb_i)* $(ele).data('e').s_w;
					if ( m_r > $thumbcontent.width() - $('.nav-thumb-slide', ele).width()){
						m_r = $thumbcontent.width() - $('.nav-thumb-slide', ele).width();
					};
					var n_p = $thumbcontent.position();
					if($('.link:hover', ele).length == 0){
						if ( n_p.left != m_r ){
							$('.nav-thumb-content', ele).animate({
									left : - m_r
							})
						};
					};
				}
			};
			return $(this)
		});
	}
})(jQuery);