/*
'targetClass' 		: the element that needs to be paged						--> string
'limit' 			: the number of elements that needs to be shown per page 	--> int ( 1 or greater )
'pagerNavigationId' : the id of the unique pagerNavigationContainer				--> string
'arrowButtons' 		: to show the buttons left or right							--> boolean
'arrowLeft' 		: the contence of the left button							--> string
'arrowRight' 		: the contence of the right button							--> string
'pageOf' 			: show a page of: 'page 1 of 16'							--> boolean
'pageOfFormat'		: the format of the pageOf -> /cur = current item, 
					  /tot = total number of items								--> string
'animation' 		: if a fade effect is needed everytime a new page is opend	--> boolean
'aligncenter' 		: if the pagerNavigationContainer needs to be alignd to 
					  center, also needs 'margin: 0 auto;' in the css			--> boolean
'dontShowAllNumbers': show a selection of numbers, in case you got many elements
					  to page													--> boolean
'numbersToShow'		: the number of pagenumbers to be shown						--> int ( 1 or greater )
'sequence'			: the order in the elements of the pager are shown			--> array with pageOf, arrowLeft, pageNumbers, arrowRight
'scrollToTop'		: onPage change scroll to top of window						--> boolean
*/

/* Example usage 

<div id="pageNumberContainer" class="pageNumberContainer"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
	var settingsArray = {
		'targetClass' 		: 'articleIntro',
		'limit' 			: 5,
		'pagerNavigationId' : 'bestemmingPager',
		'arrowButtons' 		: true,
		'arrowLeft' 		: 'VORIGE',
		'arrowRight' 		: 'VOLGENDE',
		'pageOf' 			: true,
		'pageOfFormat'		: '/cur van /tot bestemmingen',
		'animation' 		: true,
		'aligncenter' 		: false,
		'dontShowAllNumbers': true,
		'numbersToShow'		: 6,
		'sequence'			: { 0 : 'pageOf', 1 : 'arrowLeft', 2 : 'pageNumbers', 3 : 'arrowRight' },
		'scrollToTop'		: true
	}
	
	elementPager( settingsArray );
</script>

*/

var numberOfPagers = 1;

function elementPager( pagerSettings )
{
	if( pagerSettings[ 'targetClass' ] != undefined && pagerSettings[ 'targetClass' ] != '' ) {
		// Counts the number of paging that is needed, according to the limit setting of the pagerSettings limit parameter 
		var numberOfPages = Math.ceil( ( jQuery( '.'+pagerSettings[ 'targetClass' ] ).length / pagerSettings[ 'limit' ] ) );
		pagerSettings = handleSettings( pagerSettings );
		
		// If the pager is needed load the pager if not show the target elements
		if( numberOfPages > 1 ) {
			//Creates the pager and returns the unqiue ID for the pager	
			var uniquePagerId = createPageNumberElement( numberOfPages, pagerSettings );
			
			// Show the first page
			showElements( uniquePagerId, numberOfPages, 0, pagerSettings );
		
		} else {
			if( pagerSettings[ 'animation' ] ) {
				displayElement( '.'+pagerSettings[ 'targetClass' ], true, true, 0 );
			}
			else {
				displayElement( '.'+pagerSettings[ 'targetClass' ], true, false, 0 );
			}
		}
	}
	else {
		console.log( 'You need to add the \'targetClass\' in the settings, without it there is nothing to page with the pager...' );
	}
}

