$(document).ready(function(){

	$('#navigation > ul.menu > li.active a:first').addClass('rolloverCircled');

	 // Get list of main navigation links
	var mainNavigationLinks = $('#navigation > ul.menu > li > a');

	mainNavigationLinks.bind('mouseover',function(){

		// Get link that has been moused over
		var link = $(this);

		// variable declorations
		var linkAlreadyCircled;

		// Remove current circle
		mainNavigationLinks.each(function(i,e){

			linkAlreadyCircled = $(e);

			if(linkAlreadyCircled.hasClass('rollover')){
				linkAlreadyCircled.removeClass('rollover');
			}

		});
		
		// circle the moused over link
		link.addClass('rollover');
		link.removeClass('rolloverCircled');

		// Get the first submenu item
		var firstSub = link.parents('li:first')

		// Show the sub navigation
		firstSub.find('ul').show();

		// If the sub navigation has something, show the suvnav background
		if(firstSub.find('ul li').length > 0){
			$('#navigationSub').show();
		}

		// When the mouse leaves the subnav area
        firstSub.bind('mouseleave',function(){

			// Hide the subnav
			$(this).find('ul').hide();
			$('#navigationSub').hide(); // and subnav background

			// Remove the circles
			$('#navigation ul.menu a').removeClass('rollover');


			// Circle (without arrow) the current section
			$('#navigation > ul.menu > li.active a:first').addClass('rolloverCircled');

			// Remove the event so its not bound multiple times
			firstSub.unbind('mouseleave');

        });

	});



$('#navigation ul.menu ul a').bind('mouseenter',function(){

	// Get elements to work with
	var link = $(this);
	var mainLI = link.parents('ul.menu').find('a.rollover');

	// Arrow position
	var toTheLeftOfArrow = mainLI.position().left + 85;
	var toTheRightOfArrow = toTheLeftOfArrow + 20;

	// Link position
	var linkLeft = link.position().left + 7;
	var linkRight = link.position().left + link.width() - 7;

	// If the arrow is within the position of the link change the class of the main LI link to show gray
	if(linkLeft <= toTheLeftOfArrow && linkRight >= toTheRightOfArrow){
		mainLI.addClass('rolloverWGrey');

	}

	

});

$('#navigation ul.menu ul a').bind('mouseleave',function(){
		$(this).parents('ul.menu').find('a.rollover').removeClass('rolloverWGrey');
});


$('#how_it_works li').bind('mouseover',function(){

	var li = $(this);
	var ul = li.parents('ul');

	var over = 'over_' + li.attr('class');

	ul.removeClass('over_sign_up_for_411God');
	ul.removeClass('over_customize_your_program');
	ul.removeClass('over_receive_messages');
	ul.addClass(over);

});


});