// JavaScript Document

var numNavButtons = 5;
var navTabWidth = 150;
var openPage = "home";
var openPort = "food";
var openCat = "print";
var currPortImg = 1;
var maxPortImg = 0;
var food1 = new Image;

var pageCenter;

$(document).ready(function() 
{
	centerPage();
	$(window).resize(function(){
		centerPage();
	});
	initiateSplash1();
	//setTimeout("initiateSplash2()",6000);
	//setTimeout("initiateNav()",12000);
	//setTimeout("initiateView()",12000);
	//initiateNav();
	//initiateView();
	reactivateButtons();
	pageRollover();
	preloader();
	
	
	
	//$("#home:parent").show();
	
	
	//Button Actions
	
	$("#home").click(function(){
		if (openPage != "home")
		{
			openPage = "home";
			$(".navText").css({"color" : "#888"});
			hideOld();			
			showCurr("home");
			$("#home").hide().fadeTo(0,0.1);		
			$("#home").show("slide", {direction : "up"}, 1000);
			$("#philosophy").fadeTo(0,0.0);
			$("#about").fadeTo(0,0.0);
			$("#portfolio").fadeTo(0,0.0);
			$("#contact").fadeTo(0,0.0);
			return false;

		}		
	});
	
	$("#about").click(function(){
		if (openPage != "about")
		{
			openPage = "about";
			$(".navText").css({"color" : "#888"});
			hideOld();			
			showCurr("about");
			$("#about").hide().fadeTo(0,0.1);		
			$("#about").show("slide", {direction : "up"}, 1000);
			$("#philosophy").fadeTo(0,0.0);
			$("#home").fadeTo(0,0.0);
			$("#portfolio").fadeTo(0,0.0);
			$("#contact").fadeTo(0,0.0);	
			return false;
		}		
	});
	
	$("#philosophy").click(function(){
		if (openPage != "philosophy")
		{
			openPage = "philosophy";
			$(".navText").css({"color" : "#888"});
			hideOld();			
			showCurr("philosophy");
			$("#philosophy").hide().fadeTo(0,0.1);		
			$("#philosophy").show("slide", {direction : "up"}, 1000);
			$("#home").fadeTo(0,0.0);
			$("#about").fadeTo(0,0.0);
			$("#portfolio").fadeTo(0,0.0);
			$("#contact").fadeTo(0,0.0);
			return false;		
		}		
	});
	
	$("#portfolio").click(function(){
		portfolioClick("print");	
		return false;
	});
	
	$("#contact").click(function(){
		if (openPage != "contact")
		{
			openPage = "contact";
			$(".navText").css({"color" : "#888"});
			hideOld();			
			showCurr("contact");
			$("#contact").hide().fadeTo(0,0.1);		
			$("#contact").show("slide", {direction : "up"}, 1000);
			$("#philosophy").fadeTo(0,0.0);
			$("#about").fadeTo(0,0.0);
			$("#portfolio").fadeTo(0,0.0);
			$("#home").fadeTo(0,0.0);
			return false;
			
		}		
	});
	
	$("#print").click(function(){
		portfolioClick("print");
		$("#printArrow").attr("src", "http://www.provocationdesign.com/img/down_arrow2.gif");
		$("#webArrow").attr("src", "http://www.provocationdesign.com/img/right_arrow2.gif");
		$("#printNav").css({"display" : "block"});
		$("#illustrationsNav").css({"display" : "none"});
		$("#webNav").css({"display" : "none"});
		currPortImg = 1;
		maxPortImg = 4;
		openCat = "print";
		openPort = "foodBook";
		$(".print").children().css({"color" : "#888"});
		$("#foodBook").css({"color" : "black"})
		$("#portNext").css({"visibility" : "visible"});
		$("#portPrev").css({"visibility" : "hidden"});
		$("#portPageNum").text(currPortImg + "/" + maxPortImg);
		$("#portImg").html("<img style = 'width : 650px;' src='img/" + openPort + currPortImg + ".jpg'/>");		
		$("#pageLink").css({"visibility" : "hidden"});
		return false;
		
	});
	
	$("#web").click(function(){
		portfolioClick("web")
		$("#printArrow").attr("src", "http://www.provocationdesign.com/img/right_arrow2.gif");
		$("#webArrow").attr("src", "http://www.provocationdesign.com/img/down_arrow2.gif");
				
		$("#printNav").css({"display" : "none"});
		$("#illustrationsNav").css({"display" : "none"});
		$("#webNav").css({"display" : "block"});
		currPortImg = 1;
		maxPortImg = 7;
		openCat = "web";
		openPort = "riseAndShineOGWeb";	
		$("#riseAndShineOGWeb").css({"color" : "black"});
		$("#portNext").css({"visibility" : "visible"});
		$("#portPrev").css({"visibility" : "hidden"});	
		$("#portPageNum").text(currPortImg + "/" + maxPortImg);
		$("#portImg").html("<img style = 'width : 650px;' src='img/riseAndShineOGWeb1.jpg'/>");
		$("#pageLink").css({"visibility" : "visible"}).attr('href' , 'http://www.risenshineog.com');
		return false;
		
		
	});
	
	$("#illustrations").click(function(){
		portfolioClick("illustrations");
		$("#printNav").css({"display" : "none"});
		$("#illustrationsNav").css({"display" : "block"});
		$("#webNav").css({"display" : "none"})	;
		currPortImg = 1;
		maxPortImg = 4;
		openCat = "illustrations";
		openPort = "modernDog";
		$("#modernDog").css({"color" : "black"});
		$("#portNext").css({"visibility" : "visible"});
		$("#portPrev").css({"visibility" : "hidden"});
		$("#portPageNum").text(currPortImg + "/" + maxPortImg);
		$("#portImg").html("<img src='img/modernDog1.jpg'/>");
		return false;
	});
	

	

	
	var currAbout = 1;
	var aboutMaxPages = 3;
	
	$("#aboutNext").click(function(){
		currAbout = currAbout + 1;
		$("#aboutContent1").hide("slide", {direction : "left"}, 750, function()
		{
			if(currAbout == 2)
			{
				$("#aboutPrev").css({"visibility" : "visible"});
				$("#aboutPageNum").html("2/3");
				$("#aboutHeadingLeft").html("Shock 'n Awe");
				$("#aboutTextLeft").html("The best type of designs are designs that are witty and intriguing. As a matter of fact, the best type of design shouldn't even be noticed because it should just work. It is the bad design that we all tend to notice and boy, do we ever want to stay away from that. With every single project that we take, we have the anticipation to shock our clients. We want to give you the best that we have to offer.");
				$("#aboutHeadingRight").html("Why Us?");
				$("#aboutTextRight").html("We believe that we can do what is right for you. We sit down and talk about what you and/or your company is about, what your goals and philosophies are, what your likes and dislikes are, and probably most importantly what you aim to communicate.");
				
			}
			if(currAbout  == 3)
			{
				$("#aboutNext").css({"visibility" : "hidden"});	
				$("#aboutPageNum").text("3/3");
				$("#aboutHeadingLeft").text("Driven by type");
				$("#aboutTextLeft").html("A picture speaks a thousand words and when it comes to imagery, opinions differ on its meaning. However, words are completely different. When something is written, our brains are taught to believe and understand that information because that is the whole purpose of language, to understand. I recently read an advertisement that said, &quot;I lost 40lbs in 2 weeks&quot; I thought, 401 pounds in two weeks? Impossible!");
				$("#aboutHeadingRight").text("");
				$("#aboutTextRight").html("<div style = 'margin-bottom : 36px;'></div>Clearly, I didn't read the quote correctly, my brain saw the L as a one. That is one of the reasons why we spend so much time on typography (the study and design of words and letters). It is what people will be reading, and it needs to be as clear as possible. Personally, typography is my favourite part of design and i think, the most important.");		
			}
			return false;
		});
	
		
	$("#aboutContent1").show("slide", {direction : "right"}, 500);		
		
	});
	
	$("#aboutPrev").click(function(){
		currAbout = currAbout - 1;
		$("#aboutContent1").hide("slide", {direction : "right"}, 750, function()
		{
			if (currAbout == 1)
			{
				$("#aboutPrev").css({"visibility" : "hidden"});
				$("#aboutPageNum").text("1/3");
				$("#aboutHeadingLeft").text("What we can do for you");
				$("#aboutTextLeft").html("<div>Visual Identity&frasl;Branding</div><div>Corporate Identity/Branding</div><div>Publication and Magazine Design</div><div>Advertising Campaigns</div><div>Website Design</div><div>Brochures</div><div>Annual Reports</div><div>Packaging</div><div>Posters</div>");
				$("#aboutHeadingRight").text("Who we are");
				$("#aboutTextRight").text("Based out of Vancouver, BC we are founded by Vanessa Dong who is a designer and has a wide-scope educational background at Kwantlen, Capilano and Emily Carr University in graphic design. Known for her eye for detail and passion for typography, Vanessa loves the whole concept of co-creation.");
				
			}	
			if(currAbout == 2)
			{
				$("#aboutNext").css({"visibility" : "visible"});
				$("#aboutPageNum").text("2/3");	
				$("#aboutHeadingLeft").text("Shock 'n Awe");
				$("#aboutTextLeft").text("The best type of designs are designs that are witty and intriguing. As a matter of fact, the best type of design shouldn't even be noticed because it should just work. It is the bad design that we all tend to notice and boy, do we ever want to stay away from that. With every single project that we take, we have the anticipation to shock our clients. We want to give you the best that we have to offer.");
				$("#aboutHeadingRight").text("Why Us?");
				$("#aboutTextRight").text("We believe that we can do what is right for you. We sit down and talk about what you and/or your company is about, what your goals and philosophies are, what your likes and dislikes are, and probably most importantly what you aim to communicate.");		
			}
			
		});		
		$("#aboutContent1").show("slide", {direction : "left"}, 500);		
		return false;
	});
});

