$(document).ready(function(){

	

	//how much items per page to show

	var show_per_page =5; 

	//getting the amount of elements inside content div

	var number_of_items = $('#content').children().size();

	//calculate the number of pages we are going to have

	var number_of_pages = Math.ceil(number_of_items/show_per_page);

	

	//set the value of our hidden input fields

	$('#current_page').val(0);

	$('#show_per_page').val(show_per_page);

	

	//now when we got all we need for the navigation let's make it '

	

	/* 

	what are we going to have in the navigation?

		- link to previous page

		- links to specific pages

		- link to next page

	*/

	var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';

	var current_link = 0;

	while(number_of_pages > current_link){

		navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';

		current_link++;

	}

	navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';

	

	$('#page_navigation').html(navigation_html);

	

	//add active_page class to the first page link

	$('#page_navigation .page_link:first').addClass('active_page');

	

	//hide all the elements inside content div

	$('#content').children().css('display', 'none');

	

	//and show the first n (show_per_page) elements

	$('#content').children().slice(0, show_per_page).css('display', 'block');

	

});



function previous(){

	

	new_page = parseInt($('#current_page').val()) - 1;

	//if there is an item before the current active link run the function

	if($('.active_page').prev('.page_link').length==true){

		go_to_page(new_page);

	}

	

}



function next(){

	new_page = parseInt($('#current_page').val()) + 1;

	//if there is an item after the current active link run the function

	if($('.active_page').next('.page_link').length==true){

		go_to_page(new_page);

	}

	

}

function go_to_page(page_num){

	//get the number of items shown per page

	var show_per_page = parseInt($('#show_per_page').val());

	

	//get the element number where to start the slice from

	start_from = page_num * show_per_page;

	

	//get the element number where to end the slice

	end_on = start_from + show_per_page;

	

	//hide all children elements of content div, get specific items and show them

	$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

	

	/*get the page link that has longdesc attribute of the current page and add active_page class to it

	and remove that class from previously active page link*/

	$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');

	

	//update the current page input field

	$('#current_page').val(page_num);

}





$(document).ready(function(){

	

	//how much items per page to show

	var show_per_page2 =5; 

	//getting the amount of elements inside content div

	var number_of_items2 = $('#content2').children().size();

	//calculate the number of pages we are going to have

	var number_of_pages2 = Math.ceil(number_of_items2/show_per_page2);

	

	//set the value of our hidden input fields

	$('#current_page2').val(0);

	$('#show_per_page2').val(show_per_page2);

	

	//now when we got all we need for the navigation let's make it '

	

	 

	

	

	var navigation_html2 = '<a class="previous_link" href="javascript:previous2();">Prev</a>';

	var current_link2 = 0;

	while(number_of_pages2 > current_link2){

		navigation_html2 += '<a class="page_link2" href="javascript:go_to_page2(' + current_link2 +')" longdesc="' + current_link2 +'">'+ (current_link2 + 1) +'</a>';

		current_link2++;

	}

	navigation_html2 += '<a class="next_link" href="javascript:next2();">Next</a>';

	

	$('#page_navigation1').html(navigation_html2);



	

	//add active_page class to the first page link

	$('#page_navigation1 .page_link2:first').addClass('active_page1');

	

	//hide all the elements inside content div

	$('#content2').children().css('display', 'none');

	

	//and show the first n (show_per_page) elements

	$('#content2').children().slice(0, show_per_page2).css('display', 'block');

	

});



function previous2(){

	

	new_page = parseInt($('#current_page2').val()) - 1;

	//if there is an item before the current active link run the function

	if($('.active_page1').prev('.page_link2').length==true){

		go_to_page2(new_page);

	}

	

}



function next2(){

	new_page = parseInt($('#current_page2').val()) + 1;

	//if there is an item after the current active link run the function

	if($('.active_page1').next('.page_link2').length==true){

		go_to_page2(new_page);

	}

	

}

