var HTLmenu = new Class({

	items: [],
	current: [],
	container: null,
	secondContainer: null,
	thirdContainer: null,
	fourthContainer: null,
	hide: false,
	startActive: null,
	minWidth: 0,
	wipeOut: [],
	hasActiveSub: false,
	currentAnis: [],
	firstRun: true,
	
	 // Levels
	main: [],
	main_active: null, sec_active:null, thrd_active:null, fourth_active:null,
	frst: [],
	sec: [],
	thd: [],
	
	allItems: [],
	
	setWrapperWidth: function() {
		
		width = 330;
		
		if ($type(this.thirdContainer) == "element") {
			if	(this.thirdContainer.getStyle("display") == "block") width = 490;
			if ($type(this.fourthContainer) == "element") {
				if (this.fourthContainer.getStyle("display") == "block") width = 660;
			}
		}
		
		this.container.setStyle("width", width);
	},
	
	setPosition: function() {
		/*
		this.container.setStyles({
			"top": $("mainnav").getTop(),
			"left": $("mainnav").getPosition().x
		});
		if (Window.webkit) this.container.setStyle("top", $("mainnav").getTop() + 20);
		*/
	},
	
	preload: function() {
		for (var i=2; i>=0; i--) {
			new Element('img', {src: 'fileadmin/templates/images/hg_menu-' + i + '.gif'});
		}
	},
	
	initialize: function() {
		window.addEvent("resize", this.setPosition.bind(this));
		this.preload();
			// Make Container Ani		
		this.container = new Element("div", {
			"class": "menu-container",
			"id": "layermenu",
			"events": {
				"mouseover": this.showAll.bind(this),
				"mouseleave": this.hideAll.bind(this)
			}
		}).injectInside( $("top") );
		this.items = menutree;
		
		this.setPosition();
		
		
		
			// Make Main Level
		this.main[-1] = new Element("ul", {
			"class": "menuitem first-sub", 
			"id": "mainpart"
		}).injectInside( $("layermenu") );
		
		this.items.each(function(el) {
									 
			this.main.push( new Element("a", {
				"href": el.link,
				"events": {
					"mouseover": function(e) {
						
						if ($type(this.secondContainer) == "element") this.secondContainer.setStyle("display", "none");
						if ($type(this.thirdContainer) == "element") this.thirdContainer.setStyle("display", "none");
						if ($type(this.fourthContainer) == "element") this.fourthContainer.setStyle("display", "none");
						
						this.setWrapperWidth();
							
						if ($type(e) != "element") {
							e = new Event(e);
							e = e.target.getParent();
						}
						
						if ($type(this.main_active) == "element") {
							this.main_active.removeClass("active");
						}
						
						this.main_active = e.addClass("active");
						
						this.setSecond(el.subs, el.title);
						this.setShadow();
						
					}.bind(this)
				}
			}).setText(el.title).injectInside(
				new Element("li").injectInside(this.main[-1])
			));
			
			newel = this.main.getLast();
			
			if (el.active) {
				this.hasActiveSub = true;
				newel.getParent().addClass("active");	
			}
			
		}.bind(this));
		
		
			// Standard first level
		this.setStandard();
		this.main.getLast().getParent().addClass("last"); // Spacer to last item		
		this.hideAll();
		
	},
	
	setShadow: function() {
		
		activeEl = [];
		
		for (var i=0; i<this.allItems.length; i++) {
			if (this.allItems[i].removeClass('shadow').getStyle('display') != 'none' && this.allItems[i].getParent().getStyle('display') != 'none')
				activeEl.push(this.allItems[i]);
		}
		
		if (activeEl[0])
			activeEl[activeEl.length - 1].addClass('shadow');
		
	},
	
	setStandard: function() {
		if ($type(this.secondContainer) == "element") this.secondContainer.setStyle("display", "none");
		if ($type(this.thirdContainer) == "element") this.thirdContainer.setStyle("display", "none");
		if ($type(this.fourthContainer) == "element") this.fourthContainer.setStyle("display", "none");
		this.setWrapperWidth();
		
		this.setShadow();
		
		$$('ul.first-sub li').each(function(liEl) {liEl.removeClass('active');});
		
		for (var e in this.items) {
			if ($type(this.items[e]) != "object") continue;
			
			if (this.items[e].active) {
				childs = $("mainpart").getChildren();
				childs.each(function(el){ el.removeClass("active") });
				
				if ($type(this.main_active) == "element") {
					this.main_active.removeClass("active");
				}				
				this.main_active = childs[e].addClass("active");
				
				this.setSecond(this.items[e].subs, this.items[e].title);
				
				if ($type(this.items[e].subs) == "array") 
					this.items[e].subs.each(function(el) {
						if (el.active){
							this.setThird(el.subs, el.title);
							
							if ($type(el.subs) == "array")
								el.subs.each(function(elem) {
									if (elem.active) this.setFourth(elem.subs, elem.title);
								}.bind(this));
						}
					}.bind(this));
				
				break;
			}
		}
		this.getStarts();
	},

	setActiveItem: function(items, arr, activeName) {
		items.getChildren().each(function(el,i) {
			el.removeClass("active");
			if (arr[i].active) {
				this[activeName] = el.addClass("active");
			}
		});
	},

	setSecond: function(lvl1, parent) {
		
		
		if ($type(this.secondContainer) != "element") {
			this.secondContainer = new Element("div", {
				"class": "menuitem-container"
			}).injectInside(this.container);
			this.secondContainer.setStyle("overflow", "hidden");
			this.wipeOut[0] = new Fx.Style(this.secondContainer, "width", {duration: 300, transition: Fx.Transitions.Cubic.easeOut});
		}
		
		if (lvl1 == null) {
			this.secondContainer.setStyle("display", "none");
			return;
		}
		this.secondContainer.setStyle("display", "block");
		this.setWrapperWidth();
		
		for (var e in this.frst) {
			if ($type(this.frst[e]) == "element") {
				this.frst[e].setStyle("display", "none");
			}
		}

		if (!this.frst[parent]) {
			this.frst[parent] = new Element("ul", {"class": "menuitem"}).injectInside( this.secondContainer );
			this.allItems.push(this.frst[parent]);
			lvl1.each(function(el) {

				new Element("a", {
					"href": el.link,
					"events": {
						"mouseover": function(e) {

							if ($type(this.thirdContainer) == "element") this.thirdContainer.setStyle("display", "none");
							if ($type(this.fourthContainer) == "element") this.fourthContainer.setStyle("display", "none");

							e = new Event(e);
							if ($type(this.sec_active) == "element") {
								this.sec_active.removeClass("active");
							}

							this.sec_active = e.target.getParent().addClass("active");
							this.setThird(el.subs, el.title);
							this.setShadow();
						}.bind(this)
					}
				}).setText(el.title).injectInside(
					new Element("li").injectInside(this.frst[parent])
				);

				if (el.active) {
					newel = this.frst[parent].getChildren().getLast();
					this.sec_active = newel.addClass("active");
					this.setThird(el.subs, el.title);
				}

			}.bind(this));
		} else {
			this.setActiveItem(this.frst[parent], lvl1, "sec_active");
			$(this.frst[parent]).setStyle("display", "block");
		}
		this.setShadow();
	},

	setThird: function(lvl2, parent) {	
		
		if (this.thirdContainer == null) {
			this.thirdContainer = new Element("div", {
				"class": "menuitem-container"
			}).injectAfter(this.secondContainer);
			
			this.thirdContainer.setStyle("overflow", "hidden");
			this.wipeOut[1] = new Fx.Style(this.thirdContainer, "width", {duration: 300, transition: Fx.Transitions.Cubic.easeOut});
		}
		
		for (var e in this.sec) {
			if ($type(this.sec[e]) == "element") {
				this.sec[e].setStyle("display", "none");
			}
		}
		
		
		if ($type(lvl2) != "array" || $type(parent) != "string") {
			this.thirdContainer.setStyle("display", "none");
			return;
		} else {
			this.thirdContainer.setStyle("display", "block");
			this.setWrapperWidth();
		}
	
			// Register animation		
		//this.sec = [];
		if (!this.sec[parent]) {
			this.sec[parent] = new Element("ul", {"class": "menuitem"}).addEvent("mouseover", this.showAll.bind(this)).injectInside(this.thirdContainer);
			this.allItems.push(this.sec[parent]);
			lvl2.each(function(item) {	
				new Element("a", {
					"href": item.link,
					"events": {
						"mouseover": function(e) {
							
							if ($type(this.fourthContainer) == "element") this.fourthContainer.setStyle("display", "none");
				
							e = new Event(e);
							if ($type(this.thrd_active) == "element") {
								this.thrd_active.removeClass("active");
							}
							this.thrd_active = e.target.getParent().addClass("active");
							this.setFourth(item.subs, item.title);
							this.setShadow();
						}.bind(this)
					}
				}).setText(item.title).injectInside(
					new Element("li").injectInside( this.sec[parent] )
				);
				
				if (item.active) {
					newel = this.sec[parent].getChildren().getLast();
					this.thrd_active = newel.addClass( "active" );
					this.setFourth(item.subs, item.title);
				}
			}.bind(this));
		} else {
			$(this.sec[parent]).setStyle("display", "block");
		}
		this.setShadow();
	},

	setFourth: function(lvl3, parent) {	
			
		
		if (this.fourthContainer == null) {
			this.fourthContainer = new Element("div", {
				"class": "menuitem-container"
			}).injectAfter(this.thirdContainer);
			
			this.fourthContainer.setStyle("overflow", "hidden");
			this.wipeOut[2] = new Fx.Style(this.fourthContainer, "width", {duration: 300, transition: Fx.Transitions.Cubic.easeOut});
		}
		
		for (var e in this.thrd) {
			if ($type(this.thd[e]) == "element") {
				this.thd[e].setStyle("display", "none");
			}
		}
		
		
		if ($type(lvl3) != "array" || $type(parent) != "string") {
			this.fourthContainer.setStyle("display", "none");
			return;
		} else {
			this.fourthContainer.setStyle("display", "block");
			this.setWrapperWidth();
		}
	
	
	
			// Register animation		
		//this.sec = [];
		if (!this.thd[parent]) {
			this.thd[parent] = new Element("ul", {"class": "menuitem"}).addEvent("mouseover", this.showAll.bind(this)).injectInside(this.fourthContainer);
			this.allItems.push(this.thd[parent]);
			lvl3.each(function(item) {

				new Element("a", {
					"href": item.link,
					"events": {
						"mouseover": function(e) {
							
							e = new Event(e);
							if ($type(this.fourth_active) == "element") {
								this.fourth_active.removeClass("active");
							}
							this.fourth_active = e.target.getParent().addClass("active");
							this.setShadow();
						}.bind(this)
					}
				}).setText(item.title).injectInside (
					new Element("li").injectInside( this.thd[parent] )
				);
				
				if (item.active) {
					newel = this.thd[parent].getChildren().getLast();
					this.thrd_active = newel.addClass( "active" );
				}
				
			}.bind(this));
		} else {
			$(this.thd[parent]).setStyle("display", "block");
		}
		this.setShadow();
	},

	hideAll: function() {
//
		
		this.hide = true;
		if (this.firstRun) {
			this.hideThem();
			this.firstRun = false;
		}
		(function() {
			if (this.hide) {
				this.hideThem();
			}
		}).delay(800, this);
	},
	
	hideThem: function() {
		
			
		(function() { 
			this.setStandard(); 
			this.container.setStyle("width", this.containerWidth); 
		}.bind(this)).delay(400);
			
		
		/**
			this.getStarts().getSubFx().each(function(el) {
				el.start(this.minWidth);
			}.bind(this));
		**/
		
		this.currentAnis = [];
		$$('div.menuitem-container').each(function(item, it) {
			w = (it >= this.startActive.length) ? 0 : this.minWidth;
			this.currentAnis.push( new Fx.Style(item, 'width', {duration: 300, transition: Fx.Transitions.Cubic.easeOut}).start(w));
		
		}.bind(this));
	
		this.hide = false;
			
	},
	
	showAll: function() {
		if (this.hide) this.hide = false;
		else {
			this.container.setStyle("width", 650);
			/*
			this.getStarts().getSubFx().each(function(el) {
				el.start(165);
			});
			*/
			this.currentAnis.each(function(item) {
				item.start(165);										   
			});
			this.setWrapperWidth.delay(400, this);
		}
	},
	
	getStarts: function() {
		
		if (this.startActive != null) return this;
		this.startActive = new Array();
		$$("#layermenu div").each(function(el, i) {
			if (el.getStyle("display") == "block") this.startActive.push(el);
		}.bind(this));
		//console.log(this.startActive.length);
		this.containerWidth = 330;
		switch (this.startActive.length) {
			
			case 3:
				this.minWidth = 55;
				break;
				
			case 2:
				this.minWidth = 83;
				break;
				
			case 1:
				this.minWidth = 165;
				break;
				
			case 0:
				this.minWidth = 0;
				this.containerWidth = 170;
				break;
		}
		//this.minWidth = Math.round((165-(10 * )) / this.startActive.length);
		return this;
	},
	
	getSubFx: function() {			
		return this.wipeOut;
	}

});
var mainmenu = null;
Window.addEvent("domready", function(){
	mainmenu = new HTLmenu();
});