var _item = Array();

var Navigation = new Class({
	options: {},
	initialize: function(list, options){
		this.setOptions(options);
		this.list = $$(list);
		
		// Alle NaviItems initialisieren
		this.list.each(function(item) {
			_item[item.id] = new NavigationItem(item);
		});
		
		// alle pathItems ausklappen ...
		$$('li.pathItem').each(function(item){
			_item[item.id].show();
		});
		
		if(!$defined(document.getElementById('page-shadow'))){
			var shadow = new Element('div').setProperty('id','page-shadow').injectAfter($('page'));
		}
	}
});

Navigation.implement(new Events, new Options);


var NavigationItem = new Class({
	
	timeout: 2000,

	initialize: function(item, options){
		this.item = item;
		this.timer = false;
		
		// this.item.addEvent('focus', this.show.bind(this));
		this.item.addEvent('click', this.show.bind(this));
		
	},
	
	show: function(){
		
		// show the sub menu
		this.showChildren();
		
		// hide Siblings
		this.hideSiblings();
		
		// set Active status
		this.setActive();

	},
	
	hide: function(){
		
		this.setInActive();
		this.hideAllChildren();
	},
	
	hideSiblings: function(){
		var parentUl = this.item.parentNode;
	
		for ( var i=0; i<parentUl.childNodes.length; i++ ) {
			if ( parentUl.childNodes[i].id && parentUl.childNodes[i].id != this.item.id ) {
				_item[parentUl.childNodes[i].id].hide();
			}
		}
	},
	
	showChildren: function(){
		
		// show all uls under current li
		if ( this.item.getElementsByTagName('ul').length > 0 ){
		//console.log(this.item.id + ' - ' + this.item.getElementsByTagName('ul').length)
			this.setVisible(this.item.getElementsByTagName('ul')[0]);
		}
	},
	
	hideAllChildren: function(){
		
		// get UL Childs
		var uls = this.item.getElementsByTagName('ul');

		for ( var i=0; i < uls.length; i++ ) {
			this.setInVisible(uls.item(i));
		}
	},
	
	hideChildren: function(){
		
		if ( this.item.getElementsByTagName('ul').length > 0 ){
			this.setInVisible(this.item.getElementsByTagName('ul')[0]);
		}
	},
	
	setActive: function(){
		
		// Change some styles ... Highlights Active Status
		if (this.item.className.search(/active/) == -1) this.item.className += " active";
	},
	
	setInActive: function(){
		
		// Change some styles ... Deactivates Highlight Status
		this.item.className = this.item.className.replace(new RegExp("active\\b"), "");
	},
	
	setVisible: function(ul){
		ul.style['left'] = '0px';
	},
	
	setInVisible: function(ul){
		// Change some styles ... Highlights Active Status
		ul.style['left'] = '-999em';
	},

	_test: function(test){
		// console.log(test);
	}
	
});

var NavigationLayer = new Class({
	
	timeout: 8000,
	
	
	initialize: function(item, trigger){
		this.item = $(item);
		this.timer = false;
		this.trigger = $(trigger);
		// wenn Flash auf der Seite, keine Einblend/Ausblendaktionen ausführen ...
		this.hasFlash = ($$('object').length > 0);
		
		this.eff1 = new Fx.Style('path', 'opacity', {duration: 1000, wait: true}).set(0);
		
		if (!this.hasFlash){
		
			this.eff2 = new Fx.Style('tdk-navigation', 'opacity', {duration: 500, wait: true}).set(1);
	
			this.item.addEvent('mouseleave', this.handle.bind(this));
			this.item.addEvent('mouseenter', this._clearTimeout.bind(this));
			this.trigger.addEvent('mouseenter', this.show.bind(this));
		}
	},
	
	_clearTimeout: function(){
		//console.log('clearTimeout')
	
		window.clearTimeout(this.timer);
	},
	
	_startTimeout: function(){
		if (!this.hasFlash){
			this.timer = window.setTimeout(this.hide.bind(this), this.timeout);
		}
	},
	
	handle: function(){
		//console.log('mouseleave')
		this._clearTimeout();
		this._startTimeout();
		
	},
	
	show: function(){
		//console.log('mouseenter')
	
		this.eff1.start(0);
		this.eff2.start(1);
		this.sleeping = false;
	},
	
	hide: function(){
		this.eff1.start(1);
		this.eff2.start(0);
		this.sleeping = true;
	}
	
	
});


window.addEvent('domready', function(){	
	
	// Navigation initialisieren
	var navigation = new Navigation('#nav li') ;
	
	
	// Navigationslayerbehavior
	var navigationLayer = new NavigationLayer('tdk-navigation','path');
		navigationLayer._startTimeout();
	
	// Suchfeldhandling
	var searchvalue = $('words').value;
	
	$('words').onfocus = function(){
		if (this.value == searchvalue){
			this.value = "";
			this.className += " active";
		}
	}
	
	$('words').onblur = function(){
		if (this.value == ""){
			this.value = searchvalue;
			this.className = "text";
		}
	}
	
		
		
	
});