var number = 0;
var currentImage = '';

$(document).ready(function() {

	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
	
	
	number = $(".image_reel img").attr("ref");
	currentImage = $(".image_reel img").attr("class");
	max = $(".image_reel img:last").attr("ref");
	
	startRotate();
	
	$(".paging a").click(function() {	
		number = $(this).attr("ref")-1;
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		startRotate(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});
	
});

function startRotate(){
	play = setInterval("rotate()", 6000);
}

function rotate(){
	
	if(number == max){
		number = 0;
	}
	
	changeImage();

}

function changeImage(){
	
	number++;
	
	nextImage = "image"+number;
	
	$active = $('.paging'+number);
	if ( $active.length === 0) { //If paging reaches the end...
		$active = $('.paging a:first'); //go back to first
	}
	
	$(".paging a").removeClass('active'); //Remove all active class
	$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
	
	$("." + currentImage).fadeOut('slow');
	$("." + nextImage).fadeIn('slow');
	
	currentImage = nextImage;
}