(function ($) {

  var replaceFlash = {
    FADE_DURATION  : 1000,
    FRAME_DURATION : 7000,
    FRAME_HEIGHT   : 320, // pixels
    FRAME_WIDTH    : 960, // pixels
    IMG_SRC_DIR    : '/global-us/images/flash-replace/',
    BANNER_POS     : {
      'position'   : 'relative',
      'height'     : '320px',
      'margin-top' : '13px'
    },

    init: function (options) {
      if (!options.el) { return; }
      this.el = $(options.el);
      this.imagesDir = this.getDir();

      this.images = this.getImages();
      if (this.images === false) { return; }

      this.reposition();
      this.replaceWithImages();
      this.animate();
    },

    getDir: function () {
      var page = this.el.attr('data-page');
      return this.IMG_SRC_DIR + page + '/';
    },

    getImages: function () {
      var imagesAttr = this.el.attr('data-images'),
          images;
      if (!imagesAttr || imagesAttr === '') { return false; }
      images = imagesAttr.split(',');
      return images.length > 0 ? images : false;
    },

    reposition: function () {
      this.el.css(this.BANNER_POS);
    },

    replaceWithImages: function () {
      var html = this.generateHTML(),
          that = this;
      this.el.empty();
      $.each(html, function (i, img) { that.el.append(img); });
      this.el.find('img:first').addClass('current');
    },

    generateHTML: function () {
      var html = [],
          that = this,
          totalImages = this.images.length;

      $.each(this.images, function (i, imageSrc) {
        var tag = $('<img>').attr({
          'src': that.imagesDir + imageSrc,
          'height': that.FRAME_HEIGHT,
          'width': that.FRAME_WIDTH
        }).css({
          'position': 'absolute',
          'top': 0,
          'left': 0,
          'z-index': totalImages - i
        });
        html.push(tag);
      });
      return html;
    },

    animate: function () {
      var that = this;
      if (this.images.length <= 1) { return; }
      setInterval(function () {
        that.advanceFrame();
      }, this.FRAME_DURATION);
    },

    advanceFrame: function () {
      var currFrame    = this.el.find('img.current'),
          nextFrame    = currFrame.next(),
          hasNextFrame = nextFrame.length === 1,
          origZIndex   = currFrame.css('z-index');

      if (!hasNextFrame) {
        nextFrame = this.el.find('img:first');
      }

      // Rearrange z-index for proper fading from-to
      currFrame.css('z-index', 100);
      nextFrame.show();

      // Advance currrent image pointer, reset original z-index
      currFrame.fadeOut(this.FADE_DURATION, function () {
        currFrame.removeClass('current').css('z-index', origZIndex);
        nextFrame.addClass('current');
      });
    }
  };

  // Surface replaceFlash as a jQuery plugin
  $.fn.replaceFlash = function () {
    if (this.length === 0) { return; }
    replaceFlash.init({el: this});
    return this;
  };

  // Set up the plugin
  $(function () {
    var
      usesTouch = $('#usesTouch').val() == 'true',
      flashDiv  = $('#flash-banner');

    // Bail if we're not on a touch device or if there's no flash banner
    // Also, shim iOS detection for WWLLC until we can get it on the backend
    if (!usesTouch && !navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
      return;
    }

    flashDiv.replaceFlash();
  });
})(jQuery);