// ajax response
        Ajax.Response.prototype._getHeaderJSON = function() {
        var nbElements = 0;
		//Get output of the next page from the block
		
		//Get response Text
		var template = this.responseText;
		var from = this.request.parameters.from;
		var to   = Math.min(nbElements, this.request.parameters.to);
		var html = $R(from, to).inject("", function(html, n) { return html + template});
		return {html: html, from: from, to: to, more: to != nbElements};
       
      }

	var Pagination = Class.create({
	
	carousel: null,
	current: 0,
	counter: 0,
	wasHere: 0,
	locked: false,
	previous: null,
	next: null,
	scrollTill: null,
	totalItems: 0,
	index: 1,
	elementName: null,
	blockid: 0,
	page_id: 0,
	spinner: null,
	initialize:function(element, scrollAmount, contentSize, cDirection, block, page, items, totalArticles)
	{
		this.totalItems = totalArticles;
		this.elementName = element;
		this.blockid = block;
		element = $(element);
		this.scrollTill = scrollAmount;
		this.sizeOfElement = contentSize;
		//alert(totalArticles);
		//alert(this.totalItems);
		this.spinner = element.select('.spinner')[0];
		if (this.totalItems > items+1) //If there are enough items to scroll then enable scrolling
		{	
		
			//initialise carousel size according to size of window pane
			//initialise scroll counter
			this.counter = scrollAmount;
			//if first listing diplayed start ajaxing the second page else start from the first page
		
			if (page == 0)
			{
				this.current = 1;	
			}
			if (this.totalItems < 2)
			{
				this.totalItems = 1;
			}
		
			else
			{
				this.totalItems = (Math.floor(this.totalItems / scrollAmount));
				//guys talk -- this.totalItems = (Math.floor(this.totalItems / 10));
			}
			
			this.page_id = page;
			
			this.carousel = new UI.Ajax.Carousel(this.elementName, {direction: cDirection,elementSize: this.sizeOfElement ,url: "http://www.genderlinks.org.za/block.php?b_id=" + this.blockid + "&page="+this.current, scrollInc: this.scrollTill});
		
			if (this.totalItems > 2)
			{
				this.carousel.hasMore = true;
			}
			
			this.carousel.observe('request:started', this.loading.bind(this));
			this.carousel.observe('request:ended', this.loadingOff.bind(this));
			
			this.carousel.nextButton.observe('click', this.runNextCarousel.bind(this));
			this.carousel.previousButton.observe('click', this.runPreviousCarousel.bind(this));
		}
		
	},
    
	loading: function()
	{
		this.spinner.show().morph("opacity:0.8", {duration:0.5});
	},
	loadingOff: function()
	{
		 this.spinner.morph("opacity:0", {duration:0.5, afterFinish: function(obj) { obj.element.hide(); }});
	},
	
	runNextCarousel: function(e)
	{
		if (this.totalItems <= this.index)
		{
			this.carousel.hasMore = false;
			return;
		}
		this.current += 1;
		
		if (this.wasHere != this.current)
		{			
			this.index += 1;
			if (this.current == this.page_id)
			{
				this.current += 1;	
			}
			this.carousel.options.url = "http://www.genderlinks.org.za/block.php?b_id=" + this.blockid + "&page="+this.current;
			this.carousel.scrollTo(this.counter);
			this.counter += this.scrollTill;
			
			this.carousel.runRequest({
				parameters: {
					from: 0, to: Math.ceil(this.carousel.nbVisible) - 1
				}, 
				onSuccess: 
					this.carousel.updateHandler.bind(this)
			});
			
			this.wasHere = this.current;
		}
	},
	
	runPreviousCarousel: function(e)
	{
		
		this.current -= 1;
		
		if (this.wasHere != this.current)
		{			
			this.index -= 1;
			if (this.current == this.page_id)
			{
				this.current -= 1;	
			}
			this.carousel.options.url = "http://www.genderlinks.org.za/block.php?b_id=" + this.blockid + "&page="+this.current;
			this.carousel.scrollTo(this.counter);
			this.counter -= this.scrollTill;
			
			this.carousel.runRequest({
				parameters: {
					from: 0, to: Math.ceil(this.carousel.nbVisible) - 1
				}, 
				onSuccess: 
					this.carousel.updateHandler.bind(this)
			});
			
			this.wasHere = this.current;
        }
		this.counter -= 1;
	},
	
	updateCarouselSize: function()
	{
		//var dim = document.viewport.getDimensions(); 
		//dim.width -= this.containerWidth;            
		////$(this.elementName).style.width = dim.width + "px";
     	//$$("#" + this.elementName + " .container").first().style.width =  (dim.width + 6) + "px";
	},
	resize: function()
	{
		this.updateCarouselSize();
        if (this.carousel)
		this.carousel.updateSize();	
	},
	unlock: function()
	{
		this.locked = false;
	}
								 
});