$(document).ready(function(){
	
	$('.top-nav-link').unbind('mouseenter');
	
	$('.top-nav-link').bind('mouseenter', function(event){
		
		var div = getVar($(this).attr('class'), 'div');
		
		$('.top-nav-link').removeClass('active');
				
		$('.dropdown').hide();
		$('#' + div).show();
		
	});
	
	$('.top-nav-link').unbind('mouseout');
	
	$('.top-nav-link').bind('mouseout', function(event){
		
		var divDrop = getVar($(this).attr('class'), 'div');
		var divDropOffset = $('#' + divDrop).offset();		
		
		if (divDropOffset) {
			if (divDropOffset.top > event.pageY) {			
				
				$('#' + divDrop).hide();
				$(this).removeClass('active');
				
			} else {
				
				$('.top-nav-link').removeClass('active');
				$(this).addClass('active');
				
			}
		}		
	});
	
	$('.dropdown').unbind('mouseenter');
	
	$('.dropdown').bind('mouseenter', function(event){
		
		$(this).show();
		
	});
	
	$('.dropdown').unbind('mouseout');
	
	$('.dropdown').bind('mouseout', function(event){
		
		var offset = $(this).offset();	
		
		if ((offset.top + $(this).height()) <= event.pageY || offset.left >= event.pageX || offset.left + $(this).width() <= event.pageX) {			
			$(this).hide();
			$('.top-nav-link').removeClass('active');			
		}	
		
	});
	
	$('body').unbind('click');
	
	$('body').bind('click', function(event){
		
		$('.dropdown').hide();
		$('.top-nav-link').removeClass('active');
		
	});
	
});

$(document).ready(function(){
	
	$('.sub-cat-1-flyout').unbind('mouseenter');
	
	$('.sub-cat-1-flyout').bind('mouseenter', function(event){
		
		var divDrop = getVar($(this).attr('class'), 'div');
		divDrop = divDrop.split('down');
		divDrop = divDrop[1];
		var elem = $(this).parent().parent().attr("id");
		$('.sub-cat-1-flyout').removeClass('active');
		$(this).addClass('active');
		$('#' + elem + ' .sub-dropdown').hide();
		$('#' + elem + ' .sub-dropdown:eq('+divDrop+')').show();
	
		
	});
	
});

/**
 * getVar
 * introduces the ability to pass variables to javascript via the HTML
 * class attribute by searching through string of given classnames to
 * return your desired variable
 * @param classes
 *    a string of class names (preferably using the element.className
 *    prototype attribute)
 * @param variable
 *    the target variable you would like to return
 * @return the value of the desired variable, false if variable is not present
 *
 * @example
 *    the format:
 *    - the variable you would like to pass should be formatted the following way:
 *      - class="var_example*value"
 * @example
 *    the markup:
 *    <a id="page_1_link" class="links var_page*1" href="/add-module/1/1">page 1</a>
 *    the js:
 *    element = $('page_1_link');
 *    the function call:
 *    getVar(element.className, 'page');
 *    - the function would return 1 (the value of the page variable)
 */
function getVar(classes, variable) {
  var arrClasses = '';
  var varClass = false;
  
  arrClasses = classes.split(" ");
  
  if(arrClasses == '') {
    return false;
  }
  
  $(arrClasses).each(function (index, value) {
    if (value.indexOf('var_' + variable) != -1) {
      varClass = arrClasses[(index)];
      return false;
    }   
  });
  
  //Check to make sure varClass is defined
  if(!varClass) {
    return false;
  }
  
  //split the value by the variable name and dash to return the value, if no value is present return false
  //although you shouldn't be cluttering up the markup it's not necessary
  return !varClass.split(variable + '*')[1] ? false : varClass.split(variable + '*')[1];
  
}