add drop down menus to tracks

app/views/layouts/standard.html.erb

@@ -7,12 +7,13 @@
     <% end -%>
   <% bundle do %>
     <%= javascript_include_tag *%w[
-                                    prototype effects dragdrop controls application
+                                    jquery-1.2.6.min hoverIntent superfish prototype
+                                    effects dragdrop controls application
                                     calendar calendar-en calendar-setup
                                     accesskey-hints todo-items niftycube
                                     protoload flashobject lowpro
                                   ] %>
-    <%= stylesheet_link_tag *%w[ standard calendar-system niftyCorners] %>
+    <%= stylesheet_link_tag *%w[ standard superfish calendar-system niftyCorners] %>
   <% end %>
   <%= javascript_include_tag :unobtrusive %>
   <%= stylesheet_link_tag "print", :media => "print" %>
@@ -24,6 +25,15 @@
       href="<%= search_plugin_path %>" />
 
 <script type="text/javascript">
+jQuery(document).ready(function() {
+  jQuery('ul.sf-menu').superfish({
+    delay: 250,
+    animation:   {opacity:'show',height:'show'},
+    autoArrows: false,
+    dropShadows: false,
+    speed: 'fast'
+  });
+});
 window.onload=function(){
   Nifty("div#todo_new_action_container","normal");
   if ($('flash').visible()) { new Effect.Fade("flash",{duration:5.0}); }
@@ -52,23 +62,37 @@ window.onload=function(){
 </div>
 
 <div id="navcontainer">
-<ul id="navlist">
+  <ul class="sf-menu">
     <li><%= navigation_link("Home", home_path, {:accesskey => "t", :title => "Home"} ) %></li>
-  <li><%= navigation_link( "Contexts", contexts_path, {:accesskey=>"c", :title=>"Contexts"} ) %></li>
+    <li><%= navigation_link("Starred", tag_path("starred"), :title => "See your starred actions" ) %></li>
     <li><%= navigation_link("Projects", projects_path, {:accesskey=>"p", :title=>"Projects"} ) %></li>
     <li><%= navigation_link("Tickler", tickler_path, {:accesskey =>"k", :title => "Tickler"} ) %></li>
-  <li><%= navigation_link( "Done", done_path, {:accesskey=>"d", :title=>"Completed"} ) %></li>
+    <li><a href="#">Organize</a>
+    <ul>
+      <li><%= navigation_link( "Contexts", contexts_path, {:accesskey=>"c", :title=>"Contexts"} ) %></li>
       <li><%= navigation_link( "Notes", notes_path, {:accesskey => "o", :title => "Show all notes"} ) %></li>
+      <li><%= navigation_link( "Repeating todos", {:controller => "recurring_todos", :action => "index"}, :title => "Manage recurring actions" ) %></li>
+    </ul></li>
+    <li><a href="#">View</a>
+    <ul>
+      <li><%= navigation_link( "Calendar", calendar_path, :title => "Calendar of due actions" ) %></li>
+      <li><%= navigation_link( "Done", done_path, {:accesskey=>"d", :title=>"Completed"} ) %></li>
+      <li><%= navigation_link( "Feeds", {:controller => "feedlist", :action => "index"}, :title => "See a list of available feeds" ) %></li>
+      <li><%= navigation_link( "Statistics", {:controller => "stats", :action => "index"}, :title => "See your statistics" ) %></li>
+    </ul>
+    <li><a href="#">Admin</a>
+    <ul>
       <li><%= navigation_link( "Preferences", preferences_path, {:accesskey => "u", :title => "Show my preferences"} ) %></li>
       <li><%= navigation_link( "Export", {:controller => "data", :action => "index"}, {:accesskey => "i", :title => "Import and export data"} ) %></li>
       <% if current_user.is_admin? -%>
       <li><%= navigation_link("Admin", users_path, {:accesskey => "a", :title => "Add or delete users"} ) %></li>
       <% end -%>
-  <li><%= navigation_link(image_tag("x-office-calendar.png", :size => "16X16", :border => 0), calendar_path, :title => "Calendar of due actions" ) %></li>
+    </ul></li>
-  <li><%= navigation_link(image_tag("recurring_menu16x16.png", :size => "16X16", :border => 0), {:controller => "recurring_todos", :action => "index"}, :title => "Manage recurring actions" ) %></li>
+    <li><a href="#">?</a>
-  <li><%= navigation_link(image_tag("feed-icon.png", :size => "16X16", :border => 0), {:controller => "feedlist", :action => "index"}, :title => "See a list of available feeds" ) %></li>
+    <ul>
-  <li><%= navigation_link(image_tag("menustar.gif", :size => "16X16", :border => 0), tag_path("starred"), :title => "See your starred actions" ) %></li>
+      <li><%= link_to 'Integrate Tracks', integrations_path %></li>
-  <li><%= navigation_link(image_tag("stats.gif", :size => "16X16", :border => 0), {:controller => "stats", :action => "index"}, :title => "See your statistics" ) %></li>
+      <li><%= link_to 'REST API Docs', url_for(:controller => 'integrations', :action => 'rest_api') %></li>
+    </ul></li>
     <li><%= navigation_link(image_tag("system-search.png", :size => "16X16", :border => 0), {:controller => "search", :action => "index"}, :title => "Search All Items" ) %></li>
   </ul>
 </div>

public/stylesheets/superfish.css

@@ -52,33 +52,56 @@ ul.sf-menu li li li.sfHover ul {
 	top:			0;
 }
 
-/*** DEMO SKIN ***/
+/*** TRACKS SKIN ***/
 .sf-menu {
 	float:			left;
-	margin-bottom:	1em;
+    margin: 0;
+    padding-right: 0px; /* 20 */
 }
 .sf-menu a {
-	border-left:	1px solid #fff;
+	margin-right:  10px;
-	border-top:		1px solid #CFDEFF;
-	padding: 		.75em 1em;
 	text-decoration:none;
+    line-height: 14px;
 }
-.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
+.sf-menu a, .sf-menu a:visited, .sf-menu ul li a  { /* visited pseudo selector so IE6 applies text colour*/
-	color:			#13a;
+    font-weight: bold;
+    margin-left: 10px;
+    text-decoration: none;
+    color: #eee;
+    border-bottom: 4px solid #000;  /* make sure there is enough room for the solid */
 }
-.sf-menu li {
+
-	background:		#BDD2FF;
+.sf-menu li li, .sf-menu li ul {
+    margin: 0;
+	background:		#000000;
 }
-.sf-menu li li {
+
-	background:		#AABDE6;
+.sf-menu li ul {
+    margin-top: -18px;
+	padding: 0 8px 9px 0;
+	-moz-border-radius-bottomleft: 8px;
+	-moz-border-radius-bottomright: 8px;
+	-webkit-border-bottom-right-radius: 8px;
+	-webkit-border-bottom-left-radius: 8px;
 }
+
+.sf-menu li ul li, .sf-menu li li {
+    margin-bottom: 5px;
+    margin-top: 5px;
+}
+
 .sf-menu li li li {
-	background:		#9AAEDB;
+	background:		#000000;
 }
+
 .sf-menu li:hover, .sf-menu li.sfHover,
 .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
-	background:		#CFDEFF;
+    color: #CCC;
-	outline:		0;
+}
+
+.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
+    border-bottom: 4px solid #CCC;
+    background: transparent;
 }
 
 /*** arrows **/
@@ -95,7 +118,7 @@ ul.sf-menu li li li.sfHover ul {
 	height:			10px;
 	text-indent: 	-999em;
 	overflow:		hidden;
-	background:		url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
+	background:		url('/images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
 }
 a > .sf-sub-indicator {  /* give all except IE6 the correct values */
 	top:			.8em;
@@ -124,7 +147,7 @@ li.sfHover > a > .sf-sub-indicator {
 
 /*** shadows for all but IE6 ***/
 .sf-shadow ul {
-	background:	url('../images/shadow.png') no-repeat bottom right;
+	background:	url('/images/shadow.png') no-repeat bottom right;
 	padding: 0 8px 9px 0;
 	-moz-border-radius-bottomleft: 17px;
 	-moz-border-radius-topright: 17px;