function centerPage(){
	winWidth = $(window).width();
	pageCenter = (winWidth/2);
	$(".navBar").css({"margin-left":pageCenter - 375});
	$("#home").css({"left":pageCenter - 350});
	$("#about").css({"left":pageCenter - 350 + navTabWidth});
	$("#philosophy").css({"left":pageCenter - 355 + navTabWidth * 2 });
	$("#portfolio").css({"left":pageCenter - 350 + navTabWidth * 3});
	$("#contact").css({"left":pageCenter - 350 + navTabWidth * 4});
	$("#homePane").css({"left":pageCenter - 380});
	$("#philosophyPane").css({"left":pageCenter - 300});
	$("#portfolioPane").css({"left":pageCenter - 320});
	$("#aboutPane").css({"left":pageCenter - 375});
	$("#contactPane").css({"left":pageCenter - 300});
	$("#portCatNav").css({"left":pageCenter - 375 + navTabWidth * 3 + 25});
	$("#form").css({"left": 100});
}

function initiateNav(){
	$("#home").fadeTo(0,0.1);
	$("#about").fadeTo(0,0.0);
	$("#philosophy").fadeTo(0,0.0);
	$("#portfolio").fadeTo(0,0.0);
	$("#contact").fadeTo(0,0.0);
}

function hideOld(){
	$("#homePane").hide();
	$("#aboutPane").hide();
	$("#philosophyPane").hide();
	$("#portfolioPane").hide();
	$("#contactPane").hide();
}

