// JavaScript Document

var curNav = "contact";
var activePanel = "contactPanel";
var fadePanel;



$("document").ready(function(){
	
	jQuery.piroBox_ext({
		piro_speed :500,
		bg_alpha : 0.5,
		piro_scroll : true,
		piro_drag :false,
		piro_nav_pos: 'bottom'
	});
	
	$(".navButton").mouseover(function()
	{
		$(this).animate({width:'200px'},150);
	});
	
	$(".navButton").mouseout(function()
	{
		$(this).animate({width:'30px'},150);
	});
	
	$(".navButton").click(function()
	{
		if(this.id == curNav || this.id == "resume")
		{
			
		} else {
			fadePanel = activePanel;
			document.getElementById(curNav).className = 'navButton';
			switch(this.id)
			{
				case "contact":
				curNav = "contact";
				activePanel = "contactPanel";
				break;
				
				case "2d":
				curNav = "2d";
				activePanel = "illustrationPanel";
				break;
				
				case "3d":
				curNav = "3d";
				activePanel = "threedPanel";
				break;
				
				case "ui":
				curNav = "ui";
				activePanel = "uiPanel";
				break;
				
				case "book":
				curNav = "book";
				activePanel = "bookPanel";
				break;
				
				case "resume":
		
				break;
			}
			
			document.getElementById(curNav).className = 'navButton activeTab';
			
			if (this.id != "resume")
			{
			document.getElementById(fadePanel).className = 'sectionPanel';
			document.getElementById(activePanel).className = 'sectionPanel active';	
			
			}
			$("#"+activePanel).animate({opacity:1},500);
			$("#"+fadePanel).animate({opacity:0},500);
		}
	});
	
});


// Thumbnail hover faders
function imgFadeIn(p_img)
{
	$(p_img).animate({opacity:1},300);
}

function imgFadeOut(p_img)
{
	$(p_img).animate({opacity:.4},300);
}