$(document).keyup(function(event){
    if (event.keyCode == 70) {
       $(window).resize(resizeHandler);
       resizeHandler(null);
    }
});

function resizeHandler(eventObj) {
  resizeImg($("#img-container selected"));
}

function resizeImg(img) {
  var vpHeight = $(window).height();
  var vpWidth = $(window).width();
    
  var imgHeight;
  var imgWidth;
  var ratio = img.width() / img.height();
  var vpRatio = vpWidth / vpHeight;
  var topOffset = 0;
  var leftOffset = 0;
  
  if (ratio > vpRatio) {
    imgHeight = vpHeight;
    imgWidth = imgHeight * ratio;
    leftOffset = vpWidth - imgWidth;
  }
  else {
    imgWidth = vpWidth;
    imgHeight = imgWidth / ratio;
    topOffset = vpHeight - imgHeight;
  }
  $("#img-container").css("width", vpHeight + "px");
  $("#img-container").css("height", vpHeight + "px");  
  $("#img-container img").each(function() {
   $(this).css("width", imgWidth + "px");
   $(this).css("height", imgHeight + "px");
   $(this).css("top", topOffset + "px");
   $(this).css("left", leftOffset + "px");
});
}

$(document).ready(function() {
	$("#slide-nav > a").click(function() {
   	var id = $(this).text();
   	$("#img-container .selected").fadeOut(300);
   	$("#img-container .selected").removeClass("selected");
   	$("#"+id).addClass("selected");
   	$("#"+id).fadeIn(500);
   	$("#slide-nav .selected").removeClass("selected");
   	$(this).addClass("selected");
	});
});