$(document).ready(function() {
	var menuOffsetLeft = 11;
	var menuOffsetTop = 11;
	var menuFadeTime = 500;
	
	var subMenuWidth = 150;
	var subMenuOpened = null;
	
	var menus = new Object;
	var nrMenus = 0;
	
	var prepend = '<div class="menu-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 append  = '</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>';
	
	$('#tyres-intro-scroller a[rel=popover-menu]').each(function() {						 
		var menuID = '#popover-menu-generated-' + (++nrMenus);
		$(this).attr('rel', menuID);
		$('#wrapper').append(prepend + $(this).parent().find('ul').html() + append);
		$('#wrapper .menu-overlay:last').attr('id', menuID.substring(1));
	})
	.click(function() {
		var menuID = $(this).attr('rel');
		var position = $(this).offset();
		
	  //check menu title completely visible
	  
//		if (position.left < $('.horizontal-slider .scroller').offset().left || 
//			position.left + $(this).outerWidth() > $('.horizontal-slider .right').offset().left) {
//				hideAllMenus();
//				return false;
//		}
		
	  //position submenu
	  
		$(menuID).css('top', Math.round(position.top - menuOffsetTop));
		$(menuID).css('left', Math.round(position.left - menuOffsetLeft));
		
	  //create submenu
	  
		if (!menus[menuID]) {
			menus[menuID] = new Object;
			var titleWidth = $(this).outerWidth();
			$(menuID).find('.toptitle').css('width', titleWidth);
			var topHeight = 28;//$(this).outerHeight();
			$(menuID).find('.menu-top div').css('height', topHeight);
			menus[menuID].contentHeight = $(menuID).find('.base-menu').outerHeight();
			menus[menuID].middleHeight = $(menuID).find('.center').outerHeight();
			$(menuID).find('.right').css('height', menus[menuID].middleHeight);
			$(menuID).find('.left').css('height', menus[menuID].middleHeight);
			var totalWidth = parseInt($(menuID).find('.menu-middle .center').outerWidth()) + 26;
			if (totalWidth < titleWidth + 38) {
				totalWidth = titleWidth + 38;
				$(menuID).find('.base-menu').css('width', totalWidth-34);
			}
			menus[menuID].baseWidth = totalWidth;
			$(menuID).css('width', totalWidth+1);
			var topWidth = 0;
			$(menuID).find('.menu-top div').each(function(){topWidth += $(this).outerWidth()});
			menus[menuID].topWidth = totalWidth - topWidth;
			$(menuID).find('.top').css('width', menus[menuID].topWidth);
			var bottomWidth = 0;
			$(menuID).find('.menu-bottom div').each(function(){bottomWidth += $(this).outerWidth()});
			menus[menuID].bottomWidth = totalWidth - bottomWidth;
			$(menuID).find('.bottom').css('width', menus[menuID].bottomWidth);
		}
		
	  //hide submenu
		
		else if (menus[menuID].visible) {
			hideMenu(menuID);
			return false;
		}
		
	  //reset submenu
		
		else {
			$(menuID).find('.right').css('height', menus[menuID].middleHeight);
			$(menuID).find('.left').css('height', menus[menuID].middleHeight);
			$(menuID).find('.top').css('width', menus[menuID].topWidth);
			$(menuID).find('.bottom').css('width', menus[menuID].bottomWidth);
			$(menuID).css('width', menus[menuID].baseWidth + 1);
			$(menuID).find('.sub-menu').css('width', 0);
			$(menuID).find('.sub-menu').css('height', 0);
			$(menuID).find('.sub-menu').hide();
			$('.submenu > li > a').removeClass('active');
			$(menuID).hide();
		}
		
	  //show requested menu
		
		hideAllMenus();
		$(this).addClass('active');
		$(menuID).fadeIn(200);
		menus[menuID].visible = true;
		return false;
		
	},function(){
		//
	});
	
	$('.horizontal-slider').mousewheel(function(){
		hideAllMenus();
	});	
	$('.horizontal-slider .browse').hover(function(){
		hideAllMenus();
	});
	
	$(document).click(function(e){
		if ($(e.target).parents().is('.menu-overlay')) return true;
		hideAllMenus();
	});
	
	$('.menu-overlay .toptitle').click(function(){
		hideMenu('#'+$(this).parent().parent().attr('id'));
	});
	
	$('.submenu > li > a').hover(function() {
		//                         li       ul       div      div      div      div
		var menuID = '#' + $(this).parent().parent().parent().parent().parent().parent().attr('id');
		var hasSubMenu = $(this).parent().find('ul').length;
		
		$(this).parent().parent().find('a').removeClass('active');
		
		if (!subMenuOpened && !hasSubMenu) return;
			
		if (!subMenuOpened && hasSubMenu) {
			$(this).addClass('active');
			$(menuID).find('.sub-menu').show();
			$(menuID).find('.subsubmenu').html($(this).parent().find('ul').html());
			subMenuWidth = parseInt($(menuID).find('.subsubmenu').outerWidth()) + parseInt($(menuID).find('.subsubmenu').css('marginLeft'));
			resize = $(menuID).find('.subsubmenu').outerHeight() - menus[menuID].contentHeight;
			$(menuID).css('width', menus[menuID].baseWidth + subMenuWidth + 1);
			$(menuID).find('.top').stop().animate({width: menus[menuID].topWidth + subMenuWidth}, menuFadeTime);
			$(menuID).find('.bottom').stop().animate({width: menus[menuID].bottomWidth + subMenuWidth}, menuFadeTime);
			$(menuID).find('.sub-menu').css('height', menus[menuID].contentHeight);
			if (resize > 0) {
				$(menuID).find('.sub-menu').stop().css('width', '1px').animate({height: menus[menuID].contentHeight + resize, width: subMenuWidth}, menuFadeTime);
				$(menuID).find('.right').stop().animate({height: menus[menuID].middleHeight + resize}, menuFadeTime);
				$(menuID).find('.left').stop().animate({height: menus[menuID].middleHeight + resize}, menuFadeTime);
			}
			else {
				$(menuID).find('.sub-menu').stop().css('width', '1px').animate({width: subMenuWidth}, menuFadeTime);
			}
			subMenuOpened = $(this).text();
		}
		
		else if (subMenuOpened != $(this).text() && hasSubMenu) {
			$(this).addClass('active');
			temp = this;
			$(menuID).find('.subsubmenu').fadeOut(menuFadeTime/2, function(){
				$(menuID).find('.subsubmenu').html($(temp).parent().find('ul').html()).fadeIn(menuFadeTime/2);
				resize = $(menuID).find('.subsubmenu').outerHeight() - menus[menuID].contentHeight;
				resize = resize > 0 ? resize : 0;
				prevWidth = parseInt($(menuID).find('.sub-menu').css('width'));
				$(menuID).find('.sub-menu').css('width', 'auto');
				subMenuWidth = parseInt($(menuID).find('.subsubmenu').outerWidth()) + parseInt($(menuID).find('.subsubmenu').css('marginLeft'));
				$(menuID).find('.sub-menu').css('width', prevWidth);				
				if (subMenuWidth > prevWidth) {
					$(menuID).css('width', menus[menuID].baseWidth + subMenuWidth + 1);
					$(menuID).find('.sub-menu').stop().animate({height: menus[menuID].contentHeight + resize, width: subMenuWidth}, menuFadeTime);
					$(menuID).find('.top').stop().animate({width: menus[menuID].topWidth + subMenuWidth}, menuFadeTime);
					$(menuID).find('.bottom').stop().animate({width: menus[menuID].bottomWidth + subMenuWidth}, menuFadeTime);
				}
				else {
					$(menuID).find('.sub-menu').stop().animate({height: menus[menuID].contentHeight + resize}, menuFadeTime);
				}
				$(menuID).find('.right').stop().animate({height: menus[menuID].middleHeight + resize}, menuFadeTime);
				$(menuID).find('.left').stop().animate({height: menus[menuID].middleHeight + resize}, menuFadeTime);
			});	
			subMenuOpened = $(this).text();
		}
		
		if (!hasSubMenu) {
			$(menuID).find('.right').stop().animate({height: menus[menuID].middleHeight}, menuFadeTime);
			$(menuID).find('.left').stop().animate({height: menus[menuID].middleHeight}, menuFadeTime);
			$(menuID).find('.top').stop().animate({width: menus[menuID].topWidth}, menuFadeTime);
			$(menuID).find('.bottom').stop().animate({width: menus[menuID].bottomWidth}, menuFadeTime);
			$(menuID).find('.sub-menu').stop().animate({width: 1, height: menus[menuID].contentHeight}, menuFadeTime, function() {
				$(this).find('.subsubmenu').html('');
				$(this).find('.sub-menu').css('width', 0);
				$(this).find('.sub-menu').css('height', 0);
				$(menuID).css('width', menus[menuID].baseWidth + 1);
				$(this).hide();
			});
			$(this).removeClass('active');
			subMenuOpened = null;
			
		}
		
		return false;
		
	});

	function hideMenu(menuID) {
		menus[menuID].visible = false;
		$(menuID).fadeOut(function(){
			$(this).css('width', menus[menuID].baseWidth + 1);
			$(this).find('.subsubmenu').html('');
			$(this).find('.sub-menu').css('width', 0);
			$(this).find('.sub-menu').css('height', 0);
			subMenuOpened = null;
		});
		$('.popover-menu a[rel='+menuID+']').removeClass('active');
	}
	
	function hideAllMenus() {
		for (id in menus) {
			if (menus[id].visible) {
				hideMenu(id);
			}
		}
	}
	
});