jQuery(document).ready(function($) {
  
  // Animation does the following
  // open up the vke_top and vke_bottom
  // fade in the 3 d triangles
  
  // wait 5 seconds
  // fade out the 3d triangles
  // close the vke_top and vke_bottom
  //disable vke_center
  // show buro4
  // open vke_top and vke_bottom
  // disable vke_top and vke_bottom
  // fade in the red bars of buro 4
  // fade in the footer of buro 4

  // Initially the doors are closed  
  $("#page_top").css('top','0%');
  $("#page_bottom").css('top','50%');
  
    
  step1();
 

});


function step1(){
  // Open the kve logo in the middle
  $("#page_top").css('top',$("#page_top").position().top); 
  var height = $(document).height();
  var percentage = 80/height*100;
  openPage(percentage,1000,500,false);

  // Fade in the overlay while fading the logo to 50%
  $("#kve_overlay").delay(1500).fadeIn();    
  $("#kve_logo").delay(1000).animate({
    opacity: 0.5
  }, 1500, function(){
    $("#kve_overlay").click(function(e){
      step2();
    });
  });
}

function step2(){
  $("#kve_overlay").fadeOut();    
  $("#kve_logo").delay(500).fadeOut();
  // Close page
  openPage(0,500,500, step3);
}

function step3(){
  $("#kve").css('display', 'none');
  $("#page_overlay").css('display', 'none');
  openPage(100,1000,1500,step4);
}

function step4(){
  $("#buro4").fadeIn();
}

function openPage(percentage, delay, duration, callback){
  // Move top up
  $("#page_top").delay(delay).animate({
    top: (-percentage)+'%'
  }, duration, function(){
    if(callback){
      callback(); 
    }
  });
  
  // Move bottom down
  return $("#page_bottom").delay(delay).animate({
    top: (50+percentage)+'%'
  }, duration, function(){
    
  });
}