$(document).ready(function() {
	//Activate First Link
	$(".portfolio-nav a:first").addClass("active");
	//width of a single image
	var imgwidth = $(".item-holder").width();
	//Total number of images
	var totalimg = $(".item-slider div").size();
	//Total width of all images
	var allimgwidth = imgwidth * totalimg;
	//Imgslider to new size which we got in above step
	$(".item-slider").css({'width' : allimgwidth});
	
	//Now right a new function for slide and slide navigation
	rotate = function(){
		//Number of times we need to slide
		var slideid = $active.attr("rel") - 1; 
		//Set the distance which image needs to slide
		var slidedistance = slideid * imgwidth; 
		//Remove active class
		$(".portfolio-nav a").removeClass('active'); 
		//Add Active Class
		$active.addClass('active'); 
		//Slider Animation
		$(".item-slider").animate({
		        left: -slidedistance
		    }, 500 );
	}; 

	//Set Time for Rotation of slide
	rotation = function(){
		play = setInterval(function(){
			//Next slide nav							
			$active = $('.portfolio-nav a.active').next();
			if ( $active.length === 0) {
				//Move to first slide nav
				$active = $('.portfolio-nav a:first');
			}
			rotate();
		//Timer speed 5 sec
		}, 5000);
	};

	//Run rotation fuction
	rotation();
	
	$(".portfolio-nav a").click(function() {
		$active = $(this);
		clearInterval(play);
		rotate();
		rotation();
		return false;
	});
});