$(document).ready(function() {

	var mainMenuOffsetLeft = 18;
	var mainMenuOffsetTop = 12;
	var menuFadeTime = 500;
	
	var mainMenuActive = false;
	var mainMenus = new Object;
	var mainClicked = true;
	var nrMainMenus = 0;
	
	var mainMenuPrepend = '<div class="menu-overlay main-menu-overlay dealer-overlay"><div class="menu-top"><div class="topleft"></div><div class="toptitle"></div>'
				+ '<div class="topcenter"></div><div class="top"></div><div class="topright"></div></div>'
				+ '<div class="menu-middle"><div class="left"></div><div class="center"><div class="base-menu"><ul class="submenu">';
	var mainMenuAppend  = '</ul></div><div class="sub-menu"><ul class="subsubmenu"></ul></div></div><div class="right"></div></div>'
				+ '<div class="menu-bottom"><div class="bottomleft"></div><div class="bottom"></div><div class="bottomright"></div></div></div>';
	
	$('#dealer_area a[rel=popover-menu]').each(function() {
		var menuID = '#popover-dealer-area-generated-' + (++nrMainMenus);
		$(this).attr('rel', menuID);
		mainMenus[menuID] = new Object;
		mainMenus[menuID].visible = false;
		mainMenus[menuID].initialized = false;
		if ($(this).parent().find('ul').length) {
			$('#content_conteiner').append(mainMenuPrepend + $(this).parent().find('ul:first').html() + mainMenuAppend);
			$('#content_conteiner .main-menu-overlay:last').attr('id', menuID.substring(1));
			if ($(this).parent().find('ul').length > 1) {
				menu = $('#content_conteiner .main-menu-overlay:last');
				menu.find('.subsubmenu').html($(this).parent().find('ul:last').html());
				menu.find('.topright').addClass('topright-grey').before('<div class="topcenter-grey"></div><div class="top-grey"></div>');
				menu.find('.bottomright').addClass('bottomright-grey').before('<div class="bottomcenter-grey"></div><div class="bottom-grey"></div>');
				menu.find('.right').addClass('right-grey');
				menu.find('.base-menu').css('padding-right', '16px');
			}
			else {
				$('#content_conteiner .main-menu-overlay:last .sub-menu').remove();
			}
		}
		else {
			mainMenus[menuID].noContent = true;
		}
	})
	.click(function() {
		var menuID = $(this).attr('rel');
		var position = $(this).offset();
		
	  //position submenu
	  
		$(menuID).css('top', Math.round(position.top - mainMenuOffsetTop));
		$(menuID).css('left', Math.round(position.left - mainMenuOffsetLeft));
		$(menuID).css('zIndex', '2000');
		
	  //create submenu
	  
		if (!mainMenus[menuID].initialized && !mainMenus[menuID].noContent) {
			mainMenus[menuID].initialized = true;
			var titleWidth = $(this).outerWidth();
			$(menuID).find('.toptitle').css('width', titleWidth);
			var topHeight = 41;//$(this).outerHeight();
			$(menuID).find('.menu-top div').css('height', topHeight);
			mainMenus[menuID].contentHeight = $(menuID).find('.base-menu').outerHeight();
			mainMenus[menuID].middleHeight = $(menuID).find('.center').outerHeight();
			$(menuID).find('.right').css('height', mainMenus[menuID].middleHeight);
			$(menuID).find('.left').css('height', mainMenus[menuID].middleHeight);
			//rechts menu
			if ($(menuID).find('.sub-menu').length) {
				var totalWidth = parseInt($(menuID).find('.menu-middle .center .base-menu').outerWidth()) + 26 + 1;
				if (totalWidth < titleWidth + 38) {
					totalWidth = titleWidth + 39;
					$(menuID).find('.base-menu').css('width', totalWidth-53);
				}
				var restWidth = parseInt($(menuID).find('.menu-middle .center').outerWidth()) + 26 - totalWidth;
				mainMenus[menuID].baseWidth = parseInt($(menuID).find('.menu-middle .center').outerWidth()) + 26;
				$(menuID).css('width', mainMenus[menuID].baseWidth + 1);
				var topWidth = 0;
				$(menuID).find('.menu-top div').each(function(){topWidth += $(this).outerWidth()});
				mainMenus[menuID].topWidth = totalWidth - topWidth;
				$(menuID).find('.top').css('width', mainMenus[menuID].topWidth);
				$(menuID).find('.top-grey').css('width', restWidth);
				var bottomWidth = 0;
				$(menuID).find('.menu-bottom div').each(function(){bottomWidth += $(this).outerWidth()});
				mainMenus[menuID].bottomWidth = totalWidth - bottomWidth;
				$(menuID).find('.bottom').css('width', mainMenus[menuID].bottomWidth);
				$(menuID).find('.bottom-grey').css('width', restWidth);
				$(menuID).find('.sub-menu').css('height', $(menuID).find('.base-menu').height());
				
			}
			else {
				var totalWidth = parseInt($(menuID).find('.menu-middle .center').outerWidth()) + 26;
				if (totalWidth < titleWidth + 38) {
					totalWidth = titleWidth + 38;
					$(menuID).find('.base-menu').css('width', totalWidth-46);
				}
				mainMenus[menuID].baseWidth = totalWidth;
				$(menuID).css('width', totalWidth+1);
				var topWidth = 0;
				$(menuID).find('.menu-top div').each(function(){topWidth += $(this).outerWidth()});
				mainMenus[menuID].topWidth = totalWidth - topWidth;
				$(menuID).find('.top').css('width', mainMenus[menuID].topWidth);
				var bottomWidth = 0;
				$(menuID).find('.menu-bottom div').each(function(){bottomWidth += $(this).outerWidth()});
				mainMenus[menuID].bottomWidth = totalWidth - bottomWidth;
				$(menuID).find('.bottom').css('width', mainMenus[menuID].bottomWidth);
			}
		}
		
	  //show requested menu
		
		if (!mainMenus[menuID].visible) {
			hideAllMenus();
			if (!mainMenus[menuID].noContent) {
				$(this).parent().addClass('current');
				$(menuID).fadeOut(0).fadeIn(mainMenuActive ? 0 : 200);
			}
			mainMenus[menuID].visible = true;
			mainMenuActive = true;
		}
		else {
			$(this).parent().removeClass('current');
			$(menuID).fadeOut(200);
			mainMenus[menuID].visible = false;
			mainMenuActive = false;
		}

		$(menuID).find('.toptitle').html($(this).find("em").html()); 

		if (mainMenus[menuID].noContent && mainClicked) return true;
		return false;
		
	},function(){
		//
	})
	.hover(function() {
		var menuID = $(this).attr('rel');
		if (mainMenuActive && !mainMenus[menuID].visible) {
			mainClicked = false;
			$(this).click();
			mainClicked = true;
		}
	});
		
	$(document).click(function(e){
		if ($(e.target).parents().is('.main-menu-overlay')) return true;
		mainMenuActive = false;
		hideAllMenus();
	});
	
	$('.main-menu-overlay .toptitle').click(function(){
		hideMenu('#'+$(this).parent().parent().attr('id'));
	});
	
	function hideMenu(menuID) {
		mainMenus[menuID].visible = false;
		$(menuID).fadeOut((mainMenuActive ? 0 : menuFadeTime), function(){
			$(this).css('width', mainMenus[menuID].baseWidth + 1);
		});
		$('a[rel='+menuID+']').parent().removeClass('current');
	}
	
	function hideAllMenus() {
		for (id in mainMenus) {
			if (mainMenus[id].visible) {
				hideMenu(id);
			}
		}
	}
	
});