$(document).ready( function() {
	var fadeDuration = 150;
	var WAShow = function($x) {
		if ($x.hasClass('blog-icon')) {
	    		$('div.first').show();
	    		$('div.first').stop().animate({marginLeft: "250px"}, fadeDuration);
	    	} else if($x.hasClass('about-icon')) {
	    		$('div.second').show();
	    		$('div.second').stop().animate({marginLeft: "250px"}, fadeDuration);
	    	} else {
	    		$('div.third').show();
	    		$('div.third').stop().animate({marginLeft: "250px"}, fadeDuration);
	    	}
	};
	var WAHide = function($x) {
		if ($x.hasClass('blog-icon')) {
	    		$('div.first').show();
	    		$('div.first').stop().animate({marginLeft: "220px"}, fadeDuration);
	    	} else if($x.hasClass('about-icon')) {
	    		$('div.second').show();
	    		$('div.second').stop().animate({marginLeft: "220px"}, fadeDuration);
	    	} else {
	    		$('div.third').show();
	    		$('div.third').stop().animate({marginLeft: "220px"}, fadeDuration);
	    	}
	};
	
	$('div.lefta').hover(
		function() {
			$(this).find('h1').stop().animate({ 'color': '#ededed' }, fadeDuration); 
		}, function() {
			$(this).find('h1').stop().animate({ 'color': '#595959' }, fadeDuration); 
		}
	);
	
    $('li.n').hover(
    	function() {
    		$x = $(this).siblings(".active");
    		
    		WAHide($x);
    		$x.stop().animate({ 'width': '215px' }, fadeDuration);
    		
	    	$(this).stop().animate({'width': '245px' }, fadeDuration);
	    	WAShow($(this));
	    }, function() {
	   		$x = $(this).siblings(".active");
    		$x.stop().animate({ 'width': '215px' }, fadeDuration);
	    	if (!$(this).hasClass('active')) {
	    		$(this).stop().animate({ 'width': '215px' }, fadeDuration);
	    		WAHide($(this));
	    		
	    		$x.stop().animate({ 'width': '245px' }, fadeDuration);
	    		WAShow($x);
	    	}
	    }
	);
});