function hideOldAbout()
{
	$("#aboutContent1").hide();
	$("#aboutContent2").hide();
	$("#aboutContent3").hide();
}

function showCurr(curr){
	var currPage = "#" + curr + "Pane";
	$(currPage).show("slide", {direction : "right"}, 1000);
}

function initiateView(){
	$("#splash").remove();
	$("#page").css({"visibility" : "visible"}).show();
	$("#homePane").show("slide", {direction : "right"}, 1000);
	$("#aboutPane").hide();
	$("#philosophyPane").hide();
	$("#portfolioPane").hide();
	$("#contactPane").hide();
	
}

function initiateSplash1(){
	$("#page").hide();
	$("#aboutContent2").hide();
	$("#aboutContent3").hide();
	$("#splash2").fadeTo(0,0);
	$("#splash1").fadeTo(0,0);
	$("#splash2").hide();
	$("#splash1").fadeTo(3000,1);
	$("#splash1").click(function()
	{

		$("#splash1").fadeTo(2000,0, function()
		{
			$("#splash2").show();
			initiateSplash2();
		});			
	});
	

}

function initiateSplash2(){
	$("#splash2").css({"visibility" : "visible"}).fadeTo(2000,1);
	$("#splash2").fadeTo(2000,1);
	$("#splash2").fadeTo(2000,0, function()
	{
		initiateNav();
		initiateView();	
	});				


}

