var YOOFancyMenu = new Class({
	initialize: function (menu, options) {
		this.setOptions({
			transition: Fx.Transitions.sineInOut,
			duration: 500,
			wait: false,
			onClick: Class.empty,
			opacity: 1,
			mode: 'move',
			slideOffset: 30,
			colorSelector: ['red', 'pink', 'blue', 'green', 'orange', 'yellow', 'lilac', 'turquoise'],
			itemSelector: 'li.level1',
			activeSelector: 'li.active'
		},
		options);
		this.menu = $(menu),
		this.current = this.menu.getElement(this.options.activeSelector);
		this.li = [];
		this.div = [];
		this.menu.getElements(this.options.itemSelector).each(function (item, i) {
			this.createBackground(item, i);
			item.addEvent('click', function (event) {
				this.clickItem(event, item)
			}.bind(this));
			item.addEvent('mouseenter', function () {
				this.mouseenterItem(item, i)
			}.bind(this));
			if (this.options.mode == 'move') {
				item.addEvent('mouseleave', function () {
					this.mouseleaveItem(this.current, i)
				}.bind(this))
			} else {
				item.addEvent('mouseleave', function () {
					this.mouseleaveItem(item, i)
				}.bind(this))
			}
		}.bind(this));
		if (this.options.mode == 'move') {
			if (this.current) {
				this.setCurrent(this.current)
			} else {
				var first = this.menu.getElement('li');
				first.addClass('active');
				first.addClass('current');
				this.setCurrent(first)
			}
		}
	},
	createBackground: function (item, i) {
		if (this.options.mode == 'move' && i != 0) return;
		var css = 'fancy ' + 'bg' + (i + 1);
		this.options.colorSelector.each(function (col, i) {
			if (item.hasClass(col)) {
				css += ' bg-' + col
			}
		});
		this.div[i] = new Element('div', {
			'class': 'fancy-container'
		}).adopt(new Element('div', {
			'class': 'fancy-l'
		}), new Element('div', {
			'class': 'fancy-m'
		}), new Element('div', {
			'class': 'fancy-r'
		}));
		this.div[i].fx = this.div[i].effects(this.options);
		this.li[i] = new Element('li', {
			'class': css
		}).adopt(this.div[i]).injectInside(this.menu);
		this.li[i].fx = this.li[i].effects(this.options)
	},
	setCurrent: function (item) {
		this.li[0].setStyles({
			'left': item.offsetLeft,
			'width': item.offsetWidth,
			'visibility': 'visible',
			'opacity': this.options.opacity
		});
		this.current = item
	},
	clickItem: function (event, item) {
		if (!this.current) this.setCurrent(item);
		this.current = item;
		this.options.onClick(new Event(event), item)
	},
	mouseenterItem: function (item, i) {
		switch (this.options.mode) {
		case 'fade':
			this.fadeFx(item, i, true);
			break;
		case 'slide':
			this.slideFx(item, i, true);
			break;
		default:
			this.moveFx(item, 0)
		}
	},
	mouseleaveItem: function (item, i) {
		switch (this.options.mode) {
		case 'fade':
			this.fadeFx(item, i, false);
			break;
		case 'slide':
			this.slideFx(item, i, false);
			break;
		default:
			this.moveFx(item, 0)
		}
	},
	moveFx: function (item, i) {
		if (!this.current) return;
		this.li[i].fx.custom({
			'left': [this.li[i].offsetLeft, item.offsetLeft],
			'width': [this.li[i].offsetWidth, item.offsetWidth]
		})
	},
	fadeFx: function (item, i, show) {
		if (show) {
			this.li[i].fx.setOptions(this.options);
			this.li[i].fx.set({
				'left': item.offsetLeft,
				'width': item.offsetWidth
			});
			this.li[i].fx.custom({
				'opacity': [0, 1]
			})
		} else {
			var dur = this.options.duration * 2;
			this.li[i].fx.setOptions({
				duration: dur
			});
			this.li[i].fx.custom({
				'opacity': [1, 0]
			})
		}
	},
	slideFx: function (item, i, show) {
		var offset = this.options.slideOffset;
		if (show) {
			this.li[i].fx.set({
				'opacity': 1,
				'left': item.offsetLeft,
				'width': item.offsetWidth
			});
			this.div[i].fx.set({
				'margin-top': offset
			});
			this.div[i].fx.custom({
				'margin-top': [offset, 0]
			})
		} else {
			this.div[i].fx.set({
				'margin-top': 0
			});
			this.div[i].fx.custom({
				'margin-top': [0, offset]
			})
		}
	}
});
YOOFancyMenu.implement(new Options);