(function($){
  $.fn.tickerTape = function(options) {              
    var options = $.extend({}, $.fn.tickerTape.defaults, options);

    return this.each(function() {
      var rootNode = $(this);
       
      $.fn.tickerTape.CreateViewPort(rootNode);
      
      if(options.url != null){
        $.fn.tickerTape.LoadItems(rootNode, options);
      } else {
        $.fn.tickerTape.Setup(rootNode, options);
      }
    });
  };
  
  $.fn.tickerTape.LoadItems = function(rootNode, options){  
    $.getJSON(options.url, function(data){
      $(rootNode).empty();
      
      $.each(data, function(i,item){
        var liNode = $('<li>' + item + '</li>');
        $(rootNode).append($(liNode));
      });
      
      $.fn.tickerTape.Setup(rootNode, options);
    });
  };
  
  $.fn.tickerTape.Setup = function(rootNode, options){
    var width = 0;

    $(rootNode).find('li').each(function (i) {
      $(this).css('float', 'left');
      width += $(this).outerWidth(true);
      $(rootNode).append($(this).clone());
    });
        
    $(rootNode).css('width', (2 * width) + 'px');
        
    var duration = (width * 1000) / options.speed;   
        
    $.fn.tickerTape.Animate(rootNode, options.direction, width, duration);      
  };
  
  $.fn.tickerTape.CreateViewPort = function(rootNode){
    var viewport = $('<div></div>');
    $(viewport).css('width', $(rootNode).css('width'));
    $(viewport).css('height', $(rootNode).css('height'));
    $(viewport).css('position', 'relative');
    $(viewport).css('overflow', 'hidden');
        
    $(rootNode).css('position', 'absolute');
        
    $(rootNode).wrap(viewport);
  };

  $.fn.tickerTape.Animate = function(rootNode, direction, width, duration){
    var scrollDirection = '';
        
    if(direction != 'left'){
      $(rootNode).css('left', - width + 'px');
      scrollDirection = '+';
    } else {
      $(rootNode).css('left', '0px');
      scrollDirection = '-';
    }
          
    $(rootNode).animate({"left": scrollDirection + '=' + width + 'px'}, duration, 'linear', function(){
      $.fn.tickerTape.Animate(rootNode, direction, width, duration);
    });
  };

  $.fn.tickerTape.defaults = {
    speed: 50,
    direction: 'left',
    url: null
  };

})(jQuery);