Re-wrote todo-items.js and got todo uncheck working.

I also discovered that application.js was getting included twice, causing a few issues. Small fix in standard.html.erb took care of it.

app/views/contexts/_context.rhtml

@@ -10,12 +10,12 @@
         toggleTarget = containerElem.down('.toggle_target')
         if (Element.visible(toggleTarget))
         {
-        todoItems.collapseNextActionListing(this, toggleTarget);
+        todoItems.collapseNextActionListing(toggleTarget);
         $.cookie(todoItems.buildCookieName(containerElem), true);
         }
         else
         {
-        todoItems.expandNextActionListing(this, toggleTarget);
+        todoItems.expandNextActionListing(toggleTarget);
         $.cookie(todoItems.buildCookieName(containerElem), null);
         }
         }

app/views/layouts/standard.html.erb

@@ -10,13 +10,14 @@
     <% end %>
     <%= stylesheet_link_tag "print", :media => "print" %>
     <% bundle :name => "jquery" do %>
-      <%= javascript_include_tag :defaults %>
+      <%= javascript_include_tag 'jquery' %>
+      <%= javascript_include_tag 'jquery-ui' %>
       <%= javascript_include_tag 'jquery.cookie' %>
     <% end %>
     <% bundle :name => "tracks_js" do %>
       <%= javascript_include_tag *%w[
       hoverIntent superfish application
-      accesskey-hints todo-items niftycube
+      accesskey-hints niftycube
       protoload flashobject ] %>
     <% end %>
     <%= javascript_tag "var AUTH_TOKEN = #{form_authenticity_token.inspect};" if protect_against_forgery? %>

public/javascripts/application.js

@@ -132,9 +132,78 @@ function set_behavior_for_tag_edit_todo(){
       */
 }
 
+todoItems = {
+  // public
+  ensureVisibleWithEffectAppear: function(elemId){
+    $('#'+elemId).fadeIn(400);
+  },
+  expandNextActionListing: function(itemsElem, skipAnimation) {
+    itemsElem = $(itemsElem);
+    if(skipAnimation == true) {
+      itemsElem.show();
+    }
+    else {
+      itemsElem.show('blind', 400);
+    }
+    todoItems.showContainer(itemsElem.parentNode);
+  },
+  collapseNextActionListing: function(itemsElem, skipAnimation) {
+    itemsElem = $(itemsElem);
+    if(skipAnimation == true) {
+      itemsElem.hide();
+    }
+    else {
+      itemsElem.hide('blind', 400);
+    }
+    todoItems.hideContainer(itemsElem.parentNode);
+  },
+  ensureContainerHeight: function(itemsElem) {
+    $(itemsElem).css({height: '', overflow: ''});
+  },
+  expandNextActionListingByContext: function(itemsElemId, skipAnimation){
+    todoItems.expandNextActionListing($('#'+itemsElem).get(), skipAnimation);
+  },
+
+  // private
+  buildCookieName: function(containerElem) {
+    tracks_login = $.cookie('tracks_login');
+    return 'tracks_'+tracks_login+'_context_' + containerElem.id + '_collapsed';
+  },
+  showContainer: function(containerElem) {
+    imgSrc = $(containerElem).find('.container_toggle img').attr('src');
+    $(containerElem).find('.container_toggle img').attr('src', imgSrc.replace('expand', 'collapse'));
+  },
+  hideContainer: function (containerElem) {
+    imgSrc = $(containerElem).find('.container_toggle img').attr('src');
+    $(containerElem).find('.container_toggle img').attr('src', imgSrc.replace('collapse', 'expand'));
+  }
+}
+
 function setup_container_toggles(){
   // bind handlers
+  $('.container_toggle').click(function(evt){
+      toggle_target = $(this.parentNode.parentNode).find('.toggle_target');
+      if(toggle_target.is(':visible')){
+        // hide it
+        imgSrc = $(this).find('img').attr('src');
+        $(this).find('img').attr('src', imgSrc.replace('collapse', 'expand'));
+        $.cookie(todoItems.buildCookieName(this.parentNode.parentNode), true);
+      } else {
+        // show it
+        imgSrc = $(this).find('img').attr('src');
+        $(this).find('img').attr('src', imgSrc.replace('expand', 'collapse'));
+        $.cookie(todoItems.buildCookieName(this.parentNode.parentNode), null);
+      }
+      toggle_target.toggle('blind');
+      });
   // set to cookied state
+  $('.container.context').each(function(){
+      if($.cookie(todoItems.buildCookieName(this))){
+        imgSrc = $(this).find('.container_toggle img').attr('src');
+        $(this).find('.container_toggle img').attr('src', imgSrc.replace('collapse', 'expand'));
+        $(this).find('.toggle_target').hide();
+        }
+      });
 }
 
 /* Unobtrusive jQuery behavior */

public/javascripts/todo-items.js

