var RegioNavigation = new Class({

	Implements: [Options,Events],
	Extends: Regio,

	options: {
		transition: Fx.Transitions.Sine.easeInOut,
		fadeSpeed: 200,
		item: {
			height: 76
		},
		trigger: 'navigation',
		selectors: {
			container: '.navigation'
		}
	},

	shown: false,

	//initialization
	initialize: function(options) {
		this.setOptions(options)

		if( Browser.Engine.trident ) {
			this.options.fadeSpeed = 0;
		}
		
		// first, remove all "active"-classes from root li's
		var activeRoots = $$(this.options.selectors.container + ' ul.level-0 > li.active');

		activeRoots.each(function(el, k) {
			el.removeClass('active');
		});

		// fetch all links that are in root level
		this.menus = $$(this.options.selectors.container + ' ul.level-0 > li > a');

		this.menus.each( function (elMenu,elKey) {
			elMenu.addEvents({
				'click': function (e) {

					if( elMenu.getParent('li').hasClass('active') ) {
						this.hide();
					} else {
						this.hide();
						this.current_key = elKey;
						this.menu = elMenu.getParent('li').getElement('div.outline');

						var max = this.menu.getElement('ul.level-1').getChildren('li').length;
						var perLine = 2;
						this.menu.getElement('ul.level-1').setStyle('height',(Math.round(max/perLine)*this.options.item.height)+'px');

						this.fx = new Fx.Tween(this.menu, { 
							property: 'opacity',
							duration:this.options.fadeSpeed,
							transition: this.options.transition
						});
						this.hide().startListener();
						this.menu.setStyle('display','block');
						elMenu.getParent('li').addClass('active');
					}

					return false;
				}.bind(this)
			});
		}.bind(this));
	},

	startListener: function() {
		this.show();
		$(document.body).addEvent('click', function() {
			this.hide();
		}.bind(this));
	},

	show: function() {
		this.fx.start(1)
		this.fireEvent('show');
		this.shown = true;
		return this;
	},

	hide: function() {
		if(this.shown) {
			this.menu.getParent('li').removeClass('active');
			this.fx.start(0);
			this.fireEvent('hide');
			this.shown = false;
		}
		return this;
	}
});
