$(document).ready (function () {
	
	$("h1, #border, #nav, #paletteabout, #paletteworks, #palettecontacts, #aboutcontent, #workscontent, #contactscontent, #cockpit, #animation1").addClass("invisiblo");
	//$("h1, #vertslide, #nav, #paletteabout, #paletteworks, #palettecontacts, #aboutcontent, #workscontent, #contactscontent, #cockpit").addClass("invisiblo");
	$("#homecontent").addClass("activecontent");
	$("a.fancybox").fancybox({
		'transitionIn'	:	'fade',
		'transitionOut'	:	'fade',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	true,
		'titleShow'		:	true,
		'titlePosition'	:	'inside',
		'scrolling'		:	'no'
	});
	$("a.copyright").fancybox({
		'transitionIn'	:	'fade',
		'transitionOut'	:	'fade',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'width'			:	800,
		'height'		:	400,
		'type'			:	'iframe',
		'padding'		:	0
	});
	$(".aboutscrollable").scrollable({next:'.aboutnext', prev:'.aboutprev', vertical: true, mousewheel: true, easing:"swing", speed: 800});
	$(".worksscrollable").scrollable({next:'.worksnext', prev:'.worksprev', vertical: true, mousewheel: true, easing:"swing", speed: 800});
	
	$(".brandidentityscrollable").scrollable({next:'.brandidentitynext', prev:'.brandidentityprev', vertical: true, mousewheel: true, easing:"swing", speed: 800});
	$(".graphicdesignscrollable").scrollable({next:'.graphicdesignnext', prev:'.graphicdesignprev', vertical: true, mousewheel: true, easing:"swing", speed: 800});
	$(".printadscrollable").scrollable({next:'.printadnext', prev:'.printadprev', vertical: true, mousewheel: true, easing:"swing", speed: 800});
	$(".packagingscrollable").scrollable({next:'.packagingnext', prev:'.packagingprev', vertical: true, mousewheel: true, easing:"swing", speed: 800});
	$(".posscrollable").scrollable({next:'.posnext', prev:'.posprev', vertical: true, mousewheel: true, easing:"swing", speed: 800});
	$(".illustrationscrollable").scrollable({next:'.illustrationnext', prev:'.illustrationprev', vertical: true, mousewheel: true, easing:"swing", speed: 800});
	$(".retouchscrollable").scrollable({next:'.retouchnext', prev:'.retouchprev', vertical: true, mousewheel: true, easing:"swing", speed: 800});
	$(".webscrollable").scrollable({next:'.webnext', prev:'.webprev', vertical: true, mousewheel: true, easing:"swing", speed: 800});
	

	if ($("#homehover").is(".active")) {
	} else {
		$(".home a").hover(
				function() {
				$("#homehover").stop(true,true).fadeIn(200)
				}, 
				function() {
				$("#homehover").stop(true,true).fadeOut(200)
		});
		
		$(".home a").click(
		function(e) {
			$(".activecontent").fadeOut(200);
			$("#palettehome").removeClass("invisiblo");
			$("#vertslide").delay(200).animate({left: '0px'}, 800, "easeInOutExpo",
			function(){
				$("#paletteabout, #paletteworks, #palettecontacts, #aboutcontent, #workscontent, #contactscontent").addClass("invisiblo")
			});
			$("#homecontent").delay(1200).fadeIn(200).addClass("activecontent");
			$("#copyrighthover").delay(1200).fadeIn(400).delay(400).fadeOut(400);
			$(".home a").addClass("active");
			$(".about a, .works a, .contacts a").removeClass("active");
			e.preventDefault();
		});
	};

	if ($("#abouthover").is(".active")) {
	} else {	
		$(".about a").hover(
				function() {
				$("#abouthover").stop(true,true).fadeIn(200)
				}, 
				function() {
				$("#abouthover").stop(true,true).fadeOut(200)
		});
		
		$(".about a").click(
		function(e) {
			$(".activecontent").fadeOut(200);
			$("#paletteabout").removeClass("invisiblo");
			$("#vertslide").delay(200).animate({left: '-2422px'}, 800, "easeInOutExpo",
			function(){
				$("#palettehome, #paletteworks, #palettecontacts, #homecontent, #workscontent, #contactscontent").addClass("invisiblo")					
			});
			$("#aboutcontent").delay(1200).fadeIn(200).addClass("activecontent");
			$("#cvdownloadhover").delay(1200).fadeIn(400).delay(400).fadeOut(400);
			$(".about a").addClass("active");
			$(".home a, .works a, .contacts a").removeClass("active");
			e.preventDefault();
		});

	};
	
	if ($("#workshover").is(".active")) {
	} else {	
		$(".works a").hover(
				function() {
				$("#workshover").stop(true,true).fadeIn(200)
				}, 
				function() {
				$("#workshover").stop(true,true).fadeOut(200)
		});
		
		$(".works a").click(
		function(e) {
			$(".activecontent").fadeOut(200);
			$("#paletteworks").removeClass("invisiblo");
			$("#vertslide").delay(200).animate({left: '-4840px'}, 800, "easeInOutExpo",
			function(){
				$("#palettehome, #paletteabout, #palettecontacts, #homecontent, #aboutcontent, #contactscontent").addClass("invisiblo");
			});
			$("#workscontent").delay(1200).fadeIn(200).addClass("activecontent");
			$("#sub2hover, #sub3hover, #sub4hover, #sub5hover, #sub6hover, #sub7hover, #sub8hover, .scrolldownhover, .scrolluphover").delay(1200).fadeIn(400).delay(400).fadeOut(400);
			$(".works a").addClass("active");
			$(".home a, .about a, .contacts a").removeClass("active");
			//It seems I need to make the brand identity buttons work when clicking on this link… hm
			
			e.preventDefault();
		});
	};
	
	if ($("#contactshover").is(".active")) {
	} else {
		$(".contacts a").hover(
				function() {
				$("#contactshover").stop(true,true).fadeIn(200)
				}, 
				function() {
				$("#contactshover").stop(true,true).fadeOut(200)
		});
		
		$(".contacts a").click(
		function(e) {
			$(".activecontent").fadeOut(200);
			$("#palettecontacts").removeClass("invisiblo");
			$("#vertslide").delay(200).animate({left: '-7270px'}, 800, "easeInOutExpo",
			function(){
				$("#palettehome, #paletteworks, #paletteabout, #homecontent, #aboutcontent, #workscontent").addClass("invisiblo");
			});
			$("#contactmasktop").delay(1200).fadeIn(400).delay(400).fadeOut(400);
			$("#contactscontent").delay(1200).fadeIn(200).addClass("activecontent");
			$(".contacts a").addClass("active");
			$(".home a, .about a, .works a").removeClass("active");
			e.preventDefault();
		});
	};

//Home interactivity

		$("a.copyright").hover(
			function() {
			$("#copyrighthover").stop(true,true).fadeIn(200)}, 
			function() {
			$("#copyrighthover").stop(true,true).fadeOut(200)
		});	
	
//About interactivity

		$("a.cvdownload").hover(
			function() {
			$("#cvdownloadhover").stop(true,true).fadeIn(200)}, 
			function() {
			$("#cvdownloadhover").stop(true,true).fadeOut(200)
		});
		
		$("#cockpithover").hover(
			function() {
			$("#cockpit, #animation1").stop(true,true).fadeIn(200)}, 
			function() {
			$("#cockpit, #animation1").stop(true,true).fadeOut(200)
		});
		
		

// About Scroll buttons
	
	$("a.aboutnext").hover(
		function() {
		$("#aboutnexthover").stop(true,true).fadeIn(200)}, 
		function() {
		$("#aboutnexthover").stop(true,true).fadeOut(200)				
	});
	
	
	$("a.aboutprev").hover(
		function() {
		$("#aboutprevhover").stop(true,true).fadeIn(200)}, 
		function() {
		$("#aboutprevhover").stop(true,true).fadeOut(200)				
	});
	
//The Works submenu

	$(".sub1 a").hover(
			function() {
			$("#sub1hover").stop(true,true).fadeIn(200)}, 
			function() {
			$("#sub1hover").stop(true,true).fadeOut(200)
	});
		
	$(".sub1 a").click(
	function(e) {
		$(".sub1 a").addClass("worksactive");
		$(".sub2 a, .sub3 a, .sub4 a, .sub5 a, .sub6 a, .sub7 a, .sub8 a").removeClass("worksactive");
		$("#graphicdesigncontainer, #printadcontainer, #packagingcontainer, #poscontainer, #illustrationcontainer, #retouchcontainer, #webcontainer").fadeOut(200);
		$("#graphicdesignbuttons, #printadbuttons, #packagingbuttons, #posbuttons, #illustrationbuttons, #retouchbuttons, #webbuttons").fadeOut(200);
		$("#brandidentitycontainer, #brandidentitybuttons").fadeIn(200);
		e.preventDefault();
	});

	$(".sub2 a").hover(
			function() {
			$("#sub2hover").stop(true,true).fadeIn(200)}, 
			function() {
			$("#sub2hover").stop(true,true).fadeOut(200)
	});
		
	$(".sub2 a").click(
	function(e) {
		$(".sub2 a").addClass("worksactive");
		$(".sub1 a, .sub3 a, .sub4 a, .sub5 a, .sub6 a, .sub7 a, .sub8 a").removeClass("worksactive");
		$("#brandidentitycontainer, #printadcontainer, #packagingcontainer, #poscontainer, #illustrationcontainer, #retouchcontainer, #webcontainer").fadeOut(200);
		$("#brandidentitybuttons, #printadbuttons, #packagingbuttons, #posbuttons, #illustrationbuttons, #retouchbuttons, #webbuttons").fadeOut(200);
		$("#graphicdesigncontainer, #graphicdesignbuttons").fadeIn(200);
		e.preventDefault();
	});
	
	$(".sub3 a").hover(
			function() {
			$("#sub3hover").stop(true,true).fadeIn(200)}, 
			function() {
			$("#sub3hover").stop(true,true).fadeOut(200)
	});
		
	$(".sub3 a").click(
	function(e) {
		$(".sub3 a").addClass("worksactive");
		$(".sub1 a, .sub2 a, .sub4 a, .sub5 a, .sub6 a, .sub7 a, .sub8 a").removeClass("worksactive");
		$("#brandidentitycontainer, #graphicdesigncontainer, #packagingcontainer, #poscontainer, #illustrationcontainer, #retouchcontainer, #webcontainer").fadeOut(200);
		$("#brandidentitybuttons, #graphicdesignbuttons, #packagingbuttons, #posbuttons, #illustrationbuttons, #retouchbuttons, #webbuttons").fadeOut(200);
		$("#printadcontainer, #printadbuttons").fadeIn(200);
		e.preventDefault();
	});
	
	$(".sub4 a").hover(
			function() {
			$("#sub4hover").stop(true,true).fadeIn(200)}, 
			function() {
			$("#sub4hover").stop(true,true).fadeOut(200)
	});
		
	$(".sub4 a").click(
	function(e) {
		$(".sub4 a").addClass("worksactive");
		$(".sub1 a, .sub2 a, .sub3 a, .sub5 a, .sub6 a, .sub7 a, .sub8 a").removeClass("worksactive");
		$("#brandidentitycontainer, #graphicdesigncontainer, #printadcontainer, #poscontainer, #illustrationcontainer, #retouchcontainer, #webcontainer").fadeOut(200);
		$("#brandidentitybuttons, #graphicdesignbuttons, #printadbuttons, #posbuttons, #illustrationbuttons, #retouchbuttons, #webbuttons").fadeOut(200);
		$("#packagingcontainer, #packagingbuttons").fadeIn(200);
		e.preventDefault();
	});
	
	$(".sub5 a").hover(
			function() {
			$("#sub5hover").stop(true,true).fadeIn(200)}, 
			function() {
			$("#sub5hover").stop(true,true).fadeOut(200)
	});
		
	$(".sub5 a").click(
	function(e) {
		$(".sub5 a").addClass("worksactive");
		$(".sub1 a, .sub2 a, .sub3 a, .sub4 a, .sub6 a, .sub7 a, .sub8 a").removeClass("worksactive");
		$("#brandidentitycontainer, #graphicdesigncontainer, #printadcontainer, #packagingcontainer, #illustrationcontainer, #retouchcontainer, #webcontainer").fadeOut(200);
		$("#brandidentitybuttons, #graphicdesignbuttons, #printadbuttons, #packagingbuttons, #illustrationbuttons, #retouchbuttons, #webbuttons").fadeOut(200);
		$("#poscontainer, #posbuttons").fadeIn(200);
		e.preventDefault();
	});
	
	$(".sub6 a").hover(
			function() {
			$("#sub6hover").stop(true,true).fadeIn(200)}, 
			function() {
			$("#sub6hover").stop(true,true).fadeOut(200)
	});
		
	$(".sub6 a").click(
	function(e) {
		$(".sub6 a").addClass("worksactive");
		$(".sub1 a, .sub2 a, .sub3 a, .sub4 a, .sub5 a, .sub7 a, .sub8 a").removeClass("worksactive");
		$("#brandidentitycontainer, #graphicdesigncontainer, #printadcontainer, #packagingcontainer, #poscontainer, #retouchcontainer, #webcontainer").fadeOut(200);
		$("#brandidentitybuttons, #graphicdesignbuttons, #printadbuttons, #packagingbuttons, #posbuttons, #retouchbuttons, #webbuttons").fadeOut(200);
		$("#illustrationcontainer, #illustrationbuttons").fadeIn(200);
		e.preventDefault();
	});
	
	$(".sub7 a").hover(
			function() {
			$("#sub7hover").stop(true,true).fadeIn(200)}, 
			function() {
			$("#sub7hover").stop(true,true).fadeOut(200)
	});
		
	$(".sub7 a").click(
	function(e) {
		$(".sub7 a").addClass("worksactive");
		$(".sub1 a, .sub2 a, .sub3 a, .sub4 a, .sub5 a, .sub6 a, .sub8 a").removeClass("worksactive");
		$("#brandidentitycontainer, #graphicdesigncontainer, #printadcontainer, #packagingcontainer, #poscontainer, #illustrationcontainer, #webcontainer").fadeOut(200);
		$("#brandidentitybuttons, #graphicdesignbuttons, #printadbuttons, #packagingbuttons, #posbuttons, #illustrationbuttons, #webbuttons").fadeOut(200);
		$("#retouchcontainer, #retouchbuttons").fadeIn(200);
		e.preventDefault();
	});
	
	$(".sub8 a").hover(
			function() {
			$("#sub8hover").stop(true,true).fadeIn(200)}, 
			function() {
			$("#sub8hover").stop(true,true).fadeOut(200)
	});
		
	$(".sub8 a").click(
	function(e) {
		$(".sub8 a").addClass("worksactive");
		$(".sub1 a, .sub2 a, .sub3 a, .sub4 a, .sub5 a, .sub6 a, .sub7 a").removeClass("worksactive");
		$("#brandidentitycontainer, #graphicdesigncontainer, #printadcontainer, #packagingcontainer, #poscontainer, #illustrationcontainer, #retouchcontainer").fadeOut(200);
		$("#brandidentitybuttons, #graphicdesignbuttons, #printadbuttons, #packagingbuttons, #posbuttons, #illustrationbuttons, #retouchbuttons").fadeOut(200);
		$("#webcontainer, #webbuttons").fadeIn(200);
		e.preventDefault();
	});
	

// Works Scroll buttons
	
	$("a.scrolldown").hover(
		function() {
		$(".scrolldownhover").stop(true,true).fadeIn(200)}, 
		function() {
		$(".scrolldownhover").stop(true,true).fadeOut(200)				
	});
	
	
	$("a.scrollup").hover(
		function() {
		$(".scrolluphover").stop(true,true).fadeIn(200)}, 
		function() {
		$(".scrolluphover").stop(true,true).fadeOut(200)				
	});
	
	
// Contacts stuff, starting with social hovers
	

	$(".linkedin a").hover(
				function() {
				$("#linkedinhover").stop(true,true).fadeIn(200),
				$("#eye").stop(true, true).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#pencil").stop(true, true).delay(200).animate({left: '944px'}, 200, "easeInOutExpo")}, 
				function() {
				$("#linkedinhover").stop(true,true).fadeOut(200),
				$("#pencil").stop(true, true).delay(200).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#eye").stop(true, true).delay(400).animate({left: '947px'}, 500, "easeInOutExpo")
		});
	$(".flickr a").hover(
				function() {
				$("#flickrhover").stop(true,true).fadeIn(200),
				$("#eye").stop(true, true).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#pencil").stop(true, true).delay(200).animate({left: '944px'}, 200, "easeInOutExpo")},  
				function() {
				$("#flickrhover").stop(true,true).fadeOut(200)
				$("#pencil").stop(true, true).delay(200).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#eye").stop(true, true).delay(400).animate({left: '947px'}, 500, "easeInOutExpo")
		});
	$(".facebook a").hover(
				function() {
				$("#facebookhover").stop(true,true).fadeIn(200),
				$("#eye").stop(true, true).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#pencil").stop(true, true).delay(200).animate({left: '944px'}, 200, "easeInOutExpo")}, 
				function() {
				$("#facebookhover").stop(true,true).fadeOut(200)
				$("#pencil").stop(true, true).delay(200).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#eye").stop(true, true).delay(400).animate({left: '947px'}, 500, "easeInOutExpo")
		});
	$(".twitter a").hover(
				function() {
				$("#twitterhover").stop(true,true).fadeIn(200),
				$("#eye").stop(true, true).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#pencil").stop(true, true).delay(200).animate({left: '944px'}, 200, "easeInOutExpo")},  
				function() {
				$("#twitterhover").stop(true,true).fadeOut(200)
				$("#pencil").stop(true, true).delay(200).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#eye").stop(true, true).delay(400).animate({left: '947px'}, 500, "easeInOutExpo")
		});
	
	$(".behance a").hover(
				function() {
				$("#behancehover").stop(true,true).fadeIn(200),
				$("#eye").stop(true, true).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#pencil").stop(true, true).delay(200).animate({left: '944px'}, 200, "easeInOutExpo")},  
				function() {
				$("#behancehover").stop(true,true).fadeOut(200)
				$("#pencil").stop(true, true).delay(200).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#eye").stop(true, true).delay(400).animate({left: '947px'}, 500, "easeInOutExpo")
		});
	
	$(".coroflot a").hover(
				function() {
				$("#coroflothover").stop(true,true).fadeIn(200),
				$("#eye").stop(true, true).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#pencil").stop(true, true).delay(200).animate({left: '944px'}, 200, "easeInOutExpo")},  
				function() {
				$("#coroflothover").stop(true,true).fadeOut(200)
				$("#pencil").stop(true, true).delay(200).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#eye").stop(true, true).delay(400).animate({left: '947px'}, 500, "easeInOutExpo")
		});
	
	$("a.email").hover(
				function() {
				$("#emailhover").stop(true,true).fadeIn(200),
				$("#eye").stop(true, true).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#pencil").stop(true, true).delay(200).animate({left: '944px'}, 200, "easeInOutExpo")},  
				function() {
				$("#emailhover").stop(true,true).fadeOut(200),
				$("#pencil").stop(true, true).delay(200).animate({left: '844px'}, 200, "easeInOutExpo"),
    			$("#eye").stop(true, true).delay(400).animate({left: '947px'}, 500, "easeInOutExpo")
		});
	
	$("#eyehover").hover(
				function() {
				$("#eye").stop(true, true).animate({left: '844px'}, 200, "easeInOutExpo")},
				function() {
    			$("#eye").stop(true, true).delay(500).animate({left: '947px'}, 500, "easeInOutExpo")
		});


	
	$('a.email').nospam();
	
	$(".hoveroverer").hover(
		function(){
		$('#beachball').fps(75)
	},
		function(){
		$('#beachball').fps(25)
	});
	
	$("#beachball").hover(
	function(){
		$(this).fps(250)
	},
	function(){
		$(this).fps(150)
	});
	
	$("#ballcontainer").hover(
	function(){
		$("#beachball").fps(150)
	},
	function(){
		$("#beachball").fps(75)
	});
	
	$('#beachball').sprite({fps: 25, no_of_frames: 25});
	
	
	
	
});

$(window).load (function () {
	
	$("#welcomekit").animate({opacity:0, top: '450px'}, 500);
	$("#ballcontainer").animate({top: '43px'}, 1000, "easeInBack",
	function(){
		$("h1, #border").delay(400).fadeIn(500),
		$("#nav").delay(1200).fadeIn(500)
	});

	$("#slider").nivoSlider({
		slices: 1,
		effect:"fade",
		controlNav:false,
		directionNav:true,
		directionNavHide:false,
		startSlide: 0,
	
	});

});