document.observe('dom:loaded', headerInit);

function headerInit() {
	
	// define Choose Destination dropdown menu elements
	choose = {
		area: $('nav-choose'),
		link: $('nav-choose-link'),
		menu: $('chooseattractiondd'),
		init: function() {
			_genericDropDownMenuInit(choose.area, choose.link, choose.menu);
		}
	};
	
	// define Choose Destination dropdown menu elements
	myfunmember = {
		area: $('nav-myfunmembers'),
		link: $('nav-myfunmembers-link'),
		menu: $('myfunmembersdd'),
		init: function() {
			_genericDropDownMenuInit(myfunmember.area, myfunmember.link, myfunmember.menu);
		}
	};
	
	// define Choose Destination dropdown menu elements
	member = {
		area: $('members-area'),
		link: $('members-link'),
		menu: $('members-sub'),
		init: function() {
			_genericDropDownMenuInit(member.area, member.link, member.menu);
		}
	};
	
	// define login form elements
	login = {
		link: $('login-link'),
		popup: $('login-popup'),
		close: $('login-close')
	};
	
	// generic function to initialise a dropdown menu
	function _genericDropDownMenuInit(area, link, menu) {
		area.observe('mouseover', function(event) {globalMouseOverHandler(event, link, menu);});
	  area.observe('mouseout', function(event) {globalMouseOutHandler(event, link, menu, area);});
	}	
	
	// initialise dropdown menus
	if (choose.area) choose.init();
	if (member.area) member.init();
	if (myfunmember.area) myfunmember.init();
	
	// send all clicks to global handler
  document.observe('click', globalClickHandler);
}

globalClickHandler = function(e) {
	var tg = e.element();
  if (tg == login.link) {
		// click occurs on the Login link in util nav
		loginForm.show();
		Event.stop(e);
	} else if (tg == login.close) {
		loginForm.hide();
		Event.stop(e);
	} else if ((tg.up('#choose-area')) || (tg == login.popup) || (tg.up('#login-popup'))) {
    // click occurs inside the choose menu (OR A SAFE ZONE - FUNCTION THIS LOGIC OFF??????), do nothing
    // console.log('clicked while choose menu is visible or in safe zone');
  } else {
		// click occurs outside of hitzones, so hide all click-activated popups
    if (login.link) loginForm.hide();
  }
	
};

globalMouseOverHandler = function(e, link, menu) {
	var tg = e.element();
	if (tg == link) {
		menuPopup.show(link, menu);
	}
};

globalMouseOutHandler = function(e, link, menu, activearea) {
	var tg = e.element();
  var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; // get related target, the element we are mousing out to
	
	function _stillInParent(tg, parent) {
	  // climb up the DOM tree from the reltg, until it hits either its parent or body/html elements
	  while (reltg != activearea && reltg.nodeName != 'BODY' && reltg.nodeName != 'HTML') reltg = reltg.parentNode;
	  if (reltg == activearea) {
			// if the reltg is in its parent, the mouse is still in the tg's active parent, return true
			return true;
		} else {
			// otherwise, return false
			return false;
		}
	}
  
	if (!(_stillInParent(tg, activearea))) {
		menuPopup.hide(link, menu);
	}
};


var loginForm = {
	show: function() {
		if (login.link.className == 'off') {
			clearEffectQueue('login');
			// reset dimensions and position stylezzzz, these are the styles that get manipulated by the effect
			login.popup.setStyle({top:'', left:'', width:'', height:''});
			login.popup.blindDown({duration:.25, queue:{scope:'login', position:'front'}});
		}
		login.link.className = 'on';
	},
	hide: function() {
		if (login.link.className == 'on') {
			login.popup.blindUp({duration:.25, queue:{scope:'login', position:'end'}});
		}
		login.link.className = 'off';
	}
};


var menuPopup = {	
	show: function(link, menu) {
	  if (link.className == 'off') {
			clearEffectQueue(menu.identify());
			menu.appear({duration:.25, queue:{scope:menu.identify(), position:'front'}});
	  }
		link.className = 'on';
	},
	hide: function(link, menu) {
	  if (link.className == 'on') {
	    menu.fade({duration:.25, from:1, to:0, queue:{scope:menu.identify(), position:'end'}});
	  }
		link.className = 'off';
	}
};


hideAll = function() {
  // function to hide all click-activated popups?
};

clearEffectQueue = function(scope) {
	// clear the effect queue on hover so it doesn't continiously
	// accumulate effects if you go crazy with events
	var queue = Effect.Queues.get(scope);
	queue.each(function(effect) {effect.cancel();});
};