/********************************************
  * Generic Confirmation Animation
  *********************************************/
  confirmationAnimations = {};

  /**
   * Generic "confirmation" animations.  Creates a partially opaque mask with a messsage centered within.
   * 
   * @param el {HTMLElement} The element to mask and center within
   * @param animId {String} Arbitrary unique id; use to add to LADDERS.confirmationAnimations
   * @param message {String} Message to display
   * @param messageClass {String} ['success', 'error', 'info'] (Optional, defaults to 'success')
   * 
   * @return {Object} animation: {YAHOO.util.Anim}, overlay: {YAHOO.widget.Overlay}
   */
  function confirmationAnimation(el, animId, message, messageClass, fadeOutDuration) {
      messageClass = (messageClass || 'success');
      var containerRegion = YAHOO.util.Dom.getRegion(el);
      var fadeInDuration = 0.15;
      
      //create overlay with message
      var confirmationOverlay = new YAHOO.widget.Overlay('confirmation-' + animId, {
          effect: {effect: YAHOO.widget.ContainerEffect.FADE, duration: fadeInDuration},
          visible: false,
          zIndex: 6
      });
      confirmationOverlay.setBody(message.replace(/\\n/, '<br/>'));
      YAHOO.util.Dom.addClass(confirmationOverlay.element, (messageClass || 'success') + 'Messages');
      
      //create mask
      var confirmationMask = document.createElement('DIV');
      confirmationMask.className = messageClass + ' confirmation-mask';
      YAHOO.util.Dom.setStyle(confirmationMask, 'opacity', 0);
      YAHOO.util.Dom.setStyle(confirmationMask, 'z-index', 5);
      confirmationMask.style.width = containerRegion.width + 'px';
      confirmationMask.style.height = containerRegion.height + 'px';
      
      var maskFadeIn = new YAHOO.util.Anim(confirmationMask, {opacity: {from: 0, to: .5}}, fadeInDuration);
      var maskFadeOut = new YAHOO.util.Anim(confirmationMask, {opacity: {from: .5, to: 0}}, fadeOutDuration ? fadeOutDuration : 1.5, YAHOO.util.Easing.easeIn);
      
      //when we render the message overlay, add the mask and trigger the chain of animations
      confirmationOverlay.renderEvent.subscribe(function() {
          var overlayRegion = YAHOO.util.Dom.getRegion(this.element);
          var clientRegion = YAHOO.util.Dom.getClientRegion();
          el.appendChild(confirmationMask);
          YAHOO.util.Dom.setXY(confirmationMask, containerRegion);
          this.cfg.setProperty('x', containerRegion.x + (containerRegion.width - overlayRegion.width)/2);
          if (containerRegion.bottom > clientRegion.bottom)  {
              this.cfg.setProperty('y', containerRegion.y + ((clientRegion.bottom - containerRegion.y) - overlayRegion.height)/2);
          }
          else {
              this.cfg.setProperty('y', containerRegion.y + (containerRegion.height - overlayRegion.height)/2);
          }
          maskFadeIn.animate();
      });
      
      //starting the mask fadein should also show the message
      maskFadeIn.onStart.subscribe(confirmationOverlay.show, confirmationOverlay, true);
      //hide the mask .5 sec after the fade-in animation completes
      maskFadeIn.onComplete.subscribe(maskFadeOut.animate, maskFadeOut, true);
      //delete the mask and remove the message overlay when fadeOut is finished 
      maskFadeOut.onComplete.subscribe(confirmationOverlay.hide, confirmationOverlay, true);
      //destroy the overlay when it's hidden so that it doesn't pop up on a 2nd firing
      confirmationOverlay.hideEvent.subscribe(function() {
          confirmationMask.parentNode.removeChild(confirmationMask);
          this.destroy();
      });
      
      confirmationOverlay.render(el);
      
      confirmationAnimations[animId] = {
          animation: maskFadeOut,
          overlay: confirmationOverlay
      };
      
      return confirmationAnimations[animId];
  }