window.addEvent
(
	'load', function()
	{
		if (Browser.Engine.name == 'trident')
		{
			return;
		}

		$$('.has_pill').each
		(
			function(el)
			{
				new PillMenu(el, { selectedClass: 'active' });
			}
		);
	}
);

var PillMenu = new Class({

	//implements
	Implements: [ Options, Events ],

	//options
	options: {
		vertical: 0,
		pillClass: 'pill',
		selectedClass: 'selected',
		duration: 'short',
		transition: Fx.Transitions.Linear
	},

	//initialization
	initialize: function(element,options) {
		//set options
		this.setOptions(options);
		//set element
		this.element = document.id(element);
		//set pill element
		this.pill = this.element.getElement('.pill');

		if(!this.pill){
		    //build pill element
		    this.pill = new Element('div',{
		    	'class': this.options.pillClass,
		    	'style': 'position: absolute;'
		    });
		    //inject pill into element
		    this.pill.inject(this.element,'top');
		}
		//make effect
		this.pillFx = new Fx.Morph(this.pill, {'duration': this.options.duration, 'link': 'cancel', 'transition': this.options.transition});

		this.start();
	},

	start: function() {
		//fire event start
		this.fireEvent('start');

		this.element.getElements('li').each
		(
			function(el,i)
			{
				//detect selected menu
				if (el.hasClass(this.options.selectedClass))
				{
					var el_coords = el.getCoordinates();

					//save selected menu
					this.selected = el;
					//set pill dimensions

					this.pill.setStyles
					({
					    width: el_coords.width,
					    height: el_coords.height,
					    left: el_coords.left - this.element.getPosition().x,
					    top: el_coords.top - this.element.getPosition().y
					});
				}

				//add event to element
				el.addEvent
				(
					'mouseenter', function()
					{
						var el_coords = el.getCoordinates();

						//fire event start
						this.fireEvent('change');
						//set effect for horizontal and vertical style
						if (this.options.vertical)
						{
							this.pillFx.start
							({
								top: el_coords.top - this.element.getPosition().y,
							    height: el_coords.height
							});
						}
						else
						{
							this.pill.setStyle('height', el_coords.height);

							this.pillFx.start
							({
							    left: el_coords.left - this.element.getPosition().x,
							    width: el_coords.width
							});
						}

					}
					.bind(this)
				);

			}
			.bind(this)
		);

        //add event to reset all
        this.element.addEvent
        (
			'mouseleave', function()
			{
				var pill = this.pill;
				var selected = this.selected;

				if (!selected)
				{
					return;
				}

				var selected_coords = selected.getCoordinates();

				//set effect for horizontal and vertical style

				if (this.options.vertical)
				{
					this.pillFx.start
					({
					    'top': [pill.getStyle('top'), selected_coords.top - this.element.getPosition().y],
					    'height': [pill.getStyle('height'), selected_coords.height]
					});
				}
				else
				{
					this.pillFx.start
					({
					    'left': [ pill.getStyle('left'), selected_coords.left - this.element.getPosition().x],
					    'width': [ pill.getStyle('width'), selected_coords.width]
					});
				}

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


/*
**

SLIDESHOW

**
*/

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

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

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

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

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

		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.element.hasClass('left'))
		{
			options.direction = 'left';
		}

		if (this.element.hasClass('right'))
		{
			options.direction = 'right';
		}

		if (this.element.hasClass('top'))
		{
			options.direction = 'top';
		}

		if (this.element.hasClass('bottom'))
		{
			options.direction = 'bottom';
		}


		var cl = this.element.className;

		var transitionSpeed = cl.match(/transition-speed:([^\s]+)/);

		if (transitionSpeed)
		{
			this.options.duration = transitionSpeed[1];
		}






		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: 'dot' });

					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;
		}

		$clear(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 (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()
	{
		$$('div.wd-slideshow').each
		(
			function(view)
			{
				var slide = new WdSlideshow(view);
			}
		);
	}
);