var openSlider = false;
var menuDroppedDown = false;
var visitedAvatar = false;
var avatarTimeout = '';
var initialTimeout = '';
var isAnimationOccuring = false;

$(function() {
	function slideOpenMenu() {
		if(visitedAvatar) {
			
		} else {
			switchInterestedImage();
		}
		
		openSlider = true;
		displayTheOptions();
		
		////////// Hide the open arrow /////
		switchOpenAvatarDisplay('close');
		
		////////// Display the close arrow ////
		$('#close-avatar').css('display','inline');
		
		/////////// slide it out ///////////
		$("#avatarnav").animate({ right: "0"}, 400, function() {dropMenuDown();} );
		
		///////// Close the menu on the initial open, if the user does not interact with it //////
		initialTimeout = setTimeout(function() {closeMenuUp(1);},3000);
		
	}
	
	function slideCloseMenu() {
		
		clearTimeout(initialTimeout);
		clearTimeout(avatarTimeout);
		
		////////// Hide the close arrow ////
		$('#close-avatar').css('display','none');
		
		if(visitedAvatar) {
			////////// Push the open image to the right, since we no longer display the intersted in ... /////
			$('#openavatar').css('right','0');
			
			/////////// slide it in ///////////
			$("#avatarnav").animate({ right: "-442px"}, 400, function() {switchOpenAvatarDisplay('open');} );
			
		} else {
			switchInterestedImage();
			
			/////////// slide it in ///////////
			$("#avatarnav").animate({ right: "-292px"}, 400, function() {switchOpenAvatarDisplay('open');} );
		}
		
		
		
		openSlider = false;
		displayTheOptions();
	}
	
	function switchOpenAvatarDisplay(openOrClose) {		
		if(openOrClose == "open") {
			$('#openavatar').css('display','inline');
		} else {
			$('#openavatar').css('display','none');
		}
	}
	
	function dropMenuDown() {
		if(!menuDroppedDown) {
			
			//Increase the dimensions of the masking div
			switchContainerDisplayableArea();
			
			swichBG();
			$("#avatarnav").animate({ height: "91px"}, 400);
			$("#interestedin").css('margin-top','35px');
			
			menuDroppedDown = true;
			displayTheOptions();
			
			////////// Start the timer /////////
			//avatarTimeout = setTimeout(function() {closeMenuUp(1);},3000);
			//alert("TO set from open");
		}
	}
	
	function closeMenuUp(slideMenuClosedAsWell) {
		
		if(avatarTimeout) {clearTimeout(avatarTimeout);}
		
		if(menuDroppedDown) {
			
			//Increase the dimensions of the masking div
			switchContainerDisplayableArea();
			
			menuDroppedDown = false;
			displayTheOptions();
			
			$("#interestedin").css('margin-top','9px');
			$("#avatarnav").animate({ height: "35px"}, 400);
			
			swichBG();
			
		}
		
		if(slideMenuClosedAsWell) {	slideCloseMenu(); } //We do not want to slide in the menu, if we are on an avatar page
		
		
	}
	
	function switchContainerDisplayableArea() {
		if($('#avatarnavContainer').height() == 35) {
			$('#avatarnavContainer').css('height','91px');	
		} else {
			$('#avatarnavContainer').css('height','35px');	
		}
	}
	
	function switchInterestedImage() {
		var imageSrc = $('#interestedin').attr('src');
		var newImage = "img/layout/avatar-menu-interested.png";
		if(imageSrc == "img/layout/avatar-menu-interested.png") {var newImage = "img/layout/avatar-menu-interested-dots.png"; }
		
		$('#interestedin').attr('src',newImage);
	}
	
	////////// Switch background classes /////////
	function swichBG() {
		if($("#avatarnav").attr('class') == 'openSlider') {
			$("#avatarnav").removeClass('openSlider').addClass('closedSlider');
		} else {
			$("#avatarnav").addClass('openSlider').removeClass('closedSlider');
		}
	}
	
	////////Display the options ////////////////////
	function displayTheOptions() {
		if(menuDroppedDown) {
			$('#avatar-right ul li').css('display','inline');
		} else if (openSlider) {
			$('#avatar-right ul li:not(.active)').css('display','none');
			$('#avatar-right ul li.active').css('display','inline');
		} else {
			$('#avatar-right ul li').css('display','none');
		}
	}
	
	//////// Start/stop animation timeouts that ignore multiple user clicks ////////
	function handleAnimationTimers() {
		isAnimationOccuring = true;
		setTimeout(function() {isAnimationOccuring = false;},1000);
	}
	
	/////////////// Animation Properties ////////////////////////////
	$('#avatar-right ul li a').animate({ opacity: '.7' });
	$('#avatar-right ul li a').hover(
		function(){
			$(this).animate({ opacity: '1' }, 50);
		},
		function(){
			$(this).animate({ opacity: '.7' }, 50);
	});
	
	//////////////////// Set onclick functions /////////////
	
	$('#avatarnav a').livequery('click',function() {
		if(openSlider && !isAnimationOccuring) {
			handleAnimationTimers();
			$(this).parent().parent().children().removeClass('active');
			$(this).parent().addClass('active');
			closeMenuUp(0);
		}
	});	
	
	//////// Opening buttons /////////
	$('#openavatar img, #interestedClickableArea').livequery('click',function() {
		if(!openSlider && !isAnimationOccuring) {
			handleAnimationTimers();
			slideOpenMenu();
		}
	});
	
	//////// Closing button //////////
	$('#close-avatar').livequery('click',function() {
		if(openSlider && !isAnimationOccuring) {
			handleAnimationTimers();
			closeMenuUp(1);
		}
	});	
	
	////////////// Hovering states for closing the dropdown //////////
	///////// Display the dropdown on hover ////////////////
	$('#avatarnav').hover(function(){ //This is the hover in
		if(menuDroppedDown) {
			clearTimeout(avatarTimeout);
			//alert('TO cleared');
		} else if(currentPage == "agency-employment" || currentPage == "agency-thinking" || currentPage == "agency-interactive")  {
			 ///////// If we hover over an the menu on an avatar page, we need to display it //////
			 dropMenuDown();
		}
	}, function() {	 //This is the hover out 
		if(menuDroppedDown) {
			if(currentPage == "agency-employment" || currentPage == "agency-thinking" || currentPage == "agency-interactive")  {
				////////// Start the timer w/o sliding the whole bar back inside /////////
				avatarTimeout = setTimeout(function() {closeMenuUp(0);},1000);
			} else {
				////////// Start the timer with sliding the bar back inside /////////
				avatarTimeout = setTimeout(function() {closeMenuUp(1);},1000);
			}
		}
	});
	
	$('#avatarnav ul li').hover(function() {
		if(menuDroppedDown && initialTimeout) {
			clearTimeout(initialTimeout);
		}
	});
});

