$(document).ready(function() {
$('ul#featuredProfiles').css('overflow', 'hidden');
$('ul#featuredProfiles li').hide().css('position', 'absolute');
$('ul#featuredProfiles li').css('top', '0');
var x = 0;
var totalButtons = $('ul#nav-featured li a.profile').length;
var $button = $('ul#nav-featured li').slice(0, totalButtons);
var buttonTimeout;
var feature;
var rotateInProgress = false;
var currentProfile;

var startRotation = function() {
$('ul#nav-featured').append('<li id="playPause"><a href="#" class="pause">PA</a></li>');
var changeFeature = function() {
	$('ul#featuredProfiles li').hide();
	$('ul#featuredProfiles li'+currentProfile).show();
};
var $buttonLength = $button.length-1;
var featureRotate = function() {
	currentProfile = $button.eq(x).children().attr('href');
	if (!rotateInProgress) { 
		rotateInProgress = true; 
		buttonPause = false; 
	$button.removeClass('active'); 
	$button.eq(x).addClass("active"); 
	changeFeature();
	rotateInProgress = false;
	buttonPause = setTimeout(featureRotate, 8000);
  x = x+1;
		if (x > $buttonLength)
				x = 0;
	}
};
featureRotate();

$('ul#nav-featured li a.profile').click(function() {
var thisClass = $(this).parent('li').attr('class');
$('li#playPause a').removeClass();
if (thisClass == 'active paused') {
	buttonPause = true;
	rotateInProgress = false;
	$button.removeClass('paused'); /*indicates that it is unpaused*/
	$('li#playPause a').addClass('pause'); /*makes button display a pause icon*/
	buttonPause = setTimeout(featureRotate, 1000);
	return false;
	} else {
		currentProfile = $(this).attr('href');
	$('li#playPause a').addClass('play');
	feature = $(this).attr('class');
	var eq = parseFloat($(this).text() - 1); 
	x = +eq;
		if (x > $buttonLength)
				x = 0;
	changeFeature();
	$button.removeClass('active');
	$button.removeClass('paused');
	$(this).parent('li').addClass('active');
	$(this).parent('li').addClass('paused');
	clearTimeout(buttonPause);
	rotateInProgress = true;
	buttonPause = false;
	return false;
	}
});

$('li#playPause a').click(function() {
	var hasClass = $(this).attr('class');
	if (hasClass != 'play')  {
	$(this).removeClass().addClass('play');
	eq = parseFloat($('li.active').text() - 1);
	if (!rotateInProgress) {
	$('li.active').addClass('paused');
	clearTimeout(buttonPause);
	rotateInProgress = true;
	buttonPause = false;
	return false;
	} else if (!buttonPause) {
	buttonPause = true;
	rotateInProgress = false;
	$button.removeClass('paused');
	buttonPause = setTimeout(featureRotate, 1000);
	return false;
	}
	} else {
	$(this).removeClass('play');
		buttonPause = true;
	rotateInProgress = false;
	$button.removeClass('paused');
	//$('li#playPause a').removeClass('play');
	$('li#playPause a').addClass('pause');
	buttonPause = setTimeout(featureRotate, 1000);
	}
	return false;
});


}
startRotation();

});