/*
                     __                      ___                           __                    
         __         /\ \__                  /\_ \                         /\ \     __            
 __  __ /\_\   _ __ \ \ ,_\  __  __     __  \//\ \       __       __      \_\ \   /\_\     ___   
/\ \/\ \\/\ \ /\`'__\\ \ \/ /\ \/\ \  /'__`\  \ \ \    /'_ `\   /'__`\    /'_` \  \/\ \   / __`\ 
\ \ \_/ |\ \ \\ \ \/  \ \ \_\ \ \_\ \/\ \L\.\_ \_\ \_ /\ \L\ \ /\ \L\.\_ /\ \L\ \  \ \ \ /\ \L\ \
 \ \___/  \ \_\\ \_\   \ \__\\ \____/\ \__/.\_\/\____\\ \____ \\ \__/.\_\\ \___,_\ _\ \ \\ \____/
  \/__/    \/_/ \/_/    \/__/ \/___/  \/__/\/_/\/____/ \/___L\ \\/__/\/_/ \/__,_ //\ \_\ \\/___/ 
                                                         /\____/                  \ \____/       
                                                         \_/__/                    \/___/        

Script : mooVcarrousel.js
massacred by christopher wait aka virtualgadjo aka grizzly aka l'ôt fou
un petit carrousel horizontal ou vertical
tourne avec mootools 1.2

--o0o--
TODO
ne fonctionne pour le moment qu'avec les boutons prev/next, nécessité fait loi...
à ajouter donc : les modes de fonctionnement défilement automatique ou au passage de la souris
--o0o--

*/

var mooVcarrousel = new Class ({

	Implements: [Events, Options],

	options: {
		onNext      : Class.empty,
		onPrev      : Class.empty,
		onStart     : Class.empty,
		direction   : 'horizontal',
		transition  : Fx.Transitions.linear,
		duration    : 500,
		auto        : false,
		mode        : 'butts',
		mousePlay   : false,
		progressBy  : 1,
		butts       : {
			nextB   : 'vCarrouNext',
			prevB   : 'vCarrouPrev'
		},
		items       : {
			space   : 10,
			width   : 100,
			height  : 60
		}
	},

	initialize: function(ziCarrousel, ziItemConteneur, ziItems, options) {
		this.setOptions(options);
		this.carrou   = $(ziCarrousel);
		this.defil    = $(ziItemConteneur);
		this.items    = $$('.' + ziItems) || [];
		this.itemsNum = this.count = this.items.length; //console.log(this.count);
		this.itemsRW  = this.options.items.width + this.options.items.space;
		this.itemsRH  = this.options.items.height + this.options.items.space;
		this.sectionW = this.itemsNum * this.itemsRW;
		this.sectionH = this.itemsNum * this.itemsRH;
		this.dn       = this.options.progressBy;
		this.progress = this.options.direction == "horizontal" ? this.itemsRW * this.dn : this.itemsRH * this.dn ; //console.log(this.progress);

		(2).times(function(){
			this.items.each(function(el){
				el.clone().inject(this.defil);
			}.bind(this));
		}.bind(this));

		switch (this.options.direction) {
			case "horizontal" :
				this.defil.setStyles({
					'width'    : this.sectionW * 3,
					'position' : 'absolute',
					'left'     : - this.sectionW
				});
				break;
			case "vertical" :
				this.defil.setStyles({
					'height'   : this.sectionH * 3,
					'position' : 'absolute',
					'top'      : - this.sectionH
				});
				break;
		}

		if (this.options.mode == "butts") {
			$(this.options.butts.nextB).addEvent('click', function(e){
				e.stop();
				this.toNext();
			}.bind(this));
			$(this.options.butts.prevB).addEvent('click', function(e){
				e.stop();
				this.toPrev();
			}.bind(this));
		}

		this.fireEvent('onStart');
		this.defilFx = new Fx.Morph(this.defil, {
			transition : this.options.transition,
			duration   : this.options.duration,
			link       : 'chain',
			onComplete : function(){
				this.repos();
				this.compEvent();
			}.bind(this)
		});
	},

	getPos: function(){
		this.defilPos = this.options.direction == "horizontal" ? - (this.count * this.itemsRW) : - (this.count * this.itemsRH);
	},

	repos: function(){
		this.getPos();
		if (this.options.direction == "horizontal"){
			if (this.defilPos <= - this.sectionW * 2){
				this.defil.setStyle('left', this.defilPos + this.sectionW);
				this.count -= this.itemsNum;
			}
			if (this.defilPos >= - this.itemsRW * this.dn) {
				this.defil.setStyle('left', this.defilPos - this.sectionW);
				this.count += this.itemsNum;
			}
		}
		if (this.options.direction == "vertical"){
			if (this.defilPos <= - this.sectionH * 2){
				this.defil.setStyle('top', this.defilPos + this.sectionH);
				this.count -= this.itemsNum;
			}
			if (this.defilPos.top >= - this.itemsRH){
				this.defil.setStyle('top', this.defilPos - this.sectionH);
				this.count += this.itemsNum;
			}
		}
	},

	toNext: function(){
		this.compEvent = function(){ this.fireEvent('onNext'); }
		this.getPos();
		if (this.options.direction == "horizontal"){
			this.defilFx.start({'left': this.defilPos - this.progress});
		}
		if (this.options.direction == "vertical"){
			this.defilFx.start({'top': this.defilPos - this.progress});
		}
		this.count += this.dn;
		
	},

	toPrev: function(){
		this.getPos();
		this.compEvent = function(){ this.fireEvent('onPrev'); }
		if (this.options.direction == "horizontal"){
			this.defilFx.start({'left': this.defilPos + this.progress});
		}
		if (this.options.direction == "vertical"){
			this.defilFx.start({'top': this.defilPos + this.progress});
		}
		this.count --;
	}

});