parade 0.8.0 → 0.8.1

data/README.md

@@ -318,14 +318,40 @@ If you want to trigger some JavaScript as soon as a certain page is shown or
 when you switch to the next or previous slide, you can bind a callback to a
 custom event:
 
-> ### parade:show
-> will be triggered as soon as you enter a page
-> ### parade:next
-> will be triggered when you switch to the next page
-> ### parade:incr
-> will be triggered when you advance to the next increment on the page
-> ### parade:prev
-> will be triggered when you switch to the previous page
+### Appearance
+
+* parade:willAppear
+
+> triggered before the slide is presented
+
+* parade:didAppear
+
+> triggered after the slide is presented
+
+* parade:show
+
+### Disappearance
+
+> triggered after the slide is presented
+
+* parade:willDisappear
+
+> triggered before the slide disappears
+
+* parade:didDisappear
+
+> triggered after the slide disppeared
+
+### Navigation
+
+* parade:next
+
+> triggered when an attempt to move to the next slide or incremental bullet point
+
+* parade:prev
+
+> triggered when an attempt to move back a slide or incremental bullet point
+
 
 These events are triggered on the "div.content" child of the slide, so you must
 add a custom and unique class to your SLIDE to identify it:
@@ -335,12 +361,14 @@ add a custom and unique class to your SLIDE to identify it:
 # 1st Example h1
 <script>
 // bind to custom event
