var pageElement = Array();
var paginatorId = '';
var allItems = 1;
var lastPage = 1;
var startPage = 1;
var itemsPerPage = 5; 
var firstPageSymbol = ''; 
var previousPageSymbol = 'Vorige'; 
var nextPageSymbol = 'Volgende';
var lastPageSymbol = ''; 
var separator = ''; 
var paginatorPosition = 'bottom'; 
var paginatorStyle = 2; 
var enablePageOfOption = false; 
var enableGoToPage = false; 
var textGoToPage = 'Ga naar'; 
var enableSelectNoItems = false;
var textSelectNoItems = 'Objecten per pagina';
var paginatorValues = Array(5,10,15,20,25,30); 
var anchorLink = 'javascript:void(0);';
var showIfSinglePage = false;


jQuery.fn.extend({

		pagination: function() {

			paginatorId=this; 

			switch(paginatorPosition) // create paginator div (container for paginator) according to the position mentioned by user.

			{

				case 'top': { paginatorId.before('<div class="paginator"></div>'); break; }

				case 'bottom': { paginatorId.after('<div class="paginator"></div>'); break; }

				case 'both': {  paginatorId.before('<div class="paginator"></div>');

								paginatorId.after('<div class="paginator"></div>'); break; }
                                
                default: { paginatorId.after('<div class="paginator"></div>'); }

			} 

			initPaginator(); // calling function to start pagination.

		},
        
        depagination: function() {

			$('.paginator').remove(); // removing paginator class.

			paginatorId.children().show(); // show all content of the div where pagination was applied.

		}

	});

	

	function initPaginator()  // for initializing the paginator

	{

		if(itemsPerPage < 1)

			itemsPerPage = 4;

		allItems = paginatorId.children().length; // finding number of total items in content

		if(allItems%itemsPerPage == 0) // calculating last page of the paginator

			lastPage = parseInt(allItems/itemsPerPage);

		else

			lastPage = parseInt(allItems/itemsPerPage)+1;

		if((startPage < 1)||(startPage > lastPage))	// start page for pagination

			startPage = 1;
            
        if(!showIfSinglePage) // check if option is set to false
        {
			if(allItems <= itemsPerPage)
				$('.paginator').remove();
			
            if(lastPage > 1)  // show pagination only if there is more than 1 page.
                appendContent(startPage, 1);
        }
        else
            appendContent(startPage, 1); // call function to show start page for first time. Fading effect is not required initially.

	}

	
    // function for appending the content of selected page. called everytime whenever user clicks on any active link of paginator. set effect true/1 for fading effects, false/0 for changing contents for 

	function appendContent(page, effect) 

	{

		if(page < 0)

		{

			if(page == -1)

				page = currentPage - 1;

			else

				page = currentPage + 1;

		}

		currentPage = page; // get current page or page selected.

		

		till = (currentPage-1)*itemsPerPage;

		

		if(!effect)  // Page change without fading effect

		{
			 createPaginator();   // create new paginator
			paginatorId.children().hide();  // hide all child element of content
			paginatorId.children().slice(till, itemsPerPage+till).show();  // show only those items according to page selected.
		}

		else //with fading effect

		{
            createPaginator();   // create new paginator
			paginatorId.children().hide();  // hide all child element of content
			paginatorId.children().slice(till, itemsPerPage+till).show();  // show only those items according to page selected.

		}

	}
    
    
	function createPaginator()  // for creating the paginator

	{

		$(".paginator").html("");

		

		var style1 = ''; // for << | < | 1 | 2 | 3 | > | >>

		var style2 = ''; // for << | < | 1/8 | > | >>

		var style3 = ''; // for < | 1 | 2 | 3 | >

		var style4 = ''; // for < | >

		var pageOfOption = ' Pagina '+currentPage+' van '+lastPage+' Pagina(s) ';  // for showing page info option

		var goToPage = ' '+textGoToPage+' <select onchange="appendContent(this.value);" >'; // for go to page option 

		var selectNoItems = ' '+textSelectNoItems+' <select onchange="itemsPerPage=Number(this.value);initPaginator();" >';  // for changing items per page option
		

		for(var i=0;i<paginatorValues.length;i++) // preparing drop down for selectNoItems option

		{

			if(itemsPerPage == paginatorValues[i])

				selectNoItems += '<option value="'+paginatorValues[i]+'" selected="selected">'+paginatorValues[i]+'</option>';

			else

				selectNoItems += '<option value="'+paginatorValues[i]+'">'+paginatorValues[i]+'</option>';

		}

		

		selectNoItems += '</select>';

		

		if(currentPage == 1) // for setting paginator style if current page is first page

		{

			style = '<a href="'+anchorLink+'" class="inactive prevPage" title="Eerste pagina">'+firstPageSymbol+'</a>' + separator;

			style1 = style2 = style;

			style = '<a href="'+anchorLink+'" class="inactive" title="Vorige pagina">'+previousPageSymbol+'</a>' + separator;

			style1 += style; 

			style2 += style;

			style3 += style;

			style4 += style;

		}	

		else // for setting paginator style for first page links

		{

			style = '<a href="'+anchorLink+'" class="active prevPage" onclick="appendContent(1);" title="Eerste pagina">'+firstPageSymbol+'</a>' + separator;

			style1 = style2 = style;

			style = '<a href="'+anchorLink+'" class="active prevPage" onclick="appendContent(-1);" title="Vorige pagina">'+previousPageSymbol+'</a>' + separator;

			style1 += style;

			style2 += style;

			style3 += style;

			style4 += style;

		}

		

		

		for(var i=1;i<=lastPage;i++) // prepareing links for pages 

		{

			if(i == currentPage) // if page is current page then set anchor class to inactive and no onclick function.

				{

					style1 += '<a href="'+anchorLink+'" class="inactive" title="Pagina '+i+'">'+i+'</a>' + separator;

					style2 += '<a href="'+anchorLink+'" class="active pageIndi" title="Pagina '+i+'">'+i+'/'+lastPage+'</a>' + separator;

					style3 += '<a href="'+anchorLink+'" class="inactive" title="Pagina '+i+'">'+i+'</a>' + separator;

					goToPage += '<option value="'+i+'" selected="selected">'+i+'</option>'; // preparing go to option drop down

				}

			else // if page is not current page then set anchor class to active and put onclick appendContent function.

				{

					style = '<a href="'+anchorLink+'" class="active" onclick="appendContent('+i+');" title="Pagina '+i+'">'+i+'</a>' + separator;

					style1 += style;

					style3 += style;

					goToPage += '<option value="'+i+'">'+i+'</option>';  // preparing go to option drop down

				}

		}

		

		goToPage += '</select>';  // preparing go to option drop down

		

		if(currentPage == lastPage) // for setting paginator style if current page is last page

		{

			style = '<a href="'+anchorLink+'" class="inactive nextPage" title="Volgende pagina">'+nextPageSymbol+'</a>';

			style1 += style;

			style2 += style;

			style3 += style;

			style4 += style;

			style = separator + '<a href="'+anchorLink+'" class="inactive" title="Laatste pagina">'+lastPageSymbol+'</a>';

			style1 += style;

			style2 += style;

		}

		else // for setting paginator style for last page links

		{

			style = '<a href="'+anchorLink+'" class="active nextPage" onclick="appendContent(-2);" title="Volgende pagina">'+nextPageSymbol+'</a>';

			style1 += style;

			style2 += style;

			style3 += style;

			style4 += style;

			style = separator + '<a href="'+anchorLink+'" class="active" onclick="appendContent('+lastPage+');" title="Laatste pagina">'+lastPageSymbol+'</a>';

			style1 += style;

			style2 += style;

		}

			

		switch (paginatorStyle) // getting which style of pagination is mentioned.

		{

			case 1 : style = style1; break;

			case 2 : style = style2; break;

			case 3 : style = style3; break;

			case 4 : style = style4; break;

			default : style = style1;

		}

		
        
        // appending various other options if they are enabled or set to true.

		if(enablePageOfOption)

			style += '<span class="inactive" title="Page Information">' + pageOfOption + '</span>';

		if(enableGoToPage)

			style += '<span class="inactive" title="Select Page">' + goToPage + '</span>';

		if(enableSelectNoItems)

			style += '<span class="inactive" title="Select no. of items per page">' + selectNoItems + '</span>';

		

		$(".paginator").html(style);	

	}