﻿var Animator = {
  toggleElements: function (box, newEl, oldEl) {
    Animator.replaceElement(box, newEl, oldEl, null, true);
  },
  replaceElement: function (box, newEl, oldEl, onAfterReplacement, toggleInsteadOfReplace) {
    box.animate({ opacity: 0 }, 50, function () {
      var containerHeight = box.outerHeight(true);
      box.attr("style", "overflow:hidden; opacity:0; height:" + containerHeight + ";");
      if (oldEl) {
        if (toggleInsteadOfReplace) {
          newEl.insertBefore(oldEl);
          oldEl.hide();
        }
        else {
          oldEl.replaceWith(newEl);
        }
      }
      else {
        box.empty().append(newEl);
      }
      if (onAfterReplacement)
        onAfterReplacement.call();
      box.attr("style", "overflow:visible; opacity:0; height:" + containerHeight + ";");
      containerHeight = newEl.outerHeight(true);
      // De animatie geeft een vreemde error in IE. Dan maar niet animeren in IE.
      if (!jQuery.browser.msie) {
        box.animate({ height: containerHeight, opacity: 1 }, 100, function () {
          box.animate({ opacity: 1 }, 90, function () {
            box.removeAttr("style");
          });
        });
      }
      if (jQuery.browser.msie && jQuery.browser.version > 6) IEShadows.init();
    });
  },
  highlightElement: function (el) {
    var opac = 1;
    var n = 0;
    var interval = setInterval(function () {
      el.animate({ opacity: opac }, { duration: 200, easing: 'easeOutSine' });
      if (opac == 1) opac = 0.5;
      else opac = 1;
      n++;
      if (n == 9) {
        clearInterval(interval);
      }
    }, 200);
  }
};
