$(document).ready(function(){
	$(".next").click(function(){
		var first = $(".first").attr("cell");
		var last = $(".last").attr("cell");
		first = parseInt(first);
		last = parseInt(last);
		next=first+1;
		if(last > first){
			$(".elem").each(function(){
				var hid = $(this).attr("hid");
				hid=parseInt(hid);
				if(hid == next){
					$(this).fadeIn();
					$(".first").empty();
					$(".first").append(next);
					$(".first").attr("cell", next+"");
					}
					else
					{
					$(this).fadeOut();
					}
				});
			}
			else
			{
			$(".elem").each(function(){
				var hid = $(this).attr("hid");
				hid=parseInt(hid);
				if(hid == 1){
					$(this).fadeIn();
					$(".first").empty();
					$(".first").append(1);
					$(".first").attr("cell", "1");
					}
					else
					{
					$(this).fadeOut();
					}
				});
			}
		});

	$(".back").click(function(){
		var first = $(".first").attr("cell");
		var last = $(".last").attr("cell");
		first = parseInt(first);
		last = parseInt(last);
		prev=first-1;
		if(first !== 1){
			$(".elem").each(function(){
				var hid = $(this).attr("hid");
				hid=parseInt(hid);
				if(hid == prev){
					$(this).fadeIn();
					$(".first").empty();
					$(".first").append(prev);
					$(".first").attr("cell", prev+"");
					}
					else
					{
					$(this).fadeOut();
					}
				});
			}
			else
			{
			$(".elem").each(function(){
				var hid = $(this).attr("hid");
				hid=parseInt(hid);
				if(hid == last){
					$(this).fadeIn();
					$(".first").empty();
					$(".first").append(last);
					$(".first").attr("cell", last+"");
					}
					else
					{
					$(this).fadeOut();
					}
				});
			}
		});
		
		

		
		
		
		
		
		
		
	});