function go_to_page2(page_num2){

	//get the number of items shown per page

	var show_per_page2 = parseInt($('#show_per_page2').val());

	

	//get the element number where to start the slice from

	start_from = page_num2 * show_per_page2;

	

	//get the element number where to end the slice

	end_on = start_from + show_per_page2;

	

	//hide all children elements of content div, get specific items and show them

	$('#content2').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

	

	//get the page link that has longdesc attribute of the current page and add active_page class to it

	//and remove that class from previously active page link

	$('.page_link2[longdesc=' + page_num2 +']').addClass('active_page1').siblings('.active_page1').removeClass('active_page1');

	

	//update the current page input field

	$('#current_page2').val(page_num2);

}







$(document).ready(function(){

	

	//how much items per page to show

	var show_per_page3 =5; 

	//getting the amount of elements inside content div

	var number_of_items3 = $('#content3').children().size();

	//calculate the number of pages we are going to have

	var number_of_pages3 = Math.ceil(number_of_items3/show_per_page3);

	

	//set the value of our hidden input fields

	$('#current_page3').val(0);

	$('#show_per_page3').val(show_per_page3);

	

	//now when we got all we need for the navigation let's make it '

	

	 

	

	

	var navigation_html3 = '<a class="previous_link" href="javascript:previous3();">Prev</a>';

	var current_link3 = 0;

	while(number_of_pages3 > current_link3){

		navigation_html3 += '<a class="page_link3" href="javascript:go_to_page3(' + current_link3 +')" longdesc="' + current_link3 +'">'+ (current_link3 + 1) +'</a>';

		current_link3++;

	}

	navigation_html3 += '<a class="next_link" href="javascript:next3();">Next</a>';

	

	$('#page_navigation2').html(navigation_html3);

	

	//add active_page class to the first page link

	$('#page_navigation2 .page_link3:first').addClass('active_page2');

	

	//hide all the elements inside content div

	$('#content3').children().css('display', 'none');

	

	//and show the first n (show_per_page) elements

	$('#content3').children().slice(0, show_per_page3).css('display', 'block');

	

});



function previous3(){

	

	new_page = parseInt($('#current_page3').val()) - 1;

	//if there is an item before the current active link run the function

	if($('.active_page2').prev('.page_link3').length==true){

		go_to_page3(new_page);

	}

	

}



function next3(){

	new_page = parseInt($('#current_page3').val()) + 1;

	//if there is an item after the current active link run the function

	if($('.active_page2').next('.page_link3').length==true){

		go_to_page3(new_page);

	}

	

}

function go_to_page3(page_num3){

	//get the number of items shown per page

	var show_per_page3 = parseInt($('#show_per_page3').val());

	

	//get the element number where to start the slice from

	start_from = page_num3 * show_per_page3;

	

	//get the element number where to end the slice

	end_on = start_from + show_per_page3;

	

	//hide all children elements of content div, get specific items and show them

	$('#content3').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

	

	//get the page link that has longdesc attribute of the current page and add active_page class to it

	//and remove that class from previously active page link

	$('.page_link3[longdesc=' + page_num3 +']').addClass('active_page2').siblings('.active_page2').removeClass('active_page2');

	

	//update the current page input field

	$('#current_page3').val(page_num3);

}





$(document).ready(function(){

	

	//how much items per page to show

	var show_per_page4 =5; 

	//getting the amount of elements inside content div

	var number_of_items4 = $('#content4').children().size();

	//calculate the number of pages we are going to have

	var number_of_pages4 = Math.ceil(number_of_items4/show_per_page4);

	

	//set the value of our hidden input fields

	$('#current_page4').val(0);

	$('#show_per_page4').val(show_per_page4);

	

	//now when we got all we need for the navigation let's make it '

	

	 

	

	

	var navigation_html4 = '<a class="previous_link" href="javascript:previous4();">Prev</a>';

	var current_link4 = 0;

	while(number_of_pages4 > current_link4){

		navigation_html4 += '<a class="page_link4" href="javascript:go_to_page4(' + current_link4 +')" longdesc="' + current_link4 +'">'+ (current_link4 + 1) +'</a>';

		current_link4++;

	}

	navigation_html4 += '<a class="next_link" href="javascript:next4();">Next</a>';

	

	$('#page_navigation3').html(navigation_html4);

	

	//add active_page class to the first page link

	$('#page_navigation3 .page_link4:first').addClass('active_page3');

	

	//hide all the elements inside content div

	$('#content4').children().css('display', 'none');

	

	//and show the first n (show_per_page) elements

	$('#content4').children().slice(0, show_per_page4).css('display', 'block');

	

});



