(function ($) {

  var name_space = 'marquee';

  $.fn[name_space] = function () {


    var $elements = $(this);


    // 繰り返し処理を行う
    $elements.each(function (i) {

      var $this = $(this);
      var $document = $(document);
      var $marquee;
      
      var contents = $this.html();

      var textMetrix = getTextMetrix($this);

      var timer;
      
      if (textMetrix.width < $this.width()) {
        return true;
      }


/* 初期化 */

      $this.css({
        position : 'relative',
        height : textMetrix.height,
        display : 'block',
        overflow : 'hidden'
      });
      
      // マーキー用の要素を生成
      $this.html('<span class="' + name_space + '">' + contents + '</span>');

      $marquee = $this.children('.marquee');
      
      $marquee.css({
        position : 'absolute',
        width : textMetrix.width * 2
      });


/* イベント登録 */

      $this.bind({
        mouseenter : onMouseEnter,
        mouseleave : onMouseLeave
      });
      
      $(document).mouseout(function (evt) {
        if (evt.relatedTarget == null) {
          onMouseLeave();
        }
      });


/* イベントハンドラ */

      function onMouseEnter(evt) {
  
        var left = 0;
        var limit = textMetrix.width;
        
        clearTimeout(timer);
        timer = setTimeout(loop, 33);
        
        function loop() {
      
          ++left;
          
          if (left >= limit) {
            left = -$this.outerWidth();
          }
      
          $marquee.css({
            left : -left
          });
      
          timer = setTimeout(loop, 33);
      
        }

      }
      
      function onMouseLeave(evt) {
        clearTimeout(timer);
        $marquee.css({
          left : 0
        });
      }

    });
      
      
/* 関数 */

    // テキストのオリジナルの大きさを取得
    function getTextMetrix($target) {

      var $body = $('body');
      var $textMetrix, $textBox;
    
      var html = $target.html();
    
      var textMetrix = {
        width  : 0,
        height : 0
      };
    
      var textStyles = [
        'font-size',
        'font-style',
        'font-weight',
        'font-family',
        'line-height',
        'text-transform',
        'letter-spacing'
      ];
    
      $body.append('<div id="textMetrix"><div id="textMetrix-textBox">' + html + '</div></div>');

      $textMetrix = $('#textMetrix');
      $textBox    = $('#textMetrix-textBox');
    
      $textMetrix.css({
        position : 'absolute',
        top : 0,
        left : '-' + html.length + 'em',
        width : html.length + 'em'
      });
      
      var test = '';

      for (var i = 0; i < textStyles.length; i++) {
        var currentStyle = $target.css(textStyles[i]);
        if (currentStyle == '1px') currentStyle = 'inherit';
        $textBox.css(textStyles[i], currentStyle);
      }
      
      $textBox.css({
        position : 'absolute',
        top : 0,
        left : 0
      });
      
      textMetrix.width  = $textBox.width();
      textMetrix.height = $textBox.height();
      
      $textMetrix.remove();
      
      return textMetrix;
    }

    return this;
  };

})(jQuery);