// JavaScript Document
(function($){ 
	$.fn.paginateList = function() {
		var element = this;
		var cells = $(element).find('li');
		var totalCells = $(cells).length;
		var maxCells = 9;
		var page = 1;
		var showcounter = 0;
		var topage;
		var speed = 10;
		var pageForNav = 1;
		var delay = 10;
		var maxPaginate = 10;
		
		var url = window.location.href;
		var hash = url.substring(url.indexOf("#")+1);
		
		if(hash > 1) {
			page = hash	
			pageForNav = hash
		}
		
		var totalPages = Math.ceil(totalCells / maxCells);
		
		$(element).append('<div id="pagination_holder"></div>');
			
			$("<div class='clear'></div><div class='pagination_holder'><div class='grid_2 alpha' id='prev'><span></span></div><div class='grid_8 center numbers' id='numberholder'></div><div class='grid_2 omega right' id='next'><span class='right'></span></div><div class='clear'></div></div>").insertAfter($('#pagination_holder'));
		
		function updateNav() {
			$('#prev span').empty();
			$('#next span').empty();
			$('#numberholder').empty();
			createNavigation();
		}
		
		function createNavigation() {			
			if(pageForNav == 1) {
				// only a disables prev button
				$('#prev span').addClass('disabled pagination').html('« Vorige');
			} else {
				$('#prev span').append('<a href="#'+(pageForNav-1)+'" class="topage">« Vorige</a>');
				$('#prev a').addClass('prev');
				$('#prev span').append('<a href="#1" class="topage">« Eerste</a>');
			}
			
			if(pageForNav == totalPages) {
				// create a disabled nextbutton
				$('#next span').addClass('disabled').html('Volgende »');
			} else {
				$('#next span').append('<a href="#'+(pageForNav+1)+'" class="topage">Volgende »</a>');
				$('#next a').addClass('next');
				$('#next span').append('<a href="#'+totalPages+'" class="topage">Laatste »</a>');
			}
			$('.pagination_holder').find('a').addClass('pagination');
			
			var counterPageNumber = 1;
			
			if(pageForNav > 5) {
			 	counterPageNumber = pageForNav - 5;	
			}
			
			
			if(pageForNav > (totalPages -5) && totalPages >= 10) {
				counterPageNumber = totalPages - 9;	
			}
			
			if(totalPages < maxPaginate) {
				maxPaginate = totalPages;	
			}
			
			console.log(pageForNav);
			console.log(counterPageNumber);
			
			for(x=1; x <= maxPaginate; x++) { // totalPages
				var number = document.createElement('span');
				$(number).html(counterPageNumber);
				if(pageForNav == counterPageNumber) {
					$(number).addClass('current');	
					$('#numberholder').append(number);
				} else {
					// we need to create a link
					$('#numberholder').append('<span><a href="#'+counterPageNumber+'" class="topage">'+counterPageNumber+'</a></span>')
				}
				
				counterPageNumber++;
			};
		}
		
		
		function createEl(type, className, html) {
			var temp = document.createElement(type);
			return $(temp).addClass(className).html(html);	
		}
		
		function setCounter() {
			// set the counter to the first element that needs to be shown.
			showcounter = (page * maxCells) - maxCells;
		}
		
		function showItems() {
			if(showcounter == (page * maxCells)-1 || showcounter == totalCells-1) { 
				$(cells[showcounter]).show(speed); 
				return true;
			} // maximum amount is reached
			$(cells[showcounter++]).show(speed, arguments.callee);
		}
		
		function hideItems() {
			if(showcounter == ((page * maxCells) - maxCells)) 
			{ 
				// we still need to hide the last one
				$(cells[showcounter]).hide(speed);
				page = topage;
				setCounter(); // we need to reset the counter to let the show method start at the right place
				setTimeout(function() { showItems() }, delay); // call the show method with a delay
				return true;
			}
			$(cells[showcounter--]).hide(speed, arguments.callee); // hide all the items, but make it sequential using the arguments.callee callback
		}
		
		
		$(cells).fadeOut(0);
		setCounter();
		showItems();
		
		if(totalCells > maxCells) {
			// only render navigation if needed
			updateNav();
		}
		
		$(element).delegate('a.topage', 'click', function(){
			// use the delegate method to let the navigation work after rendering
			// set the topage variabel to the page that needs to be scrolled to.
			topage = Number($(this).attr('href').substr(1));
			pageForNav = topage;
			updateNav();
			hideItems();
		});
	
	};

}) (jQuery);