/*
 * slide.js
 * Gestion d'un slide
 * Version 2
 *
 */

(function($){
	
	$.fn.slide = function (params){	
			new $.slide($(this),params);
			return this;
	};
	
	$.slide = function (element, params) {
		var p = $.extend({},$.fn.slide.defaults, params);	
		this.init(element, p);
	};
	
	//Paramètres par défaut.
	$.fn.slide.defaults = {				
		speed:800,				// durée des différentes animation
		mode:'manual',				// mode su slide : manual / auto / random
		horizontal:true,			// le défilement est-il horizontal?
		auto:true,				//
		autoPauseTime:5000,			// 
		useMask:false,				// Do we use mask image for our slide
		maskCssClass:'slide-mask',		// Mask CSS class
		viewerCssClass:'slide-viewer',		// viewer CSS class
		containerCssClass:'slide-container',	// slides container CSS class
		slideCssClass:'slide',			// one Slide CSS class
		menuCssClass:'slide-menu',		//
		onSlideChange:function(){},
		animationCallback:function(){},
		onSlideInit:function(){}
	};
	
	/*
	 * Definition de notre objet slide
	 */
	 
	$.slide.prototype = {

		
		p:{},					// Slide parzmeters	
		container:0,				// Slides container
		current:0,				// Current slide
		total:0,				// Total slides number
		diffLeft:0,				// X axis offset
		diffTop:0,				// Y axis offset
		mleft:0,				//
		mtop:0,					//
		interval:0,
		iterations:0,				//debug purpose

		/*Fonction d'initialisatin de notre prototype...*/
		init:function (e,params){
			//applications es parametres par defaut.
			this.container=e;
			this.p=params;
			this.total = this.container.children().size();
			// if we have only one slide, we don't need this js...
			if (this.total <= 1 ){
				return;
			}
			
			this.container.addClass(this.p.containerCssClass).wrap('<div class="'+this.p.viewerCssClass+'"></div>');
			if (this.p.useMask){
				$('.'+this.p.viewerCssClass).before('<div class="'+this.p.maskCssClass+'"/>');
			}	
			$('.'+this.p.viewerCssClass).append('<ul class="'+this.p.menuCssClass+'"></ul>');
			
			//Menu contruction...
			var i=1;
			var This=this;
			this.container.children().each (function(){
				$(this).addClass(This.p.slideCssClass);
				switch (i) {
					case This.total:
						var text='<li class="last-item">'+i+'</li>';
						break;
					case 1:
						var text='<li class="first-item current">'+i+'</li>';
						break;
					default:
						var text='<li>'+i+'</li>'				
				}
				$('.'+This.p.menuCssClass).append(text)
				i++;
			});
			// détection du clic sur les éléments
			$('.' + this.p.menuCssClass).children().each(function(){
				$(this).click(function(){
					var number = $(this).text() -1;
					$('.'+This.p.menuCssClass+' .current').removeClass('current');
					$(this).addClass('current');
					This.gotoSlide(number);
					if(This.p.auto){
						This.unloopSlide();
					}
				});
			});

			this.mtop = this.container.children(0).height();
			this.mleft = this.container.children(0).width();
			this.diffLeft = ($('.'+this.p.viewerCssClass).width() - this.mleft)/2;
			this.diffTop = ($('.'+this.p.viewerCssClass).height() - this.mtop)/2;
			if (this.p.horizontal) {
				var contWidth = this.mleft * this.total;
				var contHeight = this.mtop;
			}
			else {
				var contWidth = this.mleft;
				var contHeight = this.mtop * this.total;
			}
			this.container.css({
				width:	contWidth,
				height:	contHeight,
				margin:	this.diffTop+'px 0 0 '+this.diffLeft+'px'
			});
			this.p.onSlideInit();
			this.gotoSlide(0);
			
			if (this.p.auto){
				this.loopSlide();
			}
			
		},
		
		/* GotoSlide
		 *
		 * Aller à une diapositive en particulier
		 * params
		 * slide : numero de la diapositive a trouver
		 */

		gotoSlide:function(slide){
			this.iterations++;
			var This = this;			
			// animation de notre diaporama en fonction du sens de notre diaporama
			if(this.p.horizontal){
				var l = -((slide) * this.mleft ) + this.diffLeft;
				var t = this.diffTop;
			} 
			else {
				var t = -((slide) * this.mtop ) + this.diffTop;
				var t = this.diffLeft;
			}
			this.p.onSlideChange(this.container.children(':eq('+this.current+')'),this.container.children(':eq('+slide+')'));
			this.container.animate({
				marginTop:t,
				marginLeft:l
			},{
				duration:this.p.speed,	
				complete:function(){This.p.animationCallBack(This.container.children(':eq('+slide+')'));}
			});
			this.current = slide;
		},
		
		gotoNextSlide:function(){
			var This = this;
			if( this.current < this.total-1 ){
				var s = this.current + 1;
				this.gotoSlide(s);
				$('.'+This.p.menuCssClass+' .current').removeClass('current');
				$('.'+This.p.menuCssClass).children(':eq('+s+')').addClass('current');
			}
		},

		gotoPrevSlide:function(){
			if(this.current>1){
				var s=this.current - 1;
				this.gotoSlide(s);
			} 		
		},
		
		loopSlide:function() {
			var This = this;
			this.interval = setInterval(function(){
				if (This.current == This.total-1){
					This.gotoSlide(0);
					$('.'+This.p.menuCssClass+' .current').removeClass('current');
					$('.'+This.p.menuCssClass).children(':eq(0)').addClass('current');
				}
				else {
					This.gotoNextSlide();
				}
			}, this.p.autoPauseTime);
		},
		
		unloopSlide:function(){
			clearInterval(this.interval);
		},
		
		/*
		 * Animer le slide pour aller a une diapo de façon aléatoire
		 *
		 */
		getRandomSlide:function(){
			return (Math.floor(this.numberOfSlide*Math.random()+1))
		}
	};
	
})(jQuery);