function reactivateButtons()
{


	$("#foodBook").click(function(){
		currPortImg = 1;
		maxPortImg = 4;
		openPort = "foodBook";
		updatePortPage(maxPortImg, openPort);
		return false;
	});
	$("#alexisRule").click(function(){
		$("#" + openPort).css({"color" : "#888"});
		currPortImg = 1;
		maxPortImg = 3;
		openPort = "alexisRule";
		updatePortPage(maxPortImg, openPort);
		return false;
	});
	$("#mogo").click(function(){
		$("#" + openPort).css({"color" : "#888"});
		currPortImg = 1;
		maxPortImg = 3;
		openPort = "mogo";
		updatePortPage(maxPortImg, openPort);
		return false;
	});
	$("#stc").click(function(){
		$("#" + openPort).css({"color" : "#888"});
		currPortImg = 1;
		maxPortImg = 3;
		openPort = "stc";
		updatePortPage(maxPortImg, openPort);
		return false;
	});
	$("#intencity").click(function(){
		$("#" + openPort).css({"color" : "#888"});
		currPortImg = 1;
		maxPortImg = 1;
		openPort = "intencity";
		updatePortPage(maxPortImg, openPort);
		return false;
	});
	$("#christyDarren").click(function(){
		$("#" + openPort).css({"color" : "#888"});
		currPortImg = 1;
		maxPortImg = 3;
		openPort = "christyDarren";
		updatePortPage(maxPortImg, openPort);
		return false;
	});
	$("#chrisAndXim").click(function(){
		$("#" + openPort).css({"color" : "#888"});
		currPortImg = 1;
		maxPortImg = 4;
		openPort = "chrisAndXim";
		updatePortPage(maxPortImg, openPort);
		return false;
	});
	$("#telephone").click(function(){
		$("#" + openPort).css({"color" : "#888"});
		currPortImg = 1;
		maxPortImg = 2;
		openPort = "telephone";
		updatePortPage(maxPortImg, openPort);
		return false;
	});
	$("#modernDog").click(function(){
		$("#" + openPort).css({"color" : "#888"});
		currPortImg = 1;
		maxPortImg = 2;
		openPort = "modernDog";
		updatePortPage(maxPortImg, openPort);
		return false;
	});
	$("#westernLiving").click(function(){		
		currPortImg = 1;
		maxPortImg = 3;
		openPort = "westernLiving";
		updatePortPage(maxPortImg, openPort);	
		return false;
	});
	$("#riseAndShineOG").click(function(){		
		currPortImg = 1;
		maxPortImg = 3;
		openPort = "riseAndShineOG";
		updatePortPage(maxPortImg, openPort);
		return false;
	});	
	$("#pristineLabour").click(function(){
		currPortImg = 1;
		maxPortImg = 2;
		openPort = "pristineLabour";	
		updatePortPage(maxPortImg, openPort);	
		return false;
	});
	$("#vancouverSnowRemoval").click(function(){
		currPortImg = 1;
		maxPortImg = 1;
		openPort = "vancouverSnowRemoval";	
		updatePortPage(maxPortImg, openPort);	
		return false;
	});	
	$("#luxeLabels").click(function(){
		currPortImg = 1;
		maxPortImg = 1;
		openPort = "luxeLabels";	
		updatePortPage(maxPortImg, openPort);	
		return false;
	});		
	
	$("#surfingTurtle").click(function(){
		currPortImg = 1;
		maxPortImg = 1;
		openPort = "surfingTurtle";
		updatePortPage(maxPortImg, openPort);
		return false;
	});
	$("#sustainabilityFestival").click(function(){
		currPortImg = 1;
		openPort = "sustainabilityFestival";
		maxPortImg = 4;
		updatePortPage(maxPortImg, openPort);
		return false;
	});	
	$("#mockups").click(function(){
		currPortImg = 1;
		openPort = "mockups";
		maxPortImg = 2;
		updatePortPage(maxPortImg, openPort);
		return false;
	});	
	$("#lilwatGas").click(function(){
		currPortImg = 1;
		openPort = "lilwatGas";
		maxPortImg = 1;
		updatePortPage(maxPortImg, openPort);
		return false;
	});	
	$("#pallucci").click(function(){
		currPortImg = 1;
		openPort = "pallucci";
		maxPortImg = 1;
		updatePortPage(maxPortImg, openPort);
		return false;
	});	
		
	$("#pristineLabourWeb").click(function(){
		currPortImg = 1;
		openPort = "pristineLabourWeb";
		maxPortImg = 4;
		updatePortPage(maxPortImg, openPort);	
		$("#pageLink").css({"visibility" : "visible"}).attr('href' , 'http://www.pristinelabour.com');
		return false;
	});		
	
	$("#intencityWeb").click(function(){
		currPortImg = 1;
		openPort = "intencityWeb";
		maxPortImg = 1;
		updatePortPage(maxPortImg, openPort);	
		$("#pageLink").css({"visibility" : "hidden"});
		return false;
	});	
	
	$("#riseShineWeb").click(function(){
		currPortImg = 1;
		openPort = "riseShineWeb";
		maxPortImg = 2;
		updatePortPage(maxPortImg, openPort);	
		$("#pageLink").css({"visibility" : "visible"}).attr('href' , 'http://www.risenshineog.com');
		return false;
	});	
	
	$("#sendButton").click(function(){
		var name = $("#name").val();
		var email = $("#email").val();
		var subject = $("#subject").val();
		var message = $("#message").val();
		$.post("php/email.php",{name:name, email:email, subject:subject, message:message})
		return false;
	});

	
	$("#portNext").click(function()
	{		
		currPortImg = currPortImg + 1;
		$("#portPageNum").text(currPortImg + "/" + maxPortImg);
		if (currPortImg >= maxPortImg)
		{
			$("#portNext").css({"visibility" : "hidden"});
		}
		if (currPortImg > 1)
		{
			$("#portPrev").css({"visibility" : "visible"});
		}
		$("#portImg").html("<img style = 'width : 650px;' src='img/" + openPort + currPortImg + ".jpg'/>");
		return false;
		
	});
	
	$("#portPrev").click(function()
	{
		
		currPortImg = currPortImg - 1;
		$("#portPageNum").text(currPortImg + "/" + maxPortImg);
		if (currPortImg < maxPortImg)
		{
			$("#portNext").css({"visibility" : "visible"});
		}
		if (currPortImg <= 1)
		{
			$("#portPrev").css({"visibility" : "hidden"})
		}
		$("#portImg").html("<img style = 'width : 650px;'  src='img/" + openPort + currPortImg + ".jpg'/>");
		
		return false;
	});	
}

