function centerCardVertically() {
  var windowHeight = window.sizes().y;
  var cardHeight = $('card').sizes().y;
  var navHeight = $$('#card > nav')[0].sizes().y;
  
  var spaceAbove = (windowHeight - cardHeight - navHeight) / 2;
  if(spaceAbove < 10) {
    spaceAbove = 10;
  }
  
  var cardMarginTop = spaceAbove + navHeight;
  
  $('card').setStyle({ marginTop: cardMarginTop + 'px' });
} 

var screenshots = [
  './screenshots/1.png',
  './screenshots/2.png',
  './screenshots/3.png',
  './screenshots/4.png'
];

var currentScreenshot = 0;

function setUpScreenshots() {
  var screenshotWrapper = $('iphone-screenshots');
  
  var screenshotList = $E('ul');
  
  screenshotList.insertTo(screenshotWrapper);
  
  loadScreenshotImages();
  
  showInitialScreenshot();
}

function loadScreenshotImages() {
  screenshots.each(
    function(screenshot) {
      var image = new Image();
      image.src = screenshot;
    }
  );
}

function showInitialScreenshot() {
  var screenshotList = $$('#iphone-screenshots > ul')[0];
  
  var li = $E('li');
  
  var img = $E('img', 
    { 
      src: screenshots[0], 
      alt: 'Screenshot'
    }
  );
  
  img.insertTo(li);
  
  li.insertTo(screenshotList);
  
  currentScreenshot = 0;

  showNextScreenshot.delay(2500);
}

function showNextScreenshot() {
  var screenshotList = $$('#iphone-screenshots > ul')[0];

  nextScreenshot = currentScreenshot + 1;
  if(nextScreenshot >= screenshots.length) {
    nextScreenshot = 0;
  }
  
  var li = $E('li');
  
  var img = $E('img', 
    { 
      src: screenshots[nextScreenshot], 
      alt: 'Screenshot'
    }
  );
  
  img.insertTo(li);
  
  li.insertTo(screenshotList);
  
  screenshotList.morph({ marginLeft: '-160px' },
    {
      duration: 500,
      
      onFinish: function() {
        this.element.select('li')[0].remove();
        this.element.setStyle({ marginLeft: '0' });
        
        currentScreenshot = nextScreenshot;
        
        showNextScreenshot.delay(2500);
      }
    }
  );
}

document.on('ready',
  function() {
    centerCardVertically();
  
    setUpScreenshots();
  }
);

window.on('resize',
  function() {
    centerCardVertically();
  }
);