jQuery(function($){

var current_group="";
var running_height=-22;
var current_column=0;
var tallest_column_height=0;

//Temporarily show the Design Brands Sub menu and add the drop css class
$('#nav .nav-7 ul').css("display","block").addClass("drop");

//Remove any sub-menus
$('#nav .nav-7 ul.level1').remove();


//Loop thru each li element grouping them in a div with a letter heading li

$('#nav .nav-7 ul li').each(function(){
	current_letter=$(this).find("span").text().charAt(0);		//get first character of the current li element
	if(current_letter.match(/\d/)) current_letter="num";		//if first character is numeric make current_letter=num
	
	//If the li element is not a part of the previous element's group. Wrap the previous group in a div
	if(current_group!=current_letter){
		if(current_group!=""){
			$(".group-"+current_group).wrapAll("<div class='brand-letter-group'></div>");  //wrap previous group
		}
		heading_character=(current_letter=="num")? "#":current_letter.toUpperCase(); //if Numeric heading needs to be a '#'
		$(this).before("<li class='level1 brand-group-heading group-"+current_letter+"'>"+heading_character+"</li>"); //Add heading for group
		current_group=current_letter; //set current_group to new letter
	} 
	$(this).addClass("group-"+current_letter); //add a class to the current li element grouping it in its appropriate group
});
	

	$(".group-"+current_group).wrapAll("<div class='brand-letter-group'></div>"); // wrap the last group

	var groups_per_column=Math.ceil($("#nav .brand-letter-group").length/5);  //Get the number of groups that could appear in each of the columns

	// Get the total heights of all groups.
	var total_group_height=0;
	$("#nav .brand-letter-group").each(function(){
		total_group_height+=$(this).outerHeight();
	});
	
	var column_height=Math.ceil(total_group_height/groups_per_column);  //Divide the total height by the number of groups per column to get the height of each column

	/*Loop thru each group. Keeping track of the running heights.  If the group can fit in the column continue.  If it cannot wrap the previous groups in a column div.*/
	$("#nav .brand-letter-group").each(function()
	{
		running_height+=$(this).height();	//running total height
		
		if( running_height>=column_height ){  //if running_total is greater than the column height wrap previous column and start new one
			style="";
			if(current_column==0){
				style=" style='border:none;margin-left:-30px;'";	//first column needs special styles
			}
			$(".brand-column-"+current_column).wrapAll("<div class='brands-group'"+style+" id='column-"+current_column+"'></div>"); //wrap previous column
			current_column++;  //increment current column count
			running_height=($(this).height()-22); //reset the running_height for new column
		}
		
		$(this).addClass("brand-column-"+current_column);  //mark group as part of a specific column
	}
	
	);
	$(".brand-column-"+current_column).wrapAll("<div class='brands-group' id='column-"+current_column+"'></div>"); //wrap last column

	//Loop thru each column to get the max height.  Then set the height for each column to the found number.  This is necessary for a border-left style.
	$("#nav .brands-group").each(function(){
		if(tallest_column_height<$(this).height()){
			tallest_column_height=$(this).height();
		}
	});

	$("#nav .brands-group").css("height",tallest_column_height+"px");

	//Add extra width to the columns if less than 4.
	if(current_column<4){
		extra_width=Math.floor(177/(current_column+1));
		$("#nav .brands-group").css("width",(177+extra_width)+"px" );
	}

	$('#nav .nav-7 ul').hide(); //hide the sub-menu
});