var show_per_page = 9; 
var obecnie = 0;
var number_of_pages1 = 0;
var obecnie_klas = '';

$(document).ready(function(){
	
	obecnie_klas = $("#filters li a").eq(0).attr("rel");
	//getting the amount of elements inside content div
	var number_of_items = $('ul#projects li.'+obecnie_klas+'').length;
	//calculate the number of pages we are going to have
	var number_of_pages = Math.ceil(number_of_items/show_per_page);
		
	number_of_pages1 = number_of_pages;
	
	//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 = '<ul class="page align-right"><li class="page-left"><a href="javascript:previous();" title="prev"></a></li>';
	var current_link = 0;
	while(number_of_pages > current_link){
		navigation_html += '<li class="page-page"><a href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a></li>';
		current_link++;
	}
	navigation_html += '<li class="page-right"><a href="javascript:next();" title="next"></a></li></ul>';
	
	$('.page_navigation').html(navigation_html);
	
	//add active_page class to the first page link
	$('.page_navigation li.page-page:first').addClass('active');
	
	//hide all the elements inside content div
	$('ul#projects li').css('display', 'none');
	
	$('#filters li').eq(0).addClass('active');
		
	//and show the first n (show_per_page) elements
	$('ul#projects li.'+obecnie_klas+'').slice(0, show_per_page).css('display', 'block');
	
});

function previous(){
	
	if(obecnie>0) { new_page = obecnie-1; } else { new_page = 0; }
	obecnie = new_page;
	go_to_page(new_page);
	
}

function next(){
	if(obecnie+1<number_of_pages1) {
		
		new_page = obecnie+1; 
		obecnie = new_page;
		go_to_page(new_page);
		
	} else {
	
		go_to_page(obecnie);
		
	}
	
}
function go_to_page(page_num){

	//get the number of items shown per page
			
	obecnie = page_num;
	
	//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
	$("#projects").hide().fadeIn(400);
	$('ul#projects li.'+obecnie_klas+'').css('display', 'none').slice(start_from, end_on).css('display', 'block');
	
	$('.page_navigation li.page-page').removeClass('active');
	$('.page_navigation li.page-page').eq(obecnie).addClass('active');


}