var mainNavSelectedATag = null;

$(document).ready(function(){
	$('#main-nav-top li').css({backgroundPosition:'0px 0px'});

	// open
	$('#main-nav-top-about a,#main-nav-top-investors a,#main-nav-top-contact a,#main-nav-top-projects a,#main-nav-top-news a,#main-nav-top-media a').bind('mouseenter', function(){
		
		// which are we in? will equal 'about', 'investors', 'contact', 'projects', 'news' or 'media'
		var navItemName = $(this).parent().attr('id').split('-').pop();
		
		// increase the width of our container
		$('#main-nav').width('443px');

		// prepare if this is first
		if (mainNavSelectedATag != null)
		{
			$(mainNavSelectedATag).parent().stop().animate({'width':'191px', 'backgroundPosition':'0px 0px'}, 300);
			$('#main-nav-sub-' + $(mainNavSelectedATag).parent().attr('id').split('-').pop()).hide();
		}
		
		// do the main animation
		
		$('#main-nav-sub-' + navItemName).show();
		$(this).parent().stop().animate({'width':'221px', 'backgroundPosition':'30px 0px'}, 300);
		if ((navItemName != 'media') && (navItemName != 'contact') ) {
		$('#main-nav-sub').stop().animate({'left':'30px'}, 300);
		}
		// hide all cta texts
		$('#main-nav-sub-activity, #main-nav-sub-investors, #main-nav-sub-contact, #main-nav-sub-projects, #main-nav-sub-news, #main-nav-sub-media').hide();
		
		// do some things based on the three different links
		if (navItemName == 'about') {
			$('#main-nav-sub-activity').show();
		}
		else if (navItemName == 'investors') {
			$('#main-nav-sub-investors').show();
		}
		else if (navItemName == 'contact') {
			$('#main-nav-sub-contact').show();
		}
		else if (navItemName == 'projects') {
			$('#main-nav-sub-projects').show();
		}
		else if (navItemName == 'news') {
			$('#main-nav-sub-news').show();
		}
		else if (navItemName == 'media') {
			$('#main-nav-sub-media').show();
		}
		
		mainNavSelectedATag = this;
	});

	// close
	function closeMainNav()
	{
		if (mainNavSelectedATag != null)
		{
			$(mainNavSelectedATag).parent().stop().animate({'width':'191px', 'backgroundPosition':'0px 0px'}, 300);
		}
		$('#main-nav-sub').stop().animate({'left':'-442px'}, 300, 'swing', closeMainNavComplete);
		$('#main-nav-sub-shadow').stop().animate({'opacity':1}, 150).animate({'left':'-88px'}, 150);
	}

	function closeMainNavComplete()
	{
		$('#main-nav').width('191px');
	}

	// close when the following happens
	$('#main-nav').bind('mouseleave', closeMainNav);
	// $('#main-nav-sub').bind('mouseleave', closeMainNav);
	$('#container').bind('mouseleave', closeMainNav);
});