function previous4(){

	

	new_page = parseInt($('#current_page4').val()) - 1;

	//if there is an item before the current active link run the function

	if($('.active_page3').prev('.page_link4').length==true){

		go_to_page4(new_page);

	}

	

}



function next4(){

	new_page = parseInt($('#current_page4').val()) + 1;

	//if there is an item after the current active link run the function

	if($('.active_page3').next('.page_link4').length==true){

		go_to_page4(new_page);

	}

	

}

function go_to_page4(page_num4){

	//get the number of items shown per page

	var show_per_page4 = parseInt($('#show_per_page4').val());

	

	//get the element number where to start the slice from

	start_from = page_num4 * show_per_page4;

	

	//get the element number where to end the slice

	end_on = start_from + show_per_page4;

	

	//hide all children elements of content div, get specific items and show them

	$('#content4').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

	

	//get the page link that has longdesc attribute of the current page and add active_page class to it

	//and remove that class from previously active page link

	$('.page_link4[longdesc=' + page_num4 +']').addClass('active_page3').siblings('.active_page3').removeClass('active_page3');

	

	//update the current page input field

	$('#current_page4').val(page_num4);

}



$(document).ready(function(){

	

	//how much items per page to show

	var show_per_page5 =5; 

	//getting the amount of elements inside content div

	var number_of_items5 = $('#content5').children().size();

	//calculate the number of pages we are going to have

	var number_of_pages5 = Math.ceil(number_of_items5/show_per_page5);

	

	//set the value of our hidden input fields

	$('#current_page5').val(0);

	$('#show_per_page5').val(show_per_page5);

	

	//now when we got all we need for the navigation let's make it '

	

	 

	

	

	var navigation_html5 = '<a class="previous_link" href="javascript:previous5();">Prev</a>';

	var current_link5 = 0;

	while(number_of_pages5 > current_link5){

		navigation_html5 += '<a class="page_link5" href="javascript:go_to_page5(' + current_link5 +')" longdesc="' + current_link5 +'">'+ (current_link5 + 1) +'</a>';

		current_link5++;

	}

	navigation_html5 += '<a class="next_link" href="javascript:next5();">Next</a>';

	

	$('#page_navigation4').html(navigation_html5);

	

	//add active_page class to the first page link

	$('#page_navigation4 .page_link5:first').addClass('active_page4');

	

	//hide all the elements inside content div

	$('#content5').children().css('display', 'none');

	

	//and show the first n (show_per_page) elements

	$('#content5').children().slice(0, show_per_page5).css('display', 'block');

	

});



function previous5(){

	

	new_page = parseInt($('#current_page5').val()) - 1;

	//if there is an item before the current active link run the function

	if($('.active_page4').prev('.page_link5').length==true){

		go_to_page5(new_page);

	}

	

}



function next5(){

	new_page = parseInt($('#current_page5').val()) + 1;

	//if there is an item after the current active link run the function

	if($('.active_page4').next('.page_link5').length==true){

		go_to_page5(new_page);

	}

	

}

function go_to_page5(page_num5){

	//get the number of items shown per page

	var show_per_page5 = parseInt($('#show_per_page5').val());

	

	//get the element number where to start the slice from

	start_from = page_num5 * show_per_page5;

	

	//get the element number where to end the slice

	end_on = start_from + show_per_page5;

	

	//hide all children elements of content div, get specific items and show them

	$('#content5').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

	

	//get the page link that has longdesc attribute of the current page and add active_page class to it

	//and remove that class from previously active page link

	$('.page_link5[longdesc=' + page_num5 +']').addClass('active_page4').siblings('.active_page4').removeClass('active_page4');

	

	//update the current page input field

	$('#current_page5').val(page_num5);

}