var SimpleCarousel = new Class({
	Implements: [Events, Options],

	options: {
		imageWidth: 150
	},

	initialize: function(container, options) {
		this.container = container;
		this.covers = this.container.getElement('dl');

		this.items = this.covers.getElements('dd[class!=separator]');
		
		this.nbCovers = this.items.length;
		this.fx = new Fx.Tween(this.covers, {'duration': 800, 'transition': Fx.Transitions.Cubic.easeInOut });
		this.currentPosition = 0;
		this.left = 0;
	},
	moveTo: function(position) {	
		
		this.left = 0;
		var i = 0;
		while(i < position) {
			this.left += this.items[i].getSize().x;
			i++;
		}	

		this.currentPosition = position;
		this.fx.start('left', -this.left+'px');
	},
	next: function() {
		this.fx.cancel();
		if(this.currentPosition + 1 >= this.nbCovers) {
			this.moveTo(0);
		} else {
			this.moveTo(this.currentPosition + 1);
		}
	},
	previous: function() {
		this.fx.cancel();
		if(this.currentPosition < 1) {
			this.moveTo(this.nbCovers -1);
		} else {
			this.moveTo(this.currentPosition - 1);
		}
	},
	items: [],
	container: null,
	covers: null,
	currentPosition: 0,
	nbCovers: 0,
	left: 0
});





// collection
var InlineGallery = new Class({
	Implements: [Options, Events],
	options: {
		thumbHeight: 80,
		fullHeight: 400,
		width: 960,
		duration: 400,
		texts: {
			loading: 'Chargement en cours...'
		}
	},
	initialize: function(container, options) {
		this.setOptions(options);
		this.container = container;

		this.items = this.container.getElements('li');
		
		this.container.setStyle('opacity', 0);

		this.loader = new Element('span', {
			'class': 'gallery-loader'/*,
			'text': this.options.texts.loading*/
		});
		this.loader.inject(this.container.getParent());
		
		this.container.getElements('img').each(function(el) {
			this.images.push(el.get('src'));
		}.bind(this));
		
		this.preload();

	},
	preload: function() {
		new Asset.images(this.images, {
			onComplete: this.render.bind(this)
		});
	},
	render: function() {
		var fullWidth = 0;
		this.items.each(function(el, index) {
			el.getElement('img').addEvent('click', function() {
				this.setImage(index);
				return false;
			}.bind(this));

			fullWidth += el.getSize().x;

		}.bind(this));
		fullWidth += 800;
		this.container.setStyle('width', fullWidth+'px');

		//this.currentPosition = Math.floor(this.items.length / 2) - 1;
		this.currentPosition = 0;
		this.previousPosition = this.currentPosition + 1;
		
		
		this.loader.hide();
		this.container.fade('in');

		this.setImage(this.currentPosition);
	},
	setImage: function(position) {
		
		if(this.currentPosition != position) {
			this.listFx = new Fx.Tween(this.container, {duration: this.options.duration});

			this.previousPosition = this.currentPosition;

			var thumbFx = new Fx.Morph(this.items[this.previousPosition].getElement('img'), {duration: this.options.duration});

			this.currentPosition = position;
			var item = this.items[this.currentPosition];
			
			this.items[this.previousPosition].getElements('div').hide();

			thumbFx.addEvent('complete', function() {
				var imgWidth = item.getElement('img').getSize().x / item.getElement('img').getSize().y * this.options.fullHeight;

				var left = 0;
				for(i = 0; i < this.currentPosition; i++) {
					left += this.items[i].getSize().x;
				}
				this.listFx.removeEvents('complete');

				var fullFx = new Fx.Morph(item.getElement('img'), {duration: this.options.duration});

				this.listFx.start('left', ((this.options.width - imgWidth) / 2 - left)+'px');
				
				fullFx.start({
					'height': this.options.fullHeight+'px',
					'margin-top': -((this.options.fullHeight - this.options.thumbHeight) /2)+'px'
				});
/*
				item.getElement('div.lang-en').setStyles({
					'left': imgWidth+ 10 +'px',
					'top': '250px',
					'display': 'block',
					'opacity': 0
				}).fade('in');
				
				item.getElement('div.lang-fr').setStyles({
					'left': - 170 - 10 +'px',
					'top': '250px',
					'display': 'block',
					'opacity': 0
				}).fade('in');
*/

			}.bind(this));
		
			thumbFx.start({
				'height': this.options.thumbHeight+'px',
				'margin-top': 0+'px'
			});
			
		} else {			
			var thumbFx = new Fx.Morph(this.items[this.currentPosition].getElement('img'), {duration: this.options.duration});
			if(this.items[this.currentPosition].getElement('img').getSize().y > (this.options.thumbHeight+20)) {				
				thumbFx.start({
					'height': this.options.thumbHeight+'px',
					'margin-top': 0+'px'
				});
			} else {
				thumbFx.start({
					'height': this.options.fullHeight+'px',
					'margin-top': -((this.options.fullHeight - this.options.thumbHeight) /2)+'px'
				});
			}
		}
		
	},
	container: null,
	currentPosition: 1,
	previousPosition: 0,
	items: [],
	listFx: null,
	images: [],
	loader: null
});

// animated clouds
var CurvedFxItem = new Class({
	Implements: [Options, Events],
	options: {
		path: [],
		duration: 10000,
		debug: false
	},
	initialize: function(target, options) {
		this.setOptions(options);
		this.target = target;


		this.pOrigin = {x: 0, y: 0};
		
		//Create the Master Path Object
		this.path = new Fx.Path(this.options.path, {origin: this.pOrigin});

		if(this.options.debug) {
			this.debug();
		}


		this.target.setStyles({position: 'absolute', left: this.pOrigin.x, top: this.pOrigin.y});

		this.fx = new Fx.Morpher(this.target, {
			path: this.path,
			usepath: ['top', 'left'],
			regpoint: Fx.RegPoint.Center,
			duration: this.options.duration,
			transition: Fx.Transitions.linear
	   });
	   this.fx.addEvent('complete', function() {
		   this.fx.start();
	   }.bind(this))

	   this.makeItPause();

	   this.fx.start();
	},
	makeItPause: function() {
		this.target.addEvents({
			'mouseenter': function() {
				this.fx.pause();
				return false;
			}.bind(this),
			'mouseleave': function() {
				this.fx.resume();
				return false;
			}.bind(this)
		});
	},
	debug: function() {
		//Display Path
		var drawCurves = function(point, pos) {if(!(pos%20)) new Element('div').addClass('pixel').setStyles({position: 'absolute', left:point.x, top:point.y}).inject($('simple-page'))};

		//Debug info for the pathing
		this.path.plot(drawCurves);
	},
	target: null,
	path: null,
	pOrigin: [],
	fx: null
});