$(document).ready(function(){ 
  zetMenu();
    
  randomizeTags();
  $("#hoofdnavigatie").superfish({ 
      animation: {height:'show'},   // slide-down effect without fade-in 
      delay:     200               // 1.2 second delay on mouseout 
  }); 
  
  lastBlock = $("#hoofdnavigatie ul li:first");
  maxWidth = 289;
  minWidth = 131;
  
  $("#hoofdnavigatie ul li").hover(function(){
    $(lastBlock).animate(
    {width: minWidth+"px"}, { queue:false, duration:400 }
    );
    $(this).animate(
    {width: maxWidth+"px"}, { queue:false, duration:400}
    );
    lastBlock = this;
  });
  
  var origZIndex = 0;
  var origFont = 0;
  $(".tag").hover(function() {
    origZIndex = $(this).css("zIndex");
    origFont = $(this).css("font-size");
    var newFont = parseFloat(origFont.replace("px","")) + 4 + "px";
    // Animatie stoppen:
    $(this).stop();
    // Css instellen toepassen.
    $(this).css({color: "#010D15"});
    $(this).css({zIndex: "15"});
    $(this).css({fontSize: newFont});
    },
    function(){
    // Terug naar originele instellingen.
    $(this).css({zIndex: origZIndex});
    $(this).css({"font-size": origFont});
    // Kleur animeren.
    $(this).animate({ 
        color: "#687277"              
      }, 1500 );
    }
  );

}); 

/* Standaard-veldteksten tonen / verbergen */

function FocusInputTekst(inputId, waarde) {
 if (inputId.value == waarde) {
 inputId.value = '';
 }
}

function BlurInputTekst(inputId, waarde) {
 if (inputId.value == '') {
 inputId.value = waarde;
 }
}

function zetMenu() {
  var nav = document.getElementById('hoofdnavigatie');
  var img = document.getElementById('img_home');
  var blnActief = false
  // Door li elementen heen lopen om de actieve te ontdekken.
  for (var i = 0; i < nav.childNodes.length; i++) {
    //alert(nav.childNodes[i].tagName);
    if ((nav.childNodes[i].tagName == "LI" ) && (nav.childNodes[i].className.indexOf("active") > -1)) {
      // Margin bepalen met huidige breedte.
      blnActief = true;
      img.style.left = nav.childNodes[i].offsetLeft + (nav.childNodes[i].offsetWidth / 2) - (img.width / 2) + 'px'; 
    }
  }
  if (!(blnActief)) {
    img.style.display = "none";
  }
}

function randomizeTags() {
  // Alle tags:
  $('#tags a').each( function (i)
    {
      // min-left = 30px;
      // max-left = 830px;
      // min-top = 12px;
      // max-top = 200px;
      linearPositioning(this);
      //randomPositioning(this);
      $(this).addClass("positioned");
    }
  );
  //countPositioning();
}

function countPositioning() {
var lineCount = 8
  var items = $('#tags a').length;
  var stepSizeTop = 208 / lineCount ;
  var stepSizeLeft = 900 / (items / lineCount );
  //alert(stepSizeLeft);
  var currItem = 0;
  for (j = 1; j < lineCount; j++)
  {
    for (i = 1; i < ((items / lineCount ) + 1); i++)
    {
      $("#tags a:eq(" + currItem + ")").css("top","" + j * stepSizeTop + "px");
      $("#tags a:eq(" + currItem + ")").css("left","" + i * stepSizeLeft - 180  + "px");
      currItem ++;
    }
  }
}

function linearPositioning(tag) {
  // De 'positioning' tag plaatsen ten opzichte van de laatst vorig geplaatste tag.
  if ($('.positioned').length > 0) {
    // Positioneren t.o.v. de laatst gepositioneerde.
    var top = parseInt($('.positioned:last').css('top')) - 3 + 5 * Math.random();
    var left = parseInt($('.positioned:last').css('left')) + parseInt($('.positioned:last').width()) + 70 * Math.random();
    if (left + parseInt(tag.offsetWidth) > 960) {
      top = top + 45 + 5 * Math.random();
      left = Math.random() * 30 + 35;
    }
    tag.style.top = top + "px";
    tag.style.left = left + "px";
    
  }
  else
  {
    // De eerst in het begin positioneren.
    tag.style.top = Math.random() * 5 + 20 + "px";
    tag.style.left = Math.random() * 30 + 35 + "px";
  }
}

function randomPositioning(tag) {
  // proberen een nieuwe positie in te stellen.
  // controleren of de tag juist gepositioneerd is.
  tag.style.left = (Math.random() * (800 - tag.style.width)) + 30 + "px";
  tag.style.top = (Math.random() * (188 - tag.style.height)) + 12 +"px";
  var nrTries = 0;
  while(!(positieVrij(tag)) && nrTries < 20){
    tag.style.left = (Math.random() * (800 - tag.style.width)) + 30 + "px";
    tag.style.top = (Math.random() * (188 - tag.style.height)) + 12 +"px";
    nrTries ++;
  }
}

function positieVrij(tag) {
  // Controleren of de tag niet met andere tags overlapt.
  var blnResult = true;
  if ($('.positioned').length > 0){
    // Door alle items heenlopen en controleren of het nieuwe item niet overlapt met andere items.
    $('.positioned').each( function() {
      // Controleren of de tag z'n posities ook in conflict zijn met de reeds aanwezige posities
      // er is overlapping als de tag.x = in this.x - this.width EN tag.y = in this.y - this.height.
      // Controleren of de x overlapt.
      if (parseInt(tag.style.left) > parseInt(this.style.left) && parseInt(tag.style.left) < (parseInt(this.style.left) + parseInt(this.offsetWidth))) {
        if (parseInt(tag.style.top) > parseInt(this.style.top) && parseInt(tag.style.top) < (parseInt(this.style.top) + parseInt(this.offsetHeight))) {
          blnResult = false;
        }
      }
    }
    );
  }
  return blnResult;
}