//Creates the pager and returns the unqiue ID for the pager	
function createPageNumberElement( numberOfPages, pagerSettings ) 
{
	// The id of the pagerContainer to be used
	var pagerId = pagerSettings[ 'pagerNavigationId' ];
	// The class for a pagenumber
	var pageNumberClass = 'pagenumber';
	// The unqiue id of the current pager
	var uniquePagerId = 'pagerId-'+numberOfPagers;
	// The pageNumberElement container
	var pageNumberElement = '';
	// The sequence of elements
	var sequence = pagerSettings[ 'sequence' ];
	// Arrow elements
	var arrowLeft = '';
	var arrowRight = '';
	// PageOf element
	var pageOfElement = '';
	// PageNumbers element
	var pageNumbersElement = '';
	
	// This adds the left and right button element, if arrowButtons = true
	if( pagerSettings[ 'arrowButtons' ] ) {
		arrowLeft += '<div class="'+pageNumberClass+'" id="arrowLeft">'+pagerSettings[ 'arrowLeft' ]+'</div>';
		arrowRight += '<div class="'+pageNumberClass+'" id="arrowRight">'+pagerSettings[ 'arrowRight' ]+'</div>';
	}
	
	// This adds the pageOf element, if pageOf = true
	if( pagerSettings[ 'pageOf' ] ) {
		var pageOfFormat = pagerSettings[ 'pageOfFormat' ];
   		var pageOfText = pageOfFormat.replace( '/cur', '<span>'+1+'</span>' );
   		pageOfText = pageOfText.replace( '/tot', '<span>'+numberOfPages+'</span>' );
	   		
		pageOfElement += '<div id="pageOf-'+uniquePagerId+'" class="pageOfContainer">'+pageOfText+'</div>';
	} 
	
	var displayNumber = '';	
	
	// This adds the back button for when the dontShowAllNumbers parameter = true
	if( pagerSettings[ 'dontShowAllNumbers' ] && pagerSettings[ 'numbersToShow' ] != 0 ) {
		pageNumbersElement += '<div class="'+pageNumberClass+'" id="prevNumbers" style="display: none;">...</div>';
	}
	
	// Appends the pagenumbers and if there is a limit, some will be not displayed
	for( i = 0; i < numberOfPages; i++ ) {
		if( pagerSettings[ 'dontShowAllNumbers' ] ) {
			if( i >= pagerSettings[ 'numbersToShow' ] ) {
				displayNumber = 'style="display: none;"';
			}
		}
			
		if( i == 0 ) {
		    pageNumbersElement += '<div class="'+pageNumberClass+' active" id="'+uniquePagerId+'-'+i+'" '+displayNumber+'>'+( i + 1 )+'</div>';
		}
		else {
		    pageNumbersElement += '<div class="'+pageNumberClass+'" id="'+uniquePagerId+'-'+i+'" '+displayNumber+'>'+( i + 1 )+'</div>';
		}
	}
	
	// This adds the back button for when the dontShowAllNumbers parameter = true
	if( displayNumber != ''  && pagerSettings[ 'numbersToShow' ] != 0 ) {
		pageNumbersElement += '<div class="'+pageNumberClass+'" id="nextNumbers">...</div>';
	}

	for ( var seq in sequence ) {
		var obj = sequence[ seq ];
		if( obj == 'pageOf' ) {
			pageNumberElement += pageOfElement;
		} 
		else if( obj == 'arrowLeft' ) {
			pageNumberElement += arrowLeft;
		}
		else if( obj == 'pageNumbers' ) {
			pageNumberElement += pageNumbersElement;
		}
		else if( obj == 'arrowRight' ) {
			pageNumberElement += arrowRight;
		}
	}
	// This appends the pagernavigation to the correct pagerId
	jQuery( '#'+pagerId ).append( '<div class="pageNumbers" id="'+uniquePagerId+'">'+pageNumberElement+'</div>' );
	
	// This function aligns the pager to the center of the parent, this has to be by code because of IE, im sorry but thats just the way it is...
	if( pagerSettings[ 'aligncenter' ] ) {
		pagerAlignCenter( uniquePagerId );
	}
	
	pagerBindAction( uniquePagerId, pageNumberClass, numberOfPages, pagerSettings );
	
	// Adds one to the numberOfPagers so that if anotherone is created it will have a unique id
	numberOfPagers++;
	
	return uniquePagerId;
}

// This function binds the action to the elements
function pagerBindAction( uniquePagerId, pageNumberClass, numberOfPages, pagerSettings )
{
	// Binds the normal change page function
	jQuery( '.'+pageNumberClass ).bind( 'click', function() 
	{
  		showElements( uniquePagerId, numberOfPages, this, pagerSettings );
	});	
	
	jQuery( '#prevNumbers' ).unbind();
	jQuery( '#nextNumbers' ).unbind();
	
	// Binds the handle for previous numbers function
	jQuery( '#prevNumbers' ).bind( 'click', function() 
	{
  		handleNumberDisplay( this, uniquePagerId, 'prev', pagerSettings[ 'numbersToShow' ], pagerSettings[ 'numbersToShow' ], numberOfPages );
	});	
	
	// Binds the handle for next numbers function
	jQuery( '#nextNumbers' ).bind( 'click', function() 
	{
  		handleNumberDisplay( this, uniquePagerId, 'next', pagerSettings[ 'numbersToShow' ], pagerSettings[ 'numbersToShow' ], numberOfPages );
	});		
}

