// jQuery Code for the Portfolio Page

jQuery(document).ready(function($){
	
	// Main slideshow (slides left and right) of portfolio sites
	var scroll_api = $(".scrollable").scrollable({
		size: 1,
		items: '.items',
		api: true,
		clickable: false
	});
		
	// tabs (dots) for the up-to-3 portfolio screen shots
	$("ul.dots").tabs("ul.items-2 > li.item", {
		effect: 'fade',
		current: 'active',
		fadeOutSpeed: "400",
		fadeInSpeed: "400",
		rotate: true
	}).slideshow({
		autoplay: false,
		clickable: false,
		interval: 5000
	});
	
	var tabs_api = $("ul.dots").tabs(0);
	$(document).oneTime(5000,'start-first-slide',function() {
		tabs_api.play();
	});
	
	// on seek (change to next slide), do this
	scroll_api.onSeek(function() {
		$('ul.portfolio-list li').removeClass('active');
		$('ul.portfolio-list li').eq(scroll_api.getIndex()).addClass('active');
	});

	// when a portfolio thumbnail is clicked...
	$('ul.portfolio-list li').click(function() {
		var index = $('ul.portfolio-list li').index(this);

		scroll_api.seekTo(index);
	});
	
	// Add active to the first slide displayed
	$('ul.portfolio-list li[0]').addClass('active');
});