httemplate/elements/spectrum.js

   1 // Spectrum Colorpicker v1.2.0
   2 // https://github.com/bgrins/spectrum
   3 // Author: Brian Grinstead
   4 // License: MIT
   5
   6 (function (window, $, undefined) {
   7     var defaultOpts = {
   8
   9         // Callbacks
  10         beforeShow: noop,
  11         move: noop,
  12         change: noop,
  13         show: noop,
  14         hide: noop,
  15
  16         // Options
  17         color: false,
  18         flat: false,
  19         showInput: false,
  20         allowEmpty: false,
  21         showButtons: true,
  22         clickoutFiresChange: false,
  23         showInitial: false,
  24         showPalette: false,
  25         showPaletteOnly: false,
  26         showSelectionPalette: true,
  27         localStorageKey: false,
  28         appendTo: "body",
  29         maxSelectionSize: 7,
  30         cancelText: "cancel",
  31         chooseText: "choose",
  32         preferredFormat: false,
  33         className: "",
  34         showAlpha: false,
  35         theme: "sp-light",
  36         palette: ['fff', '000'],
  37         selectionPalette: [],
  38         disabled: false
  39     },
  40     spectrums = [],
  41     IE = !!/msie/i.exec( window.navigator.userAgent ),
  42     rgbaSupport = (function() {
  43         function contains( str, substr ) {
  44             return !!~('' + str).indexOf(substr);
  45         }
  46
  47         var elem = document.createElement('div');
  48         var style = elem.style;
  49         style.cssText = 'background-color:rgba(0,0,0,.5)';
  50         return contains(style.backgroundColor, 'rgba') || contains(style.backgroundColor, 'hsla');
  51     })(),
  52     inputTypeColorSupport = (function() {
  53         var colorInput = $("<input type='color' value='!' />")[0];
  54         return colorInput.type === "color" && colorInput.value !== "!";
  55     })(),
  56     replaceInput = [
  57         "<div class='sp-replacer'>",
  58             "<div class='sp-preview'><div class='sp-preview-inner'></div></div>",
  59             "<div class='sp-dd'>&#9660;</div>",
  60         "</div>"
  61     ].join(''),
  62     markup = (function () {
  63
  64         // IE does not support gradients with multiple stops, so we need to simulate
  65         //  that for the rainbow slider with 8 divs that each have a single gradient
  66         var gradientFix = "";
  67         if (IE) {
  68             for (var i = 1; i <= 6; i++) {
  69                 gradientFix += "<div class='sp-" + i + "'></div>";
  70             }
  71         }
  72
  73         return [
  74             "<div class='sp-container sp-hidden'>",
  75                 "<div class='sp-palette-container'>",
  76                     "<div class='sp-palette sp-thumb sp-cf'></div>",
  77                 "</div>",
  78                 "<div class='sp-picker-container'>",
  79                     "<div class='sp-top sp-cf'>",
  80                         "<div class='sp-fill'></div>",
  81                         "<div class='sp-top-inner'>",
  82                             "<div class='sp-color'>",
  83                                 "<div class='sp-sat'>",
  84                                     "<div class='sp-val'>",
  85                                         "<div class='sp-dragger'></div>",
  86                                     "</div>",
  87                                 "</div>",
  88                             "</div>",
  89                             "<div class='sp-clear sp-clear-display' title='Clear Color Selection'>",
  90                             "</div>",
  91                             "<div class='sp-hue'>",
  92                                 "<div class='sp-slider'></div>",
  93                                 gradientFix,
  94                             "</div>",
  95                         "</div>",
  96                         "<div class='sp-alpha'><div class='sp-alpha-inner'><div class='sp-alpha-handle'></div></div></div>",
  97                     "</div>",
  98                     "<div class='sp-input-container sp-cf'>",
  99                         "<input class='sp-input' type='text' spellcheck='false'  />",
 100                     "</div>",
 101                     "<div class='sp-initial sp-thumb sp-cf'></div>",
 102                     "<div class='sp-button-container sp-cf'>",
 103                         "<a class='sp-cancel' href='#'></a>",
 104                         "<button class='sp-choose'></button>",
 105                     "</div>",
 106                 "</div>",
 107             "</div>"
 108         ].join("");
 109     })();
 110
 111     function paletteTemplate (p, color, className) {
 112         var html = [];
 113         for (var i = 0; i < p.length; i++) {
 114             var current = p[i];
 115             if(current) {
 116                 var tiny = tinycolor(current);
 117                 var c = tiny.toHsl().l < 0.5 ? "sp-thumb-el sp-thumb-dark" : "sp-thumb-el sp-thumb-light";
 118                 c += (tinycolor.equals(color, current)) ? " sp-thumb-active" : "";
 119
 120                 var swatchStyle = rgbaSupport ? ("background-color:" + tiny.toRgbString()) : "filter:" + tiny.toFilter();
 121                 html.push('<span title="' + tiny.toRgbString() + '" data-color="' + tiny.toRgbString() + '" class="' + c + '"><span class="sp-thumb-inner" style="' + swatchStyle + ';" /></span>');
 122             } else {
 123                 var cls = 'sp-clear-display';
 124                 html.push('<span title="No Color Selected" data-color="" style="background-color:transparent;" class="' + cls + '"></span>');
 125             }
 126         }
 127         return "<div class='sp-cf " + className + "'>" + html.join('') + "</div>";
 128     }
 129
 130     function hideAll() {
 131         for (var i = 0; i < spectrums.length; i++) {
 132             if (spectrums[i]) {
 133                 spectrums[i].hide();
 134             }
 135         }
 136     }
 137
 138     function instanceOptions(o, callbackContext) {
 139         var opts = $.extend({}, defaultOpts, o);
 140         opts.callbacks = {
 141             'move': bind(opts.move, callbackContext),
 142             'change': bind(opts.change, callbackContext),
 143             'show': bind(opts.show, callbackContext),
 144             'hide': bind(opts.hide, callbackContext),
 145             'beforeShow': bind(opts.beforeShow, callbackContext)
 146         };
 147
 148         return opts;
 149     }
 150
 151     function spectrum(element, o) {
 152
 153         var opts = instanceOptions(o, element),
 154             flat = opts.flat,
 155             showSelectionPalette = opts.showSelectionPalette,
 156             localStorageKey = opts.localStorageKey,
 157             theme = opts.theme,
 158             callbacks = opts.callbacks,
 159             resize = throttle(reflow, 10),
 160             visible = false,
 161             dragWidth = 0,
 162             dragHeight = 0,
 163             dragHelperHeight = 0,
 164             slideHeight = 0,
 165             slideWidth = 0,
 166             alphaWidth = 0,
 167             alphaSlideHelperWidth = 0,
 168             slideHelperHeight = 0,
 169             currentHue = 0,
 170             currentSaturation = 0,
 171             currentValue = 0,
 172             currentAlpha = 1,
 173             palette = opts.palette.slice(0),
 174             paletteArray = $.isArray(palette[0]) ? palette : [palette],
 175             selectionPalette = opts.selectionPalette.slice(0),
 176             maxSelectionSize = opts.maxSelectionSize,
 177             draggingClass = "sp-dragging",
 178             shiftMovementDirection = null;
 179
 180         var doc = element.ownerDocument,
 181             body = doc.body,
 182             boundElement = $(element),
 183             disabled = false,
 184             container = $(markup, doc).addClass(theme),
 185             dragger = container.find(".sp-color"),
 186             dragHelper = container.find(".sp-dragger"),
 187             slider = container.find(".sp-hue"),
 188             slideHelper = container.find(".sp-slider"),
 189             alphaSliderInner = container.find(".sp-alpha-inner"),
 190             alphaSlider = container.find(".sp-alpha"),
 191             alphaSlideHelper = container.find(".sp-alpha-handle"),
 192             textInput = container.find(".sp-input"),
 193             paletteContainer = container.find(".sp-palette"),
 194             initialColorContainer = container.find(".sp-initial"),
 195             cancelButton = container.find(".sp-cancel"),
 196             clearButton = container.find(".sp-clear"),
 197             chooseButton = container.find(".sp-choose"),
 198             isInput = boundElement.is("input"),
 199             isInputTypeColor = isInput && inputTypeColorSupport && boundElement.attr("type") === "color",
 200             shouldReplace = isInput && !flat,
 201             replacer = (shouldReplace) ? $(replaceInput).addClass(theme).addClass(opts.className) : $([]),
 202             offsetElement = (shouldReplace) ? replacer : boundElement,
 203             previewElement = replacer.find(".sp-preview-inner"),
 204             initialColor = opts.color || (isInput && boundElement.val()),
 205             colorOnShow = false,
 206             preferredFormat = opts.preferredFormat,
 207             currentPreferredFormat = preferredFormat,
 208             clickoutFiresChange = !opts.showButtons || opts.clickoutFiresChange,
 209             isEmpty = !initialColor,
 210             allowEmpty = opts.allowEmpty && !isInputTypeColor;
 211
 212         function applyOptions() {
 213
 214             if (opts.showPaletteOnly) {
 215                 opts.showPalette = true;
 216             }
 217
 218             container.toggleClass("sp-flat", flat);
 219             container.toggleClass("sp-input-disabled", !opts.showInput);
 220             container.toggleClass("sp-alpha-enabled", opts.showAlpha);
 221             container.toggleClass("sp-clear-enabled", allowEmpty);
 222             container.toggleClass("sp-buttons-disabled", !opts.showButtons);
 223             container.toggleClass("sp-palette-disabled", !opts.showPalette);
 224             container.toggleClass("sp-palette-only", opts.showPaletteOnly);
 225             container.toggleClass("sp-initial-disabled", !opts.showInitial);
 226             container.addClass(opts.className);
 227
 228             reflow();
 229         }
 230
 231         function initialize() {
 232
 233             if (IE) {
 234                 container.find("*:not(input)").attr("unselectable", "on");
 235             }
 236
 237             applyOptions();
 238
 239             if (shouldReplace) {
 240                 boundElement.after(replacer).hide();
 241             }
 242
 243             if (!allowEmpty) {
 244                 clearButton.hide();
 245             }
 246
 247             if (flat) {
 248                 boundElement.after(container).hide();
 249             }
 250             else {
 251
 252                 var appendTo = opts.appendTo === "parent" ? boundElement.parent() : $(opts.appendTo);
 253                 if (appendTo.length !== 1) {
 254                     appendTo = $("body");
 255                 }
 256
 257                 appendTo.append(container);
 258             }
 259
 260             if (localStorageKey && window.localStorage) {
 261
 262                 // Migrate old palettes over to new format.  May want to remove this eventually.
 263                 try {
 264                     var oldPalette = window.localStorage[localStorageKey].split(",#");
 265                     if (oldPalette.length > 1) {
 266                         delete window.localStorage[localStorageKey];
 267                         $.each(oldPalette, function(i, c) {
 268                              addColorToSelectionPalette(c);
 269                         });
 270                     }
 271                 }
 272                 catch(e) { }
 273
 274                 try {
 275                     selectionPalette = window.localStorage[localStorageKey].split(";");
 276                 }
 277                 catch (e) { }
 278             }
 279
 280             offsetElement.bind("click.spectrum touchstart.spectrum", function (e) {
 281                 if (!disabled) {
 282                     toggle();
 283                 }
 284
 285                 e.stopPropagation();
 286
 287                 if (!$(e.target).is("input")) {
 288                     e.preventDefault();
 289                 }
 290             });
 291
 292             if(boundElement.is(":disabled") || (opts.disabled === true)) {
 293                 disable();
 294             }
 295
 296             // Prevent clicks from bubbling up to document.  This would cause it to be hidden.
 297             container.click(stopPropagation);
 298
 299             // Handle user typed input
 300             textInput.change(setFromTextInput);
 301             textInput.bind("paste", function () {
 302                 setTimeout(setFromTextInput, 1);
 303             });
 304             textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } });
 305
 306             cancelButton.text(opts.cancelText);
 307             cancelButton.bind("click.spectrum", function (e) {
 308                 e.stopPropagation();
 309                 e.preventDefault();
 310                 hide("cancel");
 311             });
 312
 313
 314             clearButton.bind("click.spectrum", function (e) {
 315                 e.stopPropagation();
 316                 e.preventDefault();
 317
 318                isEmpty = true;
 319
 320                 move();
 321                 if(flat) {
 322                     //for the flat style, this is a change event
 323                     updateOriginalInput(true);
 324                 }
 325             });
 326
 327
 328             chooseButton.text(opts.chooseText);
 329             chooseButton.bind("click.spectrum", function (e) {
 330                 e.stopPropagation();
 331                 e.preventDefault();
 332
 333                 if (isValid()) {
 334                     updateOriginalInput(true);
 335                     hide();
 336                 }
 337             });
 338
 339             draggable(alphaSlider, function (dragX, dragY, e) {
 340                 currentAlpha = (dragX / alphaWidth);
 341                 isEmpty = false;
 342                 if (e.shiftKey) {
 343                     currentAlpha = Math.round(currentAlpha * 10) / 10;
 344                 }
 345
 346                 move();
 347             });
 348
 349             draggable(slider, function (dragX, dragY) {
 350                 currentHue = parseFloat(dragY / slideHeight);
 351                 isEmpty = false;
 352                 move();
 353             }, dragStart, dragStop);
 354
 355             draggable(dragger, function (dragX, dragY, e) {
 356
 357                 // shift+drag should snap the movement to either the x or y axis.
 358                 if (!e.shiftKey) {
 359                     shiftMovementDirection = null;
 360                 }
 361                 else if (!shiftMovementDirection) {
 362                     var oldDragX = currentSaturation * dragWidth;
 363                     var oldDragY = dragHeight - (currentValue * dragHeight);
 364                     var furtherFromX = Math.abs(dragX - oldDragX) > Math.abs(dragY - oldDragY);
 365
 366                     shiftMovementDirection = furtherFromX ? "x" : "y";
 367                 }
 368
 369                 var setSaturation = !shiftMovementDirection || shiftMovementDirection === "x";
 370                 var setValue = !shiftMovementDirection || shiftMovementDirection === "y";
 371
 372                 if (setSaturation) {
 373                     currentSaturation = parseFloat(dragX / dragWidth);
 374                 }
 375                 if (setValue) {
 376                     currentValue = parseFloat((dragHeight - dragY) / dragHeight);
 377                 }
 378
 379                 isEmpty = false;
 380
 381                 move();
 382
 383             }, dragStart, dragStop);
 384
 385             if (!!initialColor) {
 386                 set(initialColor);
 387
 388                 // In case color was black - update the preview UI and set the format
 389                 // since the set function will not run (default color is black).
 390                 updateUI();
 391                 currentPreferredFormat = preferredFormat || tinycolor(initialColor).format;
 392
 393                 addColorToSelectionPalette(initialColor);
 394             }
 395             else {
 396                 updateUI();
 397             }
 398
 399             if (flat) {
 400                 show();
 401             }
 402
 403             function palletElementClick(e) {
 404                 if (e.data && e.data.ignore) {
 405                     set($(this).data("color"));
 406                     move();
 407                 }
 408                 else {
 409                     set($(this).data("color"));
 410                     updateOriginalInput(true);
 411                     move();
 412                     hide();
 413                 }
 414
 415                 return false;
 416             }
 417
 418             var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum";
 419             paletteContainer.delegate(".sp-thumb-el", paletteEvent, palletElementClick);
 420             initialColorContainer.delegate(".sp-thumb-el:nth-child(1)", paletteEvent, { ignore: true }, palletElementClick);
 421         }
 422
 423         function addColorToSelectionPalette(color) {
 424             if (showSelectionPalette) {
 425                 var colorRgb = tinycolor(color).toRgbString();
 426                 if ($.inArray(colorRgb, selectionPalette) === -1) {
 427                     selectionPalette.push(colorRgb);
 428                     while(selectionPalette.length > maxSelectionSize) {
 429                         selectionPalette.shift();
 430                     }
 431                 }
 432
 433                 if (localStorageKey && window.localStorage) {
 434                     try {
 435                         window.localStorage[localStorageKey] = selectionPalette.join(";");
 436                     }
 437                     catch(e) { }
 438                 }
 439             }
 440         }
 441
 442         function getUniqueSelectionPalette() {
 443             var unique = [];
 444             var p = selectionPalette;
 445             var paletteLookup = {};
 446             var rgb;
 447
 448             if (opts.showPalette) {
 449
 450                 for (var i = 0; i < paletteArray.length; i++) {
 451                     for (var j = 0; j < paletteArray[i].length; j++) {
 452                         rgb = tinycolor(paletteArray[i][j]).toRgbString();
 453                         paletteLookup[rgb] = true;
 454                     }
 455                 }
 456
 457                 for (i = 0; i < p.length; i++) {
 458                     rgb = tinycolor(p[i]).toRgbString();
 459
 460                     if (!paletteLookup.hasOwnProperty(rgb)) {
 461                         unique.push(p[i]);
 462                         paletteLookup[rgb] = true;
 463                     }
 464                 }
 465             }
 466
 467             return unique.reverse().slice(0, opts.maxSelectionSize);
 468         }
 469
 470         function drawPalette() {
 471
 472             var currentColor = get();
 473
 474             var html = $.map(paletteArray, function (palette, i) {
 475                 return paletteTemplate(palette, currentColor, "sp-palette-row sp-palette-row-" + i);
 476             });
 477
 478             if (selectionPalette) {
 479                 html.push(paletteTemplate(getUniqueSelectionPalette(), currentColor, "sp-palette-row sp-palette-row-selection"));
 480             }
 481
 482             paletteContainer.html(html.join(""));
 483         }
 484
 485         function drawInitial() {
 486             if (opts.showInitial) {
 487                 var initial = colorOnShow;
 488                 var current = get();
 489                 initialColorContainer.html(paletteTemplate([initial, current], current, "sp-palette-row-initial"));
 490             }
 491         }
 492
 493         function dragStart() {
 494             if (dragHeight <= 0 || dragWidth <= 0 || slideHeight <= 0) {
 495                 reflow();
 496             }
 497             container.addClass(draggingClass);
 498             shiftMovementDirection = null;
 499         }
 500
 501         function dragStop() {
 502             container.removeClass(draggingClass);
 503         }
 504
 505         function setFromTextInput() {
 506
 507             var value = textInput.val();
 508
 509             if ((value === null || value === "") && allowEmpty) {
 510                 set(null);
 511             }
 512             else {
 513                 var tiny = tinycolor(value);
 514                 if (tiny.ok) {
 515                     set(tiny);
 516                 }
 517                 else {
 518                     textInput.addClass("sp-validation-error");
 519                 }
 520             }
 521         }
 522
 523         function toggle() {
 524             if (visible) {
 525                 hide();
 526             }
 527             else {
 528                 show();
 529             }
 530         }
 531
 532         function show() {
 533             var event = $.Event('beforeShow.spectrum');
 534
 535             if (visible) {
 536                 reflow();
 537                 return;
 538             }
 539
 540             boundElement.trigger(event, [ get() ]);
 541
 542             if (callbacks.beforeShow(get()) === false || event.isDefaultPrevented()) {
 543                 return;
 544             }
 545
 546             hideAll();
 547             visible = true;
 548
 549             $(doc).bind("click.spectrum", hide);
 550             $(window).bind("resize.spectrum", resize);
 551             replacer.addClass("sp-active");
 552             container.removeClass("sp-hidden");
 553
 554             if (opts.showPalette) {
 555                 drawPalette();
 556             }
 557             reflow();
 558             updateUI();
 559
 560             colorOnShow = get();
 561
 562             drawInitial();
 563             callbacks.show(colorOnShow);
 564             boundElement.trigger('show.spectrum', [ colorOnShow ]);
 565         }
 566
 567         function hide(e) {
 568
 569             // Return on right click
 570             if (e && e.type == "click" && e.button == 2) { return; }
 571
 572             // Return if hiding is unnecessary
 573             if (!visible || flat) { return; }
 574             visible = false;
 575
 576             $(doc).unbind("click.spectrum", hide);
 577             $(window).unbind("resize.spectrum", resize);
 578
 579             replacer.removeClass("sp-active");
 580             container.addClass("sp-hidden");
 581
 582             var colorHasChanged = !tinycolor.equals(get(), colorOnShow);
 583
 584             if (colorHasChanged) {
 585                 if (clickoutFiresChange && e !== "cancel") {
 586                     updateOriginalInput(true);
 587                 }
 588                 else {
 589                     revert();
 590                 }
 591             }
 592
 593             callbacks.hide(get());
 594             boundElement.trigger('hide.spectrum', [ get() ]);
 595         }
 596
 597         function revert() {
 598             set(colorOnShow, true);
 599         }
 600
 601         function set(color, ignoreFormatChange) {
 602             if (tinycolor.equals(color, get())) {
 603                 return;
 604             }
 605
 606             var newColor;
 607             if (!color && allowEmpty) {
 608                 isEmpty = true;
 609             } else {
 610                 isEmpty = false;
 611                 newColor = tinycolor(color);
 612                 var newHsv = newColor.toHsv();
 613
 614                 currentHue = (newHsv.h % 360) / 360;
 615                 currentSaturation = newHsv.s;
 616                 currentValue = newHsv.v;
 617                 currentAlpha = newHsv.a;
 618             }
 619             updateUI();
 620
 621             if (newColor && newColor.ok && !ignoreFormatChange) {
 622                 currentPreferredFormat = preferredFormat || newColor.format;
 623             }
 624         }
 625
 626         function get(opts) {
 627             opts = opts || { };
 628
 629             if (allowEmpty && isEmpty) {
 630                 return null;
 631             }
 632
 633             return tinycolor.fromRatio({
 634                 h: currentHue,
 635                 s: currentSaturation,
 636                 v: currentValue,
 637                 a: Math.round(currentAlpha * 100) / 100
 638             }, { format: opts.format || currentPreferredFormat });
 639         }
 640
 641         function isValid() {
 642             return !textInput.hasClass("sp-validation-error");
 643         }
 644
 645         function move() {
 646             updateUI();
 647
 648             callbacks.move(get());
 649             boundElement.trigger('move.spectrum', [ get() ]);
 650         }
 651
 652         function updateUI() {
 653
 654             textInput.removeClass("sp-validation-error");
 655
 656             updateHelperLocations();
 657
 658             // Update dragger background color (gradients take care of saturation and value).
 659             var flatColor = tinycolor.fromRatio({ h: currentHue, s: 1, v: 1 });
 660             dragger.css("background-color", flatColor.toHexString());
 661
 662             // Get a format that alpha will be included in (hex and names ignore alpha)
 663             var format = currentPreferredFormat;
 664             if (currentAlpha < 1) {
 665                 if (format === "hex" || format === "hex3" || format === "hex6" || format === "name") {
 666                     format = "rgb";
 667                 }
 668             }
 669
 670             var realColor = get({ format: format }),
 671                 displayColor = '';
 672
 673              //reset background info for preview element
 674             previewElement.removeClass("sp-clear-display");
 675             previewElement.css('background-color', 'transparent');
 676
 677             if (!realColor && allowEmpty) {
 678                 // Update the replaced elements background with icon indicating no color selection
 679                 previewElement.addClass("sp-clear-display");
 680             }
 681             else {
 682                var realHex = realColor.toHexString(),
 683                     realRgb = realColor.toRgbString();
 684
 685                 // Update the replaced elements background color (with actual selected color)
 686                 if (rgbaSupport || realColor.alpha === 1) {
 687                     previewElement.css("background-color", realRgb);
 688                 }
 689                 else {
 690                     previewElement.css("background-color", "transparent");
 691                     previewElement.css("filter", realColor.toFilter());
 692                 }
 693
 694                 if (opts.showAlpha) {
 695                     var rgb = realColor.toRgb();
 696                     rgb.a = 0;
 697                     var realAlpha = tinycolor(rgb).toRgbString();
 698                     var gradient = "linear-gradient(left, " + realAlpha + ", " + realHex + ")";
 699
 700                     if (IE) {
 701                         alphaSliderInner.css("filter", tinycolor(realAlpha).toFilter({ gradientType: 1 }, realHex));
 702                     }
 703                     else {
 704                         alphaSliderInner.css("background", "-webkit-" + gradient);
 705                         alphaSliderInner.css("background", "-moz-" + gradient);
 706                         alphaSliderInner.css("background", "-ms-" + gradient);
 707                         alphaSliderInner.css("background", gradient);
 708                     }
 709                 }
 710
 711                 displayColor = realColor.toString(format);
 712             }
 713             // Update the text entry input as it changes happen
 714             if (opts.showInput) {
 715                 textInput.val(displayColor);
 716             }
 717
 718             if (opts.showPalette) {
 719                 drawPalette();
 720             }
 721
 722             drawInitial();
 723         }
 724
 725         function updateHelperLocations() {
 726             var s = currentSaturation;
 727             var v = currentValue;
 728
 729             if(allowEmpty && isEmpty) {
 730                 //if selected color is empty, hide the helpers
 731                 alphaSlideHelper.hide();
 732                 slideHelper.hide();
 733                 dragHelper.hide();
 734             }
 735             else {
 736                 //make sure helpers are visible
 737                 alphaSlideHelper.show();
 738                 slideHelper.show();
 739                 dragHelper.show();
 740
 741                 // Where to show the little circle in that displays your current selected color
 742                 var dragX = s * dragWidth;
 743                 var dragY = dragHeight - (v * dragHeight);
 744                 dragX = Math.max(
 745                     -dragHelperHeight,
 746                     Math.min(dragWidth - dragHelperHeight, dragX - dragHelperHeight)
 747                 );
 748                 dragY = Math.max(
 749                     -dragHelperHeight,
 750                     Math.min(dragHeight - dragHelperHeight, dragY - dragHelperHeight)
 751                 );
 752                 dragHelper.css({
 753                     "top": dragY,
 754                     "left": dragX
 755                 });
 756
 757                 var alphaX = currentAlpha * alphaWidth;
 758                 alphaSlideHelper.css({
 759                     "left": alphaX - (alphaSlideHelperWidth / 2)
 760                 });
 761
 762                 // Where to show the bar that displays your current selected hue
 763                 var slideY = (currentHue) * slideHeight;
 764                 slideHelper.css({
 765                     "top": slideY - slideHelperHeight
 766                 });
 767             }
 768         }
 769
 770         function updateOriginalInput(fireCallback) {
 771             var color = get(),
 772                 displayColor = '',
 773                 hasChanged = !tinycolor.equals(color, colorOnShow);
 774
 775             if(color) {
 776                 displayColor = color.toString(currentPreferredFormat);
 777                 // Update the selection palette with the current color
 778                 addColorToSelectionPalette(color);
 779             }
 780
 781             if (isInput) {
 782                 boundElement.val(displayColor);
 783             }
 784
 785             colorOnShow = color;
 786
 787             if (fireCallback && hasChanged) {
 788                 callbacks.change(color);
 789                 boundElement.trigger('change', [ color ]);
 790             }
 791         }
 792
 793         function reflow() {
 794             dragWidth = dragger.width();
 795             dragHeight = dragger.height();
 796             dragHelperHeight = dragHelper.height();
 797             slideWidth = slider.width();
 798             slideHeight = slider.height();
 799             slideHelperHeight = slideHelper.height();
 800             alphaWidth = alphaSlider.width();
 801             alphaSlideHelperWidth = alphaSlideHelper.width();
 802
 803             if (!flat) {
 804                 container.css("position", "absolute");
 805                 container.offset(getOffset(container, offsetElement));
 806             }
 807
 808             updateHelperLocations();
 809         }
 810
 811         function destroy() {
 812             boundElement.show();
 813             offsetElement.unbind("click.spectrum touchstart.spectrum");
 814             container.remove();
 815             replacer.remove();
 816             spectrums[spect.id] = null;
 817         }
 818
 819         function option(optionName, optionValue) {
 820             if (optionName === undefined) {
 821                 return $.extend({}, opts);
 822             }
 823             if (optionValue === undefined) {
 824                 return opts[optionName];
 825             }
 826
 827             opts[optionName] = optionValue;
 828             applyOptions();
 829         }
 830
 831         function enable() {
 832             disabled = false;
 833             boundElement.attr("disabled", false);
 834             offsetElement.removeClass("sp-disabled");
 835         }
 836
 837         function disable() {
 838             hide();
 839             disabled = true;
 840             boundElement.attr("disabled", true);
 841             offsetElement.addClass("sp-disabled");
 842         }
 843
 844         initialize();
 845
 846         var spect = {
 847             show: show,
 848             hide: hide,
 849             toggle: toggle,
 850             reflow: reflow,
 851             option: option,
 852             enable: enable,
 853             disable: disable,
 854             set: function (c) {
 855                 set(c);
 856                 updateOriginalInput();
 857             },
 858             get: get,
 859             destroy: destroy,
 860             container: container
 861         };
 862
 863         spect.id = spectrums.push(spect) - 1;
 864
 865         return spect;
 866     }
 867
 868     /**
 869     * checkOffset - get the offset below/above and left/right element depending on screen position
 870     * Thanks https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js
 871     */
 872     function getOffset(picker, input) {
 873         var extraY = 0;
 874         var dpWidth = picker.outerWidth();
 875         var dpHeight = picker.outerHeight();
 876         var inputHeight = input.outerHeight();
 877         var doc = picker[0].ownerDocument;
 878         var docElem = doc.documentElement;
 879         var viewWidth = docElem.clientWidth + $(doc).scrollLeft();
 880         var viewHeight = docElem.clientHeight + $(doc).scrollTop();
 881         var offset = input.offset();
 882         offset.top += inputHeight;
 883
 884         offset.left -=
 885             Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
 886             Math.abs(offset.left + dpWidth - viewWidth) : 0);
 887
 888         offset.top -=
 889             Math.min(offset.top, ((offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
 890             Math.abs(dpHeight + inputHeight - extraY) : extraY));
 891
 892         return offset;
 893     }
 894
 895     /**
 896     * noop - do nothing
 897     */
 898     function noop() {
 899
 900     }
 901
 902     /**
 903     * stopPropagation - makes the code only doing this a little easier to read in line
 904     */
 905     function stopPropagation(e) {
 906         e.stopPropagation();
 907     }
 908
 909     /**
 910     * Create a function bound to a given object
 911     * Thanks to underscore.js
 912     */
 913     function bind(func, obj) {
 914         var slice = Array.prototype.slice;
 915         var args = slice.call(arguments, 2);
 916         return function () {
 917             return func.apply(obj, args.concat(slice.call(arguments)));
 918         };
 919     }
 920
 921     /**
 922     * Lightweight drag helper.  Handles containment within the element, so that
 923     * when dragging, the x is within [0,element.width] and y is within [0,element.height]
 924     */
 925     function draggable(element, onmove, onstart, onstop) {
 926         onmove = onmove || function () { };
 927         onstart = onstart || function () { };
 928         onstop = onstop || function () { };
 929         var doc = element.ownerDocument || document;
 930         var dragging = false;
 931         var offset = {};
 932         var maxHeight = 0;
 933         var maxWidth = 0;
 934         var hasTouch = ('ontouchstart' in window);
 935
 936         var duringDragEvents = {};
 937         duringDragEvents["selectstart"] = prevent;
 938         duringDragEvents["dragstart"] = prevent;
 939         duringDragEvents["touchmove mousemove"] = move;
 940         duringDragEvents["touchend mouseup"] = stop;
 941
 942         function prevent(e) {
 943             if (e.stopPropagation) {
 944                 e.stopPropagation();
 945             }
 946             if (e.preventDefault) {
 947                 e.preventDefault();
 948             }
 949             e.returnValue = false;
 950         }
 951
 952         function move(e) {
 953             if (dragging) {
 954                 // Mouseup happened outside of window
 955                 if (IE && document.documentMode < 9 && !e.button) {
 956                     return stop();
 957                 }
 958
 959                 var touches = e.originalEvent.touches;
 960                 var pageX = touches ? touches[0].pageX : e.pageX;
 961                 var pageY = touches ? touches[0].pageY : e.pageY;
 962
 963                 var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
 964                 var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));
 965
 966                 if (hasTouch) {
 967                     // Stop scrolling in iOS
 968                     prevent(e);
 969                 }
 970
 971                 onmove.apply(element, [dragX, dragY, e]);
 972             }
 973         }
 974         function start(e) {
 975             var rightclick = (e.which) ? (e.which == 3) : (e.button == 2);
 976             var touches = e.originalEvent.touches;
 977
 978             if (!rightclick && !dragging) {
 979                 if (onstart.apply(element, arguments) !== false) {
 980                     dragging = true;
 981                     maxHeight = $(element).height();
 982                     maxWidth = $(element).width();
 983                     offset = $(element).offset();
 984
 985                     $(doc).bind(duringDragEvents);
 986                     $(doc.body).addClass("sp-dragging");
 987
 988                     if (!hasTouch) {
 989                         move(e);
 990                     }
 991
 992                     prevent(e);
 993                 }
 994             }
 995         }
 996         function stop() {
 997             if (dragging) {
 998                 $(doc).unbind(duringDragEvents);
 999                 $(doc.body).removeClass("sp-dragging");
1000                 onstop.apply(element, arguments);
1001             }
1002             dragging = false;
1003         }
1004
1005         $(element).bind("touchstart mousedown", start);
1006     }
1007
1008     function throttle(func, wait, debounce) {
1009         var timeout;
1010         return function () {
1011             var context = this, args = arguments;
1012             var throttler = function () {
1013                 timeout = null;
1014                 func.apply(context, args);
1015             };
1016             if (debounce) clearTimeout(timeout);
1017             if (debounce || !timeout) timeout = setTimeout(throttler, wait);
1018         };
1019     }
1020
1021
1022     function log(){/* jshint -W021 */if(window.console){if(Function.prototype.bind)log=Function.prototype.bind.call(console.log,console);else log=function(){Function.prototype.apply.call(console.log,console,arguments);};log.apply(this,arguments);}}
1023
1024     /**
1025     * Define a jQuery plugin
1026     */
1027     var dataID = "spectrum.id";
1028     $.fn.spectrum = function (opts, extra) {
1029
1030         if (typeof opts == "string") {
1031
1032             var returnValue = this;
1033             var args = Array.prototype.slice.call( arguments, 1 );
1034
1035             this.each(function () {
1036                 var spect = spectrums[$(this).data(dataID)];
1037                 if (spect) {
1038
1039                     var method = spect[opts];
1040                     if (!method) {
1041                         throw new Error( "Spectrum: no such method: '" + opts + "'" );
1042                     }
1043
1044                     if (opts == "get") {
1045                         returnValue = spect.get();
1046                     }
1047                     else if (opts == "container") {
1048                         returnValue = spect.container;
1049                     }
1050                     else if (opts == "option") {
1051                         returnValue = spect.option.apply(spect, args);
1052                     }
1053                     else if (opts == "destroy") {
1054                         spect.destroy();
1055                         $(this).removeData(dataID);
1056                     }
1057                     else {
1058                         method.apply(spect, args);
1059                     }
1060                 }
1061             });
1062
1063             return returnValue;
1064         }
1065
1066         // Initializing a new instance of spectrum
1067         return this.spectrum("destroy").each(function () {
1068             var spect = spectrum(this, opts);
1069             $(this).data(dataID, spect.id);
1070         });
1071     };
1072
1073     $.fn.spectrum.load = true;
1074     $.fn.spectrum.loadOpts = {};
1075     $.fn.spectrum.draggable = draggable;
1076     $.fn.spectrum.defaults = defaultOpts;
1077
1078     $.spectrum = { };
1079     $.spectrum.localization = { };
1080     $.spectrum.palettes = { };
1081
1082     $.fn.spectrum.processNativeColorInputs = function () {
1083         if (!inputTypeColorSupport) {
1084             $("input[type=color]").spectrum({
1085                 preferredFormat: "hex6"
1086             });
1087         }
1088     };
1089
1090     // TinyColor v0.9.16
1091     // https://github.com/bgrins/TinyColor
1092     // 2013-08-10, Brian Grinstead, MIT License
1093
1094     (function() {
1095
1096     var trimLeft = /^[\s,#]+/,
1097         trimRight = /\s+$/,
1098         tinyCounter = 0,
1099         math = Math,
1100         mathRound = math.round,
1101         mathMin = math.min,
1102         mathMax = math.max,
1103         mathRandom = math.random;
1104
1105     function tinycolor (color, opts) {
1106
1107         color = (color) ? color : '';
1108         opts = opts || { };
1109
1110         // If input is already a tinycolor, return itself
1111         if (typeof color == "object" && color.hasOwnProperty("_tc_id")) {
1112            return color;
1113         }
1114
1115         var rgb = inputToRGB(color);
1116         var r = rgb.r,
1117             g = rgb.g,
1118             b = rgb.b,
1119             a = rgb.a,
1120             roundA = mathRound(100*a) / 100,
1121             format = opts.format || rgb.format;
1122
1123         // Don't let the range of [0,255] come back in [0,1].
1124         // Potentially lose a little bit of precision here, but will fix issues where
1125         // .5 gets interpreted as half of the total, instead of half of 1
1126         // If it was supposed to be 128, this was already taken care of by `inputToRgb`
1127         if (r < 1) { r = mathRound(r); }
1128         if (g < 1) { g = mathRound(g); }
1129         if (b < 1) { b = mathRound(b); }
1130
1131         return {
1132             ok: rgb.ok,
1133             format: format,
1134             _tc_id: tinyCounter++,
1135             alpha: a,
1136             getAlpha: function() {
1137                 return a;
1138             },
1139             setAlpha: function(value) {
1140                 a = boundAlpha(value);
1141                 roundA = mathRound(100*a) / 100;
1142             },
1143             toHsv: function() {
1144                 var hsv = rgbToHsv(r, g, b);
1145                 return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: a };
1146             },
1147             toHsvString: function() {
1148                 var hsv = rgbToHsv(r, g, b);
1149                 var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
1150                 return (a == 1) ?
1151                   "hsv("  + h + ", " + s + "%, " + v + "%)" :
1152                   "hsva(" + h + ", " + s + "%, " + v + "%, "+ roundA + ")";
1153             },
1154             toHsl: function() {
1155                 var hsl = rgbToHsl(r, g, b);
1156                 return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: a };
1157             },
1158             toHslString: function() {
1159                 var hsl = rgbToHsl(r, g, b);
1160                 var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
1161                 return (a == 1) ?
1162                   "hsl("  + h + ", " + s + "%, " + l + "%)" :
1163                   "hsla(" + h + ", " + s + "%, " + l + "%, "+ roundA + ")";
1164             },
1165             toHex: function(allow3Char) {
1166                 return rgbToHex(r, g, b, allow3Char);
1167             },
1168             toHexString: function(allow3Char) {
1169                 return '#' + rgbToHex(r, g, b, allow3Char);
1170             },
1171             toRgb: function() {
1172                 return { r: mathRound(r), g: mathRound(g), b: mathRound(b), a: a };
1173             },
1174             toRgbString: function() {
1175                 return (a == 1) ?
1176                   "rgb("  + mathRound(r) + ", " + mathRound(g) + ", " + mathRound(b) + ")" :
1177                   "rgba(" + mathRound(r) + ", " + mathRound(g) + ", " + mathRound(b) + ", " + roundA + ")";
1178             },
1179             toPercentageRgb: function() {
1180                 return { r: mathRound(bound01(r, 255) * 100) + "%", g: mathRound(bound01(g, 255) * 100) + "%", b: mathRound(bound01(b, 255) * 100) + "%", a: a };
1181             },
1182             toPercentageRgbString: function() {
1183                 return (a == 1) ?
1184                   "rgb("  + mathRound(bound01(r, 255) * 100) + "%, " + mathRound(bound01(g, 255) * 100) + "%, " + mathRound(bound01(b, 255) * 100) + "%)" :
1185                   "rgba(" + mathRound(bound01(r, 255) * 100) + "%, " + mathRound(bound01(g, 255) * 100) + "%, " + mathRound(bound01(b, 255) * 100) + "%, " + roundA + ")";
1186             },
1187             toName: function() {
1188                 if (a === 0) {
1189                     return "transparent";
1190                 }
1191
1192                 return hexNames[rgbToHex(r, g, b, true)] || false;
1193             },
1194             toFilter: function(secondColor) {
1195                 var hex = rgbToHex(r, g, b);
1196                 var secondHex = hex;
1197                 var alphaHex = Math.round(parseFloat(a) * 255).toString(16);
1198                 var secondAlphaHex = alphaHex;
1199                 var gradientType = opts && opts.gradientType ? "GradientType = 1, " : "";
1200
1201                 if (secondColor) {
1202                     var s = tinycolor(secondColor);
1203                     secondHex = s.toHex();
1204                     secondAlphaHex = Math.round(parseFloat(s.alpha) * 255).toString(16);
1205                 }
1206
1207                 return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr=#" + pad2(alphaHex) + hex + ",endColorstr=#" + pad2(secondAlphaHex) + secondHex + ")";
1208             },
1209             toString: function(format) {
1210                 var formatSet = !!format;
1211                 format = format || this.format;
1212
1213                 var formattedString = false;
1214                 var hasAlphaAndFormatNotSet = !formatSet && a < 1 && a > 0;
1215                 var formatWithAlpha = hasAlphaAndFormatNotSet && (format === "hex" || format === "hex6" || format === "hex3" || format === "name");
1216
1217                 if (format === "rgb") {
1218                     formattedString = this.toRgbString();
1219                 }
1220                 if (format === "prgb") {
1221                     formattedString = this.toPercentageRgbString();
1222                 }
1223                 if (format === "hex" || format === "hex6") {
1224                     formattedString = this.toHexString();
1225                 }
1226                 if (format === "hex3") {
1227                     formattedString = this.toHexString(true);
1228                 }
1229                 if (format === "name") {
1230                     formattedString = this.toName();
1231                 }
1232                 if (format === "hsl") {
1233                     formattedString = this.toHslString();
1234                 }
1235                 if (format === "hsv") {
1236                     formattedString = this.toHsvString();
1237                 }
1238
1239                 if (formatWithAlpha) {
1240                     return this.toRgbString();
1241                 }
1242
1243                 return formattedString || this.toHexString();
1244             }
1245         };
1246     }
1247
1248     // If input is an object, force 1 into "1.0" to handle ratios properly
1249     // String input requires "1.0" as input, so 1 will be treated as 1
1250     tinycolor.fromRatio = function(color, opts) {
1251         if (typeof color == "object") {
1252             var newColor = {};
1253             for (var i in color) {
1254                 if (color.hasOwnProperty(i)) {
1255                     if (i === "a") {
1256                         newColor[i] = color[i];
1257                     }
1258                     else {
1259                         newColor[i] = convertToPercentage(color[i]);
1260                     }
1261                 }
1262             }
1263             color = newColor;
1264         }
1265
1266         return tinycolor(color, opts);
1267     };
1268
1269     // Given a string or object, convert that input to RGB
1270     // Possible string inputs:
1271     //
1272     //     "red"
1273     //     "#f00" or "f00"
1274     //     "#ff0000" or "ff0000"
1275     //     "rgb 255 0 0" or "rgb (255, 0, 0)"
1276     //     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
1277     //     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
1278     //     "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
1279     //     "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
1280     //     "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
1281     //     "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
1282     //
1283     function inputToRGB(color) {
1284
1285         var rgb = { r: 0, g: 0, b: 0 };
1286         var a = 1;
1287         var ok = false;
1288         var format = false;
1289
1290         if (typeof color == "string") {
1291             color = stringInputToObject(color);
1292         }
1293
1294         if (typeof color == "object") {
1295             if (color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) {
1296                 rgb = rgbToRgb(color.r, color.g, color.b);
1297                 ok = true;
1298                 format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
1299             }
1300             else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("v")) {
1301                 color.s = convertToPercentage(color.s);
1302                 color.v = convertToPercentage(color.v);
1303                 rgb = hsvToRgb(color.h, color.s, color.v);
1304                 ok = true;
1305                 format = "hsv";
1306             }
1307             else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("l")) {
1308                 color.s = convertToPercentage(color.s);
1309                 color.l = convertToPercentage(color.l);
1310                 rgb = hslToRgb(color.h, color.s, color.l);
1311                 ok = true;
1312                 format = "hsl";
1313             }
1314
1315             if (color.hasOwnProperty("a")) {
1316                 a = color.a;
1317             }
1318         }
1319
1320         a = boundAlpha(a);
1321
1322         return {
1323             ok: ok,
1324             format: color.format || format,
1325             r: mathMin(255, mathMax(rgb.r, 0)),
1326             g: mathMin(255, mathMax(rgb.g, 0)),
1327             b: mathMin(255, mathMax(rgb.b, 0)),
1328             a: a
1329         };
1330     }
1331
1332
1333     // Conversion Functions
1334     // --------------------
1335
1336     // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
1337     // <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
1338
1339     // `rgbToRgb`
1340     // Handle bounds / percentage checking to conform to CSS color spec
1341     // <http://www.w3.org/TR/css3-color/>
1342     // *Assumes:* r, g, b in [0, 255] or [0, 1]
1343     // *Returns:* { r, g, b } in [0, 255]
1344     function rgbToRgb(r, g, b){
1345         return {
1346             r: bound01(r, 255) * 255,
1347             g: bound01(g, 255) * 255,
1348             b: bound01(b, 255) * 255
1349         };
1350     }
1351
1352     // `rgbToHsl`
1353     // Converts an RGB color value to HSL.
1354     // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
1355     // *Returns:* { h, s, l } in [0,1]
1356     function rgbToHsl(r, g, b) {
1357
1358         r = bound01(r, 255);
1359         g = bound01(g, 255);
1360         b = bound01(b, 255);
1361
1362         var max = mathMax(r, g, b), min = mathMin(r, g, b);
1363         var h, s, l = (max + min) / 2;
1364
1365         if(max == min) {
1366             h = s = 0; // achromatic
1367         }
1368         else {
1369             var d = max - min;
1370             s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
1371             switch(max) {
1372                 case r: h = (g - b) / d + (g < b ? 6 : 0); break;
1373                 case g: h = (b - r) / d + 2; break;
1374                 case b: h = (r - g) / d + 4; break;
1375             }
1376
1377             h /= 6;
1378         }
1379
1380         return { h: h, s: s, l: l };
1381     }
1382
1383     // `hslToRgb`
1384     // Converts an HSL color value to RGB.
1385     // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
1386     // *Returns:* { r, g, b } in the set [0, 255]
1387     function hslToRgb(h, s, l) {
1388         var r, g, b;
1389
1390         h = bound01(h, 360);
1391         s = bound01(s, 100);
1392         l = bound01(l, 100);
1393
1394         function hue2rgb(p, q, t) {
1395             if(t < 0) t += 1;
1396             if(t > 1) t -= 1;
1397             if(t < 1/6) return p + (q - p) * 6 * t;
1398             if(t < 1/2) return q;
1399             if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
1400             return p;
1401         }
1402
1403         if(s === 0) {
1404             r = g = b = l; // achromatic
1405         }
1406         else {
1407             var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
1408             var p = 2 * l - q;
1409             r = hue2rgb(p, q, h + 1/3);
1410             g = hue2rgb(p, q, h);
1411             b = hue2rgb(p, q, h - 1/3);
1412         }
1413
1414         return { r: r * 255, g: g * 255, b: b * 255 };
1415     }
1416
1417     // `rgbToHsv`
1418     // Converts an RGB color value to HSV
1419     // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
1420     // *Returns:* { h, s, v } in [0,1]
1421     function rgbToHsv(r, g, b) {
1422
1423         r = bound01(r, 255);
1424         g = bound01(g, 255);
1425         b = bound01(b, 255);
1426
1427         var max = mathMax(r, g, b), min = mathMin(r, g, b);
1428         var h, s, v = max;
1429
1430         var d = max - min;
1431         s = max === 0 ? 0 : d / max;
1432
1433         if(max == min) {
1434             h = 0; // achromatic
1435         }
1436         else {
1437             switch(max) {
1438                 case r: h = (g - b) / d + (g < b ? 6 : 0); break;
1439                 case g: h = (b - r) / d + 2; break;
1440                 case b: h = (r - g) / d + 4; break;
1441             }
1442             h /= 6;
1443         }
1444         return { h: h, s: s, v: v };
1445     }
1446
1447     // `hsvToRgb`
1448     // Converts an HSV color value to RGB.
1449     // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
1450     // *Returns:* { r, g, b } in the set [0, 255]
1451      function hsvToRgb(h, s, v) {
1452
1453         h = bound01(h, 360) * 6;
1454         s = bound01(s, 100);
1455         v = bound01(v, 100);
1456
1457         var i = math.floor(h),
1458             f = h - i,
1459             p = v * (1 - s),
1460             q = v * (1 - f * s),
1461             t = v * (1 - (1 - f) * s),
1462             mod = i % 6,
1463             r = [v, q, p, p, t, v][mod],
1464             g = [t, v, v, q, p, p][mod],
1465             b = [p, p, t, v, v, q][mod];
1466
1467         return { r: r * 255, g: g * 255, b: b * 255 };
1468     }
1469
1470     // `rgbToHex`
1471     // Converts an RGB color to hex
1472     // Assumes r, g, and b are contained in the set [0, 255]
1473     // Returns a 3 or 6 character hex
1474     function rgbToHex(r, g, b, allow3Char) {
1475
1476         var hex = [
1477             pad2(mathRound(r).toString(16)),
1478             pad2(mathRound(g).toString(16)),
1479             pad2(mathRound(b).toString(16))
1480         ];
1481
1482         // Return a 3 character hex if possible
1483         if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
1484             return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
1485         }
1486
1487         return hex.join("");
1488     }
1489
1490     // `equals`
1491     // Can be called with any tinycolor input
1492     tinycolor.equals = function (color1, color2) {
1493         if (!color1 || !color2) { return false; }
1494         return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
1495     };
1496     tinycolor.random = function() {
1497         return tinycolor.fromRatio({
1498             r: mathRandom(),
1499             g: mathRandom(),
1500             b: mathRandom()
1501         });
1502     };
1503
1504
1505     // Modification Functions
1506     // ----------------------
1507     // Thanks to less.js for some of the basics here
1508     // <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>
1509
1510     tinycolor.desaturate = function (color, amount) {
1511         amount = (amount === 0) ? 0 : (amount || 10);
1512         var hsl = tinycolor(color).toHsl();
1513         hsl.s -= amount / 100;
1514         hsl.s = clamp01(hsl.s);
1515         return tinycolor(hsl);
1516     };
1517     tinycolor.saturate = function (color, amount) {
1518         amount = (amount === 0) ? 0 : (amount || 10);
1519         var hsl = tinycolor(color).toHsl();
1520         hsl.s += amount / 100;
1521         hsl.s = clamp01(hsl.s);
1522         return tinycolor(hsl);
1523     };
1524     tinycolor.greyscale = function(color) {
1525         return tinycolor.desaturate(color, 100);
1526     };
1527     tinycolor.lighten = function(color, amount) {
1528         amount = (amount === 0) ? 0 : (amount || 10);
1529         var hsl = tinycolor(color).toHsl();
1530         hsl.l += amount / 100;
1531         hsl.l = clamp01(hsl.l);
1532         return tinycolor(hsl);
1533     };
1534     tinycolor.darken = function (color, amount) {
1535         amount = (amount === 0) ? 0 : (amount || 10);
1536         var hsl = tinycolor(color).toHsl();
1537         hsl.l -= amount / 100;
1538         hsl.l = clamp01(hsl.l);
1539         return tinycolor(hsl);
1540     };
1541     tinycolor.complement = function(color) {
1542         var hsl = tinycolor(color).toHsl();
1543         hsl.h = (hsl.h + 180) % 360;
1544         return tinycolor(hsl);
1545     };
1546
1547
1548     // Combination Functions
1549     // ---------------------
1550     // Thanks to jQuery xColor for some of the ideas behind these
1551     // <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>
1552
1553     tinycolor.triad = function(color) {
1554         var hsl = tinycolor(color).toHsl();
1555         var h = hsl.h;
1556         return [
1557             tinycolor(color),
1558             tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
1559             tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
1560         ];
1561     };
1562     tinycolor.tetrad = function(color) {
1563         var hsl = tinycolor(color).toHsl();
1564         var h = hsl.h;
1565         return [
1566             tinycolor(color),
1567             tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),
1568             tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
1569             tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
1570         ];
1571     };
1572     tinycolor.splitcomplement = function(color) {
1573         var hsl = tinycolor(color).toHsl();
1574         var h = hsl.h;
1575         return [
1576             tinycolor(color),
1577             tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),
1578             tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})
1579         ];
1580     };
1581     tinycolor.analogous = function(color, results, slices) {
1582         results = results || 6;
1583         slices = slices || 30;
1584
1585         var hsl = tinycolor(color).toHsl();
1586         var part = 360 / slices;
1587         var ret = [tinycolor(color)];
1588
1589         for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) {
1590             hsl.h = (hsl.h + part) % 360;
1591             ret.push(tinycolor(hsl));
1592         }
1593         return ret;
1594     };
1595     tinycolor.monochromatic = function(color, results) {
1596         results = results || 6;
1597         var hsv = tinycolor(color).toHsv();
1598         var h = hsv.h, s = hsv.s, v = hsv.v;
1599         var ret = [];
1600         var modification = 1 / results;
1601
1602         while (results--) {
1603             ret.push(tinycolor({ h: h, s: s, v: v}));
1604             v = (v + modification) % 1;
1605         }
1606
1607         return ret;
1608     };
1609
1610
1611     // Readability Functions
1612     // ---------------------
1613     // <http://www.w3.org/TR/AERT#color-contrast>
1614
1615     // `readability`
1616     // Analyze the 2 colors and returns an object with the following properties:
1617     //    `brightness`: difference in brightness between the two colors
1618     //    `color`: difference in color/hue between the two colors
1619     tinycolor.readability = function(color1, color2) {
1620         var a = tinycolor(color1).toRgb();
1621         var b = tinycolor(color2).toRgb();
1622         var brightnessA = (a.r * 299 + a.g * 587 + a.b * 114) / 1000;
1623         var brightnessB = (b.r * 299 + b.g * 587 + b.b * 114) / 1000;
1624         var colorDiff = (
1625             Math.max(a.r, b.r) - Math.min(a.r, b.r) +
1626             Math.max(a.g, b.g) - Math.min(a.g, b.g) +
1627             Math.max(a.b, b.b) - Math.min(a.b, b.b)
1628         );
1629
1630         return {
1631             brightness: Math.abs(brightnessA - brightnessB),
1632             color: colorDiff
1633         };
1634     };
1635
1636     // `readable`
1637     // http://www.w3.org/TR/AERT#color-contrast
1638     // Ensure that foreground and background color combinations provide sufficient contrast.
1639     // *Example*
1640     //    tinycolor.readable("#000", "#111") => false
1641     tinycolor.readable = function(color1, color2) {
1642         var readability = tinycolor.readability(color1, color2);
1643         return readability.brightness > 125 && readability.color > 500;
1644     };
1645
1646     // `mostReadable`
1647     // Given a base color and a list of possible foreground or background
1648     // colors for that base, returns the most readable color.
1649     // *Example*
1650     //    tinycolor.mostReadable("#123", ["#fff", "#000"]) => "#000"
1651     tinycolor.mostReadable = function(baseColor, colorList) {
1652         var bestColor = null;
1653         var bestScore = 0;
1654         var bestIsReadable = false;
1655         for (var i=0; i < colorList.length; i++) {
1656
1657             // We normalize both around the "acceptable" breaking point,
1658             // but rank brightness constrast higher than hue.
1659
1660             var readability = tinycolor.readability(baseColor, colorList[i]);
1661             var readable = readability.brightness > 125 && readability.color > 500;
1662             var score = 3 * (readability.brightness / 125) + (readability.color / 500);
1663
1664             if ((readable && ! bestIsReadable) ||
1665                 (readable && bestIsReadable && score > bestScore) ||
1666                 ((! readable) && (! bestIsReadable) && score > bestScore)) {
1667                 bestIsReadable = readable;
1668                 bestScore = score;
1669                 bestColor = tinycolor(colorList[i]);
1670             }
1671         }
1672         return bestColor;
1673     };
1674
1675
1676     // Big List of Colors
1677     // ------------------
1678     // <http://www.w3.org/TR/css3-color/#svg-color>
1679     var names = tinycolor.names = {
1680         aliceblue: "f0f8ff",
1681         antiquewhite: "faebd7",
1682         aqua: "0ff",
1683         aquamarine: "7fffd4",
1684         azure: "f0ffff",
1685         beige: "f5f5dc",
1686         bisque: "ffe4c4",
1687         black: "000",
1688         blanchedalmond: "ffebcd",
1689         blue: "00f",
1690         blueviolet: "8a2be2",
1691         brown: "a52a2a",
1692         burlywood: "deb887",
1693         burntsienna: "ea7e5d",
1694         cadetblue: "5f9ea0",
1695         chartreuse: "7fff00",
1696         chocolate: "d2691e",
1697         coral: "ff7f50",
1698         cornflowerblue: "6495ed",
1699         cornsilk: "fff8dc",
1700         crimson: "dc143c",
1701         cyan: "0ff",
1702         darkblue: "00008b",
1703         darkcyan: "008b8b",
1704         darkgoldenrod: "b8860b",
1705         darkgray: "a9a9a9",
1706         darkgreen: "006400",
1707         darkgrey: "a9a9a9",
1708         darkkhaki: "bdb76b",
1709         darkmagenta: "8b008b",
1710         darkolivegreen: "556b2f",
1711         darkorange: "ff8c00",
1712         darkorchid: "9932cc",
1713         darkred: "8b0000",
1714         darksalmon: "e9967a",
1715         darkseagreen: "8fbc8f",
1716         darkslateblue: "483d8b",
1717         darkslategray: "2f4f4f",
1718         darkslategrey: "2f4f4f",
1719         darkturquoise: "00ced1",
1720         darkviolet: "9400d3",
1721         deeppink: "ff1493",
1722         deepskyblue: "00bfff",
1723         dimgray: "696969",
1724         dimgrey: "696969",
1725         dodgerblue: "1e90ff",
1726         firebrick: "b22222",
1727         floralwhite: "fffaf0",
1728         forestgreen: "228b22",
1729         fuchsia: "f0f",
1730         gainsboro: "dcdcdc",
1731         ghostwhite: "f8f8ff",
1732         gold: "ffd700",
1733         goldenrod: "daa520",
1734         gray: "808080",
1735         green: "008000",
1736         greenyellow: "adff2f",
1737         grey: "808080",
1738         honeydew: "f0fff0",
1739         hotpink: "ff69b4",
1740         indianred: "cd5c5c",
1741         indigo: "4b0082",
1742         ivory: "fffff0",
1743         khaki: "f0e68c",
1744         lavender: "e6e6fa",
1745         lavenderblush: "fff0f5",
1746         lawngreen: "7cfc00",
1747         lemonchiffon: "fffacd",
1748         lightblue: "add8e6",
1749         lightcoral: "f08080",
1750         lightcyan: "e0ffff",
1751         lightgoldenrodyellow: "fafad2",
1752         lightgray: "d3d3d3",
1753         lightgreen: "90ee90",
1754         lightgrey: "d3d3d3",
1755         lightpink: "ffb6c1",
1756         lightsalmon: "ffa07a",
1757         lightseagreen: "20b2aa",
1758         lightskyblue: "87cefa",
1759         lightslategray: "789",
1760         lightslategrey: "789",
1761         lightsteelblue: "b0c4de",
1762         lightyellow: "ffffe0",
1763         lime: "0f0",
1764         limegreen: "32cd32",
1765         linen: "faf0e6",
1766         magenta: "f0f",
1767         maroon: "800000",
1768         mediumaquamarine: "66cdaa",
1769         mediumblue: "0000cd",
1770         mediumorchid: "ba55d3",
1771         mediumpurple: "9370db",
1772         mediumseagreen: "3cb371",
1773         mediumslateblue: "7b68ee",
1774         mediumspringgreen: "00fa9a",
1775         mediumturquoise: "48d1cc",
1776         mediumvioletred: "c71585",
1777         midnightblue: "191970",
1778         mintcream: "f5fffa",
1779         mistyrose: "ffe4e1",
1780         moccasin: "ffe4b5",
1781         navajowhite: "ffdead",
1782         navy: "000080",
1783         oldlace: "fdf5e6",
1784         olive: "808000",
1785         olivedrab: "6b8e23",
1786         orange: "ffa500",
1787         orangered: "ff4500",
1788         orchid: "da70d6",
1789         palegoldenrod: "eee8aa",
1790         palegreen: "98fb98",
1791         paleturquoise: "afeeee",
1792         palevioletred: "db7093",
1793         papayawhip: "ffefd5",
1794         peachpuff: "ffdab9",
1795         peru: "cd853f",
1796         pink: "ffc0cb",
1797         plum: "dda0dd",
1798         powderblue: "b0e0e6",
1799         purple: "800080",
1800         red: "f00",
1801         rosybrown: "bc8f8f",
1802         royalblue: "4169e1",
1803         saddlebrown: "8b4513",
1804         salmon: "fa8072",
1805         sandybrown: "f4a460",
1806         seagreen: "2e8b57",
1807         seashell: "fff5ee",
1808         sienna: "a0522d",
1809         silver: "c0c0c0",
1810         skyblue: "87ceeb",
1811         slateblue: "6a5acd",
1812         slategray: "708090",
1813         slategrey: "708090",
1814         snow: "fffafa",
1815         springgreen: "00ff7f",
1816         steelblue: "4682b4",
1817         tan: "d2b48c",
1818         teal: "008080",
1819         thistle: "d8bfd8",
1820         tomato: "ff6347",
1821         turquoise: "40e0d0",
1822         violet: "ee82ee",
1823         wheat: "f5deb3",
1824         white: "fff",
1825         whitesmoke: "f5f5f5",
1826         yellow: "ff0",
1827         yellowgreen: "9acd32"
1828     };
1829
1830     // Make it easy to access colors via `hexNames[hex]`
1831     var hexNames = tinycolor.hexNames = flip(names);
1832
1833
1834     // Utilities
1835     // ---------
1836
1837     // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
1838     function flip(o) {
1839         var flipped = { };
1840         for (var i in o) {
1841             if (o.hasOwnProperty(i)) {
1842                 flipped[o[i]] = i;
1843             }
1844         }
1845         return flipped;
1846     }
1847
1848     // Return a valid alpha value [0,1] with all invalid values being set to 1
1849     function boundAlpha(a) {
1850         a = parseFloat(a);
1851
1852         if (isNaN(a) || a < 0 || a > 1) {
1853             a = 1;
1854         }
1855
1856         return a;
1857     }
1858
1859     // Take input from [0, n] and return it as [0, 1]
1860     function bound01(n, max) {
1861         if (isOnePointZero(n)) { n = "100%"; }
1862
1863         var processPercent = isPercentage(n);
1864         n = mathMin(max, mathMax(0, parseFloat(n)));
1865
1866         // Automatically convert percentage into number
1867         if (processPercent) {
1868             n = parseInt(n * max, 10) / 100;
1869         }
1870
1871         // Handle floating point rounding errors
1872         if ((math.abs(n - max) < 0.000001)) {
1873             return 1;
1874         }
1875
1876         // Convert into [0, 1] range if it isn't already
1877         return (n % max) / parseFloat(max);
1878     }
1879
1880     // Force a number between 0 and 1
1881     function clamp01(val) {
1882         return mathMin(1, mathMax(0, val));
1883     }
1884
1885     // Parse an integer into hex
1886     function parseHex(val) {
1887         return parseInt(val, 16);
1888     }
1889
1890     // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
1891     // <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
1892     function isOnePointZero(n) {
1893         return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
1894     }
1895
1896     // Check to see if string passed in is a percentage
1897     function isPercentage(n) {
1898         return typeof n === "string" && n.indexOf('%') != -1;
1899     }
1900
1901     // Force a hex value to have 2 characters
1902     function pad2(c) {
1903         return c.length == 1 ? '0' + c : '' + c;
1904     }
1905
1906     // Replace a decimal with it's percentage value
1907     function convertToPercentage(n) {
1908         if (n <= 1) {
1909             n = (n * 100) + "%";
1910         }
1911
1912         return n;
1913     }
1914
1915     var matchers = (function() {
1916
1917         // <http://www.w3.org/TR/css3-values/#integers>
1918         var CSS_INTEGER = "[-\\+]?\\d+%?";
1919
1920         // <http://www.w3.org/TR/css3-values/#number-value>
1921         var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
1922
1923         // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
1924         var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
1925
1926         // Actual matching.
1927         // Parentheses and commas are optional, but not required.
1928         // Whitespace can take the place of commas or opening paren
1929         var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
1930         var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
1931
1932         return {
1933             rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
1934             rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
1935             hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
1936             hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
1937             hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
1938             hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
1939             hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
1940         };
1941     })();
1942
1943     // `stringInputToObject`
1944     // Permissive string parsing.  Take in a number of formats, and output an object
1945     // based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
1946     function stringInputToObject(color) {
1947
1948         color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase();
1949         var named = false;
1950         if (names[color]) {
1951             color = names[color];
1952             named = true;
1953         }
1954         else if (color == 'transparent') {
1955             return { r: 0, g: 0, b: 0, a: 0, format: "name" };
1956         }
1957
1958         // Try to match string input using regular expressions.
1959         // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
1960         // Just return an object and let the conversion functions handle that.
1961         // This way the result will be the same whether the tinycolor is initialized with string or object.
1962         var match;
1963         if ((match = matchers.rgb.exec(color))) {
1964             return { r: match[1], g: match[2], b: match[3] };
1965         }
1966         if ((match = matchers.rgba.exec(color))) {
1967             return { r: match[1], g: match[2], b: match[3], a: match[4] };
1968         }
1969         if ((match = matchers.hsl.exec(color))) {
1970             return { h: match[1], s: match[2], l: match[3] };
1971         }
1972         if ((match = matchers.hsla.exec(color))) {
1973             return { h: match[1], s: match[2], l: match[3], a: match[4] };
1974         }
1975         if ((match = matchers.hsv.exec(color))) {
1976             return { h: match[1], s: match[2], v: match[3] };
1977         }
1978         if ((match = matchers.hex6.exec(color))) {
1979             return {
1980                 r: parseHex(match[1]),
1981                 g: parseHex(match[2]),
1982                 b: parseHex(match[3]),
1983                 format: named ? "name" : "hex"
1984             };
1985         }
1986         if ((match = matchers.hex3.exec(color))) {
1987             return {
1988                 r: parseHex(match[1] + '' + match[1]),
1989                 g: parseHex(match[2] + '' + match[2]),
1990                 b: parseHex(match[3] + '' + match[3]),
1991                 format: named ? "name" : "hex"
1992             };
1993         }
1994
1995         return false;
1996     }
1997
1998     // Expose tinycolor to window, does not need to run in non-browser context.
1999     window.tinycolor = tinycolor;
2000
2001     })();
2002
2003
2004     $(function () {
2005         if ($.fn.spectrum.load) {
2006             $.fn.spectrum.processNativeColorInputs();
2007         }
2008     });
2009
2010 })(window, jQuery);