var $j = jQuery.noConflict();

// jQuery 
$j(document).ready(function() {

	// add the classes to first and last li's so we can target with css easily
	$j('li:first-child').addClass('first');
	$j('li:last-child').addClass('last');
	
	// center floated nav with jquery since we can't use css trick due to drop down menu
	var navWidth = 0;
	$j('.main_nav > li').each(function() { // loop through each li
	
		var listElementWidth = $j(this).width(); // save li width
		navWidth += listElementWidth; // add li width to navWidth with each loop
	});
	
	// now that we have the width of the nav, lets center it with some m4th
	var navPadding = (960 - navWidth) / 2;
	$j('.main_nav').css('padding-left', navPadding);
	
	// dropdown menu
	$j(".dropdown > li").hover(function(){
	    
        $j(this).addClass("hover active");
        $j('ul.sub_menu:first', this).css('visibility', 'visible');
    
    }, function(){
    
        $j(this).removeClass("hover active");
        $j('ul.sub_menu:first', this).css('visibility', 'hidden');
    
    });
	
});