// subnav control

var subnav = function(nodeId, activeMenu) {

	this.subnavNode = $("#"+nodeId);
	this.subnavHeight = 24; // this.subnavNode.outerHeight();

	this.subnavNode.css('overflow', 'hidden'); //.css('height', '0px');

	this.activeMenu = null;
	this.activeSubmenu = null;

	var me = this;
	$(".showSubMenu")
		.bind("mouseover", function(ev) {
			// get the correct submenu
			var oThis = this;
			var jthis = $(oThis);
			var mName = jthis.attr("menuName");

			if(me.delayedSubmenuSwap != null) {
				clearTimeout(me.delayedSubmenuSwap);
				me.delayedSubmenuSwap = null;
			}

			// get mouse position to determine probability of a user wanting to rather go down than horizontally through the menus
			var delay = 250;
			/*
			var ymouse = ev.pageY;
			if(me.previousYmouse != null) {
				// we have an old ymouse value
				console.log(ymouse - me.previousYmouse);
			}
			me.previousYmouse = ymouse;
			*/

			// delay the change a bit
			me.delayedSubmenuSwap = setTimeout(function() {
				if(me.activeMenu != null) {
					// restore original mouseout src
					me.activeMenu.mouseoutSrc = me.activeMenu.originalMouseoutSrc;
					// restore
					$(me.activeMenu).children("img").attr("src", me.activeMenu.mouseoutSrc);
				}
				
				// store current imgNode
				me.activeMenu = null;
	
				if(mName != null && mName.length > 0) {
					// hide any currently visible submenus
					if(me.activeSubmenu != null) me.activeSubmenu.css("display", "none");
	
					// get the correct submenu
					me.activeSubmenu = $(".subMenuContainer[submenuName='" + mName + "']").css("display", "block");
	
					if(me.activeSubmenu.length == 0) {
						// hide as no submenu available
						// me.subnavNode.animate({height: '0px'}, function() {me.subnavNode.css('display', 'none')});
						me.subnavNode.css('display', 'none');
					}
					else {
						// show the container
						me.subnavNode.css('display', 'block'); //.animate({height: me.subnavHeight + 'px'});
						// keep this menu highlighted
						me.activeMenu = oThis;
	
						oThis.originalMouseoutSrc = oThis.mouseoutSrc;
						oThis.mouseoutSrc = oThis.mouseoverSrc;
					}
				}
				else {
					// no submenu -> hide
					// me.subnavNode.animate({height: '0px'}, function() {me.subnavNode.css('display', 'none')});
					me.subnavNode.css('display', 'none');
				}
			}, delay);
			
		});


	$(".subMenuContainer")
		.bind("mouseover", function(ev) {
			// clear interval in case there is any
			if(me.delayedSubmenuSwap != null) {
				clearTimeout(me.delayedSubmenuSwap);
				me.delayedSubmenuSwap = null;
			}

		});

	// show first menu
	if(activeMenu > 0) {
		activeMenu -= 1;
		// show a menu
		this.subnavNode.css('display', 'block').css('height', this.subnavHeight + 'px');
		this.activeMenu = $(".showSubMenu").eq(activeMenu);
		this.activeSubmenu = $(".subMenuContainer").eq(activeMenu).css("display", "block");
		// this.activeMenu.originalMouseoutSrc = this.mouseoutSrc;
		// this.activeMenu.mouseoutSrc = this.mouseoverSrc;
	}

}