/*-------------------------------------------------------------------- 

Scripts for creating and manipulating custom menus based on standard <ul> markup

Version: 3.0, 03.31.2009

By: Maggie Costello Wachs (maggie@filamentgroup.com) and Scott Jehl (scott@filamentgroup.com)

	http://www.filamentgroup.com

	* reference articles: http://www.filamentgroup.com/lab/jquery_ipod_style_drilldown_menu/

Copyright (c) 2009 Filament Group

Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.

--------------------------------------------------------------------*/

var allUIMenus = [];

$.fn.menu = function(options){

	var caller = this;

	var options = options;

	var m = new Menu(caller, options);	

	allUIMenus.push(m);

	$(this)

	.mousedown(function(){

		if (!m.menuOpen) { m.showLoading(); };

	})	

	.click(function(){

		if (m.menuOpen == false) { m.showMenu(); }

		else { m.kill(); };

		return false;

	});	

};

function Menu(caller, options){

	var menu = this;

	var caller = $(caller);

	var container = $('<div class="fg-menu-container ui-widget ui-widget-content ui-corner-all">'+options.content+'</div>');

	this.menuOpen = false;

	this.menuExists = false;

	var options = jQuery.extend({

		content: null,

		width: 180, // width of menu container, must be set or passed in to calculate widths of child menus

		maxHeight: 180, // max height of menu (if a drilldown: height does not include breadcrumb)

		positionOpts: {

			posX: 'left', 

			posY: 'bottom',

			offsetX: 0,

			offsetY: 0,

			directionH: 'right',

			directionV: 'down', 

			detectH: true, // do horizontal collision detection  

			detectV: true, // do vertical collision detection

			linkToFront: false

		},

		showSpeed: 200, // show/hide speed in milliseconds

		callerOnState: 'ui-state-active', // class to change the appearance of the link/button when the menu is showing

		loadingState: 'ui-state-loading', // class added to the link/button while the menu is created

		linkHover: 'ui-state-hover', // class for menu option hover state

		linkHoverSecondary: 'li-hover', // alternate class, may be used for multi-level menus		

	// ----- multi-level menu defaults -----

		crossSpeed: 200, // cross-fade speed for multi-level menus

		crumbDefaultText: 'Choose an option:',

		backLink: true, // in the ipod-style menu: instead of breadcrumbs, show only a 'back' link

		backLinkText: 'Back',

		flyOut: false, // multi-level menus are ipod-style by default; this parameter overrides to make a flyout instead

		flyOutOnState: 'ui-state-default',

		nextMenuLink: 'ui-icon-triangle-1-e', // class to style the link (specifically, a span within the link) used in the multi-level menu to show the next level

		topLinkText: 'All',

		nextCrumbLink: 'ui-icon-carat-1-e'	

	}, options);

	var killAllMenus = function(){

		$.each(allUIMenus, function(i){

			if (allUIMenus[i].menuOpen) { allUIMenus[i].kill(); };	

		});

	};

	this.kill = function(){

		caller

			.removeClass(options.loadingState)

			.removeClass('fg-menu-open')

			.removeClass(options.callerOnState);	

		container.find('li').removeClass(options.linkHoverSecondary).find('a').removeClass(options.linkHover);		

		if (options.flyOutOnState) { container.find('li a').removeClass(options.flyOutOnState); };	

		if (options.callerOnState) { 	caller.removeClass(options.callerOnState); };			

		if (container.is('.fg-menu-ipod')) { menu.resetDrilldownMenu(); };

		if (container.is('.fg-menu-flyout')) { menu.resetFlyoutMenu(); };	

		container.parent().hide();	

		menu.menuOpen = false;

		$(document).unbind('click', killAllMenus);

		$(document).unbind('keydown');

	};

	this.showLoading = function(){

		caller.addClass(options.loadingState);

	};

	this.showMenu = function(){

		killAllMenus();

		if (!menu.menuExists) { menu.create() };

		caller

			.addClass('fg-menu-open')

			.addClass(options.callerOnState);

		container.parent().show().click(function(){ menu.kill(); return false; });

		container.hide().slideDown(options.showSpeed).find('.fg-menu:eq(0)');

		menu.menuOpen = true;

		caller.removeClass(options.loadingState);

		$(document).click(killAllMenus);

		// assign key events

		$(document).keydown(function(event){

			var e;

			if (event.which !="") { e = event.which; }

			else if (event.charCode != "") { e = event.charCode; }

			else if (event.keyCode != "") { e = event.keyCode; }

			var menuType = ($(event.target).parents('div').is('.fg-menu-flyout')) ? 'flyout' : 'ipod' ;

			switch(e) {

				case 37: // left arrow 

					if (menuType == 'flyout') {

						$(event.target).trigger('mouseout');

						if ($('.'+options.flyOutOnState).size() > 0) { $('.'+options.flyOutOnState).trigger('mouseover'); };

					};

					if (menuType == 'ipod') {

						$(event.target).trigger('mouseout');

						if ($('.fg-menu-footer').find('a').size() > 0) { $('.fg-menu-footer').find('a').trigger('click'); };

						if ($('.fg-menu-header').find('a').size() > 0) { $('.fg-menu-current-crumb').prev().find('a').trigger('click'); };

						if ($('.fg-menu-current').prev().is('.fg-menu-indicator')) {

							$('.fg-menu-current').prev().trigger('mouseover');							

						};						

					};

					return false;

					break;

				case 38: // up arrow 

					if ($(event.target).is('.' + options.linkHover)) {	

						var prevLink = $(event.target).parent().prev().find('a:eq(0)');						

						if (prevLink.size() > 0) {

							$(event.target).trigger('mouseout');

							prevLink.trigger('mouseover');

						};						

					}

					else { container.find('a:eq(0)').trigger('mouseover'); }

					return false;

					break;

				case 39: // right arrow 

					if ($(event.target).is('.fg-menu-indicator')) {						

						if (menuType == 'flyout') {

							$(event.target).next().find('a:eq(0)').trigger('mouseover');

						}

						else if (menuType == 'ipod') {

							$(event.target).trigger('click');						

							setTimeout(function(){

								$(event.target).next().find('a:eq(0)').trigger('mouseover');

							}, options.crossSpeed);

						};				

					}; 

					return false;

					break;

				case 40: // down arrow 

					if ($(event.target).is('.' + options.linkHover)) {

						var nextLink = $(event.target).parent().next().find('a:eq(0)');						

						if (nextLink.size() > 0) {							

							$(event.target).trigger('mouseout');

							nextLink.trigger('mouseover');

						};				

					}

					else { container.find('a:eq(0)').trigger('mouseover'); }		

					return false;						

					break;

				case 27: // escape

					killAllMenus();

					break;

				case 13: // enter

					if ($(event.target).is('.fg-menu-indicator') && menuType == 'ipod') {							

						$(event.target).trigger('click');						

						setTimeout(function(){

							$(event.target).next().find('a:eq(0)').trigger('mouseover');

						}, options.crossSpeed);					

					}; 

					break;

			};			

		});

	};

	this.create = function(){	

		container.css({ width: options.width }).appendTo('body').find('ul:first').not('.fg-menu-breadcrumb').addClass('fg-menu');

		container.find('ul, li a').addClass('ui-corner-all');

		// aria roles & attributes

		container.find('ul').attr('role', 'menu').eq(0).attr('aria-activedescendant','active-menuitem').attr('aria-labelledby', caller.attr('id'));

		container.find('li').attr('role', 'menuitem');

		container.find('li:has(ul)').attr('aria-haspopup', 'true').find('ul').attr('aria-expanded', 'false');

		container.find('a').attr('tabindex', '-1');

		// when there are multiple levels of hierarchy, create flyout or drilldown menu

		if (container.find('ul').size() > 1) {

			if (options.flyOut) { menu.flyout(container, options); }

			else { menu.drilldown(container, options); }	

		}

		else {

			container.find('a').click(function(){

				menu.chooseItem(this);

				return false;

			});

		};	

		if (options.linkHover) {

			var allLinks = container.find('.fg-menu li a');

			allLinks.hover(

				function(){

					var menuitem = $(this);

					$('.'+options.linkHover).removeClass(options.linkHover).blur().parent().removeAttr('id');

					$(this).addClass(options.linkHover).focus().parent().attr('id','active-menuitem');

				},

				function(){

					$(this).removeClass(options.linkHover).blur().parent().removeAttr('id');

				}

			);

		};

		if (options.linkHoverSecondary) {

			container.find('.fg-menu li').hover(

				function(){

					$(this).siblings('li').removeClass(options.linkHoverSecondary);

					if (options.flyOutOnState) { $(this).siblings('li').find('a').removeClass(options.flyOutOnState); }

					$(this).addClass(options.linkHoverSecondary);

				},

				function(){ $(this).removeClass(options.linkHoverSecondary); }

			);

		};	

		menu.setPosition(container, caller, options);

		menu.menuExists = true;

	};

	this.chooseItem = function(item){

		// RBA menu.kill();

		// edit this for your own custom function/callback:

		$('#menuSelection').text($(item).text());	

		location.href = $(item).attr('href'); // RBA

	};

};

