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

	options: {
		container: document.body,
		basePath: '',
		navigationBlockClass: 'navigation'
	},

	initialize: function(data, options) {
		this.setOptions(options);
		this.container = document.id(this.options.container) || new Element('div', { id: this.options.container }).inject(document.body);

		$each(data, function(dataBlock) {
			this.buildBlock(dataBlock);
		}.bind(this));
		this.container.getElements('ul').each(function(ul) {
			this.positionBlock(ul);
			ul.addEvents({
				mouseenter: function() {
					this.setActiveTriggers(ul);
				}.bind(this),
				mouseleave: function() {
					this.setActiveTriggers(ul, false);
				}.bind(this)
			});
		}.bind(this));
		this.container.getElements('ul.hidden').hide();
		this.container.getElements('li').each(function(li) {
			var childs = this.findAllChilds(li);
			if(childs.length > 0) li.store('childs', childs);
		}.bind(this));
		this.setupHoverGroups();
		this.container.getElements('a').addEvent('click', function(e) {
			e.stop();
			this.fireEvent('linkClicked', e.target.get('href'));
		}.bind(this));
	},

	buildBlock: function(data, relatedTo, relation) {
		if(!$defined(relation)) relation = '';
		var ul = new Element('ul', {
			'class': this.options.navigationBlockClass+' '+data.type
		});
		if(data.visibility) ul.addClass(data.visibility);
		ul.store('position', data.position);
		if($defined(relatedTo)) {
			ul.set('rel', this.options.basePath+relation);
			ul.store('parent', this.options.basePath+relation);
			relatedTo.set('id', this.options.basePath+relation);
			relatedTo.store('childRelation', this.options.basePath+relation);
		}
		$each(data.buttons, function(button) {
			var li = new Element('li');
			var a = new Element('a', {
				href: this.options.basePath+relation+button.link,
				html: button.name
			});
			if(button.title) a.set('title', button.title);
			if(button.cssClass) a.addClass(button.cssClass);
			a.inject(li);
			li.inject(ul);

			if(button.childs) {
				$each(button.childs, function(dataBlock) {
					this.buildBlock(dataBlock, li, relation+button.link);
				}.bind(this));
			}
		}.bind(this));
		ul.inject(this.container, 'top');
		return ul;
	},

	positionBlock: function(container) {
		var trigger = container.retrieve('parent', false);
		if(!trigger || trigger === '') return false;
		container.position({
			relativeTo: document.id(trigger),
			position: container.retrieve('position', 'bottomRight')
		});
		return this;
	},

	setupHoverGroups: function() {
		//var colors = ['brown','lime','red','orange','purple','pink','blue','grey','yellow'];
		var triggers = this.container.getElements('li').filter(function(trigger) {
			var hasChilds = trigger.retrieve('childs', false);
			if(hasChilds) return trigger;
		});
		$each(triggers, function(trigger, i) {
			var childs = trigger.retrieve('childs');
			new HoverGroup({
				elements: [trigger, childs],
				onEnter: function() {
					//childs[0].show().setStyle('background-color', colors[i]);
					childs[0].show();
				},
				onLeave: function() {
					//childs[0].hide().setStyle('background-color', 'transparent');
					childs[0].hide();
				}
			});
		});
	},

	findAllChilds: function(element) {
		var elementChilds = [];
		var childRelation = element.retrieve('childRelation', false);
		if(!childRelation) return elementChilds;
		var childs = this.container.getElements('ul[rel='+childRelation+']');
		for(var i=0; i<childs.length; i++) {
			var curChild = childs[i];
			elementChilds.push(curChild);
			var elements = curChild.getElements('li');
			elements.each(function(li) {
				var liChilds = this.findAllChilds(li);
				if(liChilds.length > 0) elementChilds.extend(liChilds);
			}.bind(this));
		}
		return elementChilds;
	},

	setActiveTriggers: function(container, setActive) {
		if(!$defined(setActive)) setActive = true;
		var trigger = container.retrieve('parent', false);
		if(!trigger || trigger === '') return;
		trigger = document.id(trigger);
		var link = trigger.getFirst('a');
		if(!setActive) link.removeClass('active');
			else if(!link.hasClass('active')) link.addClass('active');
		//recursive for parents
		var container = trigger.getParent('ul');
		if(container) this.setActiveTriggers(container, setActive);
		return;
	},

  hide: function() {
    this.container.fade('out');
  },

  show: function() {
		this.container.fade('in');
  }
});