docs: function(element, options) {
      this.element = $(element).addClass('colorpicker-element');
      this.options = $.extend(true, {}, defaults, this.element.data(), options);
      this.component = this.options.component;
      this.component = (this.component !== false) ? this.element.find(this.component) : false;
      if (this.component && (this.component.length === 0)) {
        this.component = false;
      }
      this.container = (this.options.container === true) ? this.element : this.options.container;
      this.container = (this.container !== false) ? $(this.container) : false;
  
      // Is the element an input? Should we search inside for any input?
      this.input = this.element.is('input') ? this.element : (this.options.input ?
        this.element.find(this.options.input) : false);
      if (this.input && (this.input.length === 0)) {
        this.input = false;
      }
      // Set HSB color
      this.color = this.createColor(this.options.color !== false ? this.options.color : this.getValue());
  
      this.format = this.options.format !== false ? this.options.format : this.color.origFormat;
  
      if (this.options.color !== false) {
        this.updateInput(this.color);
        this.updateData(this.color);
      }
  
      this.disabled = false;
  
      // Setup picker
      var $picker = this.picker = $(this.options.template);
      if (this.options.customClass) {
        $picker.addClass(this.options.customClass);
      }
      if (this.options.inline) {
        $picker.addClass('colorpicker-inline colorpicker-visible');
      } else {
        $picker.addClass('colorpicker-hidden');
      }
      if (this.options.horizontal) {
        $picker.addClass('colorpicker-horizontal');
      }
      if (
        (['rgba', 'hsla', 'alias'].indexOf(this.format) !== -1) ||
        this.options.format === false ||
        this.getValue() === 'transparent'
      ) {
        $picker.addClass('colorpicker-with-alpha');
      }
      if (this.options.align === 'right') {
        $picker.addClass('colorpicker-right');
      }
      if (this.options.inline === true) {
        $picker.addClass('colorpicker-no-arrow');
      }
      if (this.options.colorSelectors) {
        var colorpicker = this,
          selectorsContainer = colorpicker.picker.find('.colorpicker-selectors');
  
        if (selectorsContainer.length > 0) {
          $.each(this.options.colorSelectors, function(name, color) {
            var $btn = $('<i />')
              .addClass('colorpicker-selectors-color')
              .css('background-color', color)
              .data('class', name).data('alias', name);
  
            $btn.on('mousedown.colorpicker touchstart.colorpicker', function(event) {
              event.preventDefault();
              colorpicker.setValue(
                colorpicker.format === 'alias' ? $(this).data('alias') : $(this).css('background-color')
              );
            });
            selectorsContainer.append($btn);
          });
          selectorsContainer.show().addClass('colorpicker-visible');
        }
      }
  
      // Prevent closing the colorpicker when clicking on itself
      $picker.on('mousedown.colorpicker touchstart.colorpicker', $.proxy(function(e) {
        if (e.target === e.currentTarget) {
          e.preventDefault();
        }
      }, this));
  
      // Bind click/tap events on the sliders
      $picker.find('.colorpicker-saturation, .colorpicker-hue, .colorpicker-alpha')
        .on('mousedown.colorpicker touchstart.colorpicker', $.proxy(this.mousedown, this));
  
      $picker.appendTo(this.container ? this.container : $('body'));
  
      // Bind other events
      if (this.input !== false) {
        this.input.on({
          'keyup.colorpicker': $.proxy(this.keyup, this)
        });
        this.input.on({
          'input.colorpicker': $.proxy(this.change, this)
        });
        if (this.component === false) {
          this.element.on({
            'focus.colorpicker': $.proxy(this.show, this)
          });
        }
        if (this.options.inline === false) {
          this.element.on({
            'focusout.colorpicker': $.proxy(this.hide, this)
          });
        }
      }
  
      if (this.component !== false) {
        this.component.on({
          'click.colorpicker': $.proxy(this.show, this)
        });
      }
  
      if ((this.input === false) && (this.component === false)) {
        this.element.on({
          'click.colorpicker': $.proxy(this.show, this)
        });
      }
  
      // for HTML5 input[type='color']
      if ((this.input !== false) && (this.component !== false) && (this.input.attr('type') === 'color')) {
  
        this.input.on({
          'click.colorpicker': $.proxy(this.show, this),
          'focus.colorpicker': $.proxy(this.show, this)
        });
      }
      this.update();
  
      $($.proxy(function() {
        this.element.trigger('create');
      }, this));
    }