document.observe('dom:loaded', function(e) {
  $$('.frontpage_teasers').each(function(frontpage_teasers) {
    var activeTeaserIdx = 0;
      
    // teasers is the array of frontpage teasers.
    var teasers = (function() {
      var teasers = frontpage_teasers.childElements().collect(function(elm, idx) {
        return { node: elm, idx: idx };
      });
      activeTeaserIdx = Math.floor(Math.random()*teasers.length)
      
      frontpage_teasers.appendChild(teasers[activeTeaserIdx].node);
      // Put an element last and hide it. This is a precondition for the fade effect loop.
      var hiddenElm = frontpage_teasers.childElements().first();
      frontpage_teasers.appendChild(hiddenElm);
      hiddenElm.hide();
      
      return teasers;
    })();
    
    // Construct the current teaser indicator
    (function() {
      var teaser_indicators_ul = $(document.createElement('ul'));
      teaser_indicators_ul.addClassName('frontpage_teaser_indicators');
      frontpage_teasers.parentNode.appendChild(teaser_indicators_ul);
      
      teasers.each(function(ce, i) {
        teasers[i].indicator = $(document.createElement('li'));
        teaser_indicators_ul.appendChild(teasers[i].indicator);
        
        var a = $(document.createElement('a'));
        teasers[i].indicator.appendChild(a);
        a.href = 'javascript:;';
        a.observe('mouseover', function() { deactivateTimer(); });
        a.observe('mouseout', function() { activateTimer(); });
        a.observe('click', function() {
          if (teasers[i].indicator.hasClassName('active'))
            return;
          
          teasers[activeTeaserIdx].indicator.removeClassName('active');
          activeTeaserIdx = i;
          teasers[activeTeaserIdx].indicator.addClassName('active');
          
          fadeTo(true);
          deactivateTimer();
        });
      });
      
      teasers[activeTeaserIdx].indicator.addClassName('active');
      
      return teasers;
    })();
    
    var fadeTo = function(fast) {
      var last = frontpage_teasers.childElements().last();
      frontpage_teasers.insertBefore(last, frontpage_teasers.firstChild);
      last.show();
      
      
      var next_last = frontpage_teasers.childElements().last();
      Effect.Fade(next_last, fast ? { duration: 0.3 } : {});
      teasers[activeTeaserIdx].node.show();
      frontpage_teasers.insertBefore(teasers[activeTeaserIdx].node, next_last);
    };
    
    var deactivateTimer = function() {};
    var activateTimer = function() {
      deactivateTimer();
      var timerActive = true;
      setTimeout(function() {
        if (!timerActive) return;
      
        teasers[activeTeaserIdx].indicator.removeClassName('active');
        activeTeaserIdx = (activeTeaserIdx+1)%teasers.length;
        teasers[activeTeaserIdx].indicator.addClassName('active');
      
        fadeTo();
        
        activateTimer();
      }, 5000);
      
      deactivateTimer = function() { timerActive = false };
    };
    activateTimer();
  });
});