$(window).load(function() {
	
		$("#galleryHolder > img").each(function() {
		
		imageW = parseInt($(this).width());
		imageW = imageW / 2;
				
		$(this).css("margin-left", "-" + imageW + "px");
		
	});
	
});

$(document).ready(function() {
	
	var elements = $("#galleryHolder > img").size();	
	var counter = 0;
	
	$("#galleryHolder img:not(:first)").hide();
	$("#galleryHolder .galleryCaption:not(:first)").hide();
	
	var countText = '<b><div style=\'float:left;\'>Current Image: ' + (counter + 1) +'</div> <div style=\'float:right;\'>Total Images: '+ (elements) + '</div></b>'
		
	$('#galleryCount').html(countText);
		$(".galleryNext").click( function() {
			if (counter == (elements-1)) {
			//We are at the start element
			//therefore we set the next counter as the last element
			var nextSlideCount = 0
		} else {
			var nextSlideCount = counter + 1
		}
		
		var thisSlide = "#galleryHolder img:eq(" + counter + ")"
		var nextSlide = "#galleryHolder img:eq(" + nextSlideCount + ")"
		var thisCaption = "#galleryHolder .galleryCaption:eq(" + counter + ")"
		var nextCaption = "#galleryHolder .galleryCaption:eq(" + nextSlideCount + ")"
	
		$(thisSlide).fadeOut(1500);
		$(nextSlide).fadeIn(1500);	
		$(thisCaption).fadeOut(1500);
		$(nextCaption).fadeIn(1500);	
		counter = nextSlideCount;
		$('#galleryCount').html('<b><div style=\'float:left;\'>Current Image: ' + (counter + 1) +'</div> <div style=\'float:right;\'>Total Images: '+ elements + '</div></b>');
	
	});
	
	$(".galleryPrev").click( function() {
		
		if (counter == 0) {
			
			//We are at the start element
			//therefore we set the next counter as the last element
			
			var nextSlideCount = (elements-1)
			
		} else {
		
			var nextSlideCount = counter - 1
			
		}
	
		var thisSlide = "#galleryHolder img:eq(" + counter + ")"
		var nextSlide = "#galleryHolder img:eq(" + nextSlideCount + ")"
		var thisCaption = "#galleryHolder .galleryCaption:eq(" + counter + ")"
		var nextCaption = "#galleryHolder .galleryCaption:eq(" + nextSlideCount + ")"
	
		$(thisSlide).fadeOut(1500);
		$(nextSlide).fadeIn(1500);	
		$(thisCaption).fadeOut(1500);
		$(nextCaption).fadeIn(1500);	
		
		
		counter = nextSlideCount;
		
		$('#galleryCount').html('<b><div style=\'float:left;\'>Current Image: ' + (counter + 1) +'</div> <div style=\'float:right;\'>Total Images: '+ elements + '</div></b>');
	
	});
	
	
		
});