var Navi = new Class({
	Implements: [Events,Options],
	options: {
		ul: null,
		delay: 500,
		galleryPageUid: 8,
		lang: 0
	},
	tweens: [],
	initialize: function(options) {
		this.setOptions(options);
		var ul = $(this.options.ul);
		var controlsTop = $("content").getPosition().y.toInt() + 379;
		this.gallery = new Gallery({"lang": this.options.lang});
		this.currentGalleryUid = 0;
		$("controls").setStyle("opacity",0.9);
		$("lang_navi").getFirst("li").getFirst("a").addEvent("click", function(e) {
			if(this.gallery.loaded) {
				e.stop();
				if(!this.gallery.isLoading) {
					// wir befinden uns in einer galerie, bei click auf lang soll nur die galerie in ital geholt werden.
					if(this.gallery.lang) {
						var linkLang = 0;
						var linkText = "Italiano";
					}
					else {
						var linkLang = 1;
						var linkText = "Deutsch";
					}
					$("lang_navi").getFirst("li").getFirst("a").set("text",linkText);
					this.gallery.setLanguage(linkLang);
					this.gallery.showGallery(this.currentGalleryUid);
				}	
			}
		}.bind(this));
		ul.getElements("li.sub").each(function(item) {
			var uid = item.get("id").substr(5);
			var subnavi = $("subnavi_"+uid);
            var size = subnavi.getSize();
			var fromTop = controlsTop.toInt() - 10;
			this.tweens[uid] = {
				tween: new Fx.Morph(subnavi, {
					"duration": "normal",
					"transition": "sine:in:out",
					"link": "cancel"
				}),
				height: size.y.toInt() - 10, // -10 wegen padding
				fromTop: fromTop,
				toTop: fromTop - size.y.toInt() + 10,
				timer: null
			};
			this.repositionX(subnavi,item);
			window.addEvent("resize",this.repositionX.bind(this,[subnavi,item]));
			item.addEvents({
				"mouseenter": function(e) {
					$clear(this.tweens[uid].timer);
					this.show(subnavi,uid,item);	
				}.bind(this),
				"mouseleave": function(e) {
					this.tweens[uid].timer = this.hide.delay(this.options.delay,this,[subnavi,uid]);
				}.bind(this)
			});
			subnavi.addEvents({
				"mouseenter": function(e) {
					$clear(this.tweens[uid].timer);
					this.tweens[uid].mouseOver = 1;
				}.bind(this),
				"mouseleave": function(e) {
					this.tweens[uid].mouseOver = 0;
					this.tweens[uid].timer = this.hide.delay(this.options.delay,this,[subnavi,uid]);
				}.bind(this)
			});
            subnavi.setStyles({
				"top": fromTop,
				"opacity": 0,
				"height": 0  
            });
			if(uid==this.options.galleryPageUid) {
				// Gallery Links mit AJAX
				item.getElement("a").addEvent("click",function(e) {
					e.stop();
					if(this.currentGalleryUid != uid) {
						if(!this.gallery.isLoading) {
							this.goToGallery(uid);
                        	this.changeNavAct(item,subnavi);
						}
					}	
				}.bind(this));
				$("gal_thumbs").getElements("div").each(function(divItem) {
					divItem.cloneEvents(item.getElement("a"),"click");
				}.bind(this));
				subnavi.getElements("li").each(function(subItem) {
					var tmpUid = subItem.get("id").substr(4);
					subItem.getElement("a").addEvent("click",function(e) {
						e.stop();
						if(this.currentGalleryUid != tmpUid) {
							if(!this.gallery.isLoading) {
                                this.changeNavAct(subItem,subnavi,item);
                            	this.goToGallery(tmpUid)
							}
						}	
					}.bind(this));
				}.bind(this));
			}
		}.bind(this));
	},
	repositionX: function(subnaviUl,mainLi) {
		var cords = mainLi.getCoordinates();
		var size = subnaviUl.getSize();
		subnaviUl.setStyle("left",cords.right.toInt() - size.x.toInt() + 5);	
	},
	goToGallery: function(pageUid) {
		this.currentGalleryUid = pageUid;
		this.gallery.showGallery(pageUid);
	},
	changeNavAct: function(newActLi,subnavi,isSubFromLi) {
		var oldAct = $(this.options.ul).getElement("li.act");
		if(oldAct && oldAct != newActLi) {
			oldAct.removeClass("act");
		}
		var oldSubAct = subnavi.getElement("li.act");
		if(oldSubAct) {
			oldSubAct.removeClass("act");
		}
		newActLi.addClass("act");
		if(isSubFromLi) {
			isSubFromLi.addClass("act");
		}
	},
	show: function(subnavi,uid) {
		this.tweens[uid].tween.start({
			"top": this.tweens[uid].toTop,
			"height": this.tweens[uid].height,
			"opacity": 0.9
		});
	},
	hide: function(subnavi,uid) {
		if(!this.tweens[uid].mouseOver) {
			this.tweens[uid].tween.start({
				"top": this.tweens[uid].fromTop,
				"height": 0,
				"opacity": 0
			});
		}
	}
});