$(function() {
	$('.work ol li a').attr('tabIndex','-1');
	var webMaxCount = $('.web .work ol').contents('li').size();
	var uiMaxCount = $('.ui .work ol').contents('li').size();
	var webPosCounter = 0;
	var uiPosCounter = 0;
	function portfolio() {
		$('.web .work ol li:first').animate({'marginTop':'-20px'}, 200).slideUp(function() {
			$(this).show().css('marginTop','0').parent().append(this);
			$('.web .navigation').children().removeClass('active');
			$('.web .navigation').children().eq(webPosCounter).addClass('active');
		});
		$('.ui .work ol li:first').delay(800).animate({'marginTop':'-20px'}, 200).slideUp(function() {
			$(this).show().css('marginTop','0').parent().append(this);
			$('.ui .navigation').children().removeClass('active');
			$('.ui .navigation').children().eq(uiPosCounter).addClass('active');
		});
		if(webPosCounter < (webMaxCount-1))
			webPosCounter++;
		else
			webPosCounter = 0;
		if(uiPosCounter < (uiMaxCount-1) )
			uiPosCounter++;
		else
			uiPosCounter = 0;
	}
	var intervalId = setInterval(portfolio, 8000);
	$('.web .navigation, .ui .navigation').delegate( 'li a' , 'click', function() {
		var $this = $(this);
		var type = $this.parents('.web').length ? '.web' : '.ui';
		clearInterval( intervalId );
		var index = $this.parent('li').attr('rel');
		type == '.web' ? webPosCounter = index : uiPosCounter = index;
		var $ol = $( type + ' .work ol');
		var $nav = $(type + ' .navigation' );
		animateSlide( index, $ol, $this, $nav );
		return false;
	});
	function animateSlide( index, $ol, $dot, $nav ) {
		if( $ol.find('li:nth-child(2) a').parent('li').attr('rel') !== index ) {
			var $this = $ol.find('li:first');
			$this.animate({'marginTop':'-20px'}, 0).slideUp(0, function() {
				$(this).show().css('marginTop','0').parent().append(this);
				animateSlide( index, $ol, $dot, $nav );
			});
		}
		else {
			var $this = $ol.find('li:first');
			$this.animate({'marginTop':'-20px'}, 0).slideUp(0, function() {
				$this.show().css('marginTop','0').parent().append(this);
				$nav.children().removeClass('active').blur();
				$dot.parent().addClass('active');
				intervalId = setInterval( portfolio, 8000 );
			});
		}
	}
});