docs: function()
                {
                  var win = settings.window,
                      popup = win.expandable ? $($this).next().find('.Container:first') : null;
                  container = win.expandable ? $('<div/>') : $($this);
                  container.addClass('jPicker Container');
                  if (win.expandable) container.hide();
                  container.get(0).onselectstart = function(event){ if (event.target.nodeName.toLowerCase() !== 'input') return false; };
                  // inject html source code - we are using a single table for this control - I know tables are considered bad, but it takes care of equal height columns and
                  // this control really is tabular data, so I believe it is the right move
                  var all = color.active.val('all');
                  if (win.alphaPrecision < 0) win.alphaPrecision = 0;
                  else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
                  var controlHtml='<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + (win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="' + images.clientPath + images.colorBar.arrow.file + '" class="Arrow"/></div></td><td colspan="2" class="Preview">' + localization.text.newColor + '<div><span class="Active" title="' + localization.tooltips.colors.newColor + '">&nbsp;</span><span class="Current" title="' + localization.tooltips.colors.currentColor + '">&nbsp;</span></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><hr/><div class="Grid">&nbsp;</div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio + '"><input type="radio" value="h"' + (settings.color.mode == 'h' ? ' checked="checked"' : '') + '/>H:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/>&nbsp;&deg;</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input type="radio" value="s"' + (settings.color.mode == 's' ? ' checked="checked"' : '') + '/>S:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/>&nbsp;%</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio + '"><input type="radio" value="v"' + (settings.color.mode == 'v' ? ' checked="checked"' : '') + '/>V:</label><br/><br/></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/>&nbsp;%<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input type="radio" value="r"' + (settings.color.mode == 'r' ? ' checked="checked"' : '') + '/>R:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input type="radio" value="g"' + (settings.color.mode == 'g' ? ' checked="checked"' : '') + '/>G:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input type="radio" value="b"' + (settings.color.mode == 'b' ? ' checked="checked"' : '') + '/>B:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input type="radio" value="a"' + (settings.color.mode == 'a' ? ' checked="checked"' : '') + '/>A:</label>' : '&nbsp;') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision((all.a * 100) / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/>&nbsp;%' : '&nbsp;') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">#:<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>' + (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : '&nbsp;') + '</tr></tbody></table>';
                  if (win.expandable)
                  {
                    container.html(controlHtml);
                    if($(document.body).children('div.jPicker.Container').length==0)$(document.body).prepend(container);
                    else $(document.body).children('div.jPicker.Container:last').after(container);
                    container.mousedown(
                      function()
                      {
                        $(document.body).children('div.jPicker.Container').css({zIndex:10});
                        container.css({zIndex:20});
                      });
                    container.css( // positions must be set and display set to absolute before source code injection or IE will size the container to fit the window
                      {
                        left:
                          win.position.x == 'left' ? (popup.offset().left - 530 - (win.position.y == 'center' ? 25 : 0)) + 'px' :
                          win.position.x == 'center' ? (popup.offset().left - 260) + 'px' :
                          win.position.x == 'right' ? (popup.offset().left - 10 + (win.position.y == 'center' ? 25 : 0)) + 'px' :
                          win.position.x == 'screenCenter' ? (($(document).width() >> 1) - 260) + 'px' : (popup.offset().left + parseInt(win.position.x)) + 'px',
                        position: 'absolute',
                        top: win.position.y == 'top' ? (popup.offset().top - 312) + 'px' :
                             win.position.y == 'center' ? (popup.offset().top - 156) + 'px' :
                             win.position.y == 'bottom' ? (popup.offset().top + 25) + 'px' : (popup.offset().top + parseInt(win.position.y)) + 'px'
                      });
                  }
                  else
                  {
                    container = $($this);
                    container.html(controlHtml);
                  }
                  // initialize the objects to the source code just injected
                  var tbody = container.find('tbody:first');
                  colorMapDiv = tbody.find('div.Map:first');
                  colorBarDiv = tbody.find('div.Bar:first');
                  var MapMaps = colorMapDiv.find('span'),
                      BarMaps = colorBarDiv.find('span');
                  colorMapL1 = MapMaps.filter('.Map1:first');
                  colorMapL2 = MapMaps.filter('.Map2:first');
                  colorMapL3 = MapMaps.filter('.Map3:first');
                  colorBarL1 = BarMaps.filter('.Map1:first');
                  colorBarL2 = BarMaps.filter('.Map2:first');
                  colorBarL3 = BarMaps.filter('.Map3:first');
                  colorBarL4 = BarMaps.filter('.Map4:first');
                  colorBarL5 = BarMaps.filter('.Map5:first');
                  colorBarL6 = BarMaps.filter('.Map6:first');
                  // create color pickers and maps
                  colorMap = new Slider(colorMapDiv,
                    {
                      map:
                      {
                        width: images.colorMap.width,
                        height: images.colorMap.height
                      },
                      arrow:
                      {
                        image: images.clientPath + images.colorMap.arrow.file,
                        width: images.colorMap.arrow.width,
                        height: images.colorMap.arrow.height
                      }
                    });
                  colorMap.bind(mapValueChanged);
                  colorBar = new Slider(colorBarDiv,
                    {
                      map:
                      {
                        width: images.colorBar.width,
                        height: images.colorBar.height
                      },
                      arrow:
                      {
                        image: images.clientPath + images.colorBar.arrow.file,
                        width: images.colorBar.arrow.width,
                        height: images.colorBar.arrow.height
                      }
                    });
                  colorBar.bind(colorBarValueChanged);
                  colorPicker = new ColorValuePicker(tbody, color.active, win.expandable && win.bindToInput ? win.input : null, win.alphaPrecision);
                  var hex = all != null ? all.hex : null,
                      preview = tbody.find('.Preview'),
                      button = tbody.find('.Button');
                  activePreview = preview.find('.Active:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
                  currentPreview = preview.find('.Current:first').css({ backgroundColor: hex && '#' + hex || 'transparent' }).bind('click', currentClicked);
                  setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4);
                  okButton = button.find('.Ok:first').bind('click', okClicked);
                  cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
                  grid = button.find('.Grid:first');
                  setTimeout(
                    function()
                    {
                      setImg.call($this, colorMapL1, images.clientPath + 'Maps.png');
                      setImg.call($this, colorMapL2, images.clientPath + 'Maps.png');
                      setImg.call($this, colorMapL3, images.clientPath + 'map-opacity.png');
                      setImg.call($this, colorBarL1, images.clientPath + 'Bars.png');
                      setImg.call($this, colorBarL2, images.clientPath + 'Bars.png');
                      setImg.call($this, colorBarL3, images.clientPath + 'Bars.png');
                      setImg.call($this, colorBarL4, images.clientPath + 'Bars.png');
                      setImg.call($this, colorBarL5, images.clientPath + 'bar-opacity.png');
                      setImg.call($this, colorBarL6, images.clientPath + 'AlphaBar.png');
                      setImg.call($this, preview.find('div:first'), images.clientPath + 'preview-opacity.png');
                    }, 0);
                  tbody.find('td.Radio input').bind('click', radioClicked);
                  // initialize quick list
                  if (color.quickList && color.quickList.length > 0)
                  {
                    var html = '';
                    for (i = 0; i < color.quickList.length; i++)
                    {
                      /* if default colors are hex strings, change them to color objects */
                      if ((typeof (color.quickList[i])).toString().toLowerCase() == 'string') color.quickList[i] = new Color({ hex: color.quickList[i] });
                      var alpha = color.quickList[i].val('a');
                      var ahex = color.quickList[i].val('ahex');
                      if (!win.alphaSupport && ahex) ahex = ahex.substring(0, 6) + 'ff';
                      var quickHex = color.quickList[i].val('hex');
                      if(!ahex) ahex = "00000000";
                      html+='<span class="QuickColor"' + (ahex && ' title="#' + ahex + '"' || 'none') + ' style="background-color:' + (quickHex && '#' + quickHex || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.png)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + Math.precision(alpha / 255, 4) + ';filter:Alpha(opacity=' + Math.precision(alpha / 2.55, 4) + ')' : '') + '">&nbsp;</span>';
                    }
                    setImg.call($this, grid, images.clientPath + 'bar-opacity.png');
                    grid.html(html);
                    grid.find('.QuickColor').click(quickPickClicked);
                  }
                  setColorMode.call($this, settings.color.mode);
                  color.active.bind(activeColorChanged);
                  $.isFunction(liveCallback) && color.active.bind(liveCallback);
                  color.current.bind(currentColorChanged);
                  // bind to input
                  if (win.expandable)
                  {
                    $this.icon = popup.parents('.Icon:first');
                    iconColor = $this.icon.find('.Color:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
                    iconAlpha = $this.icon.find('.Alpha:first');
                    setImg.call($this, iconAlpha, images.clientPath + 'bar-opacity.png');
                    setAlpha.call($this, iconAlpha, Math.precision(((255 - (all != null ? all.a : 0)) * 100) / 255, 4));
                    iconImage = $this.icon.find('.Image:first').css(
                      {
                        backgroundImage: 'url(\'' + images.clientPath + images.picker.file + '\')'
                      }).bind('click', iconImageClicked);
                    if (win.bindToInput&&win.updateInputColor)
                      win.input.css(
                        {
                          backgroundColor: hex && '#' + hex || 'transparent',
                          color: all == null || all.v > 75 ? '#000000' : '#ffffff'
                        });
                    moveBar = tbody.find('.Move:first').bind('mousedown', moveBarMouseDown);
                    color.active.bind(expandableColorChanged);
                  }
                  else show.call($this);
                }