//timings:
var init_delay = 200;
var init_next_delay = 1300;
var start_delay = 6000;
var next_delay = 2000;
var show_duration = 500;
var animate_duration = 1500;

// target size of the animated elements
var large_values = { left : 0, top: -185, width: 790, height: 600, opacity: 0 };

// used to reset elements to the default position after animation
var reset_values = { left: '', top: '', width: '', height: '' };

// resets the element after animation
var reset_function = function() {
    $(this).css(reset_values);
};

function animation_function() {
  var els = $('#ani img');
  var count = els.length;
  
  els.css({ opacity: ''});
  els.hide();
  
  // show the first 3 ones, one by another
  for (var i = 0; i < 3; i++) {
    els.eq(count - i - 1).delay(init_delay + i * init_next_delay).fadeIn(show_duration);
  }
  
  for (var i = 0; i < els.length; i++) {
    els.eq(count - i - 1).delay(start_delay + (i - 3) * next_delay - show_duration).fadeIn(show_duration).delay(3 * next_delay).animate(large_values, animate_duration, reset_function);
  }
}

// do it!!
$(function() {
  var els = $('#ani img');
  var count = els.length;
  
  animation_function();
  
  window.setInterval('animation_function();', start_delay + next_delay * (count + 0.3));
  
  $('p').animate({ opacity: 0 }, 2).delay(1000).animate({ opacity: 1 }, 5000);
  $('#info').add('#links').hide().delay(2000).fadeIn(5000);
})