setStates()

function setStates() {
  // assign current cookie to local variable
  var storedValue = getCookie("outline")

  // if desired cookie not found (null)
  if (!storedValue) {
  // set states to default if no cookie found
  for (var i = 0; i < outline.length; ++i) {
// only topmost level is visible by default
if (outline[i].depth == 0)
 outline[i].state = true
else
 outline[i].state = false
  }
  } else {
   // extract current states from cookie (0 => false, 1 => true)
   for (var i = 0; i < outline.length; ++i) {
if (storedValue.charAt(i) == '1')
 outline[i].state = true
else
 outline[i].state = false
  }
  }
}

The setStates() function adds a state property to all properties of the outline object (array). If no cookie by the name of “outline” is found, the default states are used, i.e., the entire outline structure is collapsed, and only the topmost level is viewable. If the desired cookie is found, the current states are extracted. The cookie is basically a string of “0” and “1” characters, the first representing a false state, and the latter representing a true one. The first character of the string is associated with the first element of the array (outline[0].state), and so on. An item’s state determines whether or not that item’s parent is expanded. Therefore, on a two-level outline-style table of contents, if an item has a true state it is viewable.

setImages()

function setImages() {
 // loop through all elements of the outline "array" (object)
 for (var i = 0; i < outline.length; ++i) {
   if (outline[i].state)
   if (outline[i].parent) // outline[i] is a parent
   if (outline[i + 1].state) // outline[i] is exploded
   outline[i].pic = '<A HREF="javascript:toggle
 (' + i + ')"><IMG SRC="exploded.gif"
 BORDER=0></A>'
   else // outline[i] is collapsed
  outline[i].pic = '<A HREF="javascript:toggle
 (' + i + ')"><IMG SRC="collapsd.gif"
 BORDER=0></A>'
   else // outline[i] is only a child (not a parent)
  outline[i].pic = '<IMG SRC="child.gif" BORDER=0>'
 }
}

This function loops through all elements of the outline object and assigns an image to the pic property of each element whose state is true. Note that this property is an extension to the original instance of the item object. If an element is a parent, there are two possible images—one to represent an expanded item, and the other to reflect a collapsed one. Notice that if the Boolean expression outline[i + 1].state is true, outline[i] is expanded. You may recall that an element’s state property is true if its parent is expanded (by definition). Since outline[i] is surely a parent in this case (if (outline[i].parent)…), outline[i + 1] is its child. If outline[i + 1]’s current state is false, the image representing a collapsed item is chosen. If outline[i] is not a parent at all, there is only one option for the image—the one representing a child item. The immediate conclusion from this function is that in order to use the outliner, you must have three images:

• exploded.gif
• collapsd.gif
• child.gif

toggle(num)

// change from expanded to collapsed and vice versa
function toggle(num) {
 // loop starts at item following argument
 // terminate loop when:
 //   a) last element of outline "array" reached
 //   b) current item (outline[i]) is not deeper than toggled
item (outline[num])
 for (var i = num + 1; i < outline.length && outline[i].depth >=
outline[num].depth + 1; ++i) {
   // if current item (outline[i]) is a direct child of
   outline[num]
   if (outline[i].depth == outline[num].depth + 1)
   outline[i].state = !outline[i].state // toggle state
 }

 // store new states in cookie
 setStorage()

 // reload page
 history.go(0)
}

When the user clicks an image (exploded.gif or collapsd.gif), the item associated with it either collapses or explodes, depending on its current status. The toggle() function accepts an integer reflecting the index of the item whose icon the user clicked, and then toggles the state property of all the item’s direct children. By definition, when an item has no children with a true state, the item is collapsed, and when all children of an item have a true state, the item is expanded. Therefore, toggling the state property of the selected item’s children toggles that item’s current status (exploded or collapsed). After all manipulations, the function invokes the setStorage() function to store the current status in a cookie, overwriting any previous cookie used for the outliner. After the cookie is written, the function reloads the page via the history.go() method, with the argument 0 to indicate that the current page should be loaded. We chose to use go(0) rather than reload() because:

1. It works with all JavaScript-compatible browsers.
2. It is perfect for refreshing a document, which is exactly what the script does.