/**
 * Wraps a jCarousel with navigation functionality (page display, next/prev buttons)
 *
 * options (extends default jcarousel options):
 *		buttonNext		css selector for element to bind 'next' navigation to
 *		buttonPrev		css selector for element to bind 'previous' navigation to
 *		doPageNav		boolean to toggle page navigation buttons
 *		navTarget		css selector for block-level container element to build page nav inside
 *		navTemplate		html string to build for each page button.
 *						Allows a single wildcard, %page%, which (obviously) is the number of the page for this button
 *
 * Copyright 2011 Real Evolution Pty Ltd
 * @author	Sam Pospischil <sam.pospischil@realevo.com>
 */
(function($) {

$.fn.extend({
	navjcarousel: function(options)
	{
		var $this = this;

		// extract our own config vars
		var nav = {
			buttonNext : options.buttonNext		|| false,
			buttonPrev : options.buttonPrev		|| false,
			doPageNav : options.doPageNav 		|| false,
			navTarget : options.navTarget 		|| $this.next(),
			navTemplate : options.navTemplate 	|| '<div title="%page%"></div>',
			itemSelector : options.itemSelector	|| 'ul.jcarousel-list>li'
		};

		// private var for page indicator elements, for updating
		var pageIndicators = [];

		// init callback for the underlying jcarousel instance
		function carouselInit(carousel) {
			if (nav.buttonNext) {
				$(nav.buttonNext).bind('click', function() {
					carousel.next();
					return false;
				});
			}
			if (nav.buttonPrev) {
				$(nav.buttonPrev).bind('click', function() {
					carousel.prev();
					return false;
				});
			}
			if (nav.doPageNav) {
				var container = $(nav.navTarget);
				var numPages = $this.find(nav.itemSelector).length;

				for (var i = 0; i < numPages; ++i) {
					// build a new page indicator
					var el = $(nav.navTemplate.replace(/%page%/g, i+1));
					el.data('navcarousel-pagenum', i);

					// bind it to setting the carousel page
					el.click(function() {
						var destIdx = $(this).data('navcarouselPagenum');	// ?! WHY DOES JQUERY DO THIS
						carousel.scroll(destIdx + 1);
					});

					container.append(el);
					pageIndicators[i] = el;
				}
			}
		}

		// callbacks for updating the page indicators when the view shifts
		function focusGained(carousel, item, idx, state)
		{
			$.each(pageIndicators, function() {
				this.removeClass('focus');
			});
			pageIndicators[idx-1].addClass('focus');
		}

		// finally, create our jcarousel
		$this.jcarousel($.extend({
			initCallback: carouselInit,
			itemVisibleInCallback: {
				onAfterAnimation: focusGained
			}
		}, options));

		return this;
	}
});

})(jQuery);