-$(".custom_and_unique_class").bind("parade:show", function (event) {
+$(".custom_and_unique_class").live("parade:show", function (event) {
   // animate the h1
   var h1 = $(event.target).find("h1");
   h1.delay(500)
     .slideUp(300, function () { $(this).css({textDecoration: "line-through"}); })
     .slideDown(300);
+
+    return false;
 });
 </script>
 ```
@@ -350,17 +378,17 @@ h1-element will be animated, as soon as this event is triggered on that slide.
 
 If you bind an event handler to the custom events *parade:next* or
 *parade:prev*, you can prevent the default action (that is switching to the
-appropriate slide) by calling *event.preventDefault()*:
+appropriate slide) by returning *false*:
 
 ```markdown
 !SLIDE prevent_default
 # 2nd Example h1
 <script>
-$(".prevent_default").bind("parade:next", function (event) {
+$(".prevent_default").live("parade:next", function (event) {
   var h1 = $(event.target).find("h1");
   if (h1.css("text-decoration") === "none") {
-    event.preventDefault();
     h1.css({textDecoration: "line-through"})
+    return false;
   }
 });
 </script>
@@ -368,7 +396,7 @@ $(".prevent_default").bind("parade:next", function (event) {
 
 This will bind an event handler for *parade:next* to your slide. When you press
 the right arrow key the first time, the h1-element will be decorated. When you
-press the right array key another time, you will switch to the next slide.
+press the right arrow key another time, you will switch to the next slide.
 
 The same applies to the *parade:prev* event, of course.
 
@@ -382,7 +410,7 @@ be applied as soon as it is loaded.
 The content generated by the slide is wrapped with a *div* with the class .+content+ like this.
 
 ```html
-<div ref="intro/01_slide/1" class="content" style="margin-top: 210px;">
+<div class="content">
 <h1>jQuery &amp; Sinatra</h1>
 <h2>A Classy Combination</h2>
 </div>

data/bin/parade

@@ -106,24 +106,6 @@ command [:static] do |c|
 
 end
 
-pre do |global,command,options,args|
-  # Pre logic here
-  # Return true to proceed; false to abourt and not call the
-  # chosen command
-  true
-end
-
-post do |global,command,options,args|
-  # Post logic here
-end
-
-on_error do |exception|
-  # Error logic here
-  # return false to skip default error handling
-  true
-end
-
-
 # To allow an easier command-line to launch parade, the following format
 #
 #     `parade` is converted to `parade server .`
@@ -133,6 +115,6 @@ end
 parameters = ARGV
 
 parameters = [ "server", "." ] if parameters.empty?
-parameters.unshift "server" if parameters.count == 1
+parameters.unshift "server" if parameters.count == 1 and not parameters.include?("help")
 
 exit GLI.run(parameters)

data/lib/parade.rb

@@ -39,5 +39,5 @@ rescue LoadError
 }
 end
 
-require_relative 'parade/helpers/encode_image'
-require_relative 'parade/server'
+require 'parade/helpers/encode_image'
+require 'parade/server'

data/lib/parade/parsers/dsl.rb

@@ -1,4 +1,3 @@
-require_relative '../section'
 require_relative 'presentation_filepath_parser'
 
 module Parade

data/lib/parade/renderers/columns_renderer.rb

@@ -28,9 +28,7 @@ module Parade
       def render(content)
 
         html = Nokogiri::XML.fragment(content)
-        parser = CommandlineParser.new
-
-        html.css(".#{css_class}").each do |slide|
+        html.css(".content.#{css_class}").each do |slide|
 
           columns = []
           slop = []

data/lib/parade/renderers/command_line_renderer.rb

@@ -35,7 +35,7 @@ module Parade
       #
       def self.render(html_content)
 
-        html = Nokogiri::XML.fragment(html_content)
+        html = Nokogiri::HTML.fragment(html_content)
         parser = CommandlineParser.new
 
         html.css('.commandline pre').each do |code|
@@ -46,7 +46,23 @@ module Parade
             rule(:prompt => simple(:prompt), :input => simple(:input), :output => simple(:output)) do
               command = Nokogiri::XML::Node.new('pre', html)
               command.set_attribute('class', 'command')
-              command.content = "#{prompt} #{input}"
+
+              node_prompt = Nokogiri::XML::Node.new('span', html)
+              # The 'nv' class specifically gives it the same code syntax highlighting
+              node_prompt.set_attribute('class','prompt nv')
+              node_prompt.content = prompt
+
+              separator = Nokogiri::XML::Text.new(' ',html)
+
+              node_input = Nokogiri::XML::Node.new('span',html)
+              node_input.content = input
+              # The 'nb' class specifically gives it the same syntax highlighting
+              node_input.set_attribute('class','input nb')
+
+              command << node_prompt
+              command << separator
+              command << node_input
+
               code << command
 
               # Add newline after the input so that users can

data/lib/parade/section.rb

@@ -25,6 +25,14 @@ module Parade
       @title ? @title : (section ? section.title : "Section")
     end
 
+    # @return [Array<String>] the name of all the parent sections. In this
+    #   instance we are not interested in sections without names. These are
+    #   the lowest level sections and are usually within a parent section that
+    #   they are acurrately named.
+    def hierarchy
+      Array(@title) + (section ? section.hierarchy : [])
+    end
+
     # @return [String] the description of the section
     attr_accessor :description
 

data/lib/parade/server.rb

@@ -1,3 +1,4 @@
+require_relative 'section'
 require_relative "parsers/dsl"
 require_relative 'renderers/update_image_paths'
 
@@ -5,6 +6,9 @@ require_relative 'features/live_ruby'
 require_relative 'features/pdf_presentation'
 require_relative 'features/preshow'
 
+require_relative 'slide_post_renderers'
+require_relative 'slide_pre_renderers'
+
 module Parade
 
   class Server < Sinatra::Application
@@ -73,7 +77,7 @@ module Parade
       # presentation directory.
       #
       def custom_css_files
-        custom_resource "css" do |path| 
+        custom_resource "css" do |path|
           css path
         end
       end
@@ -83,7 +87,7 @@ module Parade
       # presentation directory.
       #
       def custom_js_files
-        custom_resource "js" do |path| 
+        custom_resource "js" do |path|
           js path
         end
       end

data/lib/parade/slide.rb

@@ -1,8 +1,4 @@
 require_relative 'metadata'
-require_relative 'renderers/html_with_pygments'
-require_relative 'renderers/command_line_renderer'
-require_relative 'renderers/special_paragraph_renderer'
-require_relative 'renderers/columns_renderer'
 
 module Parade
 
@@ -24,8 +20,8 @@ module Parade
       section ? section.title : "Slide"
     end
 
-    def reference
-      "#{section ? section.title : 'slide'}/#{sequence}"
+    def hierarchy
+      section.hierarchy
     end
 
     #
@@ -72,15 +68,15 @@ module Parade
     #   information for the slide
     #
     attr_accessor :metadata
-    
+
     # @return [String] the CSS classes for the slide
     def slide_classes
-      title.downcase.gsub(' ','-')
+      [ title.downcase.gsub(' ','-') ] + content_classes
     end
 
     # @return [String] the CSS classes for the content section of the slide
     def content_classes
-      metadata.classes.join(" ")
+      metadata.classes
     end
 
     # @return [String] the transition style for the slide
@@ -94,13 +90,11 @@ module Parade
     end
 
     def pre_renderers
-      [ Renderers::HTMLwithPygments ]
+      SlidePreRenderers.renderers
     end
 
     def post_renderers
-      [ Renderers::SpecialParagraphRenderer,
-        Renderers::CommandLineRenderer,
-        Renderers::ColumnsRenderer.new(:css_class => 'columns',:html_element => "h2",:segments => 12) ]
+      SlidePostRenderers.renderers
     end
 
     # @return [String] HTML rendering of the slide's raw contents.

data/lib/parade/slide_post_renderers.rb

@@ -0,0 +1,24 @@
+require_relative 'renderers/command_line_renderer'
+require_relative 'renderers/special_paragraph_renderer'
+require_relative 'renderers/columns_renderer'
+
+module Parade
+
+  module SlidePostRenderers
+    extend self
+
+    def register(renderer)
+      renderers.push renderer
+    end
+
+    def renderers
+      @renderers ||= []
+    end
+  end
+
+  SlidePostRenderers.register Renderers::SpecialParagraphRenderer
+  SlidePostRenderers.register Renderers::CommandLineRenderer
+  SlidePostRenderers.register Renderers::ColumnsRenderer.new(css_class: 'columns',
+    html_element: "h2", segments: 12)
+
+end

data/lib/parade/slide_pre_renderers.rb

@@ -0,0 +1,19 @@
+require_relative 'renderers/html_with_pygments'
+
+module Parade
+
+  module SlidePreRenderers
+    extend self
+
+    def register(renderer)
+      renderers.push renderer
+    end
+
+    def renderers
+      @renderers ||= []
+    end
+  end
+
+  SlidePreRenderers.register Renderers::HTMLwithPygments
+
+end

data/lib/parade/version.rb

@@ -1,3 +1,3 @@
 module Parade
-  VERSION = '0.8.0'
+  VERSION = '0.8.1'
 end

data/lib/public/css/default.css

@@ -0,0 +1,3 @@
+@media screen {
+
+}

data/lib/public/css/parade.css

@@ -1,6 +1,6 @@
 @media screen {
   body {
-			font-size: 100%;
+      font-size: 100%;
       font-family: "Gill Sans", Helvetica, Arial, sans-serif;
       background:#333;
       overflow:hidden;
@@ -39,7 +39,7 @@
       border-top-right-radius: 3px;
       z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
   }
-  
+
   #pauseScreen {
       background: rgba(0, 0, 0, 0.85);
       width: 100%;
@@ -104,9 +104,9 @@
 
 /* plain (non-bullet) text */
 .content > p {
-	font-size: 2em;
+  font-size: 2em;
     margin: 1em;
-	text-align: center;
+  text-align: center;
 }
 
 .content > pre {
@@ -139,6 +139,9 @@
   display: block;
 }
 
+.content.columns .grid_12 p {
+  font-size: 200%;
+}
 
 .content.columns .grid_6 p {
   font-size: 150%;
@@ -165,9 +168,9 @@
 /* numbered lists are numbered */
 .content ol {
     margin-left: 40px;
-	font-size: 3em;
-	text-align: left;
-	padding-left: 40px;
+  font-size: 3em;
+  text-align: left;
+  padding-left: 40px;
 }
 .content ol > li {
     list-style: decimal;
@@ -180,9 +183,9 @@
     list-style: disc;
 }
 .content > ul {
-	font-size: 3em;
-	text-align: left;
-	padding-left: 40px;
+  font-size: 3em;
+  text-align: left;
+  padding-left: 40px;
 }
 .content > ul > li {
     padding: .5em;
@@ -192,8 +195,8 @@
 /* ironically, normal lists have bullets and 'bullets' lists don't */
 .bullets > ul {
     list-style: none;
-	font-size: 3em;
-	padding-left: 0px;
+  font-size: 3em;
+  padding-left: 0px;
 }
 .bullets > ul > li {
     text-align: center;
@@ -243,7 +246,7 @@
 .subsection h1 {
     background: #008;
     color: #fff;
-	padding: .25em;
+  padding: .25em;
 }
 
 .small {

data/lib/public/js/fg.menu.js

@@ -1,11 +1,11 @@
-/*-------------------------------------------------------------------- 
+/*--------------------------------------------------------------------
 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/
-		
+  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.
 --------------------------------------------------------------------*/
@@ -14,531 +14,567 @@ Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL
 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;
-	});	
+  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(){
+    debugger
+    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' ;
-			
-			// vi bindings
-			switch(e) {
-				case 72: // 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 75: // 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 76: // 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 74: // 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){
-		menu.kill();
-		gotoSlide($(item).attr('rel'));
-		$('#navmenu').hide();
-	};
+  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;
+
+  $.subscribe('navigation:show',$.proxy(function() {
+    this.showMenu();
+  },this));
+  $.subscribe('navigation:hidden',$.proxy(function() {
+    this.currentSelection = this.htmlContent.find('a:first');
+    this.killAllMenus();
+  },this));
+  $.subscribe('navigation:left',$.proxy(function() {
+    this.goLeft();
+  },this));
+  $.subscribe('navigation:right',$.proxy(function() {
+    this.goRight();
+  },this));
+  $.subscribe('navigation:down',$.proxy(function() {
+    this.goDown();
+  },this));
+  $.subscribe('navigation:up',$.proxy(function() {
+    this.goUp();
+  },this));
+  $.subscribe('navigation:selection',$.proxy(function() {
+    this.makeSelection();
+  },this));
+
+  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);
+
+  this.options = options;
+
+  this.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;
+  };
+
+  this.showLoading = function(){
+    caller.addClass(options.loadingState);
+  };
+
+  this.menuIsFlyout = function() { return true; }
+  this.menuIsIpod = function() { return false; }
+
+  this.currentSelectionIsMenu = function() {
+    return this.currentSelection.hasClass('fg-menu-indicator');
+  }
+
+  this.currentSelectionIsMenuItem = function() {
+    return !this.currentSelectionIsMenu();
+  }
+
+  this.goLeft = function() {
+
+    if (this.menuIsFlyout()) {
+      this.htmlContent.trigger('mouseout');
+      var parentItem = $('.'+this.options.flyOutOnState);
+
+      if (parentItem.length > 1) {
+        parentItem.trigger('mouseover');
+        this.currentSelection = $(parentItem[parentItem.length - 1]);
+      };
+    }
+
+    if (this.menuIsIpod()) {
+      this.htmlContent.trigger('mouseout');
+      if (this.htmlContent.find('.fg-menu-footer').find('a').size() > 0) { this.htmlContent.find('.fg-menu-footer').find('a').trigger('click'); };
+      if (this.htmlContent.find('.fg-menu-header').find('a').size() > 0) { this.htmlContent.find('.fg-menu-current-crumb').prev().find('a').trigger('click'); };
+      if (this.htmlContent.find('.fg-menu-current').prev().is('.fg-menu-indicator')) {
+        this.htmlContent.find('.fg-menu-current').prev().trigger('mouseover');
+      }
+    };
+  }
+
+  this.goRight = function() {
+    if (this.currentSelectionIsMenuItem()) { return; }
+
+    if (this.menuIsFlyout()) {
+      var newSelection = this.currentSelection.next().find('a:eq(0)');
+      newSelection.trigger('mouseover');
+      this.currentSelection = newSelection;
+    }
+
+    if (this.menuIsIpod()) {
+      this.currentSelection.trigger('click');
+      setTimeout(function(){
+        var newSelection = $(this.currentSelection).next().find('a:eq(0)');
+        newSelection.trigger('mouseover');
+        this.currentSelection = newSelection;
+      }, options.crossSpeed);
+    }
+  }
+
+  this.goDown = function() {
+
+    if (this.currentSelection) {
+      var nextLink = $(this.currentSelection).parent().next().find('a:eq(0)');
+      if (nextLink.size() > 0) {
+        $(this.currentSelection).trigger('mouseout');
+        nextLink.trigger('mouseover');
+        this.currentSelection = nextLink
+      };
+    }
+    else { container.find('a:eq(0)').trigger('mouseover'); }
+  }
+
+  this.goUp = function() {
+    if (this.currentSelection) {
+      var prevLink = $(this.currentSelection).parent().prev().find('a:eq(0)');
+      if (prevLink.size() > 0) {
+        $(this.currentSelection).trigger('mouseout');
+        prevLink.trigger('mouseover');
+        this.currentSelection = prevLink;
+      };
+    }
+    else { container.find('a:eq(0)').trigger('mouseover'); }
+
+  }
+
+  this.makeSelection = function() {
+    if ($(event.target).is('.fg-menu-indicator') && this.menuIsIpod()) {
+      $(event.target).trigger('click');
+      setTimeout(function(){
+        $(event.target).next().find('a:eq(0)').trigger('mouseover');
+      }, options.crossSpeed);
+    };
+  }
+
+  this.showMenu = function(){
+    this.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);
+
+    this.htmlContent = $('.fg-menu');
+    this.currentSelection = this.htmlContent.find('a:first');
+    this.currentSelection.addClass(options.linkHover);
+    this.currentSelection.trigger('mouseover');
+  };
+
+  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){
+    $.publish('navigation:hidden');
+    var slideNumber = $(item).attr('rel');
+    $.publish('presentation:slide:location:change',slideNumber);
+  };
 };
 
 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;
-	});
+  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();
+        // Previously this would make sure that the items rocked up past the top
+        // when the list was too long. I would rather the list run down the length
+        // of the page instead of not be accessible.
+        // TODO: make it scrollable or provide a better interface
+
+        // 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'); };
-	
-	this.resetDrilldownMenu = function(){
-		$('.fg-menu-current').removeClass('fg-menu-current');
-		topList.animate({ left: 0 }, options.crossSpeed, function(){
-			$(this).find('ul').each(function(){
-				$(this).hide();
-				resetChildMenu($(this));				
-			});
-			topList.addClass('fg-menu-current');			
-		});		
-		$('.fg-menu-all-lists').find('span').remove();	
-		breadcrumb.empty().append(crumbDefaultHeader);		
-		$('.fg-menu-footer').empty().hide();	
-		checkMenuHeight(topList);		
-	};
-	
-	topList
-		.addClass('fg-menu-content fg-menu-current ui-widget-content ui-helper-clearfix')
-		.css({ width: container.width() })
-		.find('ul')
-			.css({ width: container.width(), left: container.width() })
-			.addClass('ui-widget-content')
-			.hide();		
-	checkMenuHeight(topList);	
-	
-	topList.find('a').each(function(){
-		// if the link opens a child menu:
-		if ($(this).next().is('ul')) {
-			$(this)
-				.addClass('fg-menu-indicator')
-				.each(function(){ $(this).html('<span>' + $(this).text() + '</span><span class="ui-icon '+options.nextMenuLink+'"></span>'); })
-				.click(function(){ // ----- show the next menu			
-					var nextList = $(this).next();
-		    		var parentUl = $(this).parents('ul:eq(0)');   		
-		    		var parentLeft = (parentUl.is('.fg-menu-content')) ? 0 : parseFloat(topList.css('left'));    		
-		    		var nextLeftVal = Math.round(parentLeft - parseFloat(container.width()));
-		    		var footer = $('.fg-menu-footer');
-		    		
-		    		// show next menu   		
-		    		resetChildMenu(parentUl);
-		    		checkMenuHeight(nextList);
-					topList.animate({ left: nextLeftVal }, options.crossSpeed);						
-		    		nextList.show().addClass('fg-menu-current').attr('aria-expanded', 'true');    
-		    		
-		    		var setPrevMenu = function(backlink){
-		    			var b = backlink;
-		    			var c = $('.fg-menu-current');
-			    		var prevList = c.parents('ul:eq(0)');
-			    		c.hide().attr('aria-expanded', 'false');
-		    			resetChildMenu(c);
-		    			checkMenuHeight(prevList);
-			    		prevList.addClass('fg-menu-current').attr('aria-expanded', 'true');
-			    		if (prevList.hasClass('fg-menu-content')) { b.remove(); footer.hide(); };
-		    		};		
-		
-					// initialize "back" link
-					if (options.backLink) {
-						if (footer.find('a').size() == 0) {
-							footer.show();
-							$('<a href="#"><span class="ui-icon ui-icon-triangle-1-w"></span> <span>Back</span></a>')
-								.appendTo(footer)
-								.click(function(){ // ----- show the previous menu
-									var b = $(this);
-						    		var prevLeftVal = parseFloat(topList.css('left')) + container.width();		    						    		
-						    		topList.animate({ left: prevLeftVal },  options.crossSpeed, function(){
-						    			setPrevMenu(b);
-						    		});			
-									return false;
-								});
-						}
-					}
-					// or initialize top breadcrumb
-		    		else { 
-		    			if (breadcrumb.find('li').size() == 1){				
-							breadcrumb.empty().append(firstCrumb);
-							firstCrumb.find('a').click(function(){
-								menu.resetDrilldownMenu();
-								return false;
-							});
-						}
-						$('.fg-menu-current-crumb').removeClass('fg-menu-current-crumb');
-						var crumbText = $(this).find('span:eq(0)').text();
-						var newCrumb = $('<li class="fg-menu-current-crumb"><a href="javascript://" class="fg-menu-crumb">'+crumbText+'</a></li>');	
-						newCrumb
-							.appendTo(breadcrumb)
-							.find('a').click(function(){
-								if ($(this).parent().is('.fg-menu-current-crumb')){
-									menu.chooseItem(this);
-								}
-								else {
-									var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * 180;
-									topList.animate({ left: newLeftVal }, options.crossSpeed, function(){
-										setPrevMenu();
-									});
-								
-									// make this the current crumb, delete all breadcrumbs after this one, and navigate to the relevant menu
-									$(this).parent().addClass('fg-menu-current-crumb').find('span').remove();
-									$(this).parent().nextAll().remove();									
-								};
-								return false;
-							});
-						newCrumb.prev().append(' <span class="ui-icon '+options.nextCrumbLink+'"></span>');
-		    		};			
-		    		return false;    		
-    			});
-		}
-		// if the link is a leaf node (doesn't open a child menu)
-		else {
-			$(this).click(function(){
-				menu.chooseItem(this);
-				return false;
-			});
-		};
-	});
+  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'); };
+
+  this.resetDrilldownMenu = function(){
+    $('.fg-menu-current').removeClass('fg-menu-current');
+    topList.animate({ left: 0 }, options.crossSpeed, function(){
+      $(this).find('ul').each(function(){
+        $(this).hide();
+        resetChildMenu($(this));
+      });
+      topList.addClass('fg-menu-current');
+    });
+    $('.fg-menu-all-lists').find('span').remove();
+    breadcrumb.empty().append(crumbDefaultHeader);
+    $('.fg-menu-footer').empty().hide();
+    checkMenuHeight(topList);
+  };
+
+  topList
+    .addClass('fg-menu-content fg-menu-current ui-widget-content ui-helper-clearfix')
+    .css({ width: container.width() })
+    .find('ul')
+      .css({ width: container.width(), left: container.width() })
+      .addClass('ui-widget-content')
+      .hide();
+  checkMenuHeight(topList);
+
+  topList.find('a').each(function(){
+    // if the link opens a child menu:
+    if ($(this).next().is('ul')) {
+      $(this)
+        .addClass('fg-menu-indicator')
+        .each(function(){ $(this).html('<span>' + $(this).text() + '</span><span class="ui-icon '+options.nextMenuLink+'"></span>'); })
+        .click(function(){ // ----- show the next menu
+          var nextList = $(this).next();
+            var parentUl = $(this).parents('ul:eq(0)');
+            var parentLeft = (parentUl.is('.fg-menu-content')) ? 0 : parseFloat(topList.css('left'));
+            var nextLeftVal = Math.round(parentLeft - parseFloat(container.width()));
+            var footer = $('.fg-menu-footer');
+
+            // show next menu
+            resetChildMenu(parentUl);
+            checkMenuHeight(nextList);
+          topList.animate({ left: nextLeftVal }, options.crossSpeed);
+            nextList.show().addClass('fg-menu-current').attr('aria-expanded', 'true');
+
+            var setPrevMenu = function(backlink){
+              var b = backlink;
+              var c = $('.fg-menu-current');
+              var prevList = c.parents('ul:eq(0)');
+              c.hide().attr('aria-expanded', 'false');
+              resetChildMenu(c);
+              checkMenuHeight(prevList);
+              prevList.addClass('fg-menu-current').attr('aria-expanded', 'true');
+              if (prevList.hasClass('fg-menu-content')) { b.remove(); footer.hide(); };
+            };
+
+          // initialize "back" link
+          if (options.backLink) {
+            if (footer.find('a').size() == 0) {
+              footer.show();
+              $('<a href="#"><span class="ui-icon ui-icon-triangle-1-w"></span> <span>Back</span></a>')
+                .appendTo(footer)
+                .click(function(){ // ----- show the previous menu
+                  var b = $(this);
+                    var prevLeftVal = parseFloat(topList.css('left')) + container.width();
+                    topList.animate({ left: prevLeftVal },  options.crossSpeed, function(){
+                      setPrevMenu(b);
+                    });
+                  return false;
+                });
+            }
+          }
+          // or initialize top breadcrumb
+            else {
+              if (breadcrumb.find('li').size() == 1){
+              breadcrumb.empty().append(firstCrumb);
+              firstCrumb.find('a').click(function(){
+                menu.resetDrilldownMenu();
+                return false;
+              });
+            }
+            $('.fg-menu-current-crumb').removeClass('fg-menu-current-crumb');
+            var crumbText = $(this).find('span:eq(0)').text();
+            var newCrumb = $('<li class="fg-menu-current-crumb"><a href="javascript://" class="fg-menu-crumb">'+crumbText+'</a></li>');
+            newCrumb
+              .appendTo(breadcrumb)
+              .find('a').click(function(){
+                if ($(this).parent().is('.fg-menu-current-crumb')){
+                  menu.chooseItem(this);
+                }
+                else {
+                  var newLeftVal = - ($('.fg-menu-current').parents('ul').size() - 1) * 180;
+                  topList.animate({ left: newLeftVal }, options.crossSpeed, function(){
+                    setPrevMenu();
+                  });
+
+                  // make this the current crumb, delete all breadcrumbs after this one, and navigate to the relevant menu
+                  $(this).parent().addClass('fg-menu-current-crumb').find('span').remove();
+                  $(this).parent().nextAll().remove();
+                };
+                return false;
+              });
+            newCrumb.prev().append(' <span class="ui-icon '+options.nextCrumbLink+'"></span>');
+            };
+            return false;
+          });
+    }
+    // if the link is a leaf node (doesn't open a child menu)
+    else {
+      $(this).click(function(){
+        menu.chooseItem(this);
+        return false;
+      });
+    };
+  });
 };
 
 
 /* Menu.prototype.setPosition parameters (defaults noted with *):
-	referrer = the link (or other element) used to show the overlaid object 
-	settings = can override the defaults:
-		- posX/Y: where the top left corner of the object should be positioned in relation to its referrer.
-				X: left*, center, right
-				Y: top, center, bottom*
-		- offsetX/Y: the number of pixels to be offset from the x or y position.  Can be a positive or negative number.
-		- directionH/V: where the entire menu should appear in relation to its referrer.
-				Horizontal: left*, right
-				Vertical: up, down*
-		- detectH/V: detect the viewport horizontally / vertically
-		- linkToFront: copy the menu link and place it on top of the menu (visual effect to make it look like it overlaps the object) */
-
-Menu.prototype.setPosition = function(widget, caller, options) { 
-	var el = widget;
-	var referrer = caller;
-	var dims = {
-		refX: referrer.offset().left,
-		refY: referrer.offset().top,
-		refW: referrer.getTotalWidth(),
-		refH: referrer.getTotalHeight()
-	};	
-	var options = options;
-	var xVal, yVal;
-	
-	var helper = $('<div class="positionHelper"></div>');
-	helper.css({ position: 'absolute', left: dims.refX, top: dims.refY, width: dims.refW, height: dims.refH });
-	el.wrap(helper);
-	
-	// get X pos
-	switch(options.positionOpts.posX) {
-		case 'left': 	xVal = 0; 
-			break;				
-		case 'center': xVal = dims.refW / 2;
-			break;				
-		case 'right': xVal = dims.refW;
-			break;
-	};
-	
-	// get Y pos
-	switch(options.positionOpts.posY) {
-		case 'top': 	yVal = 0;
-			break;				
-		case 'center': yVal = dims.refH / 2;
-			break;				
-		case 'bottom': yVal = dims.refH;
-			break;
-	};
-	
-	// add the offsets (zero by default)
-	xVal += options.positionOpts.offsetX;
-	yVal += options.positionOpts.offsetY;
-	
-	// position the object vertically
-	if (options.positionOpts.directionV == 'up') {
-		el.css({ top: 'auto', bottom: yVal });
-		if (options.positionOpts.detectV && !fitVertical(el)) {
-			el.css({ bottom: 'auto', top: yVal });
-		}
-	} 
-	else {
-		el.css({ bottom: 'auto', top: yVal });
-		if (options.positionOpts.detectV && !fitVertical(el)) {
-			el.css({ top: 'auto', bottom: yVal });
-		}
-	};
-	
-	// and horizontally
-	if (options.positionOpts.directionH == 'left') {
-		el.css({ left: 'auto', right: xVal });
-		if (options.positionOpts.detectH && !fitHorizontal(el)) {
-			el.css({ right: 'auto', left: xVal });
-		}
-	} 
-	else {
-		el.css({ right: 'auto', left: xVal });
-		if (options.positionOpts.detectH && !fitHorizontal(el)) {
-			el.css({ left: 'auto', right: xVal });
-		}
-	};
-	
-	// if specified, clone the referring element and position it so that it appears on top of the menu
-	if (options.positionOpts.linkToFront) {
-		referrer.clone().addClass('linkClone').css({
-			position: 'absolute', 
-			top: 0, 
-			right: 'auto', 
-			bottom: 'auto', 
-			left: 0, 
-			width: referrer.width(), 
-			height: referrer.height()
-		}).insertAfter(el);
-	};
+  referrer = the link (or other element) used to show the overlaid object
+  settings = can override the defaults:
+    - posX/Y: where the top left corner of the object should be positioned in relation to its referrer.
+        X: left*, center, right
+        Y: top, center, bottom*
+    - offsetX/Y: the number of pixels to be offset from the x or y position.  Can be a positive or negative number.
+    - directionH/V: where the entire menu should appear in relation to its referrer.
+        Horizontal: left*, right
+        Vertical: up, down*
+    - detectH/V: detect the viewport horizontally / vertically
+    - linkToFront: copy the menu link and place it on top of the menu (visual effect to make it look like it overlaps the object) */
+
+Menu.prototype.setPosition = function(widget, caller, options) {
+  var el = widget;
+  var referrer = caller;
+  var dims = {
+    refX: referrer.offset().left,
+    refY: referrer.offset().top,
+    refW: referrer.getTotalWidth(),
+    refH: referrer.getTotalHeight()
+  };
+  var options = options;
+  var xVal, yVal;
+
+  var helper = $('<div class="positionHelper"></div>');
+  helper.css({ position: 'absolute', left: dims.refX, top: dims.refY, width: dims.refW, height: dims.refH });
+  el.wrap(helper);
+
+  // get X pos
+  switch(options.positionOpts.posX) {
+    case 'left':   xVal = 0;
+      break;
+    case 'center': xVal = dims.refW / 2;
+      break;
+    case 'right': xVal = dims.refW;
+      break;
+  };
+
+  // get Y pos
+  switch(options.positionOpts.posY) {
+    case 'top':   yVal = 0;
+      break;
+    case 'center': yVal = dims.refH / 2;
+      break;
+    case 'bottom': yVal = dims.refH;
+      break;
+  };
+
+  // add the offsets (zero by default)
+  xVal += options.positionOpts.offsetX;
+  yVal += options.positionOpts.offsetY;
+
+  // position the object vertically
+  if (options.positionOpts.directionV == 'up') {
+    el.css({ top: 'auto', bottom: yVal });
+    if (options.positionOpts.detectV && !fitVertical(el)) {
+      el.css({ bottom: 'auto', top: yVal });
+    }
+  }
+  else {
+    el.css({ bottom: 'auto', top: yVal });
+    if (options.positionOpts.detectV && !fitVertical(el)) {
+      el.css({ top: 'auto', bottom: yVal });
+    }
+  };
+
+  // and horizontally
+  if (options.positionOpts.directionH == 'left') {
+    el.css({ left: 'auto', right: xVal });
+    if (options.positionOpts.detectH && !fitHorizontal(el)) {
+      el.css({ right: 'auto', left: xVal });
+    }
+  }
+  else {
+    el.css({ right: 'auto', left: xVal });
+    if (options.positionOpts.detectH && !fitHorizontal(el)) {
+      el.css({ left: 'auto', right: xVal });
+    }
+  };
+
+  // if specified, clone the referring element and position it so that it appears on top of the menu
+  if (options.positionOpts.linkToFront) {
+    referrer.clone().addClass('linkClone').css({
+      position: 'absolute',
+      top: 0,
+      right: 'auto',
+      bottom: 'auto',
+      left: 0,
+      width: referrer.width(),
+      height: referrer.height()
+    }).insertAfter(el);
+  };
 };
 
 
@@ -547,99 +583,99 @@ Menu.prototype.setPosition = function(widget, caller, options) {
 function sortBigToSmall(a, b) { return b - a; };
 
 jQuery.fn.getTotalWidth = function(){
-	return $(this).width() + parseInt($(this).css('paddingRight')) + parseInt($(this).css('paddingLeft')) + parseInt($(this).css('borderRightWidth')) + parseInt($(this).css('borderLeftWidth'));
+  return $(this).width() + parseInt($(this).css('paddingRight')) + parseInt($(this).css('paddingLeft')) + parseInt($(this).css('borderRightWidth')) + parseInt($(this).css('borderLeftWidth'));
 };
 
 jQuery.fn.getTotalHeight = function(){
-	return $(this).height() + parseInt($(this).css('paddingTop')) + parseInt($(this).css('paddingBottom')) + parseInt($(this).css('borderTopWidth')) + parseInt($(this).css('borderBottomWidth'));
+  return $(this).height() + parseInt($(this).css('paddingTop')) + parseInt($(this).css('paddingBottom')) + parseInt($(this).css('borderTopWidth')) + parseInt($(this).css('borderBottomWidth'));
 };
 
 function getScrollTop(){
-	return self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+  return self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
 };
 
 function getScrollLeft(){
-	return self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
+  return self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
 };
 
 function getWindowHeight(){
-	var de = document.documentElement;
-	return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
+  var de = document.documentElement;
+  return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
 };
 
 function getWindowWidth(){
-	var de = document.documentElement;
-	return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
+  var de = document.documentElement;
+  return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
 };
 
 /* Utilities to test whether an element will fit in the viewport
-	Parameters:
-	el = element to position, required
-	leftOffset / topOffset = optional parameter if the offset cannot be calculated (i.e., if the object is in the DOM but is set to display: 'none') */
-	
+  Parameters:
+  el = element to position, required
+  leftOffset / topOffset = optional parameter if the offset cannot be calculated (i.e., if the object is in the DOM but is set to display: 'none') */
+
 function fitHorizontal(el, leftOffset){
-	var leftVal = parseInt(leftOffset) || $(el).offset().left;
-	return (leftVal + $(el).width() <= getWindowWidth() + getScrollLeft() && leftVal - getScrollLeft() >= 0);
+  var leftVal = parseInt(leftOffset) || $(el).offset().left;
+  return (leftVal + $(el).width() <= getWindowWidth() + getScrollLeft() && leftVal - getScrollLeft() >= 0);
 };
 
 function fitVertical(el, topOffset){
-	var topVal = parseInt(topOffset) || $(el).offset().top;
-	return (topVal + $(el).height() <= getWindowHeight() + getScrollTop() && topVal - getScrollTop() >= 0);
+  var topVal = parseInt(topOffset) || $(el).offset().top;
+  return (topVal + $(el).height() <= getWindowHeight() + getScrollTop() && topVal - getScrollTop() >= 0);
 };
 
-/*-------------------------------------------------------------------- 
+/*--------------------------------------------------------------------
  * javascript method: "pxToEm"
  * by:
-   Scott Jehl (scott@filamentgroup.com) 
+   Scott Jehl (scott@filamentgroup.com)
    Maggie Wachs (maggie@filamentgroup.com)
    http://www.filamentgroup.com
  *
  * Copyright (c) 2008 Filament Group
  * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
  *
- * Description: Extends the native Number and String objects with pxToEm method. pxToEm converts a pixel value to ems depending on inherited font size.  
+ * Description: Extends the native Number and String objects with pxToEm method. pxToEm converts a pixel value to ems depending on inherited font size.
  * Article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/
- * Demo: http://www.filamentgroup.com/examples/pxToEm/	 	
- *							
- * Options:  	 								
- 		scope: string or jQuery selector for font-size scoping
- 		reverse: Boolean, true reverses the conversion to em-px
- * Dependencies: jQuery library						  
+ * Demo: http://www.filamentgroup.com/examples/pxToEm/
+ *
+ * Options:
+     scope: string or jQuery selector for font-size scoping
+     reverse: Boolean, true reverses the conversion to em-px
+ * Dependencies: jQuery library
  * Usage Example: myPixelValue.pxToEm(); or myPixelValue.pxToEm({'scope':'#navigation', reverse: true});
  *
- * Version: 2.0, 08.01.2008 
+ * Version: 2.0, 08.01.2008
  * Changelog:
- *		08.02.2007 initial Version 1.0
- *		08.01.2008 - fixed font-size calculation for IE
+ *    08.02.2007 initial Version 1.0
+ *    08.01.2008 - fixed font-size calculation for IE
 --------------------------------------------------------------------*/
 
 Number.prototype.pxToEm = String.prototype.pxToEm = function(settings){
-	//set defaults
-	settings = jQuery.extend({
-		scope: 'body',
-		reverse: false
-	}, settings);
-	
-	var pxVal = (this == '') ? 0 : parseFloat(this);
-	var scopeVal;
-	var getWindowWidth = function(){
-		var de = document.documentElement;
-		return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
-	};	
-	
-	/* When a percentage-based font-size is set on the body, IE returns that percent of the window width as the font-size. 
-		For example, if the body font-size is 62.5% and the window width is 1000px, IE will return 625px as the font-size. 	
-		When this happens, we calculate the correct body font-size (%) and multiply it by 16 (the standard browser font size) 
-		to get an accurate em value. */
-				
-	if (settings.scope == 'body' && $.browser.msie && (parseFloat($('body').css('font-size')) / getWindowWidth()).toFixed(1) > 0.0) {
-		var calcFontSize = function(){		
-			return (parseFloat($('body').css('font-size'))/getWindowWidth()).toFixed(3) * 16;
-		};
-		scopeVal = calcFontSize();
-	}
-	else { scopeVal = parseFloat(jQuery(settings.scope).css("font-size")); };
-			
-	var result = (settings.reverse == true) ? (pxVal * scopeVal).toFixed(2) + 'px' : (pxVal / scopeVal).toFixed(2) + 'em';
-	return result;
+  //set defaults
+  settings = jQuery.extend({
+    scope: 'body',
+    reverse: false
+  }, settings);
+
+  var pxVal = (this == '') ? 0 : parseFloat(this);
+  var scopeVal;
+  var getWindowWidth = function(){
+    var de = document.documentElement;
+    return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
+  };
+
+  /* When a percentage-based font-size is set on the body, IE returns that percent of the window width as the font-size.
+    For example, if the body font-size is 62.5% and the window width is 1000px, IE will return 625px as the font-size.
+    When this happens, we calculate the correct body font-size (%) and multiply it by 16 (the standard browser font size)
+    to get an accurate em value. */
+
+  if (settings.scope == 'body' && $.browser.msie && (parseFloat($('body').css('font-size')) / getWindowWidth()).toFixed(1) > 0.0) {
+    var calcFontSize = function(){
+      return (parseFloat($('body').css('font-size'))/getWindowWidth()).toFixed(3) * 16;
+    };
+    scopeVal = calcFontSize();
+  }
+  else { scopeVal = parseFloat(jQuery(settings.scope).css("font-size")); };
+
+  var result = (settings.reverse == true) ? (pxVal * scopeVal).toFixed(2) + 'px' : (pxVal / scopeVal).toFixed(2) + 'em';
+  return result;
 };