// JavaScript Document
$(document).ready(function(){
$(window).load(function(){
	$(".wrapper").css("display", "block");
	resizeSite();
});
$(window).resize(function() {
	resizeSite();
});

	var navIndex = 0;
	var navItems = $("nav li a");
	var asideBoxes = $("aside section");
	var asideSlider = $("aside");
	var mainBox = $(".main");
	var picBox = $(".pic-window");
	var picPosition = 0;
	
	var portfolioNav = $(".portfolio-nav a");
	var navNormal = $(".nav-normal");
	
	navItems.eq(0).addClass("selected");

	resizeSite();
	
	function resizeSite(){
		if($("header").width() == 150){
			asideSlider.css("left" , "150px");
		}else{
			asideSlider.css("left", "10%");
		}
		asideBoxes.each(function(){
			$(this).data("topOffset", $(this).offset().top);
		});
		
		var slideTo = asideBoxes.eq(navIndex).data("topOffset");
		$("html, body").animate({"scrollTop" : slideTo}, 0);
		
		var navHeight = ($(".nav-normal img").height() / 2);
		$(".navigation ul li").css({"height" : navHeight});
		
		var iconsHeight = $(".icons a img").height() / 2;
		$(".icons a").css({"height" : iconsHeight});
	};
	$(".icons a img").hover(function(){
		$(this).stop(true, true).animate({"marginTop" : -$(this).height()/2}, 200);	
	}, function(){
		$(this).stop(true, true).animate({"marginTop" : 0}, 200);
	});
	navItems.hover(function(){
		var img = $(this).find("img");	
		img.css({"marginTop" : -(img.height()/2)});
	}, function(){
		$(this).find("img").css({"marginTop":0});
	});
	navItems.click(function(e){
		e.preventDefault();
		// if the <a>'s parent DOES NOT have the class portfolio-nav
		if(!$(this).parent().hasClass("portfolio-nav")){	
			
			// these two animations are to counter the effects of the portfolio nav being active.
			mainBox.animate({"width" : "70%"}, 500);
			asideSlider.animate({"margin-left" : 0}, 500);
			
			var asideHeight = asideSlider.height();
			navIndex = $(this).parent().index();
			var slideTo = asideBoxes.eq(navIndex).data("topOffset");
			
			$("html, body").animate({"scrollTop" : slideTo}, 1000);
			
		}else{
			asideSlider.animate({"margin-left" : "-422px"}, 500);
			mainBox.animate({"width" : "90%"}, 500);
			
		}
	});

});