/*
**

SLIDESHOW

**
*/

var WdSlideshow = new Class
({
	Implements: [ Options, Dataset ],

	options:
	{
		autoplay: false,
		autopause: true,
		autodots: false,

		browse:
		{
			previous: null,
			next: null
		},

		direction: 'left',
		delay: 4000,
		duration: 'long',

		contentTarget: null
	},

	initialize: function(el, options)
	{
		this.element = $(el);
		this.element.style.position = 'relative';
		this.element.store('slideshow', this);
		this.setOptions(options);
		this.setOptions(options, this.getDataset(el));

		if (!options)
		{
			options = {};
		}

		if (this.element.hasClass('autoplay'))
		{
			options.autoplay = true;
		}

		if (this.element.hasClass('autopause'))
		{
			options.autopause = true;
		}

		if (this.element.hasClass('autodots'))
		{
			options.autodots = true;
		}

		if (this.options.contentTarget)
		{
			this.contentTarget = $(document.body).getElement(this.options.contentTarget);
		}

		this.slices = this.element.getChildren();

		if (this.slices.length < 2)
		{
			return;
		}

		this.setOptions(options);

		this.dots = null;

		if (this.options.autodots)
		{
			this.dots = new Element('ul', { 'class': 'wd-slideshow-dots' });

			this.slices.each
			(
				function (dummy, i)
				{
					el = new Element('li', { html: i + 1 });

					if (!i)
					{
						el.addClass('selected');
					}

					el.addEvent
					(
						'click', function(ev)
						{
							this.setActive(i);
						}
						.bind(this)
					);

					this.dots.adopt(el);
				},

				this
			);

			this.dots.inject(this.element, 'after');
		}

		this.browse = this.element.getParent().getElement('div.wd-slideshow-browse');

		if (this.browse)
		{
			this.browse.set('opacity', 0);
			this.options.browse.previous = this.browse.getElement('a[href$=previous]');
			this.options.browse.next = this.browse.getElement('a[href$=next]');
		}

		var is_vertical = (this.options.direction == 'top' || this.options.direction == 'bottom');

		var tweenProperty = is_vertical ? 'top' : 'left';
		var el_size = this.element.getSize();

		this.el_size = el_size;

		var hidden = this.getHiddenPositions();
		var hidden_start = hidden.start;

		var tweens = [];
		var slices = this.slices;
		var slices_count = slices.length;

		for (var i = 0 ; i < slices_count ; i++)
		{
			var slice = slices[i];

			tweens[i] = new Fx.Tween(slice, { property: tweenProperty, link: 'chain', duration: this.options.duration });

			var styles =
			{
				position: 'absolute',
				top: is_vertical ? el_size.y * i : 0,
				left: is_vertical ? 0 : el_size.x * i
			};

			if (i > 0)
			{
				styles[tweenProperty] = hidden_start;
			}

			slice.setStyles(styles);
		}

		this.tweens = tweens;
		this.index = 0;

		//
		// browse
		//

		if (this.options.browse.previous)
		{
			this.options.browse.previous.addEvent
			(
				'click', function(ev)
				{
					ev.stop();

					this.previous();
				}
				.bind(this)
			);
		}

		if (this.options.browse.next)
		{
			this.options.browse.next.addEvent
			(
				'click', function(ev)
				{
					ev.stop();

					this.next();
				}
				.bind(this)
			);
		}

		//
		// autopause
		//

		if (this.options.autopause)
		{
			var self = this;

			function enter(ev)
			{
				self.pause();

				if (self.browse)
				{
					self.browse.fade('in');
				}
			}

			function leave(ev)
			{
				var c = this.getCoordinates();
				var x = ev.page.x;
				var y = ev.page.y;

				//console.log('leave: %a, %d <= %d <= %d, %d <= %d <= %d', ev, c.left, x, c.right, c.top, y, c.bottom);

				if (c.left <= x && x <= c.right && c.top <= y && y <= c.bottom)
				{
					//console.log('still inside: %d, %d, %d, %d', c.left <= x, x <= c.right, c.top <= y, y <= c.bottom);

					return;
				}

				if (this == self || this == self.browse)
				{
					self.browse.fade('out');
				}

				//console.log('play !');

				self.play();
			}

			this.element.addEvents
			({
				mouseenter: enter,
				mouseleave: leave.bind(this.element)
			});

			if (this.browse)
			{
				this.browse.addEvents
				({
					mouseenter: enter,
					mouseleave: leave.bind(this.browse)
				});
			}

			if (this.dots)
			{
				this.dots.addEvents
				({
					mouseenter: this.pause.bind(this),
					mouseleave: leave.bind(this.dots)
				});
			}
		}

		//
		// autoplay
		//

		if (this.options.autoplay)
		{
			this.play();
		}
	},

	play: function()
	{
		if (this.timer)
		{
			return;
		}

		this.timer = this.next.periodical(this.options.delay, this);
	},

	pause: function()
	{
		if (!this.timer)
		{
			return;
		}

		clearInterval(this.timer);

		this.timer = null;
	},

	setActive: function(i, direction, immediate)
	{
		var length = this.slices.length;
		var out_i = this.index % length;
		var in_i = i % length;

		this.index = in_i;

		if (out_i == in_i)
		{
			return;
		}

		if (this.dots)
		{
			var children = this.dots.getChildren();

			children.removeClass('selected');
			children[in_i].addClass('selected');
		}

		var pos = this.getHiddenPositions(direction);

		if (this.contentTarget)
		{
			var content = this.slices[in_i].get('data-content');

			this.contentTarget.innerHTML = content ? content : '&nbsp;';
		}

		if (immediate)
		{
			this.tweens[out_i].set(pos.finish);
			this.tweens[in_i].set(0);
		}
		else
		{
			this.tweens[out_i].start(0, pos.finish);
			this.tweens[in_i].start(pos.start, 0);
		}
	},

	next: function()
	{
		this.setActive(this.index + 1);
	},

	previous: function()
	{
		this.setActive(this.index + this.slices.length - 1, 'right');
	},

	getHiddenPositions: function(direction)
	{
		direction = direction || this.options.direction;

		var is_vertical = (direction == 'top' || direction == 'bottom');
		var size = this.el_size[is_vertical ? 'y' : 'x'];

		var start;
		var finish;

		switch (direction)
		{
			case 'bottom':
			case 'right':
			{
				start = -size - 1;
				finish = size;
			}
			break;

			case 'top':
			case 'left':
			{
				start = size;
				finish = -size - 1;
			}
			break;
		}

		return { start: start, finish: finish};
	}
});

window.addEvent
(
	'load', function()
	{
		$$('.wd-slideshow').each
		(
			function(el)
			{
				new WdSlideshow(el);
			}
		);
	}
);

window.addEvent
(
	'domready', function()
	{
		var slides = $$('#marches li');

		slides.addEvents
		({
			click: function()
			{
				var location = this.getElement('a').href;

				window.location = location;
			},

			mouseenter: function()
			{
				slides.removeClass('unfold');
				this.addClass('unfold');
			}
		});
	}
);