var $animation_elements = $('.animation-element');
var $projectItems = $('.projectItem');
var $window = $(window);


function check_if_in_view() {
  console.log("hej");
  var window_height = $window.height();
  var window_top_position = $window.scrollTop();
  var window_bottom_position = (window_top_position + window_height);

  $.each($animation_elements, function() {
    var $element = $(this);
    var element_height = $element.outerHeight();
    var element_top_position = $element.offset().top;
    var element_bottom_position = (element_top_position + element_height);

    //check to see if this current container is within viewport
    if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
      $element.addClass('in-view');
    }
  });
}


function showSidePage() {
  $('#projectsPage').css("top", $('body').scrollTop());
  $('body').css("overflow-y", "hidden");
  var element = $('#projectsPage');
  element.animate({right: '0'}, 1000);

  var delay = 1000;
  var delayInc = 500;
  $.each($projectItems, function(){
    var $element = $(this);
    console.log($element)
    $element.delay(delay).animate({top: '0px', opacity: '1'},delayInc);
    delay += delayInc;
  });
}

function hideSidePage() {
  $('body').css("overflow-y", "scroll");

  var delay = 0;
  var delayInc = 350;
  $.each($projectItems, function(){
    var $element = $(this);
    console.log($element)
    $element.delay(delay).animate({top: '-150vh'},delayInc);
    delay += delayInc;
  });

  var element = $('#projectsPage');
  element.delay(delay + delayInc).animate({right: '-200vw'}, 500);

}

$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');

$('body').scroll(function(){
  check_if_in_view();
});