$(document).ready(function() {

	// init values
	$('.nav_item .nav_bg').css( {backgroundPosition: "-10px 0px", opacity:0} );
	$('.nav_content h2').css( {opacity:.3} );
	$('.nav_icon .color').css( {width:"50px", height:"75px", opacity:0} );
	$('.nav_icon .white').css( {width:"50px", height:"75px", left:"-34px"} );
	$('#logo .logo_bg').css( {backgroundPosition: "-10px 0px", opacity:0} );

	// nav mouseover
	$('.nav_item').mouseover(function(){
		$('.nav_bg', this).stop()
		.animate({opacity:1}, {duration:100})
		.animate({backgroundPosition:"-10px -200px"}, {duration:500, easing:"easeOutExpo", queue:false})
		$('.nav_content h2', this).stop()
		.animate({opacity:.7}, {duration:100})
		$('.nav_icon .color', this).stop()
		.animate({width:"60px", height:"85px", marginLeft: "-5px", marginTop: "-5px", opacity:1}, {duration:200, easing:"easeOutBack", queue:false})
		$('.nav_icon .white', this).stop()
		.animate({width:"60px", height:"85px", marginLeft: "-10px", marginTop: "-5px", opacity:0}, {duration:200, easing:"easeOutBack", queue:false})
	}) .mouseout(function(){
		$('.nav_bg', this).stop()
		.animate({opacity:0}, {duration:200})
		.animate({backgroundPosition:"-10px 0px"}, {duration:1})
		$('.nav_content h2', this).stop()
		.animate({opacity:.3}, {duration:100})
		$('.nav_icon .color', this).stop()
		.animate({width:"50px", height:"75px", marginLeft: "0px", marginTop: "0px", opacity:0}, {duration:100, easing:"easeOutQuad", queue:false})
		$('.nav_icon .white', this).stop()
		.animate({width:"50px", height:"75px", marginLeft: "0px", marginTop: "0px", opacity:1}, {duration:100, easing:"easeOutQuad", queue:false})
	})
	// logo mouseover
	$('#logo').mouseover(function(){
		$('.logo_bg', this).stop()
		.animate({opacity:1}, {duration:100})
		.animate({backgroundPosition:"-10px -200px"}, {duration:500, easing:"easeOutExpo", queue:false})
		$('.logo', this).stop()
		.animate({backgroundPosition:"30px 53px"}, {duration:500, easing:"easeOutExpo", queue:false})
	}) .mouseout(function(){
		$('.logo_bg', this).stop()
		.animate({opacity:0}, {duration:200})
		.animate({backgroundPosition:"-10px 0px"}, {duration:1})
		$('.logo', this).stop()
		.animate({backgroundPosition:"40px 53px"}, {duration:200, easing:"easeOutExpo", queue:false})
	})
	
});