/**
 * @file Health.js
 * Code for setting up the health banner
 *
 * @author Matthew Oliveira
 * @date 8-Jul-2010
 *
 * @todo check on box model in ie <= 7
 */
var Health = (function() {
  /**
   * Private variables
   */
  var step = 0;
  var animation_steps = [fade_in_bg, slide_in_nav];

  /**
   * Public methods
   */
  function init () {
    navigation_init();
    animate();
  }

  /**
   * Private methods
   */
  function animate() {

    // Run animation, until finished
    if (step < animation_steps.length) {
      animation_steps[step++]();
    }
  }

  function navigation_init() {
    
    $('.banner-nav').click(function() {
      var nav_num = this.id.substring(11, this.id.length);

      /**
       * Animation steps on click:
       * if (click is same as shown)
       *   do nothing
       * else
       *   clear current animations
       *   hide featured text
       *   show end bg image behind current
       *   set active nav item
       *   fade out current
       *   set the active bg
       *   slide in featured text
       */
      if ($('.banner-nav.active')[0].id != this.id) {

        // Clear any current animations
        $('.health-bg, .featured-text, .click-slide').stop(true, true);
        
        $('.featured-text, .click-slide').removeAttr('style');
        $('#health-bg-' + nav_num).show();

        // Select this nav item
        $('.banner-nav').removeClass('active');
        $('#banner-nav-' + nav_num).addClass('active');

        $('.health-bg.active').fadeOut({
          duration: 1000,
          easing: 'easeOutQuad',
          complete: function() {
            // Set active background
            $('.health-bg').removeClass('active');
            $('#health-bg-' + nav_num).addClass('active');

            // Slide in featured text
            $('#featured-text-' + nav_num).animate({
              left: '25px'
            }, 400, 'easeOutQuad');
            $('#click-slide-' + nav_num).animate({
              right: '0px'
            }, 400, 'easeOutQuad');
          }
        });
      }
    });
  }

  /**
   * Fades in the first background element, triggering the navigation animation
   * 40% of the way through.
   */
  function fade_in_bg() {
    var trigger, move_on = 0.4;

    $('#health-bg-1').addClass('active').fadeIn({
      duration: 2000,
      easing: 'easeOutQuad',
      step: function(progress) {

        if (!trigger && progress > move_on) {
          step++;
          trigger = true;
          slide_in_nav();
        }
      }
    });
  }

  /**
   * Fades each piece of the navigation in.  The next nav item in line is
   * triggered to fade in move_on% of the way through.  As a final step,
   * the first nav items featured text is slid in.
   */
  function slide_in_nav() {
    var n1_t, n2_t, n3_t, n4_t, move_on = 0.4;

    $('#banner-nav-1 .banner-nav-shadow').show();
    $('#banner-nav-1 .banner-nav-inner').fadeIn({
      duration: 600,
      easing: 'easeOutQuad',
      queue: true,
      step: function(progress) {

        if (!n1_t && progress > move_on) {
          $('#banner-nav-2 .banner-nav-shadow').show();
          $('#banner-nav-2 .banner-nav-inner').fadeIn({
            duration: 600,
            easing: 'easeOutQuad',
            queue: true,
            step: function(progress) {

              if (!n2_t && progress > move_on) {
                $('#banner-nav-3 .banner-nav-shadow').show();
                $('#banner-nav-3 .banner-nav-inner').fadeIn({
                  duration: 600,
                  easing: 'easeOutQuad',
                  queue: true,
                  step: function(progress) {

                    if (!n3_t && progress > move_on) {
                      $('#banner-nav-4 .banner-nav-shadow').show();
                      $('#banner-nav-4 .banner-nav-inner').fadeIn({
                        duration: 600,
                        easing: 'easeOutQuad',
                        queue: true,
                        step: function(progress) {

                          if (!n4_t && progress > move_on) {
                            $('#banner-nav-5 .banner-nav-shadow').show();
                            $('#banner-nav-5 .banner-nav-inner').fadeIn({
                              duration: 600,
                              easing: 'easeOutQuad',
                              queue: true,
                              complete: function() {
                                // Slide in featured text
                                $('#featured-text-1').animate({
                                  left: '25px'
                                }, 400, 'easeOutQuad');
                                $('#click-slide-1').animate({
                                  right: '0px'
                                }, 400, 'easeOutQuad');
                                $('#banner-nav-1').addClass('active');

                                animate();
                              }
                            });
                            n4_t = true;
                          }
                        }
                      });
                      n3_t = true;
                    }
                  }
                });
                n2_t = true;
              }
            }
          });
          n1_t = true;
        }
      }
    });
  }

  /**
   * Return the public methods
   */
  return {
    init: init
  };

}());

// Kick off the animation on document load
$(document).ready(function() {
  Health.init();
});