/*//////////////////////////////////////////////////////////////////////////
		
		VARIABLES
		
//////////////////////////////////////////////////////////////////////////*/


// Define Project Elements 
project = $('.project');
slider = $('.slider');
sliderUl = $('.slider ul');
sliderLi = $('.slider ul li');
slide = $('.slider:in-viewport ul li img');
imgFull = $('.slider ul li img.full');
imgAlt = $('.slider ul li img.alt');
meta = $('.project:in-viewport .meta');

// Window Width & Height
w = $(window).width();
h = $(window).height();

// Slider UL Width
total = slide.length * w;

// Aspect Ratio
startwidth= 900; 
startheight= 500;
ratio = startheight/startwidth;

// Nav Variables
i = 1;
x = 1;




/*//////////////////////////////////////////////////////////////////////////
		
		LOAD
		
//////////////////////////////////////////////////////////////////////////*/


$(window).load(function() {
	
	// Resize the Page Elements
	$(window).resize();
	
	// Send Page to Top and Update all the Nav Elements
	$('body, html').animate({ scrollTop: 0 },{ duration: 800, easing:'easeOutExpo' }).queue(function(next) {
		update();
		next();
	});
});

$(document).ready(function() {
	
	// Fade in the Main Content
	$('#main-content').addClass('main-content-anim').delay(400).queue(function(next) {
		$('.alt').addClass('alt-anim');
		next();
	});
	
	// Slide in the Nav Bars
	$('#vert-nav').delay(10000).addClass('vert-nav-anim');
	$('#horiz-nav').delay(1000).addClass('horiz-nav-anim');
});




/*//////////////////////////////////////////////////////////////////////////
		
		VIEWPORT
		
//////////////////////////////////////////////////////////////////////////*/


function viewport(){
	
	// Update what's in the Viewport
	slide = $('.slider:in-viewport img');
	meta = $('.project:in-viewport .meta');
};



/*//////////////////////////////////////////////////////////////////////////
		
		RESIZE
		
//////////////////////////////////////////////////////////////////////////*/


function adjust(){
	
	// Calculate the Dimensions for the Fullsize Images
	if ((h/w) > ratio){
		imgFull.height(h);
		imgFull.width(h / ratio);
	} else {
		imgFull.width(w);
		imgFull.height(w * ratio);
	}
	
	// Center the Fullsize Images
	imgFull.center();
};

$(window).resize(function(){
	
	// Scroll the Content to the Top
	$('body, html').scrollTop(0);
	
	// Reset the Window Width & Height
	w = $(window).width();
	h = $(window).height();
	
	// Reset Project Elements
	project.width(w);
	project.height(h);
	
	slider.width(w);
	slider.height(h);
	
	total = slide.length * w;
	sliderUl.width(total);
	sliderUl.height(h);
	
	sliderLi.width(w);
	sliderLi.height(h);
	
	// Reset Sliders to First Image
	sliderUl.css("marginLeft", 0);
	
	// Reset Nav Bars
	$('#project-nav-bar').css("marginTop", 0);
	$('#slider-nav-bar').css("marginLeft", 0);
	
	// Reset Variables
	i = 1;
	x = 1;
	
	// Update what's in the Viewport
	viewport();
	
	// Adjust Image Dimensions
	adjust();
	
	// Center the Non-Fullsize Images
	centerAlt();
});

$(window).resize();




/*//////////////////////////////////////////////////////////////////////////
		
		CENTAUR
		
//////////////////////////////////////////////////////////////////////////*/


function centerAlt() {

	// Center the Non-Fullsize Images
	imgAlt.css("marginLeft", w/2 - imgAlt.width()/2);
	imgAlt.css("marginTop", h/2 - imgAlt.height()/2);
}




/*//////////////////////////////////////////////////////////////////////////
		
		NAVIGATE
		
//////////////////////////////////////////////////////////////////////////*/


// Calculate the Nav Width/Height
$('#project-nav').height(project.length * 40);
$('#slider-nav').width(slide.length * 40);
	
function update(){
	$(window).scroll(function(){
		
		// Reset Slider Width
		total = slide.length * w;
		sliderUl.width(total);
		sliderUl.height(h);
		
		// Reset Sliders to First Image
		sliderUl.css("marginLeft", 0);
		
		// Update Slider Nav Width
		$('#slider-nav').width(slide.length * 40);
		
		// Reset Slider Nav Bar
		$('#slider-nav-bar').css("marginLeft", 0);
		
		// Update what's in the Viewport
		viewport();
		
		// Hide Meta Info
		meta.hide();
		$('#meta').removeClass('exit');
		
		// Reset Variable
		x = 1;
	});
};

