
$(document).ready (function(){
	var leng = $('#large_image li').size();
	var mainImg = 'img1';
	var current = "";
	var parent ="";

	$('.n_but').css('display','none');
	$('.p_but').css('display','none');
	
	$('.t_image').click (function(){
	$('#thumbnails').css('z-index', '998')
	mainImg = $(this).attr("rel");
	parent = $('#'+mainImg).parent().children();
	current = parent.index($('#'+mainImg));
	if(current != 0){
		$('.p_but').css('display','inline');
		}else{$('.p_but').css('display','none');}
	
	if(current != leng -1){
		$('.n_but').css('display','inline');
		}else{$('.n_but').css('display','none');}
	
	$('.hide').hide();
	$('#'+mainImg).fadeIn('slow', function(){
		$('.black_bg').show();
	});
		});
		$('#large_image li').css( 'cursor', 'pointer' );
		$('#large_image li').click (function(){
		$('.n_but').css('display','none');
		$('.p_but').css('display','none');
		$('#'+mainImg).fadeOut('slow');
		$('#thumbnails').css('z-index', '1000');
		$('.black_bg').hide();
	});


	
	$('.n_but').click (function(){
		parent = $('#'+mainImg).parent().children();
		current = parent.index($('#'+mainImg));
		if(current<leng -1){
			$('#'+mainImg).stop().fadeOut('slow',  function(){
				$('#'+mainImg).next('li').fadeIn('slow');
				mainImg = $('#'+mainImg).next('li').attr('id');
				current= current +1
				if(current == 0){
					$('.p_but').css('display','none');
					}else{$('.p_but').css('display','inline');}
				
				if(current == leng -1){
					$('.n_but').css('display','none');
					}else{$('.n_but').css('display','inline');}
				});		
			
				
			}
	});
	
	$('.p_but').click (function(){
		parent = $('#'+mainImg).parent().children();
		current = parent.index($('#'+mainImg));
		if(current>0){
			$('#'+mainImg).stop().fadeOut('slow',  function(){
		
				$('#'+mainImg).prev('li').fadeIn('slow');
				mainImg = $('#'+mainImg).prev('li').attr('id');
				current= current - 1;
				if(current == 0){
					$('.p_but').css('display','none');
					}else{$('.p_but').css('display','inline');}
				
				if(current == leng -1){
					$('.n_but').css('display','none');
					}else{$('.n_but').css('display','inline');}		
				});	
			
		}
		
	});
	
		
});