function pageRollover(){

	$("#philosophy").mouseover(function(){
		$(".navText:contains('PHILOSOPHY')").css({"color" : "#000"});
	}).mouseout(function(){
		if(openPage != "philosophy")
		{
			$(".navText:contains('PHILOSOPHY')").css({"color" : "#888"});
		}	
	});
	$("#contact").mouseover(function(){
		$(".navText:contains('CONTACT')").css({"color" : "#000"});
	}).mouseout(function(){
		if(openPage != "contact")
		{
			$(".navText:contains('CONTACT')").css({"color" : "#888"});
		}	
	});

	
	$("#home").mouseover(function(){
		$(".navText:contains('HOME')").css({"color" : "#000"});
	}).mouseout(function(){
		if(openPage != "home")
		{
			$(".navText:contains('HOME')").css({"color" : "#888"});
		}	
	});
	$("#about").mouseover(function(){
		$(".navText:contains('ABOUT')").css({"color" : "#000"});
	}).mouseout(function(){
		if(openPage != "about")
		{
			$(".navText:contains('ABOUT')").css({"color" : "#888"});
		}	
	});
	
	$("#portfolio").mouseover(function(){
		$(".navText:contains('PORTFOLIO')").css({"color" : "#000"});
		$("#portCatNav").css({"visibility" : "visible"});
	}).mouseout(function(){
		if(openPage != "portfolio")
		{
			$(".navText:contains('PORTFOLIO')").css({"color" : "#888"});
		}	
		$("#portCatNav").css({"visibility" : "hidden"});
	});
	
	$("#portCatNav").mouseover(function(){
		$("#portCatNav").css({"visibility" : "visible"});
	}).mouseout(function(){
		$("#portCatNav").css({"visibility" : "hidden"});
	});	
	


	$("td").children().mouseover(function(){
		$(this).css({"color" : "#000"});
	}).mouseout(function(){
		
		if(openPort != this.id)
		{
			$(this).css({"color" : "#888"});
		}	
	}).click(function(){
		$("td").children().css({"color" : "#888"});
		$(this).css({"color" : "#000"});
	});
	$("#portNav").children().children().mouseover(function(){
		$(this).css({"color" : "#000"});
	}).mouseout(function(){
		
		if(openPort != this.id)
		{
			$(this).css({"color" : "#888"});
		}	
	}).click(function(){
		$("#portNav").children().children().css({"color" : "#888"});
		$(this).css({"color" : "#000"});
	});			
	
	$(".portCatNav").children().mouseover(function(){
		$(this).css({"color" : "#000"});
	}).mouseout(function(){
		
		if(openCat != this.id)
		{
			$(this).css({"color" : "#888"});
		}	
	}).click(function(){
		$(".portCatNav").children().css({"color" : "#888"});
		$(this).css({"color" : "#000"});
	});	
	

	
	
}

