document.observe('dom:loaded', function () {

  var duration = 7000;

  currentElement = function(){
    $$('.team-box').each(function(element){
      if(element.visible()){
        current = element ;
        return ;
      }
    });
    return current;
  }

  hideElement = function(){
    clearInterval(loading_timer);
    current = currentElement();
    current.hide();
  }

  showTeamBox = function(){
    current = currentElement();
    current.hide();
    if(current.next()) // check if this is the last element
      current.next().appear();
    else
      $$('.team-box').first().appear();
  }

  loading_timer = setInterval(showTeamBox, duration);

  // PAUSE ON MOUSEENTER
  $$('.team-box').each(function(element) {
      element.observe('mouseenter',function(event) {
          clearInterval(loading_timer);
          $$('.pause-icon').first().appear({duration: 0.25});
      });
      element.observe('mouseleave',function(event) {
          loading_timer = setInterval(showTeamBox, duration);
          $$('.pause-icon').first().hide();
      });
  });

  // PREVIOUS ICON CLICK
  $$('.team-box .desc .prev-icon').each(function(element){
    element.observe('click',function(event){
      hideElement();
      if(current.previous())  // check if this is the first element
        current.previous().appear();
      else
        $$('.team-box').last().appear();
    })
  });

  // NEXT ICON CLICK
  $$('.team-box .desc .next-icon').each(function(element){
    element.observe('click',function(event){
      hideElement();
      if(current.next())  // check if this is the last element
        current.next().appear();
      else
        $$('.team-box').first().appear();
    })
  });
});