/**
* author Remy Sharp
* url http://remysharp.com/tag/marquee
*/

(function($)
{
 $.fn.marquee = function(klass)
 {
  var newMarquee = [],
            last = this.length;

  // works out the left or right hand reset position, based on scroll
  // behavior, current direction and new direction
  function getReset(newDir, marqueeRedux, marqueeState)
  {
   var behavior = marqueeState.behavior, width = marqueeState.width, dir = marqueeState.dir;
   var r = 0;
   if (behavior == 'alternate')
   {
    r = newDir == 1 ? marqueeRedux[marqueeState.widthAxis] - (width * 2) : width;
   } else if (behavior == 'slide')
   {
    if (newDir == -1)
    {
     r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] : width;
    } else
    {
     r = dir == -1 ? marqueeRedux[marqueeState.widthAxis] - (width * 2) : 0;
    }
   } else
   {
    r = newDir == -1 ? marqueeRedux[marqueeState.widthAxis] : 0;
   }
   return r;
  }

  // single "thread" animation
  function animateMarquee()
  {
   var i = newMarquee.length,
                marqueeRedux = null,
                $marqueeRedux = null,
                marqueeState = {},
                newMarqueeList = [],
                hitedge = false;

   while (i--)
   {
    marqueeRedux = newMarquee[i];
    $marqueeRedux = $(marqueeRedux);
    marqueeState = $marqueeRedux.data('marqueeState');

    if ($marqueeRedux.data('paused') !== true)
    {
     // TODO read scrollamount, dir, behavior, loops and last from data
     marqueeRedux[marqueeState.axis] += (marqueeState.scrollamount * marqueeState.dir);

     // only true if it's hit the end
     hitedge = marqueeState.dir == -1 ? marqueeRedux[marqueeState.axis] <= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState) : marqueeRedux[marqueeState.axis] >= getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);

     if ((marqueeState.behavior == 'scroll' && marqueeState.last == marqueeRedux[marqueeState.axis]) || (marqueeState.behavior == 'alternate' && hitedge && marqueeState.last != -1) || (marqueeState.behavior == 'slide' && hitedge && marqueeState.last != -1))
     {
      if (marqueeState.behavior == 'alternate')
      {
       marqueeState.dir *= -1; // flip
      }
      marqueeState.last = -1;

      $marqueeRedux.trigger('stop');

      marqueeState.loops--;
      if (marqueeState.loops === 0)
      {
       if (marqueeState.behavior != 'slide')
       {
        marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
       } else
       {
        // corrects the position
        marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir * -1, marqueeRedux, marqueeState);
       }

       $marqueeRedux.trigger('end');
      } else
      {
       // keep this marquee going
       newMarqueeList.push(marqueeRedux);
       $marqueeRedux.trigger('start');
       marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
      }
     } else
     {
      newMarqueeList.push(marqueeRedux);
     }
     marqueeState.last = marqueeRedux[marqueeState.axis];

     // store updated state only if we ran an animation
     $marqueeRedux.data('marqueeState', marqueeState);
    } else
    {
     // even though it's paused, keep it in the list
     newMarqueeList.push(marqueeRedux);
    }
   }

   newMarquee = newMarqueeList;

   if (newMarquee.length)
   {
    setTimeout(animateMarquee, 25);
   }
  }

  // TODO consider whether using .html() in the wrapping process could lead to loosing predefined events...
  this.each(function(i)
  {
   var $marquee = $(this),
                width = $marquee.attr('width') || $marquee.width(),
                height = $marquee.attr('height') || $marquee.height(),
                $marqueeRedux = $marquee.after('<div ' + (klass ? 'class="' + klass + '" ' : '') + 'style="display: block-inline; width: ' + width + 'px; height: ' + height + 'px; overflow: hidden;"><div style="float: left; white-space: nowrap;">' + $marquee.html() + '</div></div>').next(),
                marqueeRedux = $marqueeRedux.get(0),
                hitedge = 0,
                direction = ($marquee.attr('direction') || 'left').toLowerCase(),
                marqueeState = {
                 dir: /down|right/.test(direction) ? -1 : 1,
                 axis: /left|right/.test(direction) ? 'scrollLeft' : 'scrollTop',
                 widthAxis: /left|right/.test(direction) ? 'scrollWidth' : 'scrollHeight',
                 last: -1,
                 loops: $marquee.attr('loop') || -1,
                 scrollamount: $marquee.attr('scrollamount') || this.scrollAmount || 2,
                 behavior: ($marquee.attr('behavior') || 'scroll').toLowerCase(),
                 width: /left|right/.test(direction) ? width : height
                };

   // corrects a bug in Firefox - the default loops for slide is -1
   if ($marquee.attr('loop') == -1 && marqueeState.behavior == 'slide')
   {
    marqueeState.loops = 1;
   }

   $marquee.remove();

   // add padding
   if (/left|right/.test(direction))
   {
    $marqueeRedux.find('> div').css('padding', '0 ' + width + 'px');
   } else
   {
    $marqueeRedux.find('> div').css('padding', height + 'px 0');
   }

   // events
   $marqueeRedux.bind('stop', function()
   {
    $marqueeRedux.data('paused', true);
   }).bind('pause', function()
   {
    $marqueeRedux.data('paused', true);
   }).bind('start', function()
   {
    $marqueeRedux.data('paused', false);
   }).bind('unpause', function()
   {
    $marqueeRedux.data('paused', false);
   }).data('marqueeState', marqueeState); // finally: store the state

   // todo - rerender event allowing us to do an ajax hit and redraw the marquee

   newMarquee.push(marqueeRedux);

   marqueeRedux[marqueeState.axis] = getReset(marqueeState.dir, marqueeRedux, marqueeState);
   $marqueeRedux.trigger('start');

   // on the very last marquee, trigger the animation
   if (i + 1 == last)
   {
    animateMarquee();
   }
  });

  return $(newMarquee);
 };
} (jQuery));