$(window).keydown(function(e){
	if (e.keyCode == 40){
		if (project.length > i && $('#about').is(':hidden')){
			$('body, html').animate({ scrollTop: i*h },{ duration: 800, easing:'easeOutExpo' });
			$('#project-nav-bar').css("marginTop", i*40);
			$('#horiz-nav').hide().delay(800).fadeIn(100);
			meta.hide();
			update();
			i++;
		}
		
		else if ($('#about').is(':hidden')){
			$('body, html').animate({ scrollTop: 0 },{ duration: 800, easing:'easeOutExpo' });
			$('#project-nav-bar').css("marginTop", 0);
			$('#horiz-nav').hide().delay(800).fadeIn(100);
			meta.hide();
			update();
			i = 1;
		}
		
		return false;
	}
	
	if (e.keyCode == 38){
		if (i > 1 && $('#about').is(':hidden')) {	
			$('body, html').animate({ scrollTop: h*(i-2) },{ duration: 800, easing:'easeOutExpo' });
			$('#project-nav-bar').css("marginTop", i*40 - 80);
			$('#horiz-nav').hide().delay(800).fadeIn(100);
			meta.hide();
			update();
			i--;
		}
	}
	
	if (e.keyCode == 39 && $('#about').is(':hidden')){
		$('#right').click();
	}
	
	if (e.keyCode == 37 && $('#about').is(':hidden')){
		$('#left').click();
	}
	
	if (e.keyCode == 68 && $('#about').is(':hidden')){
		$('#meta').click();
	}
});

$('#down').click(function(){
	if (project.length > i && $('#about').is(':hidden')){
		$('body, html').animate({ scrollTop: i*h },{ duration: 800, easing:'easeOutExpo' });
		$('#project-nav-bar').css("marginTop", i*40);
		$('#horiz-nav').hide().delay(800).fadeIn(100);
		meta.hide();
		update();
		i++;
	}
	
	else if ($('#about').is(':hidden')){
		$('body, html').animate({ scrollTop: 0 },{ duration: 800, easing:'easeOutExpo' });
		$('#project-nav-bar').css("marginTop", 0);
		$('#horiz-nav').hide().delay(800).fadeIn(100);
		meta.hide();
		update();
		i = 1;
	}
	
	return false;
});

$('#up').click(function(){
	if (i > 1 && $('#about').is(':hidden')) {	
		$('body, html').animate({ scrollTop: h*(i-2) },{ duration: 800, easing:'easeOutExpo' });
		$('#project-nav-bar').css("marginTop", i*40 - 80);
		$('#horiz-nav').hide().delay(800).fadeIn(100);
		meta.hide();
		update();
		i--;
	}
});

$('#right').click(function(){
	if (slide.length > x ) {
		$('#slider-nav-bar').css("marginLeft", x*40);
		$('.slider ul').animate({ "margin-left": -w*x },{ duration: 500, easing:'easeOutExpo' });
		x++;
	}
});

$('#left').click(function(){
	if (x > 1) {
		$('#slider-nav-bar').css("marginLeft", x*40 - 80);
		$('.slider ul').animate({ "margin-left": -(x*w - 2*w) },{ duration: 500, easing:'easeOutExpo' });
		x--;
	}
});

$('#meta').click(function(){
	meta.slideToggle('300', 'easeOutExpo');
	$('#meta').toggleClass('exit');
});




/*//////////////////////////////////////////////////////////////////////////
		
		ABOUT
		
//////////////////////////////////////////////////////////////////////////*/



$('#logo').click(function() {
	$('#about').fadeToggle(500);
	$('#vert-nav').toggleClass('offscreen');
	$('#horiz-nav').toggleClass('offscreen');
	if (meta.is(':visible')){
		meta.slideToggle('300', 'easeOutExpo');
		$('#meta').toggleClass('exit');
	};
});

$('#exit').click(function() {
	$('#about').fadeOut(500);
	$('#vert-nav').removeClass('offscreen');
	$('#horiz-nav').removeClass('offscreen');
});

$(window).keydown(function(e){
	if (e.keyCode == 65){ // a
		$('#logo').click();
	}
});