$(document).ready(function() { 
//Set Default State of each portfolio piece
$("#promoButtons div:first").addClass("active");
//Fade Function
rotatePromos = function(){	
	var currentImg = ($('#promoReel div.show')?  $('#promoReel div.show') : $('#promoReel div:first'));	
	//Get all images
	var Imgs = $("#promoReel div").get();	
    var clicked = $active.attr("rel")-1;
   	var nextImg =  $(Imgs[clicked]);
	
	//Get all buttons
	var Btns = $("#promoButtons div").get();
	$("#promoButtons div").removeClass('active'); //Remove all active class
	$(Btns[clicked]).addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
	
	//Set the fade in effect for the next image, the show class has higher z-index
	nextImg.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	currentImg.animate({opacity: 0.0}, 1000)
	.removeClass('show');
}; 
//Rotation + Timing Event
rotatePromoSwitch = function(){		
	playPromos = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
		$active = $('#promoButtons div.active').next();
		if ( $active.length === 0) { //If promos reaches the end...
			$active = $('#promoButtons div:first'); //go back to first
		}
		rotatePromos(); //Trigger the promos and slider function
	}, 4000); //Timer speed in milliseconds (5 seconds)
};

//On Click
$("#promoButtons div").click(function() {		
	$active = $(this); //Activate the clicked promos
	if ($active.attr("rel") != $('#promoButtons div.active').attr("rel")){
	//Reset Timer
	clearInterval(playPromos); //Stop the rotation
	rotatePromos(); //Trigger rotation immediately
	rotatePromoSwitch(); // Resume rotation
	}
	return false; //Prevent browser jump to link anchor
});		
});