function portfolioClick(cat)
{
	if (openPage != "portfolio")
	{
		$(".navText").css({"color" : "#888"});
		if (cat == "print")
		{
			openPort = "foodBook";
			maxPortImg = 4;		
			$("#printNav").css({"display" : "block"});
			$("#illustrationsNav").css({"display" : "none"});
			$("#webNav").css({"display" : "none"});
			$(".portCatNav").children().css({"color" : "#888"});
			$("#print").css({"color" : "#000"});
			$(".print").children().css({"color" : "#888"});
			$("#foodBook").css({"color" : "#000"});						
		}
		if (cat == "web")
		{
			openPort = "pristineLabourWeb";
			maxPortImg = 2;	
			$(".portCatNav").children().css({"color" : "#888"});
			$("#web").css({"color" : "#000"});
			$("#printNav").children().css({"color" : "#888"});
			$("#pristineLabourWeb").css({"color" : "#000"});					
		}
		if (cat == "illustrations")
		{
			openPort = "modernDog";
			maxPortImg = 4;
			$(".portCatNav").children().css({"color" : "#888"});
			$("#illustrations").css({"color" : "#000"});
			$("#printNav").children().css({"color" : "#888"});
			$("#modernDog").css({"color" : "#000"});						
		}			
		openPage = "portfolio";
		hideOld();
		showCurr("portfolio");
		$("#portfolio").hide().fadeTo(0,0.1);		
		$("#portfolio").show("slide", {direction : "up"}, 1000);
		$("#philosophy").fadeTo(0,0.0);
		$("#about").fadeTo(0,0.0);
		$("#home").fadeTo(0,0.0);
		$("#contact").fadeTo(0,0.0);
		currPortImg = 1;
		$("#portNext").css({"visibility" : "visible"});
		$("#portPrev").css({"visibility" : "hidden"});
		$("#portPageNum").text(currPortImg + "/" + maxPortImg);
		$("#portImg").html("<img style = 'width : 650px;' src='img/" + openPort + "1.jpg'/>");
					
	}	

}

function updatePortPage(max, open)
{
	if (max > 1)
	{
		$("#portNext").css({"visibility" : "visible"});
		$("#portPrev").css({"visibility" : "hidden"});
		$("#portPageNum").text(currPortImg + "/" + maxPortImg);
		$("#portImg").html("<img style = 'width : 650px;' src='img/" + openPort + currPortImg + ".jpg'/>");		
	}
	if (max == 1)
	{
		$("#portNext").css({"visibility" : "hidden"});
		$("#portPrev").css({"visibility" : "hidden"});
		$("#portPageNum").text("");
		$("#portImg").html("<img style = 'width : 650px;' src='img/" + openPort + currPortImg + ".jpg'/>");		
	}	
	
	if (openCat != "Web" )
	{
		$("#pageLink").css({"visibility" : "hidden"});
	}
}

function preloader()
{
	
	food1.src = 'img/food1.jpg';
	
	
}