var menu_items;
var sub_menus;
var active_menu;
var menu_hover_type;
var menu_timeout;
var menu_speed = 300;

$(document).ready(function(){
	// Get menu elements
	menu_items = $('.main-nav li');
	sub_menus = $('.sub-nav-menu');
	active_menu = $('.sub-nav-' + active_menu_type);
	
	// Set up sub menus
	sub_menus.css({ 'z-index': 100 }).each(function(){
	
		// Remove admin links to prevent them being counted
		$(this).find('.views-admin-links').remove();
	
		// Wrap contents of sub menu in a wrapper div and show sub menu
		$(this).wrapInner('<div class="sub-menu-wrapper" />').show();
		
		// Get the height of the sub menu and the total width of all links
		var height = $(this).height();
		var width = 0;
		$(this).find('a').each(function(){
			width += getOffsetWidth(this);
			//width += $(this).outerWidth();
		});
		
		// If the total width is greater than the container width
		//(i.e. links have wrapped to second line), then change the width to the sub menu width
		if(width > $(this).width()) width = $(this).width();
		
		// Set the wrapper div's width and height to match the width / height of links
		// Add 1px to the width to prevent wrapping in FireFox
		$(this).find('.sub-menu-wrapper').css({
			'width': width,
			'height': height
		});
		
		// If the sub menu is the active menu, then set the sub menu's width and height to match the menu's links'
		if($(this).hasClass('sub-nav-' + active_menu_type)){
			$(this).css({
				'width': width,
				'height': height
			});
			$('.sub-nav').css({'height': height });
		}else{ // If not the active menu, set the sub menu's width and height to 0
			$(this).css({
				'width': 0,
				'height': 0
			});
		}
		
	});
	
	// Set the active menu to be on top of other menus
	active_menu.css({ 'z-index': 101 }).show();
	
	// Add event functions to all menu items except the active one
	menu_items.find('a').not('.nav-link-' + active_menu_type).each(function(){
	
		// Get the type of menu
		var type = $(this).attr('class').split('-')[3];
		
		// If the sub menu has at least one link then add event functions
		//if($('.sub-nav-' + type).find('a').length > 0){
	
			// Add mouseenter event
			$(this).bind('mouseenter', function(){
		
				// Set the global variable to the menu type
				menu_hover_type = type;
				
				// Show the sub menu
				show_menu($('.sub-nav-' + menu_hover_type))
				
				// Remove hover classes from all menu links and add to this link
				menu_items.removeClass('hover');
				$('.nav-li-' + menu_hover_type).addClass('hover');
				
			}).bind('mouseleave', show_active_menu); // Hide submenu on mouseleave
		//}
	});
	
	// Clear menu hide timer when entering a submenu
	sub_menus.bind('mouseenter', function(){
		clearTimeout(menu_timeout);
	}).bind('mouseleave', show_active_menu); // Hide submenu on mouseleave
	
	menu_items.find('a').each(function(){
		var type = $(this).attr('class').split('-')[3];
		if($('.sub-nav-' + type).find('a').length > 0){
			$(this).css('cursor', 'default').click(function(){
				return false;
			});
		}
	});
	
});

// Hide all submenus, and show the active submenu
function show_active_menu(){

	// Hide submenus on timeout
	menu_timeout = setTimeout(function(){
		
		// If the hovered submenu isn't the active submenu, show the active submenu
		if(menu_hover_type != active_menu_type){
			menu_hover_type == menu_hover_type;
			show_menu(active_menu);
		}
		
		// Remove hover class from all menu items
		menu_items.removeClass('hover');
	}, 100);
	
}

// Hide all submenus
function hide_menus(){
	
	// Clear submenu timeout
	clearTimeout(menu_timeout);
	
	// Stop all submenu's animations and shrink
	sub_menus.stop(true).animate({
//		'width': 0,
		'height': 0
	}, menu_speed);
}

// Show submenu
function show_menu(menu){

	// Set all submenu's z-index to 100
	sub_menus.css({ 'z-index': 100 });
	
	// Hide all submenus
	hide_menus();
	
	// Get the width and height of sub-menu wrapper
	var width = menu.find('.sub-menu-wrapper').width();
	var height = menu.find('.sub-menu-wrapper').height();
	
	// Set z-index to 51 and grow menu
	menu.css({
		'width': width,
		'z-index': 101
	}).stop(true).animate({
		'height': height
	}, menu_speed)
}





// Function to get a float of the width / height of an element as IE9 and FF4+ use fractions of a pixel when calculating width / height
// http://vadikom.com/dailies/offsetwidth-offsetheight-useless-in-ie9-firefox4/
function _getOffset(elm, height) {
	var cStyle = elm.ownerDocument && elm.ownerDocument.defaultView && elm.ownerDocument.defaultView.getComputedStyle
		&& elm.ownerDocument.defaultView.getComputedStyle(elm, null),
		ret = cStyle && cStyle.getPropertyValue(height ? 'height' : 'width') || '';
	if (ret && ret.indexOf('.') > -1) {
		ret = parseFloat(ret)
			+ parseInt(cStyle.getPropertyValue(height ? 'padding-top' : 'padding-left'))
			+ parseInt(cStyle.getPropertyValue(height ? 'padding-bottom' : 'padding-right'))
			+ parseInt(cStyle.getPropertyValue(height ? 'border-top-width' : 'border-left-width'))
			+ parseInt(cStyle.getPropertyValue(height ? 'border-bottom-width' : 'border-right-width'));
	} else {
		ret = height ? elm.offsetHeight : elm.offsetWidth;
	}
	return ret;
}
function getOffsetWidth(elm) {
	return _getOffset(elm);
}
function getOffsetHeight(elm) {
	return _getOffset(elm, true);
}