$(document).ready(function() {
		
	
		
		setNavAnimationState('out');
		animateNavOut(0);
		
		$("#navtoggle").hover(
			function(){
				$("#navoverarrowspan").css('display', 'block');
				$("#navnormarrowspan").css('display', 'none');
			},
			
			function(){
				$("#navoverarrowspan").css('display', 'none');
				$("#navnormarrowspan").css('display', 'block');
			}
			
		);
  		
		
		$('#navtoggle').click(function() {    	
	    	var div = $('#navelementcontainer');
	    	var pos = div.css('marginTop');
	    	
	    	if(pos <= '0' && jQuery.data(document.body, "navanimation").state == 'out'){
	    		animateNavIn();
	    	}else{
	    		animateNavOut();
	    	}
	    	
  		});
  		
  		$('#navelementcontainer').mouseleave(function(){
      		animateNavOut();
    	});
    	
	});
	
	
	function animateNavOut(time){
		var t = 500;
		if(time != undefined){
			t = time;
		}
		var div = $('#navelementcontainer')
	    var finalPos = -(div.outerHeight() + 50);
	    
	    setNavAnimationState('out');
	    div.stop();
	    div.animate({
	    				marginTop:finalPos
	    			}
	    		
	    			,t
	   	);
	}
	
	function animateNavIn(){
		var div = $('#navelementcontainer')
		var finalPos = 0;
	    
	    setNavAnimationState('in');
	    
	    div.css("visibility", 'visible');
	   	div.stop();
    	div.animate({
    					marginTop:finalPos
	   				}
	    		
	    			,500
	   	);
	}
	
	function setNavAnimationState(val){
		jQuery.data(document.body, "navanimation", { state: val});
	}