Menu.prototype.flyout = function(container, options) {

	var menu = this;

	this.resetFlyoutMenu = function(){

		var allLists = container.find('ul ul');

		allLists.removeClass('ui-widget-content').hide();	

	};

	container.addClass('fg-menu-flyout').find('li:has(ul)').each(function(){

		var linkWidth = container.width();

		var showTimer, hideTimer;

		var allSubLists = $(this).find('ul');		

		allSubLists.css({ left: linkWidth, width: linkWidth }).hide();

		$(this).find('a:eq(0)').addClass('fg-menu-indicator').html('<span>' + $(this).find('a:eq(0)').text() + '</span><span class="ui-icon '+options.nextMenuLink+'"></span>').hover(

			function(){

				clearTimeout(hideTimer);

				var subList = $(this).next();

				if (!fitVertical(subList, $(this).offset().top)) { subList.css({ top: 'auto', bottom: 0 }); };

				if (!fitHorizontal(subList, $(this).offset().left + 100)) { subList.css({ left: 'auto', right: linkWidth, 'z-index': 999 }); };

				showTimer = setTimeout(function(){

					subList.addClass('ui-widget-content').show(options.showSpeed).attr('aria-expanded', 'true');	

				}, 300);	

			},

			function(){

				clearTimeout(showTimer);

				var subList = $(this).next();

				hideTimer = setTimeout(function(){

					subList.removeClass('ui-widget-content').hide(options.showSpeed).attr('aria-expanded', 'false');

				}, 400);	

			}

		);

		$(this).find('ul a').hover(

			function(){

				clearTimeout(hideTimer);

				if ($(this).parents('ul').prev().is('a.fg-menu-indicator')) {

					$(this).parents('ul').prev().addClass(options.flyOutOnState);

				}

			},

			function(){

				hideTimer = setTimeout(function(){

					allSubLists.hide(options.showSpeed);

					container.find(options.flyOutOnState).removeClass(options.flyOutOnState);

				}, 500);	

			}

		);	

	});

	container.find('a').click(function(){

		menu.chooseItem(this);

		return false;

	});

};

