NJS.FloatingMenu = new Class({
	Implements: Options,
	// True if menu is currently animating
	moving: false,
	// Wether the menu moves 'in' or 'out'
	direction: null,
	options: {
		minimizedWidth: 135,
		maximizedWidth: 350,
		alphaBlend: 0.8
	},
	initialize: function(element, options) {
		this.setOptions(options);
		element = $(element);
		this.element = element;
		if (!element) return;
		// Fix alpha for IE
		if(!Browser.Engine.trident) {
			element.set('opacity', this.options.alphaBlend);
		}
		var that = this;
		var fx = new Fx.Morph(element, {duration: 'long', transition: Fx.Transitions.Quart.easeInOut, link: 'cancel'});
		fx.onStart = function() {
			that.moving = true;
			if(that.direction == 'out') {

			}
			if(that.direction == 'in') {

			}
		};
		fx.onComplete = function() {
			that.moving = false;
			if(that.direction == 'out') {
				element.getElements('li.over').removeClass('over');
			}
		};
		element.addEvent('mouseenter', function(event) {
			that.direction = 'in';
			var morph = {
				'width': [element.getStyle('width').toInt(), that.options.maximizedWidth]
			};
			// Clear any delayed action
			if (that.delayedCollapse) {
				$clear(that.delayedCollapse)
			}
			// Fix alpha for IE
			if(!Browser.Engine.trident) {
				morph['opacity'] = [element.get('opacity'), 1];
			}
			fx.start(morph);
		});
		element.addEvent('mouseleave', function(event) {
			that.direction = 'out';
			var morph = {
				'width': [element.getStyle('width').toInt(), that.options.minimizedWidth]
			}
			// Clear submenus if mousenter was triggered from outside
			element.getElements('li.over').fireEvent('mouseleave');
			// Fix alpha for IE
			if(!Browser.Engine.trident) {
				morph['opacity'] = [element.get('opacity'), that.options.alphaBlend];
			}
			fx.start(morph);
		});
		element.getFirst('ul').getChildren('li').each(function(el) {
			el.addEvent('mouseenter', function(event) {
				el.addClass('over');
				el.getChildren('.menu-sub').each(function(ell) {
					if(ell.getStyle('display') == 'none') {
						ell.set('opacity', 0);
						ell.setStyle('display', 'block');
					}
					ell.set('tween', {
						duration: 'normal',
						transition: Fx.Transitions.Quart.easeIn,
						onComplete: $empty,
						link: 'cancel'
					});
					ell.fade('in');
				});
			});
			el.addEvent('mouseleave', function(event) {
				el.removeClass('over');
				el.getChildren('.menu-sub').each(function(ell) {
					ell.set('tween', {
						duration: 'normal',
						transition: Fx.Transitions.Quart.easeOut,
						onComplete: function() {
							ell.setStyle('display', 'none');
						},
						link: 'cancel'
					});
					ell.fade('out');
				});
			});
		});
	},
	expandActive: function() {
		var activeElements = this.element.getElements('li.active');
		if (activeElements.length) {
			this.element.fireEvent('mouseenter');
			activeElements.fireEvent('mouseenter');
			this.delayedCollapse = this.collapseMenu.delay(3500, this);
		}
	},
	collapseMenu: function() {
		this.element.fireEvent('mouseleave');
	}
});
window.addEvent('domready', function() {
	NJS.floatMenuInstance = new NJS.FloatingMenu('navigation');
});