if(typeof Vodpod == "undefined") var Vodpod = {};

(function($) {
  Vodpod.FormFieldPopup = function(options) {
    this.init(options);
  };

  $.extend(Vodpod.FormFieldPopup.prototype, {
    options: null,
    div: null,
    blur: null,
  
    init: function(options) {
      this.options = options;
      var that = this;
      
      if (options) {
        options.field.focus(function() {
          that.show(options);
        }).blur(function() {
          that.hide();
          
          if (that.blur) {
            setTimeout(that.blur, 100);
          }
        });
      }
    },
  
    show: function(options) {
      this.hide();
      var offset = options.field.offset();
    
      var div = $('<div></div>').css({
        display: 'none',
        position: 'absolute',
        left: (offset.left + options.field.width() + options.offsetLeft) + 'px',
        top: (offset.top + options.offsetTop) + 'px',
        width: options.width + 'px',
        textAlign: 'left',
        backgroundImage: 'url(/images/left_arrow.png)',
        padding: '0 0 0 15px',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: '0 2px',
        fontSize: '12px'
      });
    
      div.append(options.content);
      $(document.body).append(div);
      div.fadeIn('fast');
      this.div = div;
    },
  
    hide: function() {
      if (this.div)
        this.div.remove();
    },
    
    showError: function(content) {
      options = $.extend({}, this.options);
      options.content = '<span style="color:red;">' + content + '</span>';
      this.show(options);
    },
    
    showMessage: function(content) {
      options = $.extend({}, this.options);
      options.content = content;
      this.show(options);
    }
  });
})(jQuery);