Menu.prototype.drilldown = function(container, options) {

	var menu = this;	

	var topList = container.find('.fg-menu');	

	var breadcrumb = $('<ul class="fg-menu-breadcrumb ui-widget-header ui-corner-all ui-helper-clearfix"></ul>');

	var crumbDefaultHeader = $('<li class="fg-menu-breadcrumb-text">'+options.crumbDefaultText+'</li>');

	var firstCrumbText = (options.backLink) ? options.backLinkText : options.topLinkText;

	var firstCrumbClass = (options.backLink) ? 'fg-menu-prev-list' : 'fg-menu-all-lists';

	var firstCrumbLinkClass = (options.backLink) ? 'ui-state-default ui-corner-all' : '';

	var firstCrumbIcon = (options.backLink) ? '<span class="ui-icon ui-icon-triangle-1-w"></span>' : '';

	var firstCrumb = $('<li class="'+firstCrumbClass+'"><a href="#" class="'+firstCrumbLinkClass+'">'+firstCrumbIcon+firstCrumbText+'</a></li>');

	container.addClass('fg-menu-ipod');

	if (options.backLink) { breadcrumb.addClass('fg-menu-footer').appendTo(container).hide(); }

	else { breadcrumb.addClass('fg-menu-header').prependTo(container); };

	breadcrumb.append(crumbDefaultHeader);

	var checkMenuHeight = function(el){

		if (el.height() > options.maxHeight) { el.addClass('fg-menu-scroll') };	

		el.css({ height: options.maxHeight });

	};

	var resetChildMenu = function(el){ el.removeClass('fg-menu-scroll').removeClass('fg-menu-current').height('auto'); };