var menuEffects = new Class({
	initialize: function(selector, options) {
		this.options = Object.extend({
			dropdownheight:		100,
			dropdownwidth:		100,
			parentdomelement:	'#topMenu',
			childdomelement:	'btmMenu',
			droponclick:		false,
			sweepdropdown:		false,
			dropdowndelay:		0,
			rollupdelay:		2000,
			openSearchImageElement:		'imgOpenLink',
			openSearchImageDisabledElement:	'imgOpenLinkDisabled'
		}, options || {})

		// variable for the list status
		var listStatus = 'closed';
		// setup var that holds our opened list's id
		var listOpen;
		// variable that holds the timerDelay
		var timerDelay;
		// variable that holds the timerOpenDelay
		var timerOpenDelay;
		// variable that flags if an element is onFocus
		var itemOnFocus = false;
		// variable that flags that the close link has been clicked
		var closeLinkClicked = false;
		
		// variables that hold the open images elements
		var openSearchImageVar = null;
		var openSearchImageDisabledVar = null;
		var closeSearchAnchorElementVar = null;
				
		var mySlide = new Fx.Slide('RecipeSearch');
		
		// show list function
		var showList = function(lid) {


			var listId = lid;
					
			// need to check if there is an open list
			if(listStatus == "open") {
				// check if the open list is the same
				// as toggled list. If not, then we hide it
				if(listId != listOpen) {
					hideList();
				}
			} 
			
			if(listStatus == "closed") {
				// set our list status
				listStatus = 'open';
				
				// set the curent open list id
				listOpen = listId;

				// show our list with a little effects
				//GKH var myFx0 = new Fx.Style($(listOpen), 'opacity', {duration: 1}).start(0, 1);
				//GKH var myFx1 = new Fx.Style($(listOpen), 'height', {duration: 500}).start(0, this.options.dropdownheight);
								
				// disable openLink
				if ($defined(openSearchImageVar)){
					openSearchImageVar.setStyle('display', 'none');
				}
				// enable openLinkDisabled
				if ($defined(openSearchImageDisabledVar)){
					openSearchImageDisabledVar.setStyle('display', 'inline');
				}
				// enable closeSearchAnchorElement
				if ($defined(closeSearchAnchorElementVar)){
					closeSearchAnchorElementVar.setStyle('display', 'inline');
				}
								
				mySlide.slideIn();				
				//if (this.options.sweepdropdown)
				//	var myFx2 = new Fx.Style($(listOpen), 'width').start(0, this.options.dropdownwidth);
			}

		}.bind(this);
		
		// hide list function
		var hideList = function() {
			if(listOpen) {
			
				// check if our list is shown already - if so run the effects to hide list
				if($(listOpen).getStyle('visibility') == "visible") {
					
					//GKH var myFx1 = new Fx.Style($(listOpen), 'height', { wait: true, duration: 500 }).start(this.options.dropdownheight, 0);
					//var myFx0 = new Fx.Style($(listOpen), 'opacity', {duration: 1}).start(1, 0);
				//	if (this.options.sweepdropdown)
				//		var myFx2 = new Fx.Style($(listOpen), 'width').start(this.options.dropdownwidth, 0);
									
					mySlide.slideOut();
					
					// enable openLink
					if ($defined(openSearchImageVar)){
						openSearchImageVar.setStyle('display', 'inline');
					}
					// disable openLinkDisabled
					if ($defined(openSearchImageDisabledVar)){
						openSearchImageDisabledVar.setStyle('display', 'none');
					}
					// disable closeSearchAnchorElement
					if ($defined(closeSearchAnchorElementVar)){
						closeSearchAnchorElementVar.setStyle('display', 'none');
					}
										
				}
				
				// set our list status
				listStatus = 'closed';
				
				// reset open list id
				listOpen = '';
			}
		}.bind(this);

		// locate mouseover elements
		$ES(selector + ' li ul').each(function(el) {

			el.setStyles({
				'display': 'block',
				'opacity': 0
			});
			
			elParent = $(el.parentNode);
			
			currentMenu = new Fx.Style(el, 'opacity');

			elParent.addEvents({
				'mouseover': function(submenu, myParent) {
					$clear(timerDelay);
					timerOpenDelay = showList.delay(this.options.dropdowndelay,this,el.id);

				}.bind(this).pass([currentMenu, elParent]),
				'mouseout': function(submenu, myParent) {
					if (itemOnFocus == false)
						timerDelay = (hideList).delay(this.options.rollupdelay);
						$clear(timerOpenDelay );
				}.bind(this).pass([currentMenu, elParent])
			})

		}.bind(this));
						
		// set onFocus and onBlur on an array of input, select and a elements within
		// the DOM element with id "topMenu"
		$$(this.options.parentdomelement + ' input', this.options.parentdomelement + ' select', this.options.parentdomelement + ' a').each(function(el) {
			
			if (el.name != "closeLink"){
				el.addEvents({
					'focus': function() {
						if(!listOpen) {
							showList(this.options.childdomelement);
						}
						$clear(timerDelay);
						itemOnFocus = true;
					}.bind(this),
					'blur': function() {
						timerDelay = (hideList).delay(this.options.rollupdelay);
						itemOnFocus = false;
					}.bind(this)
				})
			}
		}.bind(this));

		// set onClick on elements
		$$(this.options.parentdomelement + ' a').each(function(el) {

			if (el.name == "closeLink"){
				el.addEvents({
					'click': function(e) {
						itemOnFocus = false;
						$clear(timerOpenDelay );
						$clear(timerDelay );
						hideList();
						e = new Event(e).stop();
					}.bind(this)
				})
				closeSearchAnchorElementVar = el;
			}		

			if (el.name == "openLink"){
				el.addEvents({
					'click': function(e) {
						if(!listOpen) {
							showList(this.options.childdomelement);
						}
						$clear(timerDelay);
						itemOnFocus = true;
						e = new Event(e).stop();
					}.bind(this)
				})
			}		
		}.bind(this));

		$$(this.options.parentdomelement + ' img').each(function(el) {
			if (el.name == this.options.openSearchImageElement){
				openSearchImageVar = el;
			}
			if (el.name == this.options.openSearchImageDisabledElement){
				openSearchImageDisabledVar = el;
				openSearchImageDisabledVar.setStyle('display', 'none');
			}
		}.bind(this));


		// initalize
		// hide
		mySlide.hide();
		// set opacity to 1
		$(this.options.childdomelement).setStyle('opacity', 1);
		if ($defined(closeSearchAnchorElementVar)){
			closeSearchAnchorElementVar.setStyle('display', 'none');
		}

	}	
});
