/*
based on Fx.Scroll.Carousel.js by Ryan Florence
http://moodocs.net/rpflo/mootools-rpflo/Fx.Scroll.Carousel

-----------------------------------------------
------------ HTML and JS structure ------------
-----------------------------------------------
<script type="text/javascript">
	var myvar = new SliderCarousel('myPrimaryId',{
		mode: 'horizontal',
		childSelector :'li.elementSlide'
	});
</script>

<div class="prev"><a href="#"><img src="prev-icon.png" alt="PREV" /></a></div>
<div id="myPrimaryId">
	<ul class="inner">
		<li class="elementSlide">
			Whatever you want
		</li>
		<li class="elementSlide">
			Whatever you want
		</li>
		<li class="elementSlide">
			Whatever you want
		</li>
	</ul>
</div>
<div class="next"><a href="#"><img src="next-icon.png" alt="NEXT" /></a></div>

-----------------------------------------------
----------------- CSS advices -----------------
-----------------------------------------------
#myPrimaryId{
	position: relative;
	width:870px; (put your space width)
	height:100px; (put your space height)
	overflow:hidden;
}
#myPrimaryId ul.inner{
	position: relative;
}
#myPrimaryId ul.inner li.elementSlide{
	display: block;
	overflow: hidden;
	float: left; (if horizontal)
	width: 290px;(if horizontal, put your element slide width)
	height:100px; (if vertical, put your element slide height)
}
	
-----------------------------------------------
------------------- Options -------------------
-----------------------------------------------
* mode					: type of slide   ( ex : "horizontal" / "vertical" )
* childSelector			: false / tag and class of slide element     ( ex : "li.elementSlide" )
* loopOnScrollEnd		: true
* scrollBy				: Step for element sliding. Default : 1 
* nextBt				: Next button for sliding manipulation   ( ex : '.next a' )
* prevBt				: Previous button for sliding manipulation   ( ex : '.prev a' )
* containerSlides		: Slides Container   ( ex : '.inner' )
* timerAutoNext			: false / timer for autoSlide in seconds.
* autoScrollBy			: Step for automatic element sliding. Default : 1 
* defaultContainerSize	: Default Container Size (fix getWidth() Bug on Webkit navigator)
* defaultSlideSize		: Default Slide Element Width (fix getWidth() Bug on Webkit navigator)


*/


