$(document).ready(function() {

	showFirstImages();
	
	//hiding everthing exept the first image
	$(".slider .previous").hide();
	$(".slider .next").hide();
	$(".up").hide();
	$(".down").hide();
	$(".articleBody > p").hide();
	
});// Show only the first image on document ready

function showFirstImages(){
	$(".slider").each(function(){
		var counter = 0;
		var imgs = $(this).find(".item");
		var thisSlider = $(this);
		var sliderParent = $(this).parent();
		
		$(imgs[0]).css("cursor", "pointer");
		
		imgs.each(function(){
			
			var image = $(this);
			if(counter >= 1){
			image.hide();
			}
			counter++;			
			
		});// end imgs.each for loop hide function
		
		$(imgs[0]).click(function(){
			counter = 0;			
			imgs.each(function(){
			var image = $(this);
			if(counter >= 1){
			$(imgs[0]).css("cursor", "auto");
			$(".slider .item").fadeIn("slow");
			$(".slider").find(".previous").fadeIn("slow");
			$(".slider").find(".next").fadeIn("slow");
			$(".articleBody").find("p").fadeIn("slow");
			$(".articleBody").find(".up").fadeIn("slow");
			$(".articleBody").find(".down").fadeIn("slow");
			}
			counter++;						
			
		});// end fadeIn
		});//end imgs[0]. click funtion
		
		$("nav").find("a").click(function(){
			hideImages();
		});// end hide on Nav click
		
	});// end of slider. each function

}
  
function hideImages(){
		$(".slider").each(function(){
			var counter = 0;
			var imgs = $(this).find(".item");
			var thisSlider = $(this);
			var sliderParent = $(this).parent();
			imgs.each(function(){
				
				var image = $(this);
				if(counter >= 1){
				image.hide();
				}
				counter++;			
			});// end imgs.each for loop hide function
		});
		
	//hiding everthing exept the first image	
	$(".slider .previous").hide();
	$(".slider .next").hide();
	$(".up").hide();
	$(".down").hide();
	$(".articleBody > p").hide();
}