//function showElements( contentElement, uniquePagerId, pagerId, numberElement, numberOfPages, limit, animation, pageOf, numbersToShow )
function showElements( uniquePagerId, numberOfPages, numberElement, pagerSettings )
{   
    var contentElements = jQuery( '.'+pagerSettings[ 'targetClass' ] );
    var navigation = jQuery( '#'+uniquePagerId ).children();
    var navigationElement =  jQuery( numberElement ).attr( 'id' );
    var numbersToShow = pagerSettings[ 'numbersToShow' ];
    
    // If one of the arrow buttons is pressed, get the needed number
    if( navigationElement == 'arrowLeft' || navigationElement == 'arrowRight' ) {
        for( i = 0; i < navigation.length; i++ ) {
            if( jQuery( navigation[ i ] ).attr( 'class' ) == 'pagenumber active' ) {
                var numberElement = parseInt( jQuery( navigation[ i ]  ).attr( 'id' ).split( '-' )[ 2 ] );
             	
               	if( navigationElement == 'arrowLeft' ) {
	                if( numberElement > 0 ) {
	                    numberElement = navigation[ i - 1 ];
	                }
	            }
	            else {
	            	if( numberElement != ( numberOfPages - 1 ) ) {
                    	numberElement = navigation[ i + 1 ];
                	}
	            }
               
                break;
            }
        }   
    } 
    
    if( jQuery( numberElement ).html() != null || numberElement == 0 ) {
	    if( numberElement == 0 ) {
	    	numberElement = '#'+uniquePagerId+'-0';
	    }
	   
	    for( i = 0; i < numberOfPages; i++ ) {
			jQuery( '#'+uniquePagerId+'-'+i ).attr( 'class','pagenumber' );
	    }
	    
	    jQuery( numberElement ).attr( 'class','pagenumber active' );
	    
	    numberElement = parseInt( jQuery( numberElement ).attr( 'id' ).split( '-' )[ 2 ] );
	    
	    if( navigationElement == 'arrowLeft' ) {
			for( var i = 0; i < numberOfPages; i++ ) {
		   		var numbersToCheck = numbersToShow * i;
		   		if( numberOfPages > numbersToCheck ) {
		   			if( ( numbersToCheck - 1 ) == numberElement ) {
		   				jQuery( '#prevNumbers' ).click();
		   			}
		   		}
		   	}
		}
		else if( navigationElement == 'arrowRight' ) {
		   	for( var i = 0; i < numberOfPages; i++ ) {
		   		var numbersToCheck = numbersToShow * i;
		   		if( numberOfPages > numbersToCheck ) {
		   			if( numbersToCheck == numberElement ) {
		   				jQuery( '#nextNumbers' ).click();
		   			}
		   		}
		   	}
		}
	   
	   	if( pagerSettings[ 'pageOf' ] ) {
	   		var pageOfFormat = pagerSettings[ 'pageOfFormat' ];
	   		var pageOfText = pageOfFormat.replace( '/cur', '<span>'+( numberElement + 1 )+'</span>' );
	   		pageOfText = pageOfText.replace( '/tot', '<span>'+( numberOfPages )+'</span>' );
	   		
	    	jQuery( '#pageOf-'+uniquePagerId ).html( pageOfText );
	    }
	   
	    var startPoint = pagerSettings[ 'limit' ] * numberElement;
	    var endPoint = pagerSettings[ 'limit' ] * ( numberElement + 1 );
	   
	    for( i = 0; i < contentElements.length; i++ ) {
	        if( i >= startPoint && i < endPoint ) {
	        	if( pagerSettings[ 'animation' ] ) {
	        		displayElement( contentElements[ i ], true, true, 0 );
	        	}
	        	else {
	        		displayElement( contentElements[ i ], true, false, 0 );
	        	}
	        }
	        else {
	        	// hide
	            displayElement( contentElements[ i ], false, false, 0 );
	        }
	    }
		
		if( pagerSettings[ 'scrollToTop' ] ) {
			jQuery( 'html, body' ).animate({ scrollTop: 0 }, 0);
		}
	}
}

