document.observe("dom:loaded", function() {    
  
  // define a callback function that cycles the items
  function cycle () {
    var list = $('featured-items');
    list.items = list.childElements();
    list.min_height = 0;
    
    if ( (list.items.size()) == 1 || (list.items.size() == 0) ) {
      // Don't cycle if there is 1 or no items
      return;
    };
        
    // set the height of the list based on the tallest list item
    list.min_eight = list.items.each(function(item) {    
      if (item.getHeight() > list.min_height) {      
        list.min_height = item.getHeight() + 'px';

        list.setStyle({
          height: list.min_height
        });

        // hide list items once the list height is set
        list.items.each(Element.hide);
      };
    });
    
    if ( (list.current_item == null) || (list.current_item == list.items.size()) ) {
      // initialize current item flagif null, reset if we've reached the end of the list
      list.current_item = 0;
    };
    
    // Make the magic happen: fade the current item in, then back out
    // Be sure to mirror the total duration in the periodical executor
    new Effect.Appear(list.items[list.current_item], {duration: 1});
    new Effect.Fade(list.items[list.current_item], {delay: 5, duration: 1});
    
    list.current_item++;
  }
  
  cycle();
  new PeriodicalExecuter(cycle, 7);
});