filterJSON.js

/*
 * filterJSON v.9.1 - http://www.jeffrey-way.com
 * Last Updated: January 29, 2009

 * When you attach a JSON file, it will parse it with getJSON, and then allow you to filter through and display the items on the page according to 
 * a specified limit, delay, transition, etc. 

 * Developed by Jeffrey Way
 * http://jeffrey-way.com/filterjson-a-jquery-plugin/
 * jeffrey@effrey-way.com
 * Modified by Brian Peiris
 * http://twitter.com/brianpeiris
*/

(function($) {

	$.fn.filterJson = function(options) {
		
		var defaults = {
			anchorWrap : '<p>',
			complete : null,
			data : null,
			delay : 500,
			limit : 5,
			index : 0,
			transition : 'fade',
			itemsLocation: null,
			
			nextId : 'next',
			nextText : 'More',
			
			prevId : 'prev',
			prevText : 'Last'
		},
		
		options = $.extend(defaults, options);
		
		this.each(function() {
		
			var $this = $(this);
			
			$.getJSON(options.data, function(r) {
				if (options.itemsLocation && $.isArray(options.itemsLocation)) {
					// extract the items from the object hierarchy
					r = r[options.itemsLocation];
				} 
 

				// add the NEXT button
				$this
				   .after(options.anchorWrap)
				   .next()
				   .append('<a></a>')
				   .children()
				   .attr('href', '#')
				   .attr('id', options.nextId)
				   .text(options.nextText);
				
				// Get first set of items
				options.index = getItems(r);				
				
				// when the user clicks the NEXT button
				$('a#' + options.nextId).live('click', function() {	

					// If a previous button doesn't exist, create it!
					if($('a#' + options.prevId).length == 0) {
						$this
						   .after(options.anchorWrap)
						   .next().append('<a></a>')
						   .children()
						   .attr('href', '#')
						   .attr('id', options.prevId)
						   .text(options.prevText);					
					}
					
					// If the user chose the "slide" transition, slideUp...otherwise fadeOut.
					if(options.transition === 'slide') $this.slideUp(options.delay, emptyAndContinue);
					else $this.fadeOut(options.delay, emptyAndContinue);		
					
					// remove the current items and get the next set, passing in the json file - represented by "r"
					function emptyAndContinue() {
						$this.empty();
						options.index = getItems(r);
					}					
					
					return false;
				});	// end nextId click		
		
				
				// When the previous button is clicked, add the NEXT button if one doesn't exist.
				$('a#' + options.prevId).live('click', function() {
					if($('a#' + options.nextId).length == 0) {
						$this
						   .after(options.anchorWrap)
						   .next().append('<a>')
						   .children()
						   .attr('href', '#')
						   .attr('id', options.nextId)
						   .text(options.nextText);
					}	
					
					// If the user chose the "slide" transition, slide up...oitherwise fadeOut
					if(options.transition === 'slide') $this.slideUp(options.delay, emptyAndContinue);
					else $this.fadeOut(options.delay, emptyAndContinue);
					
					// remove the current items and get the next set, passing in the json file - represented by "r"
					function emptyAndContinue() {
						$this.empty();
						options.index = getPreviousItems(r);						
					}					
					
					return false;					
				});	
				
				return this;
				
			}); // end getJSON
		
			// Acccepts the parsed JSON file as a parameter "r", and then gets the next set of items. 
			function getItems(r) {	

				var i = options.index, // the current index, or offset. 
					dataLength = r.length; // total # objects in the JSON file.
					
					(function append() { 			
						if(i === dataLength) {$('a#' + options.nextId).remove(); return; } // if the index is equal to total # of items in JSON file, remove the "next" link and exit.
						if(i >= options.limit + options.index) return; // if index is gte to the current index + the limit, return because reached the max.
													
						options.complete(i, r); // call userdefined "complete" function, which appends necessary html to the page.
						
						// If the user chose the "slide" transition, slide up...oitherwise fadeOut						
						if(options.transition === 'slide') $this.slideDown(options.delay);
						else $this.fadeIn(options.delay);
						i++;
						append(); // Rinse and repeat until i equals the limit			
					})();	
	
				// Increase INDEX by current offset to allow for the next grouping.
				return options.index + options.limit;
			} /// end getItems
			
			
			// Used when the PREVIOUS BUTTON is clicked. 
			function getPreviousItems(r) {
				// Need to reduce the current options.index back to what it would have been on the previous page. A bit confusing...
				var i = options.index - options.limit * 2;			
					
				(function append() { // if the user has chosen to delay the appearance of each new image...		
					if(i === 0) $('a#' + options.prevId).remove(); // If i = 0, we don't need a previous button.		
					if(i >= options.index - options.limit) return;

					options.complete(i, r); // call userdefined "complete" function, which appends necessary html to the page.
					
					if(options.transition === 'slide') $this.slideDown(options.delay);
					else $this.fadeIn(options.delay);
					i++;
					append(); // Rinse and repeat until i equals the specified options.limit.
				})();		
	
				// REDUCE index by the limit, because "PREVIOUS BUTTON" was clicked
				return options.index - options.limit;
			} /// end getPreviousItems



		}); // end this.each
		
		
		
	};  // end plugin. Go eat some cake.
	
})(jQuery);