function loadTweets(twitterId, elementId) {

  // keep a list of fading elements and which one is currently visible
  var current = -1;
  var fadingElements = [];

  /**
  * 1 make a list of fading elements, which consist of both the placeholder
  *   and the loaded tweets.
  * 2 then start the fading cycle 
  */
  function initCycleTweets() {
    var tweets = $("#" + elementId + " li");
    
    fadingElements.push($("#" + elementId + " .placeholder")[0]);
    fadingElements = fadingElements.concat($.makeArray(tweets));
    
    // the delay allows us to see the placeholder
    setTimeout(cycleTweets, 1000);
  }
  
  /**
   * 1 fade the current element out
   * 2 fade the next element in
   * it's so simple! ;-)
   */
  function cycleTweets() {
    var next = (current + 1) % fadingElements.length;

    $(fadingElements[current]).fadeOut("slow", function () { $(fadingElements[next]).fadeIn(); });

    current = next;
    setTimeout(cycleTweets, 10000);
  }

  /*
   * 1 load the tweets. (note we don't clearContents because we want to keep 
   *   the placeholder)
   * 2 when done, init the fading cycle
   */
  getTwitters(elementId, {
    id: twitterId,
    count: 3,
    enableLinks: true,
    ignoreReplies: true,
    clearContents: false,
    template: '<div class="tweet"><img src="%user_profile_image_url%"></img><p><a href="http://twitter.com/%user_screen_name%">@%user_screen_name%</a>: %text%</p></div>',
    callback: initCycleTweets 
  });

}

$(document).ready(function () { loadTweets('GeschiedenisZH', 'tweets'); });          