// Handles the pagernumbers if dontShowAllNumbers = true
function handleNumberDisplay( thisElement, uniquePagerId, direction, lastNumber, numberToShow, numberOfPages ) 
{
	if( direction == 'next' ) {
		
		displayElement( '#prevNumbers', true, false, 0 );
		
		var numberShow = parseInt( lastNumber ) + parseInt( numberToShow );
		
		for( i = 0; i < numberOfPages; i++ ) {
			if( i >= lastNumber && i < numberShow ) {
				display = true;
			}
			else {
				display = false;
			}
			
			displayElement( '#'+uniquePagerId+'-'+i, display, false, 0 );
		}
		
		if( ( lastNumber + numberToShow ) < numberOfPages ) {
			jQuery( thisElement ).unbind();
			jQuery( thisElement ).bind( 'click', function() 
			{
		  		handleNumberDisplay( this, uniquePagerId, 'next', numberShow, numberToShow, numberOfPages );
			});	
			
			//jQuery( thisElement ).attr( 'onclick', 'handleNumberDisplay( this, \''+uniquePagerId+'\', \'next\', '+numberShow+', '+numberToShow+', '+numberOfPages+' )' );
		}
		else {
			displayElement( thisElement, false, false, 0 );
		}
		
		jQuery( '#prevNumbers' ).unbind();
		jQuery( '#prevNumbers' ).bind( 'click', function() 
		{
	  		handleNumberDisplay( this, uniquePagerId, 'prev', lastNumber, numberToShow, numberOfPages );
		});	
		//jQuery( '#prevNumbers' ).attr( 'onclick', 'handleNumberDisplay( this, \''+uniquePagerId+'\', \'prev\', '+lastNumber+', '+numberToShow+', '+numberOfPages+' )' );
		
		jQuery( '#'+uniquePagerId+'-'+lastNumber ).click();
	}
	else if( direction == 'prev' ) {
		
		displayElement( '#nextNumbers', true, false, 0 );
		
		var numberShow = parseInt( lastNumber ) - parseInt( numberToShow );
		
		//console.log( lastNumber );
		//console.log( numberShow );
		for( i = 0; i < numberOfPages; i++ ) {
			if( i < lastNumber && i >= numberShow ) {
				display = true;
			}
			else {
				display = false;
			}
			
			displayElement( '#'+uniquePagerId+'-'+i, display, false, 0 );
		}
		
		if( numberShow != 0 ) {
			//jQuery( thisElement ).attr( 'onclick', 'handleNumberDisplay( this, \''+uniquePagerId+'\', \'prev\', '+numberShow+', '+numberToShow+', '+numberOfPages+' )' );
			jQuery( '#prevNumbers' ).unbind();
			jQuery( '#prevNumbers' ).bind( 'click', function() 
			{
		  		handleNumberDisplay( this, uniquePagerId, 'prev', numberShow, numberToShow, numberOfPages );
			});
		}
		else {
			displayElement( thisElement, false, false, 0 );	
		}
		
		jQuery( '#nextNumbers' ).unbind();
		jQuery( '#nextNumbers' ).bind( 'click', function() 
		{
	  		handleNumberDisplay( this, uniquePagerId, 'next', ( numberShow + numberToShow ), numberToShow, numberOfPages );
		});	
		
		//jQuery( '#nextNumbers' ).attr( 'onclick', 'handleNumberDisplay( this, \''+uniquePagerId+'\', \'next\', '+( numberShow + numberToShow )+', '+numberToShow+', '+numberOfPages+' )' );
		
		jQuery( '#'+uniquePagerId+'-'+( numberShow + numberToShow - 1 ) ).click();
	}
}

