$(document).ready(function() {
  var imgIndex = 1;
  $('#f2').hide();

  function loadNextImage() {
    var imgID;
    if(imgIndex % 2) {
      imgID = '#f2';
    } else {
      imgID = '#f1';
    }

    $(imgID).attr('src', imgs[imgIndex%imgs.length].img);

    imgIndex++;
  }

  function fadeNextImage() {
      var show = true;
      var showID = '#f2';

      if(imgIndex % 2) {
        show = false;
      }

      if(show) {
        $(showID).fadeIn('slow', function() {
          loadNextImage();
        });
      } else {
        $(showID).fadeOut('slow', function() {
          loadNextImage();
        });
      }
  }

  fadeNextImage();
  setInterval(fadeNextImage, 3000);
});