/****************************************/
/* SlideShow V 0.1			 			*/
/* Copyright 2009 Tsingytechnologies	*/	
/* www.tsingytech.com					*/
/****************************************/
(function($)
{
	$.fn.slideShow = function(params)
	{
		params = jQuery.extend(
		{
			autoplay		    : false,
			speed_navig			: 1000,
			imageloader			: 'loading.gif',
			image_view			: null,
			parametre			: []
		},params);
		//===================//
		// variable globale  //
		//===================//
		var _gallerie		    = this; 
		var _image_view         = _gallerie.children('.big');
		var _next 				= _gallerie.children("#next");
		var _prev 				= _gallerie.children("#prev");
		var _thumb 				= _gallerie.children("#slide").children('ul');
		var _slide_auto			= false;
		var _index				= 1;
		var _dimension_image	= new Array();
		//======================================//
		// _Init :	fonction d'initialisation   //
		// du slideshow, chargement des images  //
		//======================================//
		function _Init()
		{
			for(i=0;i<params.image_view.length;i++)
			{
				_LoadImage(i,_IsLoadingComplete);
			}			
			_SetParametres();
		}
		//=============================================================//
		// _Set_Parametres : Initialisation des parametres de éléments //
		// de la galerie											   //
		//=============================================================//

		function _SetParametres()
		{

			_gallerie.css(
			{
				overflow : 'hidden'
			});
			/* nombre total des images */
			_nb_total		= _thumb.children('li').size();		
			_marg			= _Removepx(_thumb.children('li').css('margin-top'));	
			_height_thumb	= (_nb_total * (params.parametre['height_thumb'])) + _nb_total*_marg;
			_thumb.height(_height_thumb);
			//=============================//
			// Centrer l'image de loading  //
			//=============================//
			_image_view.css(
			{
				position	: 'relative',
				left		: 0,
				top			: 0
			});
			_CenterElem($('#load'),_image_view,true,true)
			//=============================================//
			// si l'affichage du titre est accépté alors   //
			// on crée le div qui contiendra le titre	   //
			//=============================================//
			
			if(params.parametre['titre']!=0)
			{
				if(params.parametre['lightbox'])
				{
					text = '<a href="#" class="slide_popup">'+params.image_view[0].title+'</a>';
				}else
				{
					text = '<h1>'+params.image_view[0].title+'</h1>';
				}
				$('<div id="title_image">'+text+'</div>').css(
				{
					zIndex		:1000,
					position	: 'absolute',
					left		:0,
					bottom		: -50
				}).appendTo(_image_view);

				_CenterElem($('#title_image'),_image_view,true,false);
				$('#title_image').pngfix();
			}
			_class = (params.autoplay) ? '_pause' : '_play'
			$('<a href="javascript:;" id="play" class="'+_class+'" />').css({
				zIndex		: 1000,
				display		: 'none'
			}).appendTo(_image_view);
			_CenterElem($('#play'),_image_view,true,true);
		}
		function _Navigate()
		{
			$('#slide').serialScroll({
				items		:'li',
				prev		:'a#prev',
				next		:'a#next',
				axis		:'y',
				offset		:0,
				start		:0,
				stop		:true,
				duration	:params.speed_navig,
				step		:3,
				lock		:false,
				force		:false,
				cycle		:false,
				jump		:true
			});
		}
		//==============================================//
		// _SetEvent : tous les évènements du slideshow //
		//==============================================//

		function _SetEvent()
		{
			$('#play').click(function()
			{
				if($(this).attr('class')=='_play'){
					_class_del	= '_play';
					_new_class	= '_pause';
					_index		= _index+1;
					_AutoPlay();
					}else{
						_stopSlide();
						_class_del = '_pause';_new_class = '_play';
					}
				$(this).removeClass(_class_del).attr('class',_new_class);
			});
			_thumb.children('li').each(function(i)
			{
				_im = $(this).children('img');
				_im.click(function()
				{
					_index = i;
					_Gallerie_type(i);
				});		
			});
			$('.slide_popup').lightBox();
		}
		function _GetElemSize(elem){
			size = new Array();
			size[0] = (elem.width()==0) ? _Removepx(elem.css('width')) : elem.width();
			size[1] = (elem.height()==0) ? _Removepx(elem.css('height')) : elem.height();
			return size;
		}
		
		//=======================================================//
		// _CenterElem : centrer elem par rapport à elem_parent  //
		// elem : élément à centrer								 //	 
		// elem_parent : élément de centrage					 //
		// x : boolean (si true l'élement est centré sur l'axe x)//
		// y : pareil que pour x								 //
		//=======================================================//
		function _CenterElem(elem,elem_parent,x,y)
		{
			_size_elem		= _GetElemSize(elem);
			_size_parent	= _GetElemSize(elem_parent);
			if(x){elem.css({left : parseInt(_size_parent[0]/2) - parseInt(_size_elem[0]/2)});}
			if(y){elem.css({top : parseInt(_size_parent[1]/2) - parseInt(_size_elem[1]/2)})
			}
		}

		//=========================================//
		// _LoadImage : préchargement des images   //
		// i : index de l'image à charger		   //
		// callback : fonction à exécuter pendant  //
		// le préchargement						   //
		//=========================================//

		function _LoadImage(i,callback)
		{
			_dimension_image[i]			  = new Array();
			var _img  = new Image();
			_img.onload = function()
			{				
				$('<img />').attr({
					src		: params.image_view[i].image,
					title	: params.image_view[i].title,
					alt		: params.image_view[i].title,
					id		: 'image'+i,
					width   : parseInt(params.image_view[i].width),
					height  : parseInt(params.image_view[i].height)
				}).css('display','none').appendTo(_image_view);
				if (callback) callback(i);
			}
			_img.src = params.image_view[i].image;

		}
		function _Removepx(valeur){ return parseInt(valeur.substring(0,valeur.length-2));}

		//=======================================================//
		// _IsLoadingComplete : Tester la fin du préchargement   //
		// en fonction de la taille du tableau qui contient tous //
		// les images. 											 //
		//=======================================================//
		function _IsLoadingComplete(i)
		{
			_fin = params.image_view.length-1;
			//  test si le préchargement est fini
			if((_fin-i)==_fin)
			{
				// suppression de l'image loading
				$('#load').remove();
				// appel des fonctions à exécuter 
				_Navigate();
				if(params.autoplay){
					_AutoPlay();
				}
				_SetEvent();
				_ShowImage();

				if(params.parametre['titre']!=0){ _AnimateTitle()}
			}
		}
		//===============================================//
		// _ShowImage : Affichage de la première image   //
		//===============================================//
		function _ShowImage()
		{
			_im_active = _image_view.children('img#image0')
			_im_active.css({
				display		:'block',
				zIndex		:1,
				position	: 'relative',
				top			:0,
				left		:0
				}).attr('class','active_image');
			$('.slide_popup').attr('href',_im_active.attr('src'));
			$('.slide_popup').attr('title',_im_active.attr('title'));
			_CenterElem(_im_active,_image_view,true,true);
		}
		//================================================//
		// _Gallerie_type : type d'effet du slide show    //
		// (configurer depuis le back office)			  // 
		//================================================//

		function _Gallerie_type(index)
		{
			switch(params.parametre['galerie_type'])
			{
				case 'trans':
					_Transition(index);
				break;
				case 'scrool_top':
					_ScroolTop(index);
				break;
				case 'scrool_left':
					_ScroolLeft(index);
				break;
			}
		}
		//=======================================//
		// _Transition : Effet fadein-fadeout	 //
		//=======================================//
		function _Transition(index)
		{
			// récuperation de la class de l'image
			_class = _thumb.children('li:eq('+index+')').children('img').attr('class');
			if(_class=="")
			{
				// si l'image cliquée dans la liste des thumbnails n'est pas celui qui est afffiché
				// alors on le place derrière l'image actuelle

				_zindex		= $('.active_image').css('z-index');
				_new_big	= _image_view.children('img#image'+index);
				_new_big.css({
					display		:'block',
					zIndex		: _zindex-1,
					position	: 'absolute',
					top			:0,
					left		:0,
					width		: params.image_view[index].width+'px',
					height		: params.image_view[index].height+'px'
				});
				_CenterElem(_new_big, _image_view, true,true);
				// effet fadeOut de l'image actuelle
				$('.active_image').fadeOut(1000,function()
				{
					// suppression de la class 'big' de l'image actuelle
					$('.active_image').css({zIndex:0,top:0}).removeClass('active_image');
					// l'image cliquée devient l'image actuelle 
					_new_big.css({top:0,zIndex:1}).attr('class','active_image');
					// changement du titre de l'image
					_ChangeText(index)
				});
			}
		}
		//=============================//
		// _ScroolTop : Effet scrool   //
		//=============================//
		function _ScroolTop(index)
		{
			// récuperation de la hauteur de l'image actuelle
			_decal = $('.active_image').height();
			_class = _thumb.children('li:eq('+index+')').children('img').attr('class');
			if(_class=="")
			{
				_new_big	= _image_view.children('img#image'+index);

				// place l'image sélectionnée en haut de l'image actuelle
				_new_big.css({
					display		:'block',
					position	:'absolute',
					opacity		: 0,
					top			:-_decal,
					left		:0,
					width		: params.image_view[index].width+'px',
					height		: params.image_view[index].height+'px'
				});
				_CenterElem(_new_big, _image_view, true,true);	
				// animer l'image actuelle vers le haut
				$('.active_image').animate({top:-_decal,opacity:0},1000,function()
				{
					$('.active_image').css({zIndex:0}).removeClass('active_image');
				})
				// animer la nouvelle image actulle en bas
				_new_big.animate({top:0,opacity:1},1000,function()
				{
					_new_big.css({zIndex:1}).attr('class','active_image');
					_ChangeText(index);
				})
			}
		}
		//=============================//
		// _ScroolLeft : Effet scrool   //
		//=============================//
		function _ScroolLeft(index)
		{
			_decal = $('.active_image').width();
			_class = _thumb.children('li:eq('+index+')').children('img').attr('class');
			if(_class=="")
			{
				_new_big	= _image_view.children('img#image'+index);
				_new_big.css({
					display		:'block',
					position	:'absolute',
					opacity		: 0,
					top			: 0,
					left		: -_decal,
					width		: params.image_view[index].width+'px',
					height		: params.image_view[index].height+'px'
				});
				$('.active_image').animate({left:-_decal,opacity:0},1000,function()
				{
					$('.active_image').css({zIndex:0}).removeClass('active_image');
				})
				_CenterElem(_new_big, _image_view, true,true);
				_new_big.animate({left:0,opacity:1},1000,function()
				{
					_new_big.css({zIndex:1}).attr('class','active_image');
					_ChangeText(index);
				})
			}
		}
		//==============================================//
		// _ChangeText : changement du titre de l'image //
		//==============================================//
		function _ChangeText(index)
		{
			if(params.parametre['lightbox'])
			{
				$('#title_image').children('a').html(params.image_view[index].title);
				$('.slide_popup').attr('href',_image_view.children('img#image'+index).attr('src'));
				$('.slide_popup').attr('title',_image_view.children('img#image'+index).attr('title'));
			}else
			{
				$('#title_image').children('h1').html(params.image_view[index].title);
			}
		}
		//==============================================//
		// _AnimateTitle : animer le titre au passage   //
		// de la souris									//
		//==============================================//
		function _AnimateTitle()
		{
			_image_view.hover(function()
			{
				$('#title_image').animate({bottom:0},700)
				$('#play').fadeIn('normal');
			},function()
			{			
				$('#title_image').animate({bottom:-50},700)
				$('#play').fadeOut('normal');
			});
		}
		function _stopSlide()
		{
			if(_slide_auto){
				clearTimeout(_slide_auto);
				_slide_auto = false;
			}
		}
		function _AutoPlay()
		{
			_incr			 = _index%params.image_view.length;
			_Gallerie_type(_incr);
			_index++;
			_slide_auto		= setTimeout(function()	{_AutoPlay();},5000);
		}
		_Init();
	}
})(jQuery);