/**
 * @author nd
 */

var AlexMenu = Base.extend({

	activeSubMenu: '',

	options: {
		onStart:                  Class.empty,
		onComplete:               Class.empty,
		mainMenuIdPrefix:         'uid_',
		mainSubIdPrefix:          'sub_',
		prefixLength:             4
	},

	initialize: function(element, options){
//		this.parent();

		this.element = element;
		this.setOptions(options);

		// fetch necessary DOM-Object.
		this.getDomObjects();

		// Set spacial CSS (AJAX only) Settings
		var menuIDobjs = "#" + par.menuId     + " a";
		var ctaMenuIdobjs  = "#" + par.ctaMenuId  + " a.hover-fx";
		var iconMenuIdobjs = "#" + par.iconMenuId + " a.hover-fx";

		var menuHoverFX = $$(menuIDobjs, ctaMenuIdobjs, iconMenuIdobjs);
			menuHoverFX.each(function(el) {
				el.setStyle('cursor','default');
			});

		// disable all sub menus and set position to absolute prepare content-loading via ajax
		this.subMenus.each(function(el){
			el.setStyles({
				position: 'absolute',
				display:  'none',
				opacity:  '0'
			});
		});

		// remvove class "act" from menu items
		$ES('li.act', 'header').each(
			function(el){
				el.removeClass('act');
			}
		);

		// Add the onclick effect to the Menu and Submenu
		this.addEventOnClick( this.menuLinks );

		// Add the mouse over effect to the Main Menu Buttons to show the Submenu
		this.addEventMouse();

		// Add the mouse event on focus a form input field
		this.addEventOnFocus();

	},

	getDomObjects: function(){
		// this.parent();
		this.mainMenu = $$( '#' + par.menuId    + ' a' );
		this.restMenu = $$( '#' + par.ctaMenuId + ' a', '#' + par.iconMenuId + ' a' );
		this.subMenus = $$( '#' + par.subMenuId + ' ' + par.selectorSubMenuBox );
		this.noMenu   = $$( par.selectorNoMenu );

		// fetch all menu links wich need addOnClick
		var menuIdobjs     = '#'+ par.menuId     + ' a';
		var ctaMenuIdobjs  = '#'+ par.ctaMenuId  + ' a';
		var iconMenuIdobjs = '#'+ par.iconMenuId + ' a';
		var subMenuIdobjs  = '#'+ par.subMenuId  + ' a';
		this.menuLinks     = $$(menuIdobjs, ctaMenuIdobjs, iconMenuIdobjs, subMenuIdobjs);
	},

	addEventMouse: function(){
		/*
			// add the mouse enter event to the menubar where no Menu Elements are
			// hide submenu
			this.noMenu.addEvent('mouseenter', function() {
				if(this.activeSubMenu !== ''){
					this.hideSubMenu(this.activeSubMenu);
					// Rollout main menu button
					this.mainMenuRollout(this.activeSubMenu);
				}
			}.bind(this));
		*/
		// show the corresponding submenu on mouse over the main menu
		this.mainMenu.forEach(
			function(el){
				var elID = el.getProperty('id');
				// use mouseenter instead of mouseover because:
				// This event fires when the mouse enters the area of the dom Element and will not be fired again if the mouse crosses over children of the Element
				el.addEvent('mouseenter', function() {
					// Rollover main menu button
					this.mainMenuRollover(el);
					this.showSubMenu(elID);
				}.bind(this));
			}.bind(this)
		);

		// show the corresponding submenu on mouse over the icon menu
		// add BTN switch on rollover
		this.restMenu.forEach(
			function(el){
				var elID = el.getProperty('id');

					// use mouseenter instead of mouseover because:
					// This event fires when the mouse enters the area of the dom Element and will not be fired again if the mouse crosses over children of the Element
					el.addEvent('mouseenter', function(){
						// Rollover main menu button
						this.mainMenuRollover(el);
						// Show Submenu if there is one
						if (elID && this.activeSubMenu != elID && this.activeSubMenu !== "" && this.activeSubMenu !== null && !el.hasClass('hover-fx')) {
							this.hideSubMenu(this.activeSubMenu);
						}
						if (el.hasClass('hover-fx')) {
							this.showSubMenu(elID);
						}
					}.bind(this));

					// use mouseleave instead of mouseenter because:
					// This event fires when the mouse exits the area of the dom Element; will not be fired again if the mouse crosses over children of the Element
					el.addEvent('mouseleave', function(){
						// firefox collapses the search "submenu" when the mouse moves over the input field
						if (el.tagName != 'INPUT') {
							// Hide SubMenu if there is one
							if (elID && this.activeSubMenu != elID) {
								this.hideSubMenu(elID);
							}
							else {
								if (!el.hasClass('hover-fx')) {
									this.mainMenuRollout(el);
								}
							}
						}
					}.bind(this));
			}.bind(this)
		);

		// Add the Mouse Event to the Submenus
		this.subMenus.forEach(
			function(el){
				var elID = el.getProperty('id');

				if (elID != par.searchDivId) {
					// use mouseleave instead of mouseenter because:
					// This event fires when the mouse exits the area of the dom Element; will not be fired again if the mouse crosses over children of the Element
					el.addEvent('mouseleave', function(){
						// firefox collapses the search "submenu" when the mouse moves over the input field
						if (el.tagName != 'INPUT') {
							this.hideSubMenu(elID);
							// Rollout main menu button
							this.mainMenuRollout(this.activeSubMenu);
						}
					}.bind(this));
				}
			}.bind(this)
		);

		// hide submenu when mouse is over content
		$(par.contentId).addEvent('mouseenter', function() {
			// Rollover main menu button
			if(this.activeSubMenu !== '' &&  this.activeSubMenu != par.searchMenuId){
				this.hideSubMenu(this.activeSubMenu);
				// Rollout main menu button
				this.mainMenuRollout(this.activeSubMenu);
			}
		}.bind(this));

		// hide submenu when mouse is over content
		$(par.contentId).addEvent('click', function() {

			if(this.activeSubMenu == par.searchMenuId){
				this.hideSubMenu(this.activeSubMenu);
			}
		}.bind(this));

	},

	addEventOnFocus: function(){
		// Add Mouse Event on Focus a Inputfield
		var css_statement = "div#menu_sub input";
		var inputFields = $$(css_statement);
		inputFields.each(function(el){
			el.addEvent('focus', function() {
				el.value = "";
			});
		});
	},

	showSubMenu: function(id){
		// hide the active Sub Menu
		if (this.activeSubMenu !== '' && this.activeSubMenu !== id){
			this.hideSubMenu(this.activeSubMenu);
			// Rollout main menu button
			this.mainMenuRollout(this.activeSubMenu);
		}

		// set the new active Menu
		this.activeSubMenu = id;

		// get the subMenuID
		var subMenuId = this.options.mainSubIdPrefix + this.extractPageId(id);

		// Sub-Menu Fadein Effect
		if (window.ie6) { // Not for IE (iFRAME will slow down EFX!)
			$(subMenuId).setStyles({
				'display':'block',
				'opacity':'1'
			});
		} else {
			if ($(subMenuId)) {
				$(subMenuId).setStyle('display','block');
				var showSubFx = new Fx.Style(subMenuId, 'opacity', {'duration':400});
				showSubFx.start(1);
			}
		}

	},

	hideSubMenu: function(id){
		var subMenuId = this.options.mainSubIdPrefix + this.extractPageId(id);
		var subMenu = $(subMenuId);

		if (subMenu) {
			// Sub-Menu Fadeout Effect
			if (window.ie6) { // Not for IE (iFRAME will slow down EFX!)
				$(subMenuId).setStyles({
					'display': 'none',
					'opacity': '0'
				});
			} else {
				var showSubFx = new Fx.Style(subMenu, 'opacity', {
					'duration': 400
				});
				showSubFx.start(0).chain(function(){
					subMenu.setStyle('display', 'none');
				});
			}
		}
		this.mainMenuRollout(id);
	},

	mainMenuRollover: function(el){
		if ($E('img',el))
		$E('img',el).setStyle('visibility','hidden');
	},

	mainMenuRollout: function(el){
		if ($E('img',el))
		$E('img',el).setStyle('visibility','visible');
	},

	extractPageId: function(id){
		if (id)
		return id.substring(this.options.prefixLength, id.length);
	}

});