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