// This function will make sure the pager is aligned to the center, even in IE
// Just make sure that the pager container has a width of 100% and text align center and the pagernumbercontainer has: 'margin: 0 auto;'
function pagerAlignCenter( uniquePagerId )
{
	var navElements = jQuery( '#'+uniquePagerId ).children();
	var widthOfPager = 0;
	
	for( var i = 0; i < navElements.length; i++ ) {
		var elementWidth = getAttributeOfElement( navElements[ i ], 'width' );
		var elementPaddingLeft = getAttributeOfElement( navElements[ i ], 'padding-left' );
		var elementPaddingRight = getAttributeOfElement( navElements[ i ], 'padding-right' );
		var elementMarginLeft = getAttributeOfElement( navElements[ i ], 'margin-left' );
		var elementMarginRight = getAttributeOfElement( navElements[ i ], 'margin-right' );
		var borderWidthLeft = getAttributeOfElement( navElements[ i ], 'border-left-width' );
		var borderWidthRight = getAttributeOfElement( navElements[ i ], 'border-right-width' );
		var displayed = jQuery( navElements[ i ] ).css( 'display' );
		
		if( displayed != 'none' ) {
			widthOfPager += elementWidth + elementPaddingLeft + elementPaddingRight + elementMarginLeft + elementMarginRight + borderWidthLeft + borderWidthRight;
		}
	}
	
	jQuery( '#'+uniquePagerId ).css( 'min-width', widthOfPager );	
}

// This function handles the settings
function handleSettings( pagerSettings )
{
	if( pagerSettings[ 'limit' ] == undefined ) {
		pagerSettings[ 'limit' ] = 1;
	}
	if( pagerSettings[ 'arrowButtons' ] == undefined ) {
		pagerSettings[ 'arrowButtons' ] = false;
	}
	if( pagerSettings[ 'arrowLeft' ] == undefined ) {
		pagerSettings[ 'arrowLeft' ] = '';
	}
	if( pagerSettings[ 'arrowRight' ] == undefined ) {
		pagerSettings[ 'arrowRight' ] = '';
	}
	if( pagerSettings[ 'sequence' ] == undefined ) {
		pagerSettings[ 'sequence' ] = { 0 : 'pageOf', 1 : 'arrowLeft', 2 : 'pageNumbers', 3 : 'arrowRight' };
	}
	if( pagerSettings[ 'animation' ] == undefined ) {
		pagerSettings[ 'animation' ] = false;
	}
	if( pagerSettings[ 'pageOf' ] == undefined ) {
		pagerSettings[ 'pageOf' ] = false;
	}
	if( pagerSettings[ 'pageOfFormat' ] == undefined ) {
		pagerSettings[ 'pageOfFormat' ] = '/cur van de /tot';
	}
	if( pagerSettings[ 'aligncenter' ] == undefined ) {
		pagerSettings[ 'aligncenter' ] = false;
	}
	if( pagerSettings[ 'dontShowAllNumbers' ] == undefined ) {
		pagerSettings[ 'dontShowAllNumbers' ] = false;
	}
	if( pagerSettings[ 'numbersToShow' ] == undefined ) {
		pagerSettings[ 'numbersToShow' ] = 1;
	}
	if( pagerSettings[ 'scrollToTop' ] == undefined ) {
		pagerSettings[ 'scrollToTop' ] = false;
	}
	
	return pagerSettings;
}

// InputElement: id or class (#henk, .henken), visibleBool: show(true) or hide (false), effect: yes(true) or no (false)
function displayElement( inputElement, visibleBool, effect, speed )
{
	if( visibleBool ) {
		if( effect ) {
			if( speed != 0 ) {
				jQuery( inputElement ).fadeIn( speed );
			}
			else {
				jQuery( inputElement ).fadeIn();	
			}
		}
		else {
			jQuery( inputElement ).css( 'display', 'block' );
		}
	}
	else {
		if( effect ) {
			if( speed != 0 ) {
				jQuery( inputElement ).fadeOut( speed );
			}
			else {
				jQuery( inputElement ).fadeOut();	
			}
		}
		else {
			jQuery( inputElement ).css( 'display', 'none' );
		}
	}
}

// Returns the correct attribute value of an element
function getAttributeOfElement( targetElement, attr )
{
	if( jQuery( targetElement ).css( attr ) != '0px' && jQuery( targetElement ).css( attr ) != 'auto' ) {
		var returnNumber = parseInt( jQuery( targetElement ).css( attr ).split( 'px' )[ 0 ] );
	}
	else {
		returnNumber = 0;
	}
	
	return returnNumber;
}