var timeout = 8000;
var fadetime = 2000;
var maskFramerate = 10;
var next = 1;
var internalNumImages;
var maskFrame;
try {
  internalNumImages = numImages;
}
catch(err) {
  internalNumImages = 1;
}

var cycle2 = function() {
  var subnav = $('#sub-nav');
  var ofs = 229 * next;
  subnav.css('background-position', '0 -' + ofs + 'px');
  $('#sub-nav-cycler').fadeOut(fadetime, function() {
    $('#sub-nav-cycler').css('background-position', '0 -' + ofs + 'px').show();
    
    next = next + 1;
    if (next >= internalNumImages) {
      next = 0;
    }
    window.setTimeout(cycle, timeout);    
  });
}

var cycle = function() {
  maskFrame = 0;
  var animateMask = function() {
    maskFrame = maskFrame + 1;
    var yOfs = maskFrame * -229;
    $('#sub-nav-maske').css('background-position', '0 ' + yOfs + 'px');
    if (maskFrame < 20) {
      window.setTimeout(animateMask, 1000 / maskFramerate);
    }
  };
  animateMask();
  var maskAnimateTime = 20000 / maskFramerate;
  var wait = Math.max(0, maskAnimateTime - fadetime);
  window.setTimeout(cycle2, wait);
}

$(document).ready(function(){
  function over() {
    $(this).addClass("hover");
    $(this).parent().children(".aktiv").removeClass("aktiv").addClass("semiaktiv");
  }
  function out() {
    $(this).removeClass("hover");
    $(this).parent().children(".semiaktiv").removeClass("semiaktiv").addClass("aktiv");
  }

  var subnav = $("#sub-nav");
  $("#sub-nav li, #nav li").hover(over, out)
  subnav.addClass("scripted");
  $("#sub-nav .ebene3").css("left", $("#sub-nav .ebene1 .aktiv .ebene2").width());
  
  $("#sub-nav .aktiv").parent().addClass("ist-aktiv");

  if (internalNumImages > 1) {
    subnav.prepend('<div id="sub-nav-maske"></div>');
    $('#sub-nav-maske')
      .css('position', 'absolute')
      .css('top', '0px')
      .css('width', '822px')
      .css('height', '229px')
      .css('background-image', 'url(pic/headanimation/maske.png)')
      .css('background-position', '0 0')
      .css('background-repeat', 'no-repeat');

    subnav.prepend('<div id="sub-nav-cycler"></div>');
    $('#sub-nav-cycler')
      .css('position', 'absolute')
      .css('top', '0px')
      .css('width', '822px')
      .css('height', '229px')
      .css('background-image', subnav.css('background-image'))
      .css('background-position', '0 0')
      .css('background-repeat', 'no-repeat');

    window.setTimeout(cycle, timeout);    
  }
});