demo/index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Pumpkin Pie</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="type.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="layout.css" />
  <link rel="stylesheet" type="text/css" href="color.css" />
  <!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="all" href="ie6.css" />
  <![endif]-->
  <script type="text/javascript" src="../src/TabInterface.js"></script>
  <script type="text/javascript">
    // <![CDATA[
/*
 * (c)2006 Dean Edwards/Matthias Miller/John Resig
 * Special thanks to Dan Webb's domready.js Prototype extension
 * and Simon Willison's addLoadEvent
 *
 * For more info, see:
 * http://dean.edwards.name/weblog/2006/06/again/
 * http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
 * http://simon.incutio.com/archive/2004/05/26/addLoadEvent
 *
 * Thrown together by Jesse Skinner (http://www.thefutureoftheweb.com/)
 *
 *
 * To use: call addDOMLoadEvent one or more times with functions, ie:
 *
 *    function something() {
 *       // do something
 *    }
 *    addDOMLoadEvent(something);
 *
 *    addDOMLoadEvent(function() {
 *        // do other stuff
 *    });
 *
 */
function addDOMLoadEvent(func) {
   if (!window.__load_events) {
      var init = function () {
          // quit if this function has already been called
          if (arguments.callee.done) return;

          // flag this function so we don't do the same thing twice
          arguments.callee.done = true;

          // kill the timer
          if (window.__load_timer) {
              clearInterval(window.__load_timer);
              window.__load_timer = null;
          }

          // execute each function in the stack in the order they were added
          for (var i=0;i < window.__load_events.length;i++) {
              window.__load_events[i]();
          }
          window.__load_events = null;
      };

      // for Mozilla/Opera9
      if (document.addEventListener) {
          document.addEventListener("DOMContentLoaded", init, false);
      }

      // for Internet Explorer
      /*@cc_on @*/
      /*@if (@_win32)
          document.write("<scr"+"ipt id=__ie_onload defer src=//0><\/scr"+"ipt>");
          var script = document.getElementById("__ie_onload");
          script.onreadystatechange = function() {
              if (this.readyState == "complete") {
                  init(); // call the onload handler
              }
          };
      /*@end @*/

      // for Safari
      if (/WebKit/i.test(navigator.userAgent)) { // sniff
          window.__load_timer = setInterval(function() {
              if (/loaded|complete/.test(document.readyState)) {
                  init(); // call the onload handler
              }
          }, 10);
      }

      // for other browsers
      window.onload = init;

      // create event function stack
      window.__load_events = [];
   }

   // add function to event stack
   window.__load_events.push(func);
}

// Load up TabInterface
if( document.getElementById &&
    document.getElementsByTagName &&
    document.createElement ){
  var cabinets = Array();
  addDOMLoadEvent( function(){
    var collection = document.getElementsByTagName( '*' );
    var cLen = collection.length;
    for( var i=0; i<cLen; i++ ){
      if( collection[i] &&
          /\s*tabbed\s*/.test( collection[i].className ) ){
        cabinets.push( new TabInterface( collection[i], i ) );
      }
    }
  } );
}
  // ]]>
</script>
</head>
<body>
  <h1>Pumpkin Pie</h1>

  <div id="recipe" class="tabbed">

    <h2>Overview</h2>
    <img src="pie.jpg" alt="" />
    <p>Whether you're hosting a festive party or a casual get-together with friends, our Pumpkin Pie will make entertaining easy!</p>
    <dl class="single"><dt>Original recipe yield</dt> <dd>1 × 9-inch deep dish pie</dd></dl>
    <dl>
      <dt>Prep Time</dt>
      <dd>10<abbr title="minutes">min</abbr></dd>
      <dt>Cook Time</dt>
      <dd>1<abbr title="hour">hr</abbr></dd>
      <dt>Ready In</dt>
      <dd>1<abbr title="hour">hr</abbr> 10<abbr title="minutes">min</abbr></dd>
    </dl>

    <h2>Ingredients</h2>
    <ul>
      <li>1 (9<abbr title="inch">in</abbr>) unbaked deep dish pie crust</li>
      <li>½ cup white sugar</li>
      <li>1 <abbr title="teaspoon">tsp</abbr> ground cinnamon</li>
      <li>½ <abbr title="teaspoon">tsp</abbr> salt</li>
      <li>½ <abbr title="teaspoon">tsp</abbr> ground ginger</li>
      <li>¼ <abbr title="teaspoon">tsp</abbr> ground cloves</li>
      <li>2 eggs</li>
      <li>1 can (15<abbr title="ounces">oz</abbr>) pumpkin puree</li>
      <li>1 can (12<abbr title="fluid ounces">fl oz</abbr>) evaporated milk</li>
    </ul>

    <h2>Directions</h2>
    <ol>
      <li>Preheat oven to 425°<abbr title="Farenheit">F</abbr></li>
      <li>Combine sugar, salt, cinnamon, ginger and cloves in small bowl.</li>
      <li>Beat eggs lightly in large bowl.</li>
      <li>Stir in pumpkin and sugar-spice mixture.</li>
      <li>Gradually stir in evaporated milk.</li>
      <li>Pour into pie shell.</li>
      <li>Bake for 15 minutes.</li>
      <li>Reduce temperature to 350°<abbr title="Farenheit">F</abbr>; bake for 40 to 50 minutes or until knife inserted near center comes out clean.</li>
      <li>Cool on wire rack for 2 hours.</li>
      <li>Serve immediately or refrigerate.</li>
    </ol>

    <h2>Nutrition</h2>
    <dl class="single"><dt>Servings Per Recipe</dt> <dd>8</dd></dl>
    <h3>Amount Per Serving</h3>
    <dl>
      <dt>Calories</dt>
      <dd>284</dd>
      <dt>Total Fat</dt>
      <dd>12.1<abbr title="grams">g</abbr></dd>
      <dt>Cholesterol</dt>
      <dd>65<abbr title="milligrams">mg</abbr></dd>
      <dt>Sodium</dt>
      <dd>355<abbr title="milligrams">mg</abbr></dd>
      <dt>Total Carbs</dt>
      <dd>38.8<abbr title="grams">g</abbr></dd>
      <dt>Dietary Fiber</dt>
      <dd>2.7<abbr title="grams">g</abbr></dd>
      <dt>Protein</dt>
      <dd>6.3<abbr title="grams">g</abbr></dd>
    </dl>
  </div>

  <p id="copyright">Photo by <a href="http://www.flickr.com/photos/pgoyette/">Paul Goyette</a>, licensed under <a href="http://creativecommons.org/licenses/by-sa/2.0/deed.en-us">Creative Commons</a>.</p>
</body>
</html>