jQuery.easing.def = "easeInOutQuint";

$(function() {

//	$('body').prepend('jquery working' + 
//	$('.project .col8 li').outerWidth() + $('.project .col8 li').css('margin-right') );

	
	// add CSS styling for slider and viewport
	$('.project .col8').css({
		height: $('.project .col8 li').outerHeight(),
		overflow: 'hidden'
	});
	$('.project .col8 ul').css({
		height: $('.project .col8 li').outerHeight(),
		width: 4000,
		position: 'absolute'
	});
	$('.project .col8 li').css({
		float: 'left'
	});
	
	
	$('.project').each(function() {		
		$(this).children('.col4').children('.col20').append(
			$('<ul />').addClass('slide-navi') 
		);
	// prev/next proj link
		if ( $('.project').index(this) > 0 ) { 
			$(this).find('.slide-navi').append(
				$('<li>Previous<\/li>').addClass('prev-prj').attr({ title: 'Previous project'})
			);
		}
		if ( $('.project').index(this)+1 != $('.project').length ) {
			$(this).find('.slide-navi').append(
				$('<li>Next<\/li>').addClass('next-prj').attr({ title: 'Next project'})
			);
		} 
	});

	
	// create slide-nav and li's
	// and prev next links
	$('.project').each(function() {
		var slideN = $(this).find('.col8 li').length;
		$(this).children('.col9').append(
			$('<ul />').addClass('slide-nav') 
		);

			
		if ( slideN > 1 ) {	//create slide nav, if project has more than 1 slide to show
			for ( i=1; i<=slideN; i++) {
				if ( i == 1 ) {
					var navClass = 'selected num';
				} else {
					var navClass = 'num';
				}
				$(this).find('.slide-nav').append(
					$('<li>'+i+'<\/li>').addClass( navClass ).attr({ title: 'View slide '+i})
				);
				
			}
		}


	});

	//style first next-prj link so there is space on the right
	$('.next-prj:eq(0)').css('margin-left', '26px');
	
	//slide-nav action
	var portSpeed = 800;
	
	$('.slide-nav li.num').click(function() {
		var $prj = $(this).parents('.project');
		$prj.find('.slide-nav li.selected').removeClass('selected');
		$(this).addClass('selected');
		
		var idx = $(this).parent().children('li.num').index( this );
		$prj.find('.col8 ul')
			.stop().animate({ left: -550*idx }, portSpeed );
	});
	
	//prev/next project action
	$('.prev-prj').click(function() {
		var h = $(this).parents('.project').prev().offset().top;
		$('html, body').animate({scrollTop: h}, portSpeed);
	});
	$('.next-prj').click(function() {
		var h = $(this).parents('.project').next().offset().top;
		$('html, body').animate({scrollTop: h}, portSpeed);
	});
	

});