var SliderCarousel = new Class({
	
	Extends: Fx.Scroll,
	
	options: {
		mode: 'horizontal',
		childSelector: false,
		loopOnScrollEnd: true,
		scrollBy: 1,
		nextBt: '.next a',
		prevBt: '.prev a',
		containerSlides: '.inner',
		timerAutoNext: false,
		autoScrollBy: 1,
		defaultContainerSize: 870,
		defaultSlideSize: 290,
		functionBtnNext : null,
		functionBtnPrev : null
	},
	initialize: function(element, options){		
		// On redefinit les options pour le Fx.Scroll
		this.parent(element, options);
		this.ele=element;
	},
	go: function(){	
		//Conteneur carrousel, celui sur lequel on fait l'action
		var sliderCarrousselContainer = $(this.ele);
		
		// Conteneur des slides (pour la definition de sa propre taille
		var mySliderCarroussel = sliderCarrousselContainer.getElement(this.options.containerSlides);
		
		// definition des boutons d'action NEXT et PREV
		var myBtnNextSlider = sliderCarrousselContainer.getParent().getElement(this.options.nextBt);
		this.myBtnNextSlider = myBtnNextSlider;
		var myBtnPrevSlider = sliderCarrousselContainer.getParent().getElement(this.options.prevBt);
		this.myBtnPrevSlider = myBtnPrevSlider;
		// on recupère le nombre de slides et leur taille pour definir celle du conteneur des slides
		//var elementCarroussel = mySliderCarroussel.getElements(this.options.childSelector);
		
		// recuperation de la taille de l'element de visibilite et d'un element de slide pour calculer le nombre de slides a l'affichage
		//var visibilitySlide = this.options.defaultContainerSize;
		//var widthSlide = this.options.defaultSlideSize;
		//var mySliderCarrousselWidth = elementCarroussel.length*widthSlide;
			
		// On definit le nombre de slides affichees et on met la taille du inner a la taille d'un element multiplie par leur nombre.
		//console.log(visibilitySlide/widthSlide);
		//var nbrSlidesVisible = Math.floor(visibilitySlide/widthSlide);
		//this.nbrSlidesVisible = nbrSlidesVisible;
		
		if(this.options.mode == "horizontal"){
			mySliderCarroussel.setStyle("width",this.options.defaultContainerSize+"px");
		}else{
			mySliderCarroussel.setStyle("height",this.options.defaultContainerSize+"px");
		}
		
		//console.log(visibilitySlide, widthSlide, mySliderCarrousselWidth, nbrSlidesVisible)
		
		// si le nbr de slides definit est plus grand que ce qu'on peut afficher, on adapte a l'affichage
		if(this.options.scrollBy > this.nbrSlidesVisible){
			this.options.scrollBy = this.nbrSlidesVisible;
		}
		if(this.options.autoScrollBy > this.nbrSlidesVisible){
			this.options.autoScrollBy = this.nbrSlidesVisible;
		}
		
		// on ajout les event clic sur les elements d'action
		
		myBtnNextSlider.addEvent('click', function(e){
			e.stop();
			this.toNext();
			this.resetTimerAutoNext();
		}.bind(this));
		
		myBtnPrevSlider.addEvent('click', function(e){
			e.stop();
			this.toPrevious();
			this.resetTimerAutoNext();
		}.bind(this));
		
		// on lance le timer effectif
		if(this.options.timerAutoNext !== false){
			// On met le timerAutoNext en millisecondes
			this.options.timerAutoNext = this.options.timerAutoNext*1000;
			// on lance le timer d'action
			this.timerautonext = setInterval(this.startTimerAutoNext.bind(this),this.options.timerAutoNext);
		}
		
		this.cacheElements();
		this.currentIndex = 0;
		this.maxVisible = parseInt(this.elements.length)-parseInt(this.nbrSlidesVisible);
		// ajout des desactivations de boutons si loop non activé
		if(!this.options.loopOnScrollEnd){
			this.myBtnPrevSlider.getParent().addClass("disabled");
			this.myBtnNextSlider.getParent().addClass("enabled");
			// ajout des effets de desactivation sur les boutons
			myBtnNextSlider.addEvent('click', function(e){
				this.checkActiveBtn();
			}.bind(this));
			myBtnPrevSlider.addEvent('click', function(e){
				this.checkActiveBtn();
			}.bind(this));
		}

		this.onFinish();
		
	},
	onFinish : function () {
	
	},
	checkActiveBtn: function(){
		if(this.currentIndex <= 0){
			this.myBtnPrevSlider.getParent().addClass("disabled");
			this.myBtnPrevSlider.getParent().removeClass("enabled");
		}else{
			this.myBtnPrevSlider.getParent().addClass("enabled");
			this.myBtnPrevSlider.getParent().removeClass("disabled");
		}
		if(this.currentIndex >= this.maxVisible){
			this.myBtnNextSlider.getParent().addClass("disabled");
			this.myBtnNextSlider.getParent().removeClass("enabled");
		}else{
			this.myBtnNextSlider.getParent().addClass("enabled");
			this.myBtnNextSlider.getParent().removeClass("disabled");
		}
	},
	startTimerAutoNext: function(){
		this.toNextAuto();
	},
	resetTimerAutoNext: function(){
		if(this.options.timerAutoNext !== false){
			clearInterval(this.timerautonext);
			this.timerautonext = setInterval(this.startTimerAutoNext.bind(this),this.options.timerAutoNext);
		}
	},
	cacheElements: function(){
		var cs = this.options.childSelector;
		if(cs){
			els = this.element.getElements(cs);
		} else if (this.options.mode == 'horizontal'){
			els = this.element.getElements(':first-child > *');
		} else {
			els = this.element.getChildren();
		}
		this.elements = els;
		
		
		return this;
	},
	toNextAuto: function(){
		if(this.checkLink()) return this;
		this.currentIndex = this.getNextIndex2();
		this.fireEvent('next');
		this.toElement(this.elements[this.currentIndex]);
		
		return this;
	},
	toNext: function(){
		//if(this.checkLink()) return this;
		this.currentIndex = this.getNextIndex();
		this.fireEvent('next');
		this.toElement(this.elements[this.currentIndex]);
		
		//this.options.functionBtnNext();
		
		return this;
	},
	toPrevious: function(){
		if(this.checkLink()) return this;
		this.currentIndex = this.getPreviousIndex();
		this.fireEvent('previous')
		this.toElement(this.elements[this.currentIndex]);
		
		//this.options.functionBtnPrev();
		
		return this;
	},
	getPreviousIndex: function(){
		this.currentIndex = this.currentIndex - this.options.scrollBy;
		var diffCurrentFromScroll = this.currentIndex + this.options.scrollBy;
		if(this.currentIndex < 0 && diffCurrentFromScroll>0) {
			this.currentIndex = 0;
		}
		if(this.currentIndex < 0) {
			if(this.options.loopOnScrollEnd){
				this.currentIndex= this.elements.length - this.options.scrollBy;
			}else{
				this.currentIndex= 0;
			}
			//console.log("previous ",this.currentIndex);
			this.fireEvent('loop');
			this.fireEvent('previousLoop');
			return this.currentIndex;
		} else {
			//console.log("previous ",this.currentIndex);
			return this.currentIndex;
		}
	},
	getNextIndex: function(){
		this.currentIndex = this.currentIndex + this.options.scrollBy;
		//console.log(this.nbrSlidesVisible);
		if(this.currentIndex >= this.maxVisible && !this.options.loopOnScrollEnd){
			this.currentIndex = this.maxVisible;
			//console.log("max visble ",maxVisible,"next ",this.currentIndex," max ",this.elements.length);
		}
		if(this.currentIndex >= this.elements.length || this.checkScroll()){
			this.fireEvent('loop');
			this.fireEvent('nextLoop');
			return 0;
		} else {
			return this.currentIndex;
		};
	},
	getNextIndex2: function(){
		this.currentIndex = this.currentIndex + this.options.autoScrollBy;
		if(this.currentIndex == this.elements.length || this.checkScroll()){
			this.fireEvent('loop');
			this.fireEvent('nextLoop');
			return 0;
		} else {
			return this.currentIndex;
		};
	},
	
	getOffsetIndex: function(){
		var visible = (this.options.mode == 'horizontal') ? 
			this.element.getStyle('width').toInt() / this.elements[0].getStyle('width').toInt() :
			this.element.getStyle('height').toInt() / this.elements[0].getStyle('height').toInt();
		return this.currentIndex + 1 - visible;
	},
	
	checkLink: function(){
		return (this.timer && this.options.link == 'ignore');
	},
	
	checkScroll: function(){
		if(!this.options.loopOnScrollEnd) return false;
		if(this.options.mode == 'horizontal'){
			var scroll = this.element.getScroll().x;
			var total = this.element.getScrollSize().x - this.element.getSize().x;
		} else {
			var scroll = this.element.getScroll().y;
			var total = this.element.getScrollSize().y - this.element.getSize().y;
		}
		return (scroll == total);
	},
	
	getCurrent: function(){
		return this.elements[this.currentIndex];
	}
	
});