function pagination(wrapperId, elementPrefix, sectionCount) {
	// delivered variables
	this.root = $(wrapperId);
	this.prefix = elementPrefix;
	this.sectionCount = sectionCount;
	
	// new internal variables
	this.activeSection = 0;
	this.navPrefix = "cnav";
	this.sectionsWrapId = "sWrap";
	this.navScope = 5;
	this.navCenterRadius = Math.ceil(this.navScope / 2);
	this.navSideCount = (this.navScope - 1) / 2;
	
	// new lang variables
	if (slang == 'nl') {
		this.pages = "Pagina's:\u0020";
		this.mostrecent = "meest recent";
		this.oldest = "oudste";
		this.prev = "vorige";
		this.next = "volgende";
	} else {
		this.pages = "Pages:\u0020";
		this.mostrecent = "la plus r\u00E9cente";
		this.oldest = "la plus ancienne";
		this.prev = "pr\u00E9c\u00E9dente";
		this.next = "suivante";		
	}
	
	// initialize
	if(this.root != undefined) {
		this.init();
	}
}

Object.extend(pagination.prototype, {
	/*
	 * CONSTRUCTOR
	 *  - build the navigation
	 *  - set the first page active (and hide the others)
	 */
	init: function() {
		//build the page navigation
		this.buildNav(this.root);
		
		//hide all sections
		this.hideAllSections();
		
		//switch to the first page
		this.gotoSection(1, false);
	},
	
	/*
	 * BUILD NAVIGATION
	 */
	buildNav: function(wrapper) {
		var reactionsNav = $(document.createElement('div'));
		reactionsNav.id = 'reactions_b';
		reactionsNav.addClassName('clearfix');
	
		
		var spanLeft = $(document.createElement('span'));
		spanLeft.addClassName('fleft');

		spanLeft.appendChild(document.createTextNode(this.pages));
		
		var mostRecent = $(document.createElement('a'));
		mostRecent.setAttribute('href', '#reactionswrap');
		Event.observe(mostRecent, 'click', this.gotoSectionEvent.bindAsEventListener(this, 1), false);
		mostRecent.appendChild(document.createTextNode(this.mostrecent));
		spanLeft.appendChild(mostRecent);
		
		spanLeft.appendChild(document.createTextNode("\u0020...\u0020"));
		
		var sectionsWrap = $(document.createElement('span'));
		sectionsWrap.id = this.sectionsWrapId;
		spanLeft.appendChild(sectionsWrap);
		
		spanLeft.appendChild(document.createTextNode("\u0020...\u0020"));
		
		var latest = $(document.createElement('a'));
		latest.id = "cLatest";
		latest.setAttribute('href', '#reactionswrap');
		Event.observe(latest, 'click', this.gotoSectionEvent.bindAsEventListener(this, this.sectionCount), false);
		latest.appendChild(document.createTextNode(this.oldest));
		spanLeft.appendChild(latest);
		
		var spanRight = $(document.createElement('span'));
		spanRight.addClassName('fright');

		var previous = $(document.createElement('a'));
		previous.setAttribute('href', '#reactionswrap');
		Event.observe(previous, 'click', this.gotoSectionEvent.bindAsEventListener(this, "-1"), false);
		previous.appendChild(document.createTextNode(this.prev));
		spanRight.appendChild(previous);
		
		spanRight.appendChild(document.createTextNode("\u0020"));

		var next = $(document.createElement('a'));
		next.setAttribute('href', '#reactionswrap');
		Event.observe(next, 'click', this.gotoSectionEvent.bindAsEventListener(this, "+1"), false);
		next.appendChild(document.createTextNode(this.next));
		spanRight.appendChild(next);

		reactionsNav.appendChild(spanLeft);
		reactionsNav.appendChild(spanRight);
		
		wrapper.appendChild(reactionsNav);
	},
	
	/*
	 * HIDE ALL SECTIONS
	 */
	hideAllSections: function() {
		for(var i = 1; i <= this.sectionCount; i++) {
			$(this.prefix + i).addClassName('hide');
		}
	},
	
	/*
	 * GO TO SECTION
	 *  - update the navigation structure
	 *  - switch to the specified section and hide the previous one
	 *  - update the navigation
	 */
	gotoSection: function(sectionToGoTo, scroll) {
		if(typeof sectionToGoTo == "string") {
			sectionToGoTo = this.activeSection + eval(sectionToGoTo);
		}

		if(sectionToGoTo != this.activeSection && sectionToGoTo <= this.sectionCount && sectionToGoTo > 0) {

			previousElement = $(this.prefix + this.activeSection);
			if(previousElement != undefined && !previousElement.hasClassName('hide')) {
				previousElement.addClassName('hide');
			}
			
			this.activeSection = sectionToGoTo;
			this.updateNav();
			
			$(this.prefix + this.activeSection).removeClassName('hide');
			$(this.navPrefix + this.activeSection).addClassName('boldblack');
		}
		
		if(scroll) {
			new Effect.ScrollTo('reactionswrap', {offset: -5});
		}
	},
	
	/*
	 * GO TO SECTION EVENT
	 *  extract the sectionid and call gotosection
	 */
	gotoSectionEvent: function(e, i) {
		Event.stop(e);
		this.gotoSection($A(arguments)[1], true);
	},
	
	/*
	 * UPDATE NAVIGATION
	 */
	updateNav: function() {
		var sectionsWrap = $(this.sectionsWrapId);
		
		this.removeAllChildren(sectionsWrap);
		
		if(this.sectionCount > this.navScope) {
			if (this.activeSection >= (this.sectionCount - this.navCenterRadius)) {
				from = this.sectionCount - this.navScope + 1;
				to = this.sectionCount;
			} else if (this.activeSection <= this.navCenterRadius ){
				from = 1
				to = this.navScope;
			} else {
				from = this.activeSection - this.navSideCount;
				to = this.activeSection + this.navSideCount;
			}
		} else {
			from = 1;
			to = this.sectionCount;
		}
		
		
		for(var i = from; i <= to; i++) {
			sectionsWrap.appendChild(document.createTextNode("\u0020"));
			
			var a = $(document.createElement('a'));
			a.setAttribute('href', '#reactionswrap');
			Event.observe(a, 'click', this.gotoSectionEvent.bindAsEventListener(this, i), false);
			a.id = this.navPrefix + i;
			a.appendChild(document.createTextNode(i));
			sectionsWrap.appendChild(a);
		}
	},
	
	/*
	 * REMOVE ALL ELEMENTS FROM WRAPPER
	 */
	removeAllChildren: function (element) {
		element = $(element);
		if ( element.hasChildNodes()) {
		    while ( element.childNodes.length >= 1 ) {
		        element.removeChild( element.firstChild );       
			} 
		}
	}
	
});