function setVisitedAvatar() {
	visitedAvatar = true;
}

////////////////////////////////// If the user comes to an avatar page from the index screen ///////////////
function openAvatarMenu(section) {
	if(!openSlider && !isAnimationOccuring) {
		
		///////// We can start the opening until the avatar menu appears via the preloader ////////
		if(!flashDoneInitialLoad) {
			return setTimeout(function () { openAvatarMenu(section); },500);
		} else {
			isAnimationOccuring = true;
			setTimeout(function() {isAnimationOccuring = false;},1500);
			
			openSlider = true;
			
			//////// Change the background image ///////////////////////
			$('#interestedin').attr('src','img/layout/avatar-menu-interested.png');
			
			////////// Display the correct option //////////////////////////////////////////
			$('#avatar-right ul li').removeClass('active');
			if(section == "agency-employment") {$('#employment').parent().addClass('active');}
			if(section == "agency-thinking") {$('#thinking').parent().addClass('active');}
			if(section == "agency-interactive") {$('#hiring').parent().addClass('active');}
			
			$('#avatar-right ul li:not(.active)').css('display','none');
			$('#avatar-right ul li.active').css('display','inline');
			
			////////// Hide the open arrow /////
			$('#openavatar').css('display','none');
			
			////////// Display the close arrow ////
			$('#close-avatar').css('display','inline');
			
			/////////// slide it out ///////////
			$("#avatarnav").animate({ right: "0"}, 400);
		}
	}
}

function closeAvatarMenu() {
	if(openSlider && !isAnimationOccuring) {
		
		isAnimationOccuring = true;
		setTimeout(function() {isAnimationOccuring = false;},1000);
		
		////////// Push the open image to the right, since we no longer display the intersted in ... /////
		$('#openavatar').css('right','0');
		
		////////// Hide the close arrow ////
		$('#close-avatar').css('display','none');
		
		///////// Slide the bar in ///////////
		$("#avatarnav").animate({ right: "-442px"}, 400 );
		
		////////// Display the open arrow /////
		$('#openavatar').css('display','inline');
		
		openSlider = false;
		$('#avatar-right ul li').css('display','none');
	}
}