var mooVSmacCarrousel = new Class ({

	Implements: Options,

	options: {
		transition  : Fx.Transitions.Quad.easeOut,
		duration    : 1200,
		pause       : 3000,
		thDelay     : 12, //plus le chiffre est petit, plus les vignettes avancent vite
		butts       : {
			nextB   : 'CarrouNext',
			prevB   : 'CarrouPrev'
		},
		items       : {
			space   : 11,
			width   : 66
		},
		visVign     : 9,
		selClass    : 'selectVign'
	},

	initialize: function(ziCarrousel, ziItemConteneur, ziBigConteneur, buttsDiv, options) {
		this.setOptions(options);
		this.carrou    = $(ziCarrousel);
		this.defil     = $(ziItemConteneur);
		this.thumbCont = this.defil.getParent();
		this.bigCont   = $(ziBigConteneur);
		this.imgs      = $$('#' + ziBigConteneur + ' img') || [];
		this.items     = this.defil.getChildren();
		this.itemsNum  = this.items.length;
		this.itemsRW   = this.options.items.width + this.options.items.space;
		this.buttsDiv  = $(buttsDiv);
		this.w         = this.bigCont.getCoordinates().width;
		this.idx       = 0;
		this.thLeft    = this.thumbCont.getCoordinates().left;
		this.thWidth   = this.options.visVign * this.itemsRW;
		this.diff      = 0;
		var itemRab    = this.itemsNum - this.options.visVign;
		this.wRab      = itemRab * this.itemsRW;

		//mise en place de la bande de défilement des vignettes
		this.defil.setStyles({
			'width'    : this.itemsRW * this.itemsNum,
			'left'     : 0,
			'top'      : 0
		});

		//voir la bonne image et sélectionner la bonne vignette pour commencer
		this.items[this.idx].addClass(this.options.selClass);
		for (var i = 1; i < this.itemsNum; i ++){
			this.imgs[i].setStyle('display', 'none');
		}

		//defilement auto
		this.defilAuto();

		//masquer les flèches et les faire apparaître
		this.buttsDiv.getChildren().setStyle('visibility', 'hidden');
		this.buttsDiv.addEvents({
			'mouseover' : function(){
				$clear(this.enroute);
				this.buttsDiv.getChildren().setStyle('visibility', 'visible');
			}.bind(this),
			'mouseleave': function(){
				this.defil.setStyle('left', 0);
				this.defilAuto();
				this.buttsDiv.getChildren().setStyle('visibility', 'hidden');
			}.bind(this)
		});
		
		this.thumbMousePos();
		
		//les boutons prev next
		$(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));

		//le clic sur les vignettes
		this.items.each(function(el, j){
			el.addEvent('click', function(e){
				e.stop();
				if (j != this.idx){
					//console.log(j);
					j < this.idx ? this.toPrev(j+1) : this.toNext(j+1);
				}
			}.bind(this));
		}.bind(this));

	},

	thumbMousePos: function(){
		this.thumbCont.addEvents({
			'mouseenter'    : function(e){
				this.thumbMove();
			}.bind(this),
			'mousemove'  : function(e){
				this.mouseX = e.client.x;
				this.mouseY = e.client.y;
				this.diff   = (this.mouseX - (this.thLeft - window.getScroll().x)) - (this.thWidth / 2);
				//console.log(this.diff);
			}.bind(this),
			'mouseleave' : function(){
				this.diff = 0;
				$clear(this.thumbAuto);
			}.bind(this)
		});
	},

	setSelVign: function(){
		this.items[this.newid].addClass(this.options.selClass);
		for (var i = 0; i < this.itemsNum; i ++){
			if (i != this.newid) this.items[i].removeClass(this.options.selClass);
		}
	},

	toNext: function(idx){
		if (!idx) this.newid = this.idx == this.itemsNum - 1 ? 0 : this.idx + 1;
		else this.newid = idx - 1;
		//console.log(this.newid);
		this.imgs[this.newid].setStyles({
			'display': 'block',
			'left'   : this.w
		});
		this.setSelVign(idx);
		new Fx.Tween(this.imgs[this.idx], {duration: this.options.duration, transition: this.options.transition, link: 'chain'}).start('left', -this.w);
		new Fx.Tween(this.imgs[this.newid], {duration: this.options.duration, transition: this.options.transition, link: 'chain'}).start('left', 0);
		this.idx = this.newid;
	},

	toPrev: function(idx){
		if (!idx) { this.newid = this.idx == 0 ? this.itemsNum - 1 : this.idx - 1; }
		else this.newid = idx - 1;
		this.imgs[this.newid].setStyles({
			'display': 'block',
			'left'   : - this.w
		});
		this.setSelVign();
		new Fx.Tween(this.imgs[this.idx], {duration: this.options.duration, transition: this.options.transition, link: 'chain'}).start('left', this.w);
		new Fx.Tween(this.imgs[this.newid], {duration: this.options.duration, transition: this.options.transition, link: 'chain'}).start('left', 0);
		this.idx = this.newid;
	},

	thumbMove: function(){
		this.actLeft = this.defil.getCoordinates(this.thumbCont).left;
		if(this.diff != 0){
			if (this.diff > 0 && this.actLeft > - this.wRab) this.defil.setStyle('left', this.actLeft - 1);
			else if(this.diff < 0 && this.actLeft < 0) this.defil.setStyle('left', this.actLeft + 1);
		}
		this.thumbAuto = this.thumbMove.delay(this.options.thDelay, this);
	},

	defilAuto: function(){
		this.enroute = this.toNext.periodical(this.options.pause, this);
	}

});

window.addEvent('domready', function(){
	new mooVSmacCarrousel('vignCarrouWrapper', 'vignCarrou', 'AnimPhotos', 'animButts');
});