Bookmarker.setLoadFromBookmarkArgument("bookmark", "true");

//Q42Utils.MORPHDURATION = 800;
StyleMorpher.setMorphDuration(800);
//Q42Utils.morphingDisabled = Q42Utils.isGecko;

Behaviors.addStateSequence(
  ["show1-4er","show2-5er","show3-6er","show4-7er","show5-8er","show6-9er","show7-10er"],
  ["show1-4", "show2-5", "show3-6", "show4-7", "show5-8", "show6-9", "show7-10"],
  "scroller",
  "counterscroller"
);

Behaviors.addStateSequence(
  ["item3to1", "item3to2", "item3to3"],
  [ "item1", "item2", "item3"],
  "item3walker"
);


function doMenuScrollUp(el)
{
  Q42Utils.setTimeoutHandler(function(){doMenuScrollUp2(el);}, 0);
}
function doMenuScrollUp2(el)
{
  var menuEl = el.parentNode.parentNode;

  var downScroller = getElementsByTagNameAttributeValue(menuEl, "label", "classname", "downscroller")[0];
  ClassNameAbstraction.replace(downScroller, "invisible", "visible");

  for (var i=menuEl.childNodes.length-1; i>=0; i--)
    if (menuEl.childNodes[i].nodeType == 1 && ClassNameAbstraction.contains(menuEl.childNodes[i], "visible"))
      break;

  ClassNameAbstraction.replace(menuEl.childNodes[i], "visible", "invisible");

  for (var i=i-1; i>=1; i--)
    if (menuEl.childNodes[i].nodeType == 1 && !ClassNameAbstraction.contains(menuEl.childNodes[i], "visible"))
      break;

  ClassNameAbstraction.replace(menuEl.childNodes[i], "invisible", "visible");

  var firstItem = getElementsByTagNameAttributeValue(menuEl, "div", "classname", "item")[0];
  if (ClassNameAbstraction.contains(firstItem, "visible"))
    ClassNameAbstraction.replace(el, "visible", "invisible");
}
function doMenuScrollDown(el)
{
  Q42Utils.setTimeoutHandler(function(){doMenuScrollDown2(el);}, 0);
}
function doMenuScrollDown2(el)
{
  var menuEl = el.parentNode.parentNode;

  var upScroller = getElementsByTagNameAttributeValue(menuEl, "label", "classname", "upscroller")[0];
  ClassNameAbstraction.replace(upScroller, "invisible", "visible");

  for (var i=1; i<menuEl.childNodes.length; i++)
    if (menuEl.childNodes[i].nodeType == 1 && ClassNameAbstraction.contains(menuEl.childNodes[i], "visible"))
      break;

  ClassNameAbstraction.replace(menuEl.childNodes[i], "visible", "invisible");

  for (var i=i+1; i<=menuEl.childNodes.length-2; i++)
    if (menuEl.childNodes[i].nodeType == 1 && !ClassNameAbstraction.contains(menuEl.childNodes[i], "visible"))
      break;

  ClassNameAbstraction.replace(menuEl.childNodes[i], "invisible", "visible");

  var items = getElementsByTagNameAttributeValue(menuEl, "div", "classname", "item");
  var lastItem = items[items.length-1];
  if (ClassNameAbstraction.contains(lastItem, "visible"))
    ClassNameAbstraction.replace(el, "visible", "invisible");
}

function doStartAnimation()
{
  document.getElementById("content").className = "onload-preloadcontent morph startpagina";
//  document.getElementById("content").style.top = "1000px";

//  if (!document.all)
//  {
//    document.getElementById("main-title").style,marginTop = "0px";
//    document.getElementById("zoek-container").style,marginTop = "0px";
//    document.getElementById("link-mon3aan").style,marginTop = "0px";
//    document.getElementById("link-denhaag").style,marginTop = "0px";
//    return;
//  }

  var delay = 0;

  var mods = new Modifiers();
  mods.duration = 1500;

  var mods2 = new Modifiers();
  mods2.duration = 1500;
  mods2.removeAfterwards = true;

  var anims = [
    {
      element:document.getElementById("main-title"),
      targetState:{
        marginTop:0
      }
    },
    {
      element:document.getElementById("zoek-container"),
      targetState:{
        marginTop:0
      }
    },
    {
      element:document.getElementById("link-mon3aan"),
      targetState:{
        marginTop:0
      }
    },
    {
      element:document.getElementById("link-denhaag"),
      targetState:{
        marginTop:0
      }
    },
    {
      element:document.getElementById("link-ijsfontein"),
      targetState:{
        marginTop:150
      }
    },
    {
      element:document.getElementById("link-q42"),
      targetState:{
        marginTop:200
      }
    }
  ];
  setTimeout(function(){Animator.animate(anims, mods);}, delay + 2000);

//  var anims2 = [
//    {
//      element:document.getElementById("content"),
//      targetState:{
//        top:230
//      }
//    }
//  ];
//  setTimeout(
//    function()
//    {
//      var el = document.getElementById("content");
//      el.style.top = "1000px";
//      el.className = el.className.replace(/[^-]preloadcontent/g, "");
//      Animator.animate(anims2, mods2);
//    },
//    delay + 500
//  );

  var menuEl = document.getElementById("menu");
  menuEl.className = menuEl.className.replace(/ preload/, "");
  var menuHeight = menuEl.offsetHeight;
  menuEl.style.top = "-100px";
  menuEl.style.height = "70px";
  menuEl.style.overflow = "hidden";
  var anims3 = [
    {
      element:menuEl,
      targetState:{
        top:80
      }
    }
  ];
  setTimeout(function(){ Animator.animate(anims3, mods2); }, delay + 3000);

  var anims4 = [
    {
      element:menuEl,
      targetState:{
        height:menuHeight,
        overflow:"visible"
      }
    }
  ];
  setTimeout(function(){ Animator.animate(anims4, mods2); }, delay + 4000);


//  for (var i=0; i<anims.length; i++)
//    delayAnimation(anims[i], mods, 2000);
}

function delayAnimation(anim, mods, delay)
{
  setTimeout(function(){Animator.animate([anim], mods);}, delay);
}