jQuery.noConflict();

jQuery(document).ready(function() {

		var HIDE_TIMEOUT = 500;

		var tmrMenuDelay;
		var tmrGroupmenuDelay;
		var tmrSubmenuDelay;
		var tmrQuickinfoDelay;

		var recentSubmenu ='';
		var recentGroupmenu ='';
		var recentMainMenu ='';


		jQuery('ul.dropdown li a.menu').bind('mouseenter', function() {
			var classes = jQuery(this).attr('class').split(' ');
			var groupmenuId = 'menu_' + classes[1];

			recentMainMenu = classes[1];

			//close all info-panes (4th level)
			jQuery('div#dropdown div.quickinfo').hide();

			//close all sub menus (3rd level)
			jQuery('div#dropdown div.groupmenu').hide();

			if(recentGroupmenu==groupmenuId) {
				//mouseleave of any groupmenu triggered self-hiding: timer of groupmenu-closer can be stopped
				//if it is our groupmenu
				clearTimeout(tmrGroupmenuDelay);
			} else {
				//hide all groupmenus, but not our own
				jQuery('div#dropdown .menu').stop(true,true);
				jQuery('div#dropdown .menu').hide();

				//Set all other main menuitems to inactive
				jQuery('ul.dropdown li a.menu').removeClass('open');
			}



			//get the position of the menu item
			var pos = jQuery(this).offset();
			var xOffset = 0;
			/*console.log(jQuery(this).parent().parent().find('.menu').length);*/
			if ((jQuery(this).hasClass('caravans')) || ((jQuery(this).hasClass('contact')&&(jQuery(this).parent().parent().find('.menu').length >5)))) {
				xOffset = -120;
			}
			
			
			
			//calculate height of submenu: we need dropshadow of that size
			//Problem: heigth can not be obtained directly, because it is animated
			//We count groups and use determine its actual height by checking the amount of subitems in all groupmenus
			//While doing that, we set the height of each modelgroup (we have a layer that switches between a modelgroup-image and a list with each model seperated
			//although all group-images have same height, we must reserve a height for the model list)
			// !for caravans we do not have the menulevel with modelgroup!
			var groupmenuCount = jQuery('#'+groupmenuId+ ' ul li.groupmenu').size();
			var menuheight = 0; //initial height
			
			if (groupmenuId == 'menu_reisemobile') {
				jQuery('#'+groupmenuId+ ' ul li.groupmenu').each(function(){
					var subitemCount = jQuery(this).children("ul.groupmenu").find("li").size();
					
					//each subitem has fixed height of 40px, the header-h4 adds 23px, 
					var groupmenuHeight = subitemCount * 40 + 22;
					
					//we need a minimum height of 116px (80 for groupimage + 14 for margin bottom + 22 for h4)
					groupmenuHeight = (groupmenuHeight > 116) ? groupmenuHeight : 116;
					
					//set this height
					jQuery(this).css( {"height": groupmenuHeight, "overflow": ("hidden")  } );

					//add that to the overall height (plus 1px border below each group)
					menuheight += groupmenuHeight + 1;

				});
			} else {
				jQuery('#'+groupmenuId+ ' ul li.groupmenu').each(function(){
					var subitemCount = jQuery(this).children("ul").find("li").size();
					
					//each subitem has fixed height of 40px, 
					var groupmenuHeight = subitemCount * 40;

					
					//set this height is not necessary
					jQuery(this).css( {"overflow": ("hidden")  } );

					//add that to the overall height (plus 1px border below each group)
					menuheight += groupmenuHeight + 1;

				});
			}
			
			//Shadow has an offset of 4px to the menu and a 1px border top
			menuheight += 4 + 1;

			//simulate hoverstate for menuitem
			jQuery(this).addClass('open');

			//show the menu directly below
			jQuery('#'+groupmenuId).css( {"position":"absolute", "left": (pos.left + xOffset) + "px", "top": "60px", "height": menuheight } );


			jQuery('#'+groupmenuId).animate({
						height: 'show',
						opacity: 'show'
					}, 'fast', 'swing');

		}).bind("mouseleave",function(){

			//simulate hoverstate for menuitem
			jQuery(this).removeClass('open');

			//get id of matching submenu by reading our class (must be class="menu [section]")
			//relevant part is second class. This section name must be part of submenu id: menu_[section]
			var classes = jQuery(this).attr('class').split(' ');
			var groupmenuId = 'menu_' + classes[1];

			tmrMenuDelay = setTimeout(function() {
				jQuery('#'+groupmenuId).animate({
							height: 'hide',
							opacity: 'hide'
						}, 'fast');
			}, 20);

		});


		jQuery('div#dropdown .menu').bind('mouseenter', function() {

			//mouseleave of our menuitem triggered hiding us: abandon this
			clearTimeout(tmrMenuDelay);

			/* manipulate calling main menu */
			//get the class of our calling main menu item our id is "menu_[mainmenuclass]"
			var mainmenuClass = jQuery(this).attr('id').replace('menu_','');

			//simulate hoverstate for menuitem
			jQuery('ul.dropdown li a.menu.'+mainmenuClass).addClass('open');

		}).bind("mouseleave",function(){

			//get the class of our calling main menu item our id is "menu_[mainmenuclass]"
			var mainmenuClass = jQuery(this).attr('id').replace('menu_','');
			var myId = jQuery(this).attr('id');

			//set info on which submenu was open
			//Is checked in MainMenu.mouseover
			recentGroupmenu = myId;

			tmrGroupmenuDelay = setTimeout(function() {
				//simulate hoverstate for menuitem
				jQuery('ul.dropdown li a.menu.'+mainmenuClass).removeClass('open');
				//jQuery('#'+myId).hide(); //'this' is timer in this context!
				jQuery('#'+myId).animate({
							height: 'hide',
							opacity: 'hide'
						}, 'fast');

			}, HIDE_TIMEOUT);


		});


		jQuery('div#dropdown li.groupmenu').bind('mouseenter', function() {

			//stop timer set be calling menuitem
			clearTimeout(tmrQuickinfoDelay);
			//stop timer set by submenu
			clearTimeout(tmrSubmenuDelay);
			//stop timer set by groupmenu
			clearTimeout(tmrGroupmenuDelay);
			
			//get id of matching groupmenu by reading our class (must be class="menu [section]")
			//relevant part is second class. This section name must be part of groupmenu id: menu_[section]
			var classes = jQuery(this).attr('class').split(' ');
			var submenuId = 'groupmenu_' + classes[1];

			//if we mouse out of menu and back again, we must not hide our opened submenu
			if (jQuery(recentSubmenu).attr('class') != jQuery(this).attr('class')) {
				jQuery('div#dropdown ul.groupmenu').hide();
			}



			//get the position of the menu item
			var pos = jQuery(this).offset();
			var xOffset = 0;

			// we have the effect that one single LI does not have the height to overlay the group-image completely (one LI has 40px, the image has 80)
			// so we set a min height for the submenu here
			if (jQuery('#'+submenuId+ ' li').size() < 2) {
				jQuery('#'+submenuId).css( {"position":"relative", "top":"-98px","height": "80px"} );
			} else {
				jQuery('#'+submenuId).css( {"position":"relative", "top":"-98px"} );
			}
			//jQuery('#'+groupmenuId).show();

			jQuery('#'+submenuId).animate({
						opacity: 'show'
					}, "slow", "swing");

		}).bind("mouseleave",function(){
			tmrQuickinfoDelay = setTimeout(function() {
				jQuery('div#dropdown div.quickinfo').hide();
			}, HIDE_TIMEOUT);
			
			tmrSubmenuDelay = setTimeout(function() {
				jQuery('div#dropdown ul.groupmenu').hide();
			}, 100);
			
			recentSubmenu = jQuery(this);
			
		});



		jQuery('div#dropdown li.submenu').bind('mouseenter', function() {
			//stop timer set be quickinfo
			clearTimeout(tmrQuickinfoDelay);
			//stop timer set by submenu
			clearTimeout(tmrSubmenuDelay);


			//close all info-panes (3rd level)
			jQuery('div#dropdown div.quickinfo').hide();

			//get id of matching quickinfo by reading our class (must be class="submenu [model]")
			//relevant part is second class. This section name must be part of quickinfo id: submenu_[model]
			var classes = jQuery(this).attr('class').split(' ');
			var quickinfoId = 'submenu_' + classes[1];

			//get the position of our container
			var pos = jQuery(this).parent().parent().parent().parent().offset();
			var pos2 = jQuery(this).parent().offset();
			var width = jQuery(this).parent().width();

			//show all quickinfos on the left (all on same pos)
			jQuery('#' + quickinfoId).css( {"position":"absolute", "left": (pos2.left + width+5) + "px", "top": (pos.top) + "px" } );
			jQuery('#' + quickinfoId).show();
		}).bind("mouseleave",function(){
/*		
			var classes = jQuery(this).attr('class').split(' ');
			var quickinfoId = 'submenu_' + classes[1];

			tmrQuickinfoDelay = setTimeout(function() {
				jQuery('#' + quickinfoId).hide();
			}, HIDE_TIMEOUT);
*/
		});




		jQuery('div#dropdown div.quickinfo').bind('mouseenter', function() {

			//stop timer set be calling menuitem
			clearTimeout(tmrQuickinfoDelay);
			//stop timer set by submenu
			clearTimeout(tmrSubmenuDelay);
			//stop timer set by groupmenu
			clearTimeout(tmrGroupmenuDelay);

		}).bind("mouseleave",function(){
			var myId = jQuery(this).attr('id');

			var classes = jQuery(this).attr('class').split(' ');
			var grmenuID = classes[1].replace('submenu_','');
			var mainmenuClass = "";
			if (grmenuID.length < 1){grmenuID=recentGroupmenu; mainmenuClass = recentMainMenu;}
			else {
				grmenuID = jQuery('li.submenu.'+grmenuID).parent().attr("id").replace('groupmenu_','');
				grmenuID = jQuery('li.groupmenu.'+grmenuID).parent().parent().attr("id");
				mainmenuClass = grmenuID.replace('menu_','');
			}
			var submenuID = classes[1].replace('submenu_','');
			if (submenuID.length < 1){submenuID='groupmenu_' + recentGroupmenu;}
			else {
				submenuID = jQuery('li.submenu.'+submenuID).parent().attr("id");
			}
			//start the timer we stopped on mouseenter
			// using the different timers gives the according eventhandlers a chance to stop it
			tmrQuickinfoDelay = setTimeout(function() {
				jQuery('#' + myId).hide(); //'this' is timer in this context!
			}, HIDE_TIMEOUT);


			tmrSubmenuDelay = setTimeout(function() {
				jQuery('#'+submenuID).hide();
				jQuery('#'+submenuID).prev().animate({
						opacity: 'show'
					}, 'slow', 'swing');
			}, HIDE_TIMEOUT);

			tmrGroupmenuDelay = setTimeout(function() {
				jQuery('ul.dropdown li a.menu.'+mainmenuClass).removeClass('open');

				jQuery('#'+grmenuID).animate({
							height: 'hide',
							opacity: 'hide'
						}, 'fast');
			}, HIDE_TIMEOUT);
		});


	});