var screen_manager = null;
var current = 1;
var image_dims = {};

$(document).ready(function() {
  $('#alec img').load(function() {
    image_dims.width = $('#alec img').width();
    image_dims.height = $('#alec img').height();
    image_dims.ratio = image_dims.width / image_dims.height;
    fullscreen_resize();
    $(window).resize(fullscreen_resize);
  });
  
  $('#index-features')
  .after('<div id="index-features-nav">')
  .cycle({
    fx: 'fade',
    backwards: true,
    pager:  '#index-features-nav',
    pagerAnchorBuilder: function(idx, slide) {
      return '<a href="#"></a>';
    }
  });
});

function fullscreen_resize() {
  if (screen_manager == null) {
    screen_manager = new fullscreen();
  }
  screen_manager.resize();
}

var fullscreen = function() {
  this.width = 0;
  this.height = 0;
  this.resizeWrapper = function() {
    this.width = $(window).width();
    this.height = $(window).height();
    $('.fullscreen').css('width', this.width).css('height', this.height);
    $('.fullwidth').css('width', this.width);
  }
  this.resizeImage = function() {
    var window_ratio = this.width / this.height;
    var img_width = this.width;
    var img_height = this.height;
    var coords = {top: 0, left: 0};
    if (window_ratio > image_dims.ratio) {
      img_height = img_width / image_dims.ratio;
      coords.top = (img_height - this.height) / -2;
    }
    else {
      console.log(img_width, img_height, image_dims.ratio);
      img_width = img_height * image_dims.ratio;
      coords.left = (img_width - this.width) / -2;
    }
    $('#alec img').attr('width', img_width).attr('height', img_height).offset(coords);
  }
  this.resize = function() {
    // Call twice to fix scrollbars
    this.resizeWrapper();
    this.resizeWrapper();
    this.resizeImage();
  }
}