jQuery.easing.def = "easeInOutQuad";

jQuery(document).ready(function(){

	jQuery('ul.portfolio > li').each(function(){
	
		var imageContainer = jQuery(this).find('.slide-container');
		var slider = jQuery(this).find('.slide-inner');
		var nav = jQuery(this).find('ul.slide-nav').show();
		var images = slider.find('img');
		
		// Add active class to first nav button
		nav.find('a:first').addClass('active');
		
		// Set up image CSS
		images.css({
			'padding-right': 20,
			'position': 'absolute',
			'left': 1000
		});
		
		// Last image should have no right padding
		slider.find('img:last').css('padding-right', 0);
		
		// Set spacing as image including padding
		var spacing = images.outerWidth();
		
		// Set up container CSS
		imageContainer.css({
			'height': images.outerHeight(),
			'overflow': 'hidden'
		});
		
		// Set up slider CSS
		slider.css({
			'position': 'relative',
			'width': images.length * spacing
		});
		
		// Position each image
		images.each(function(){
			jQuery(this).css('left', slider.find('img').index(this) * spacing);
		});
		
		// Clicking on a nav button
		nav.find('a').click(function(event){
			
			if(!jQuery(this).parent('li').hasClass('.nav-arrow')){
				// Position slider accordingly
				slider.animate({ 'left': nav.find('a').index(this) * spacing * -1 }, 700);
				
				// Remove active class from current nav button
				nav.find('a.active').removeClass('active');
				
				// Add active class to new nav button
				jQuery(this).addClass('active');
				
				event.preventDefault();
			}
			
		});
		
	});
	
});