var slideDelay = 3000;

$(document).ready(function() {
  animateScreenshots();

  $('a[title]').qtip({
    position: {
      corner: { tooltip: 'bottomMiddle', target: 'topMiddle' }
    },
    style: {
      padding: '4px 6px',
      backgroundColor: '#333',
      color: '#fff',
      tip: { corner: 'bottomMiddle', size: { x: 8, y: 6 } },
      border: { width: 1, radius: 5, color: '#333' }
    }
  });
});

function animateScreenshots() {
  $('#screens').fadeIn(500, function() {
    setTimeout(function() {
      slideToScreenshot(1, function() {
        setTimeout(function() { slideToScreenshot(2, function() {
          setTimeout(function() { slideToScreenshot(3, function() {
            setTimeout(function() { slideToScreenshot(4, function() {
              setTimeout(function() { slideToScreenshot(5, function() {
	              setTimeout(function() { animateScreenshots(); }, slideDelay-1000); 
            }); }, slideDelay);
          }); }, slideDelay);
        }); }, slideDelay);
      }); }, slideDelay);
    });
  }, 1000); });
}

function slideToScreenshot(screenshotNumber, callback) {
  $('#screens').animate({ marginLeft: "-" + String(screenshotNumber * 206) + "px" }, 500, callback);
}