@@ -1,170 +0,0 @@
-/*
- * ToDo Items
- *
- *  Requires the prototype.js library
- *
- *  Use the following markup to include the library:
- *  <script type="text/javascript" src="todo-items.js"></script>
- */
-
-ToDoItems = Class.create();
-
-ToDoItems.prototype = {
-    initialize: function()
-    {
-        /* keep track of last effect so you can check if the animation has finised */
-        this.lastEffect= null;
-        this.initialized = true;
-        this.toggleItemsMap = {};
-        this.toggleContainerMap = {};
-        this.containerItemsMap = {};
-    },
-    addNextActionListingToggles: function()
-    {
-        this.containerToggles = $$('.container_toggle');
-        containerTogglesClick = this.toggleNextActionListing.bindAsEventListener(this);
-        for(i=0; i < this.containerToggles.length; i++)
-        {
-            toggleElem = this.containerToggles[i];
-            containerElem = toggleElem.parentNode.parentNode
-            itemsElem = $(containerElem.id).select("div#"+containerElem.id+"items")[0];
-            this.toggleContainerMap[toggleElem.id] = containerElem;
-            this.toggleItemsMap[toggleElem.id] = itemsElem;
-            this.containerItemsMap[containerElem.id] = itemsElem;
-        }
-	this.setNextActionListingTogglesToCookiedState();
-    },
-    setNextActionListingTogglesToCookiedState: function()
-    {
-        for(i=0; i < this.containerToggles.length; i++)
-        {
-            toggleElem = this.containerToggles[i];
-            containerElem = this.toggleContainerMap[toggleElem.id];
-            collapsedCookie = $.cookie(this.buildCookieName(containerElem));
-            itemsElem = this.toggleItemsMap[toggleElem.id];
-            isExpanded = Element.visible(itemsElem);
-            if (collapsedCookie && isExpanded)
-            {
-                this.collapseNextActionListing(toggleElem, itemsElem);
-            }
-            else if (!collapsedCookie && !isExpanded)
-            {
-                this.expandNextActionListing(toggleElem, itemsElem);
-            }
-        }
-    },
-    collapseAllNextActionListing: function(except)
-    {
-        for(i=0; i < this.containerToggles.length; i++)
-        {
-            toggleElem = this.containerToggles[i];
-            if (toggleElem != except)
-            {
-                itemsElem = this.toggleItemsMap[toggleElem.id];
-                isExpanded = Element.visible(itemsElem);
-                if (isExpanded)
-                {
-                    this.collapseNextActionListing(toggleElem, itemsElem);
-                }
-            }
-        }
-    },
-    ensureVisibleWithEffectAppear: function(elemId)
-    {
-  	if ($(elemId).style.display == 'none')
-  	{
-            new Effect.Appear(elemId,{duration:0.4});
-  	}
-    },
-    fadeAndRemoveItem: function(itemContainerElemId)
-    {
-  	var fadingElemId = itemContainerElemId + '-fading';
-  	$(itemContainerElemId).setAttribute('id',fadingElemId);
-  	Element.removeClassName($(fadingElemId),'item-container');
-  	new Effect.Fade(fadingElemId,{afterFinish:function(effect) { Element.remove(fadingElemId); }, duration:0.4});
-    },
-    toggleNextActionListing: function(event)
-    {
-        Event.stop(event);
-        toggleElem = Event.element(event).parentNode;
-        itemsElem = this.toggleItemsMap[toggleElem.id];
-   	containerElem = this.toggleContainerMap[toggleElem.id];
-        if (Element.visible(itemsElem))
-        {
-            this.collapseNextActionListing(toggleElem, itemsElem);
-            $.cookie(this.buildCookieName(containerElem), true);
-        }
-        else
-        {
-            this.expandNextActionListing(toggleElem, itemsElem);
-            $.cookie(this.buildCookieName(containerElem), null);
-        }
-    },
-    findToggleElemForContext : function(contextElem)
-    {
-        childElems = $A($(contextElem).getElementsByTagName('a'));
-        return childElems.detect(function(childElem) { return childElem.className == 'container_toggle' });
-    },
-    expandNextActionListing: function(toggleElem, itemsElem, skipAnimation)
-    {
-        itemsElem = $(itemsElem)
-        if (skipAnimation == true) {
-            itemsElem.style.display = 'block';
-        }
-        else
-        {
-            this.lastEffect = Effect.BlindDown(itemsElem, { duration: 0.4 });
-        }
-        toggleElem.setAttribute('title', 'Collapse');
-        imgElem = this.findToggleImgElem(toggleElem);
-  	imgElem.src = imgElem.src.replace('expand','collapse');
-        imgElem.setAttribute('title','Collapse');
-    },
-    ensureContainerHeight: function(itemsElem)
-    {
-        itemsElem = $(itemsElem);
-        Element.setStyle(itemsElem, {height : ''});
-        Element.setStyle(itemsElem, {overflow : ''});
-    },
-    expandNextActionListingByContext: function(itemsElem, skipAnimation)
-    {
-        contextElem = this.findNearestParentByClassName($(itemsElem), "context");
-        toggleElem = this.findToggleElemForContext(contextElem);
-        this.expandNextActionListing(toggleElem, itemsElem, skipAnimation);
-    },
-    collapseNextActionListing: function(toggleElem, itemsElem)
-    {
-        this.lastEffect = Effect.BlindUp(itemsElem, { duration: 0.4});
-        toggleElem.setAttribute('title', 'Expand');
-        imgElem = this.findToggleImgElem(toggleElem);
-        imgElem.src = imgElem.src.replace('collapse','expand');
-   	imgElem.setAttribute('title','Expand');
-    },
-    findToggleImgElem: function(toggleElem)
-    {
-        childImgElems = $A(toggleElem.getElementsByTagName('img'));
-        return childImgElems[0];
-    },
-    buildCookieName: function(containerElem)
-    {
-   	tracks_login = $.cookie('tracks_login');
-        return 'tracks_'+tracks_login+'_context_' + containerElem.id + '_collapsed';
-    },
-
-    findNearestParentByClassName: function(elem, parentClassName)
-    {
-  	var parentElem = elem.parentNode;
-  	while(parentElem)
-  	{
-            if (Element.hasClassName(parentElem, parentClassName))
-            {
-                return parentElem;
-            }
-            parentElem = parentElem.parentNode;
-  	}
-  	return null;
-    }
-}
-
-todoItems = new ToDoItems();
-Event.observe(window, "load", todoItems.addNextActionListingToggles.bindAsEventListener(todoItems));