currentpage = "home";
pageclosed = false;

Event.observe(window, 'load', function() {
  var wrapper = $("wrapper");
  wrapper.height = getViewPortHeight();
  dropCard($("card-creatie"));
  dropCard($("card-innovatie"));
  dropCard($("card-inthefield"));
  dropCard($("card-inspiratie"));
});

Event.observe(window, 'resize', function() {
  var wrapper = $("wrapper");
  wrapper.height = getViewPortHeight();
  prickCard($("card-creatie"));
  prickCard($("card-innovatie"));
  prickCard($("card-inthefield"));
  prickCard($("card-inspiratie"));
});

function getViewPortHeight()
{
  if (typeof window.innerWidth != 'undefined') // Mozilla
  {
    return window.innerHeight;
  }
  else if (typeof document.documentElement != 'undefined'
      && typeof document.documentElement.clientWidth !=
      'undefined' && document.documentElement.clientWidth != 0) // IE Standards compliant
  {
    return document.documentElement.clientHeight;
  }
  else // Old IE
  {
    return document.getElementsByTagName('body')[0].clientHeight;
  }  
}

function dropCard(card)
{
  var viewportHeight = getViewPortHeight();
  var offset = Position.cumulativeOffset(card);
  var offsetLeft = offset[0];
  var offsetTop = offset[1];
  var height = card.getHeight();
  new Effect.Move(card, { x:offsetLeft, y:offsetTop, mode:"absolute", duration: Math.random(), 
    afterFinish: function()
    {
      new Effect.Move(card, { x:offsetLeft, y:viewportHeight-height + 55, mode: "absolute", duration: 1.3, transition: function(pos) { return pos*pos; },
        afterFinish: function()
        {
          new Effect.Move(card, { x:offsetLeft, y:viewportHeight-height + 35 - 25, mode: "absolute", duration: 0.3, transition: function(pos) { return -((pos-1)*(pos-1)) + 1; },
            afterFinish: function()
            {
              new Effect.Move(card, { x:offsetLeft, y:viewportHeight-height + 35, mode: "absolute", duration: 0.15, transition: function(pos) { return pos*pos; }});
            }
          });
        }  
      });
    }
  });
}

function prickCard(card)
{
  var viewportHeight = getViewPortHeight();
  var height = card.getHeight();
  card.style.top = (viewportHeight - height + 35).toString() + "px";
}

function switchPage(elem, pagename)
{
  if(pageclosed)
  {
    pageclosed = false;
    return;
  }
  if( elem.id == "card-" + currentpage ) return;
  
  // Reset all cards.
  $("card-creatie").style.backgroundPosition = "-5px -5px";
  $("card-inspiratie").style.backgroundPosition = "-5px -5px";
  $("card-innovatie").style.backgroundPosition = "-5px -5px";
  $("card-inthefield").style.backgroundPosition = "-5px -5px";

  // Hide all pages.
  $("page-creatie").hide();
  $("page-inspiratie").hide();
  $("page-innovatie").hide();
  $("page-inthefield").hide();  

  // If clicked on current page, go to home.  
  if( currentpage == pagename )
  {
    currentpage = "home";  
  }
  else
  {
    currentpage = pagename;
    $("card-"+pagename).style.backgroundPosition = "-5px -145px";
  }
  
  $("page-"+currentpage).show();
  
  // Set page background color.
  var color = "#ffffff";
  switch(currentpage)
  {
    case "creatie": color = "#6ED2FF"; break;
    case "inspiratie": color = "#FF9300"; break;
    case "innovatie": color = "#FF7FAD"; break;
    case "inthefield": color = "#CBD700"; break;
  }
  $("body").style.backgroundColor = color;
}

function closePage(elem)
{
  if( elem.id != "card-" + currentpage + "-x" ) return;
  // Reset all cards.
  $("card-creatie").style.backgroundPosition = "-5px -5px";
  $("card-inspiratie").style.backgroundPosition = "-5px -5px";
  $("card-innovatie").style.backgroundPosition = "-5px -5px";
  $("card-inthefield").style.backgroundPosition = "-5px -5px";
  $("body").style.backgroundColor = "#ffffff";
  // Hide all pages.
  $("page-creatie").hide();
  $("page-inspiratie").hide();
  $("page-innovatie").hide();
  $("page-inthefield").hide();   
  currentpage = "home";
  $("page-"+currentpage).show();
  pageclosed = true;
}

function onCardMouseOver(card,page)
{
  if( page == currentpage ) return;
  card.style.backgroundPosition = "-5px -145px";
}

function onCardMouseOut(card,page)
{
  if( page == currentpage ) return;
  card.style.backgroundPosition = "-5px -5px";
}