// -------------------------------------------------------------------
// !GYROBGGalleryNavigation
//
// jQuery plugin that "traps" or stops propagation of mouse event
// from selected elements to others "below" them
// -------------------------------------------------------------------
(function($) {

	$.fn.GYROBGGalleryNavigation = function(config) {
	
		// default config overriden with settings if avaialble
		var defaults = {
			"imageSources": [],
			"startImageIndex": 0
		};
		
		var navigation;
		var navigationList;
		var selectedIndex;
		var selected;
		
		// override config with any matching settings		
		if (config) {
			$.extend(defaults, config);
		}
		
		// ----------------------------------------------
		// update a new navigation list
		// ----------------------------------------------
		function setup() {

			var numberOfImages = defaults.imageSources.length;

			// clear out the list
			navigationList.empty();

			// iterate through each gallery nav item data and create them
			for (var itemIndex = 0; itemIndex < numberOfImages; itemIndex++) {
				var navIndex = itemIndex + 1;
				navigationList.append("<li id=\"image" + navIndex + "\"><a href=\"#" + navIndex + "\">" + navIndex + "</a></li>");
				navigationList.children().eq(itemIndex).children("a").click(handleItemClicked);			
			}
			
			navigation.fadeIn();
		}
		
		// ----------------------------------------------
		// handle mouse click on a navigation item
		// - actual click event happens on the <a> element
		// ----------------------------------------------
		function handleItemClicked(event) {
			
			event.stopPropagation();
	
			// grab the parent <li> that contains the <a> that's been clicked on
			var clickedOnItem = jQuery(event.target).parent();
	
			// if not already selected
			if (clickedOnItem != selected) {
	
				// set the newly selected
				setSelected(clickedOnItem);	
	
				// get the new image index from the url of the <a>
				// - parseInt must get base 10 incase multiple digit
				var newSelectedIndex = parseInt($(event.target).attr("href").split("#")[1], 10) - 1;

				if (newSelectedIndex !== selectedIndex) {
					navigation.trigger("newItemSelect", {"newSelectedIndex": newSelectedIndex});
					selectedIndex = newSelectedIndex;
				}
			}
		}

		// ----------------------------------------------
		// set the newly selected item as selected
		// ----------------------------------------------
		function setSelected(newSelectedItem) {
			
			if (newSelectedItem && newSelectedItem.length > 0) {
				if (selected) {
					selected.removeClass("selected");
				}
				selected = newSelectedItem;
				selected.toggleClass("selected");				
			}			
		};
		
		// ----------------------------------------------
		// update the navigation
		// ----------------------------------------------
		this.update = function(config) {

			if (config) {
				$.extend(defaults, config);
			}

			// transition out
			navigation.fadeOut("normal", setup());
		};
		
		// ----------------------------------------------
		// select an item by item index
		// ----------------------------------------------
		this.selectItem = function(newSelectedItemIndex) {	
			if (navigationList && navigationList.length > 0) {
				var newSelectedItem = navigationList.children().eq(newSelectedIndex);
				setSelected(newSelectedItem);
			}
		};

		// -----------------------------------------------------------------------
		// initialize for each matched item then return it
		// -----------------------------------------------------------------------
		return this.each(function() {
			
			navigation = $(this);
			
			// get to the real list
			navigationList = navigation.children("ul").eq(0);
			
			// if list is not found create empty list
			if (navigationList.length === 0) {
				navigation.append("<ul></ul>");
				navigationList = navigation.children("ul").eq(0);
			}
			navigationItems = navigationList.children();
			
			var numberOfNavigationItems = navigationItems.length;	
			var numberOfImages = defaults.imageSources.length;
			
			// if number of navigation items differ from number of images
			if (numberOfNavigationItems !== numberOfImages) {
				
				setup();
			
			// else bind click event to each of the existing items
			} else {

				for (var itemIndex = 0; itemIndex < numberOfNavigationItems; itemIndex++) {
					navigationItems.children().eq(itemIndex).children("a").click(handleItemClicked);
				}
			}

			// if there are items
			if (numberOfImages > 0) {
				// set start item as selected
				setSelected(navigationList.children().eq(defaults.startImageIndex));
				navigation.show();
			} else {
				navigation.hide();
			}
			
			$.log("Finished initializing GYROBGGalleryNavigation");

		});
		
	};
	
})(jQuery);