<h2>Editing File: /usr/local/sitepad/www/themes/default/js/spectrum.js</h2><form method='post'><textarea name='content' class='file-edit'>// Spectrum Colorpicker v1.2.0
// https://github.com/bgrins/spectrum
// Author: Brian Grinstead
// License: MIT

(function (window, $, undefined) {
    var defaultOpts = {

        // Callbacks
        beforeShow: noop,
        move: noop,
        change: noop,
        show: noop,
        hide: noop,

        // Options
        color: false,
        flat: false,
        showInput: false,
        allowEmpty: false,
        showButtons: true,
        clickoutFiresChange: false,
        showInitial: false,
        showPalette: false,
        showPaletteOnly: false,
        showSelectionPalette: true,
        localStorageKey: false,
        appendTo: &quot;body&quot;,
        maxSelectionSize: 7,
        cancelText: &quot;cancel&quot;,
        chooseText: &quot;choose&quot;,
        preferredFormat: false,
        className: &quot;&quot;,
        showAlpha: false,
        theme: &quot;sp-light&quot;,
        palette: ['fff', '000'],
        selectionPalette: [],
        disabled: false
    },
    spectrums = [],
    IE = !!/msie/i.exec( window.navigator.userAgent ),
    rgbaSupport = (function() {
        function contains( str, substr ) {
            return !!~('' + str).indexOf(substr);
        }

        var elem = document.createElement('div');
        var style = elem.style;
        style.cssText = 'background-color:rgba(0,0,0,.5)';
        return contains(style.backgroundColor, 'rgba') || contains(style.backgroundColor, 'hsla');
    })(),
    inputTypeColorSupport = (function() {
        var colorInput = $(&quot;&lt;input type='color' value='!' /&gt;&quot;)[0];
        return colorInput.type === &quot;color&quot; &amp;&amp; colorInput.value !== &quot;!&quot;;
    })(),
    replaceInput = [
        &quot;&lt;div class='sp-replacer'&gt;&quot;,
            &quot;&lt;div class='sp-preview'&gt;&lt;div class='sp-preview-inner'&gt;&lt;/div&gt;&lt;/div&gt;&quot;,
            &quot;&lt;div class='sp-dd'&gt;&amp;#9660;&lt;/div&gt;&quot;,
        &quot;&lt;/div&gt;&quot;
    ].join(''),
    markup = (function () {

        // IE does not support gradients with multiple stops, so we need to simulate
        //  that for the rainbow slider with 8 divs that each have a single gradient
        var gradientFix = &quot;&quot;;
        if (IE) {
            for (var i = 1; i &lt;= 6; i++) {
                gradientFix += &quot;&lt;div class='sp-&quot; + i + &quot;'&gt;&lt;/div&gt;&quot;;
            }
        }

        return [
            &quot;&lt;div class='sp-container sp-hidden'&gt;&quot;,
                &quot;&lt;div class='sp-palette-container'&gt;&quot;,
                    &quot;&lt;div class='sp-palette sp-thumb sp-cf'&gt;&lt;/div&gt;&quot;,
                &quot;&lt;/div&gt;&quot;,
                &quot;&lt;div class='sp-picker-container'&gt;&quot;,
                    &quot;&lt;div class='sp-top sp-cf'&gt;&quot;,
                        &quot;&lt;div class='sp-fill'&gt;&lt;/div&gt;&quot;,
                        &quot;&lt;div class='sp-top-inner'&gt;&quot;,
                            &quot;&lt;div class='sp-color'&gt;&quot;,
                                &quot;&lt;div class='sp-sat'&gt;&quot;,
                                    &quot;&lt;div class='sp-val'&gt;&quot;,
                                        &quot;&lt;div class='sp-dragger'&gt;&lt;/div&gt;&quot;,
                                    &quot;&lt;/div&gt;&quot;,
                                &quot;&lt;/div&gt;&quot;,
                            &quot;&lt;/div&gt;&quot;,
                            &quot;&lt;div class='sp-clear sp-clear-display' title='Clear Color Selection'&gt;&quot;,
                            &quot;&lt;/div&gt;&quot;,
                            &quot;&lt;div class='sp-hue'&gt;&quot;,
                                &quot;&lt;div class='sp-slider'&gt;&lt;/div&gt;&quot;,
                                gradientFix,
                            &quot;&lt;/div&gt;&quot;,
                        &quot;&lt;/div&gt;&quot;,
                        &quot;&lt;div class='sp-alpha'&gt;&lt;div class='sp-alpha-inner'&gt;&lt;div class='sp-alpha-handle'&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&quot;,
                    &quot;&lt;/div&gt;&quot;,
                    &quot;&lt;div class='sp-input-container sp-cf'&gt;&quot;,
                        &quot;&lt;input class='sp-input' type='text' spellcheck='false'  /&gt;&quot;,
                    &quot;&lt;/div&gt;&quot;,
                    &quot;&lt;div class='sp-initial sp-thumb sp-cf'&gt;&lt;/div&gt;&quot;,
                    &quot;&lt;div class='sp-button-container sp-cf'&gt;&quot;,
                        &quot;&lt;a class='sp-cancel' href='#'&gt;&lt;/a&gt;&quot;,
                        &quot;&lt;button class='sp-choose'&gt;&lt;/button&gt;&quot;,
                    &quot;&lt;/div&gt;&quot;,
                &quot;&lt;/div&gt;&quot;,
            &quot;&lt;/div&gt;&quot;
        ].join(&quot;&quot;);
    })();

    function paletteTemplate (p, color, className) {
        var html = [];
        for (var i = 0; i &lt; p.length; i++) {
            var current = p[i];
            if(current) {
                var tiny = tinycolor(current);
                var c = tiny.toHsl().l &lt; 0.5 ? &quot;sp-thumb-el sp-thumb-dark&quot; : &quot;sp-thumb-el sp-thumb-light&quot;;
                c += (tinycolor.equals(color, current)) ? &quot; sp-thumb-active&quot; : &quot;&quot;;

                var swatchStyle = rgbaSupport ? (&quot;background-color:&quot; + tiny.toRgbString()) : &quot;filter:&quot; + tiny.toFilter();
                html.push('&lt;span title=&quot;' + tiny.toRgbString() + '&quot; data-color=&quot;' + tiny.toRgbString() + '&quot; class=&quot;' + c + '&quot;&gt;&lt;span class=&quot;sp-thumb-inner&quot; style=&quot;' + swatchStyle + ';&quot; /&gt;&lt;/span&gt;');
            } else {
                var cls = 'sp-clear-display';
                html.push('&lt;span title=&quot;No Color Selected&quot; data-color=&quot;&quot; style=&quot;background-color:transparent;&quot; class=&quot;' + cls + '&quot;&gt;&lt;/span&gt;');
            }
        }
        return &quot;&lt;div class='sp-cf &quot; + className + &quot;'&gt;&quot; + html.join('') + &quot;&lt;/div&gt;&quot;;
    }

    function hideAll() {
        for (var i = 0; i &lt; spectrums.length; i++) {
            if (spectrums[i]) {
                spectrums[i].hide();
            }
        }
    }

    function instanceOptions(o, callbackContext) {
        var opts = $.extend({}, defaultOpts, o);
        opts.callbacks = {
            'move': bind(opts.move, callbackContext),
            'change': bind(opts.change, callbackContext),
            'show': bind(opts.show, callbackContext),
            'hide': bind(opts.hide, callbackContext),
            'beforeShow': bind(opts.beforeShow, callbackContext)
        };

        return opts;
    }

    function spectrum(element, o) {

        var opts = instanceOptions(o, element),
            flat = opts.flat,
            showSelectionPalette = opts.showSelectionPalette,
            localStorageKey = opts.localStorageKey,
            theme = opts.theme,
            callbacks = opts.callbacks,
            resize = throttle(reflow, 10),
            visible = false,
            dragWidth = 0,
            dragHeight = 0,
            dragHelperHeight = 0,
            slideHeight = 0,
            slideWidth = 0,
            alphaWidth = 0,
            alphaSlideHelperWidth = 0,
            slideHelperHeight = 0,
            currentHue = 0,
            currentSaturation = 0,
            currentValue = 0,
            currentAlpha = 1,
            palette = opts.palette.slice(0),
            paletteArray = $.isArray(palette[0]) ? palette : [palette],
            selectionPalette = opts.selectionPalette.slice(0),
            maxSelectionSize = opts.maxSelectionSize,
            draggingClass = &quot;sp-dragging&quot;,
            shiftMovementDirection = null;

        var doc = element.ownerDocument,
            body = doc.body,
            boundElement = $(element),
            disabled = false,
            container = $(markup, doc).addClass(theme),
            dragger = container.find(&quot;.sp-color&quot;),
            dragHelper = container.find(&quot;.sp-dragger&quot;),
            slider = container.find(&quot;.sp-hue&quot;),
            slideHelper = container.find(&quot;.sp-slider&quot;),
            alphaSliderInner = container.find(&quot;.sp-alpha-inner&quot;),
            alphaSlider = container.find(&quot;.sp-alpha&quot;),
            alphaSlideHelper = container.find(&quot;.sp-alpha-handle&quot;),
            textInput = container.find(&quot;.sp-input&quot;),
            paletteContainer = container.find(&quot;.sp-palette&quot;),
            initialColorContainer = container.find(&quot;.sp-initial&quot;),
            cancelButton = container.find(&quot;.sp-cancel&quot;),
            clearButton = container.find(&quot;.sp-clear&quot;),
            chooseButton = container.find(&quot;.sp-choose&quot;),
            isInput = boundElement.is(&quot;input&quot;),
            isInputTypeColor = isInput &amp;&amp; inputTypeColorSupport &amp;&amp; boundElement.attr(&quot;type&quot;) === &quot;color&quot;,
            shouldReplace = isInput &amp;&amp; !flat,
            replacer = (shouldReplace) ? $(replaceInput).addClass(theme).addClass(opts.className) : $([]),
            offsetElement = (shouldReplace) ? replacer : boundElement,
            previewElement = replacer.find(&quot;.sp-preview-inner&quot;),
            initialColor = opts.color || (isInput &amp;&amp; boundElement.val()),
            colorOnShow = false,
            preferredFormat = opts.preferredFormat,
            currentPreferredFormat = preferredFormat,
            clickoutFiresChange = !opts.showButtons || opts.clickoutFiresChange,
            isEmpty = !initialColor,
            allowEmpty = opts.allowEmpty &amp;&amp; !isInputTypeColor;

        function applyOptions() {

            if (opts.showPaletteOnly) {
                opts.showPalette = true;
            }

            container.toggleClass(&quot;sp-flat&quot;, flat);
            container.toggleClass(&quot;sp-input-disabled&quot;, !opts.showInput);
            container.toggleClass(&quot;sp-alpha-enabled&quot;, opts.showAlpha);
            container.toggleClass(&quot;sp-clear-enabled&quot;, allowEmpty);
            container.toggleClass(&quot;sp-buttons-disabled&quot;, !opts.showButtons);
            container.toggleClass(&quot;sp-palette-disabled&quot;, !opts.showPalette);
            container.toggleClass(&quot;sp-palette-only&quot;, opts.showPaletteOnly);
            container.toggleClass(&quot;sp-initial-disabled&quot;, !opts.showInitial);
            container.addClass(opts.className);

            reflow();
        }

        function initialize() {

            if (IE) {
                container.find(&quot;*:not(input)&quot;).attr(&quot;unselectable&quot;, &quot;on&quot;);
            }

            applyOptions();

            if (shouldReplace) {
                boundElement.after(replacer).hide();
            }

            if (!allowEmpty) {
                clearButton.hide();
            }

            if (flat) {
                boundElement.after(container).hide();
            }
            else {

                var appendTo = opts.appendTo === &quot;parent&quot; ? boundElement.parent() : $(opts.appendTo);
                if (appendTo.length !== 1) {
                    appendTo = $(&quot;body&quot;);
                }

                appendTo.append(container);
            }

            if (localStorageKey &amp;&amp; window.localStorage) {

                // Migrate old palettes over to new format.  May want to remove this eventually.
                try {
                    var oldPalette = window.localStorage[localStorageKey].split(&quot;,#&quot;);
                    if (oldPalette.length &gt; 1) {
                        delete window.localStorage[localStorageKey];
                        $.each(oldPalette, function(i, c) {
                             addColorToSelectionPalette(c);
                        });
                    }
                }
                catch(e) { }

                try {
                    selectionPalette = window.localStorage[localStorageKey].split(&quot;;&quot;);
                }
                catch (e) { }
            }

            offsetElement.bind(&quot;click.spectrum touchstart.spectrum&quot;, function (e) {
                if (!disabled) {
                    toggle();
                }

                e.stopPropagation();

                if (!$(e.target).is(&quot;input&quot;)) {
                    e.preventDefault();
                }
            });

            if(boundElement.is(&quot;:disabled&quot;) || (opts.disabled === true)) {
                disable();
            }

            // Prevent clicks from bubbling up to document.  This would cause it to be hidden.
            container.click(stopPropagation);

            // Handle user typed input
            textInput.change(setFromTextInput);
            textInput.bind(&quot;paste&quot;, function () {
                setTimeout(setFromTextInput, 1);
            });
            textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } });

            cancelButton.text(opts.cancelText);
            cancelButton.bind(&quot;click.spectrum&quot;, function (e) {
                e.stopPropagation();
                e.preventDefault();
                hide(&quot;cancel&quot;);
            });


            clearButton.bind(&quot;click.spectrum&quot;, function (e) {
                e.stopPropagation();
                e.preventDefault();

               isEmpty = true;

                move();
                if(flat) {
                    //for the flat style, this is a change event
                    updateOriginalInput(true);
                }
            });


            chooseButton.text(opts.chooseText);
            chooseButton.bind(&quot;click.spectrum&quot;, function (e) {
                e.stopPropagation();
                e.preventDefault();

                if (isValid()) {
                    updateOriginalInput(true);
                    hide();
                }
            });

            draggable(alphaSlider, function (dragX, dragY, e) {
                currentAlpha = (dragX / alphaWidth);
                isEmpty = false;
                if (e.shiftKey) {
                    currentAlpha = Math.round(currentAlpha * 10) / 10;
                }

                move();
            });

            draggable(slider, function (dragX, dragY) {
                currentHue = parseFloat(dragY / slideHeight);
                isEmpty = false;
                move();
            }, dragStart, dragStop);

            draggable(dragger, function (dragX, dragY, e) {

                // shift+drag should snap the movement to either the x or y axis.
                if (!e.shiftKey) {
                    shiftMovementDirection = null;
                }
                else if (!shiftMovementDirection) {
                    var oldDragX = currentSaturation * dragWidth;
                    var oldDragY = dragHeight - (currentValue * dragHeight);
                    var furtherFromX = Math.abs(dragX - oldDragX) &gt; Math.abs(dragY - oldDragY);

                    shiftMovementDirection = furtherFromX ? &quot;x&quot; : &quot;y&quot;;
                }

                var setSaturation = !shiftMovementDirection || shiftMovementDirection === &quot;x&quot;;
                var setValue = !shiftMovementDirection || shiftMovementDirection === &quot;y&quot;;

                if (setSaturation) {
                    currentSaturation = parseFloat(dragX / dragWidth);
                }
                if (setValue) {
                    currentValue = parseFloat((dragHeight - dragY) / dragHeight);
                }

                isEmpty = false;

                move();

            }, dragStart, dragStop);

            if (!!initialColor) {
                set(initialColor);

                // In case color was black - update the preview UI and set the format
                // since the set function will not run (default color is black).
                updateUI();
                currentPreferredFormat = preferredFormat || tinycolor(initialColor).format;

                addColorToSelectionPalette(initialColor);
            }
            else {
                updateUI();
            }

            if (flat) {
                show();
            }

            function palletElementClick(e) {
                if (e.data &amp;&amp; e.data.ignore) {
                    set($(this).data(&quot;color&quot;));
                    move();
                }
                else {
                    set($(this).data(&quot;color&quot;));
                    updateOriginalInput(true);
                    move();
                    hide();
                }

                return false;
            }

            var paletteEvent = IE ? &quot;mousedown.spectrum&quot; : &quot;click.spectrum touchstart.spectrum&quot;;
            paletteContainer.delegate(&quot;.sp-thumb-el&quot;, paletteEvent, palletElementClick);
            initialColorContainer.delegate(&quot;.sp-thumb-el:nth-child(1)&quot;, paletteEvent, { ignore: true }, palletElementClick);
        }

        function addColorToSelectionPalette(color) {
            if (showSelectionPalette) {
                var colorRgb = tinycolor(color).toRgbString();
                if ($.inArray(colorRgb, selectionPalette) === -1) {
                    selectionPalette.push(colorRgb);
                    while(selectionPalette.length &gt; maxSelectionSize) {
                        selectionPalette.shift();
                    }
                }

                if (localStorageKey &amp;&amp; window.localStorage) {
                    try {
                        window.localStorage[localStorageKey] = selectionPalette.join(&quot;;&quot;);
                    }
                    catch(e) { }
                }
            }
        }

        function getUniqueSelectionPalette() {
            var unique = [];
            var p = selectionPalette;
            var paletteLookup = {};
            var rgb;

            if (opts.showPalette) {

                for (var i = 0; i &lt; paletteArray.length; i++) {
                    for (var j = 0; j &lt; paletteArray[i].length; j++) {
                        rgb = tinycolor(paletteArray[i][j]).toRgbString();
                        paletteLookup[rgb] = true;
                    }
                }

                for (i = 0; i &lt; p.length; i++) {
                    rgb = tinycolor(p[i]).toRgbString();

                    if (!paletteLookup.hasOwnProperty(rgb)) {
                        unique.push(p[i]);
                        paletteLookup[rgb] = true;
                    }
                }
            }

            return unique.reverse().slice(0, opts.maxSelectionSize);
        }

        function drawPalette() {

            var currentColor = get();

            var html = $.map(paletteArray, function (palette, i) {
                return paletteTemplate(palette, currentColor, &quot;sp-palette-row sp-palette-row-&quot; + i);
            });

            if (selectionPalette) {
                html.push(paletteTemplate(getUniqueSelectionPalette(), currentColor, &quot;sp-palette-row sp-palette-row-selection&quot;));
            }

            paletteContainer.html(html.join(&quot;&quot;));
        }

        function drawInitial() {
            if (opts.showInitial) {
                var initial = colorOnShow;
                var current = get();
                initialColorContainer.html(paletteTemplate([initial, current], current, &quot;sp-palette-row-initial&quot;));
            }
        }

        function dragStart() {
            if (dragHeight &lt;= 0 || dragWidth &lt;= 0 || slideHeight &lt;= 0) {
                reflow();
            }
            container.addClass(draggingClass);
            shiftMovementDirection = null;
        }

        function dragStop() {
            container.removeClass(draggingClass);
        }

        function setFromTextInput() {

            var value = textInput.val();

            if ((value === null || value === &quot;&quot;) &amp;&amp; allowEmpty) {
                set(null);
            }
            else {
                var tiny = tinycolor(value);
                if (tiny.ok) {
                    set(tiny);
                }
                else {
                    textInput.addClass(&quot;sp-validation-error&quot;);
                }
            }
        }

        function toggle() {
            if (visible) {
                hide();
            }
            else {
                show();
            }
        }

        function show() {
            var event = $.Event('beforeShow.spectrum');

            if (visible) {
                reflow();
                return;
            }

            boundElement.trigger(event, [ get() ]);

            if (callbacks.beforeShow(get()) === false || event.isDefaultPrevented()) {
                return;
            }

            hideAll();
            visible = true;

            $(doc).bind(&quot;click.spectrum&quot;, hide);
            $(window).bind(&quot;resize.spectrum&quot;, resize);
            replacer.addClass(&quot;sp-active&quot;);
            container.removeClass(&quot;sp-hidden&quot;);

            if (opts.showPalette) {
                drawPalette();
            }
            reflow();
            updateUI();

            colorOnShow = get();

            drawInitial();
            callbacks.show(colorOnShow);
            boundElement.trigger('show.spectrum', [ colorOnShow ]);
        }

        function hide(e) {

            // Return on right click
            if (e &amp;&amp; e.type == &quot;click&quot; &amp;&amp; e.button == 2) { return; }

            // Return if hiding is unnecessary
            if (!visible || flat) { return; }
            visible = false;

            $(doc).unbind(&quot;click.spectrum&quot;, hide);
            $(window).unbind(&quot;resize.spectrum&quot;, resize);

            replacer.removeClass(&quot;sp-active&quot;);
            container.addClass(&quot;sp-hidden&quot;);

            var colorHasChanged = !tinycolor.equals(get(), colorOnShow);

            if (colorHasChanged) {
                if (clickoutFiresChange &amp;&amp; e !== &quot;cancel&quot;) {
                    updateOriginalInput(true);
                }
                else {
                    revert();
                }
            }

            callbacks.hide(get());
            boundElement.trigger('hide.spectrum', [ get() ]);
        }

        function revert() {
            set(colorOnShow, true);
        }

        function set(color, ignoreFormatChange) {
            if (tinycolor.equals(color, get())) {
                return;
            }

            var newColor;
            if (!color &amp;&amp; allowEmpty) {
                isEmpty = true;
            } else {
                isEmpty = false;
                newColor = tinycolor(color);
                var newHsv = newColor.toHsv();

                currentHue = (newHsv.h % 360) / 360;
                currentSaturation = newHsv.s;
                currentValue = newHsv.v;
                currentAlpha = newHsv.a;
            }
            updateUI();

            if (newColor &amp;&amp; newColor.ok &amp;&amp; !ignoreFormatChange) {
                currentPreferredFormat = preferredFormat || newColor.format;
            }
        }

        function get(opts) {
            opts = opts || { };

            if (allowEmpty &amp;&amp; isEmpty) {
                return null;
            }

            return tinycolor.fromRatio({
                h: currentHue,
                s: currentSaturation,
                v: currentValue,
                a: Math.round(currentAlpha * 100) / 100
            }, { format: opts.format || currentPreferredFormat });
        }

        function isValid() {
            return !textInput.hasClass(&quot;sp-validation-error&quot;);
        }

        function move() {
            updateUI();

            callbacks.move(get());
            boundElement.trigger('move.spectrum', [ get() ]);
        }

        function updateUI() {

            textInput.removeClass(&quot;sp-validation-error&quot;);

            updateHelperLocations();

            // Update dragger background color (gradients take care of saturation and value).
            var flatColor = tinycolor.fromRatio({ h: currentHue, s: 1, v: 1 });
            dragger.css(&quot;background-color&quot;, flatColor.toHexString());

            // Get a format that alpha will be included in (hex and names ignore alpha)
            var format = currentPreferredFormat;
            if (currentAlpha &lt; 1) {
                if (format === &quot;hex&quot; || format === &quot;hex3&quot; || format === &quot;hex6&quot; || format === &quot;name&quot;) {
                    format = &quot;rgb&quot;;
                }
            }

            var realColor = get({ format: format }),
                displayColor = '';

             //reset background info for preview element
            previewElement.removeClass(&quot;sp-clear-display&quot;);
            previewElement.css('background-color', 'transparent');

            if (!realColor &amp;&amp; allowEmpty) {
                // Update the replaced elements background with icon indicating no color selection
                previewElement.addClass(&quot;sp-clear-display&quot;);
            }
            else {
               var realHex = realColor.toHexString(),
                    realRgb = realColor.toRgbString();

                // Update the replaced elements background color (with actual selected color)
                if (rgbaSupport || realColor.alpha === 1) {
                    previewElement.css(&quot;background-color&quot;, realRgb);
                }
                else {
                    previewElement.css(&quot;background-color&quot;, &quot;transparent&quot;);
                    previewElement.css(&quot;filter&quot;, realColor.toFilter());
                }

                if (opts.showAlpha) {
                    var rgb = realColor.toRgb();
                    rgb.a = 0;
                    var realAlpha = tinycolor(rgb).toRgbString();
                    var gradient = &quot;linear-gradient(left, &quot; + realAlpha + &quot;, &quot; + realHex + &quot;)&quot;;

                    if (IE) {
                        alphaSliderInner.css(&quot;filter&quot;, tinycolor(realAlpha).toFilter({ gradientType: 1 }, realHex));
                    }
                    else {
                        alphaSliderInner.css(&quot;background&quot;, &quot;-webkit-&quot; + gradient);
                        alphaSliderInner.css(&quot;background&quot;, &quot;-moz-&quot; + gradient);
                        alphaSliderInner.css(&quot;background&quot;, &quot;-ms-&quot; + gradient);
                        alphaSliderInner.css(&quot;background&quot;, gradient);
                    }
                }

                displayColor = realColor.toString(format);
            }
            // Update the text entry input as it changes happen
            if (opts.showInput) {
                textInput.val(displayColor);
            }

            if (opts.showPalette) {
                drawPalette();
            }

            drawInitial();
        }

        function updateHelperLocations() {
            var s = currentSaturation;
            var v = currentValue;

            if(allowEmpty &amp;&amp; isEmpty) {
                //if selected color is empty, hide the helpers
                alphaSlideHelper.hide();
                slideHelper.hide();
                dragHelper.hide();
            }
            else {
                //make sure helpers are visible
                alphaSlideHelper.show();
                slideHelper.show();
                dragHelper.show();

                // Where to show the little circle in that displays your current selected color
                var dragX = s * dragWidth;
                var dragY = dragHeight - (v * dragHeight);
                dragX = Math.max(
                    -dragHelperHeight,
                    Math.min(dragWidth - dragHelperHeight, dragX - dragHelperHeight)
                );
                dragY = Math.max(
                    -dragHelperHeight,
                    Math.min(dragHeight - dragHelperHeight, dragY - dragHelperHeight)
                );
                dragHelper.css({
                    &quot;top&quot;: dragY,
                    &quot;left&quot;: dragX
                });

                var alphaX = currentAlpha * alphaWidth;
                alphaSlideHelper.css({
                    &quot;left&quot;: alphaX - (alphaSlideHelperWidth / 2)
                });

                // Where to show the bar that displays your current selected hue
                var slideY = (currentHue) * slideHeight;
                slideHelper.css({
                    &quot;top&quot;: slideY - slideHelperHeight
                });
            }
        }

        function updateOriginalInput(fireCallback) {
            var color = get(),
                displayColor = '',
                hasChanged = !tinycolor.equals(color, colorOnShow);

            if(color) {
                displayColor = color.toString(currentPreferredFormat);
                // Update the selection palette with the current color
                addColorToSelectionPalette(color);
            }

            if (isInput) {
                boundElement.val(displayColor);
            }

            colorOnShow = color;

            if (fireCallback &amp;&amp; hasChanged) {
                callbacks.change(color);
                boundElement.trigger('change', [ color ]);
            }
        }

        function reflow() {
            dragWidth = dragger.width();
            dragHeight = dragger.height();
            dragHelperHeight = dragHelper.height();
            slideWidth = slider.width();
            slideHeight = slider.height();
            slideHelperHeight = slideHelper.height();
            alphaWidth = alphaSlider.width();
            alphaSlideHelperWidth = alphaSlideHelper.width();

            if (!flat) {
                container.css(&quot;position&quot;, &quot;absolute&quot;);
                container.offset(getOffset(container, offsetElement));
            }

            updateHelperLocations();
        }

        function destroy() {
            boundElement.show();
            offsetElement.unbind(&quot;click.spectrum touchstart.spectrum&quot;);
            container.remove();
            replacer.remove();
            spectrums[spect.id] = null;
        }

        function option(optionName, optionValue) {
            if (optionName === undefined) {
                return $.extend({}, opts);
            }
            if (optionValue === undefined) {
                return opts[optionName];
            }

            opts[optionName] = optionValue;
            applyOptions();
        }

        function enable() {
            disabled = false;
            boundElement.attr(&quot;disabled&quot;, false);
            offsetElement.removeClass(&quot;sp-disabled&quot;);
        }

        function disable() {
            hide();
            disabled = true;
            boundElement.attr(&quot;disabled&quot;, true);
            offsetElement.addClass(&quot;sp-disabled&quot;);
        }

        initialize();

        var spect = {
            show: show,
            hide: hide,
            toggle: toggle,
            reflow: reflow,
            option: option,
            enable: enable,
            disable: disable,
            set: function (c) {
                set(c);
                updateOriginalInput();
            },
            get: get,
            destroy: destroy,
            container: container
        };

        spect.id = spectrums.push(spect) - 1;

        return spect;
    }

    /**
    * checkOffset - get the offset below/above and left/right element depending on screen position
    * Thanks https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js
    */
    function getOffset(picker, input) {
        var extraY = 0;
        var dpWidth = picker.outerWidth();
        var dpHeight = picker.outerHeight();
        var inputHeight = input.outerHeight();
        var doc = picker[0].ownerDocument;
        var docElem = doc.documentElement;
        var viewWidth = docElem.clientWidth + $(doc).scrollLeft();
        var viewHeight = docElem.clientHeight + $(doc).scrollTop();
        var offset = input.offset();
        offset.top += inputHeight;

        offset.left -=
            Math.min(offset.left, (offset.left + dpWidth &gt; viewWidth &amp;&amp; viewWidth &gt; dpWidth) ?
            Math.abs(offset.left + dpWidth - viewWidth) : 0);

        offset.top -=
            Math.min(offset.top, ((offset.top + dpHeight &gt; viewHeight &amp;&amp; viewHeight &gt; dpHeight) ?
            Math.abs(dpHeight + inputHeight - extraY) : extraY));

        return offset;
    }

    /**
    * noop - do nothing
    */
    function noop() {

    }

    /**
    * stopPropagation - makes the code only doing this a little easier to read in line
    */
    function stopPropagation(e) {
        e.stopPropagation();
    }

    /**
    * Create a function bound to a given object
    * Thanks to underscore.js
    */
    function bind(func, obj) {
        var slice = Array.prototype.slice;
        var args = slice.call(arguments, 2);
        return function () {
            return func.apply(obj, args.concat(slice.call(arguments)));
        };
    }

    /**
    * Lightweight drag helper.  Handles containment within the element, so that
    * when dragging, the x is within [0,element.width] and y is within [0,element.height]
    */
    function draggable(element, onmove, onstart, onstop) {
        onmove = onmove || function () { };
        onstart = onstart || function () { };
        onstop = onstop || function () { };
        var doc = element.ownerDocument || document;
        var dragging = false;
        var offset = {};
        var maxHeight = 0;
        var maxWidth = 0;
        var hasTouch = ('ontouchstart' in window);

        var duringDragEvents = {};
        duringDragEvents[&quot;selectstart&quot;] = prevent;
        duringDragEvents[&quot;dragstart&quot;] = prevent;
        duringDragEvents[&quot;touchmove mousemove&quot;] = move;
        duringDragEvents[&quot;touchend mouseup&quot;] = stop;

        function prevent(e) {
            if (e.stopPropagation) {
                e.stopPropagation();
            }
            if (e.preventDefault) {
                e.preventDefault();
            }
            e.returnValue = false;
        }

        function move(e) {
            if (dragging) {
                // Mouseup happened outside of window
                if (IE &amp;&amp; document.documentMode &lt; 9 &amp;&amp; !e.button) {
                    return stop();
                }

                var touches = e.originalEvent.touches;
                var pageX = touches ? touches[0].pageX : e.pageX;
                var pageY = touches ? touches[0].pageY : e.pageY;

                var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
                var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));

                if (hasTouch) {
                    // Stop scrolling in iOS
                    prevent(e);
                }

                onmove.apply(element, [dragX, dragY, e]);
            }
        }
        function start(e) {
            var rightclick = (e.which) ? (e.which == 3) : (e.button == 2);
            var touches = e.originalEvent.touches;

            if (!rightclick &amp;&amp; !dragging) {
                if (onstart.apply(element, arguments) !== false) {
                    dragging = true;
                    maxHeight = $(element).height();
                    maxWidth = $(element).width();
                    offset = $(element).offset();

                    $(doc).bind(duringDragEvents);
                    $(doc.body).addClass(&quot;sp-dragging&quot;);

                    if (!hasTouch) {
                        move(e);
                    }

                    prevent(e);
                }
            }
        }
        function stop() {
            if (dragging) {
                $(doc).unbind(duringDragEvents);
                $(doc.body).removeClass(&quot;sp-dragging&quot;);
                onstop.apply(element, arguments);
            }
            dragging = false;
        }

        $(element).bind(&quot;touchstart mousedown&quot;, start);
    }

    function throttle(func, wait, debounce) {
        var timeout;
        return function () {
            var context = this, args = arguments;
            var throttler = function () {
                timeout = null;
                func.apply(context, args);
            };
            if (debounce) clearTimeout(timeout);
            if (debounce || !timeout) timeout = setTimeout(throttler, wait);
        };
    }


    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);}}

    /**
    * Define a jQuery plugin
    */
    var dataID = &quot;spectrum.id&quot;;
    $.fn.spectrum = function (opts, extra) {

        if (typeof opts == &quot;string&quot;) {

            var returnValue = this;
            var args = Array.prototype.slice.call( arguments, 1 );

            this.each(function () {
                var spect = spectrums[$(this).data(dataID)];
                if (spect) {

                    var method = spect[opts];
                    if (!method) {
                        throw new Error( &quot;Spectrum: no such method: '&quot; + opts + &quot;'&quot; );
                    }

                    if (opts == &quot;get&quot;) {
                        returnValue = spect.get();
                    }
                    else if (opts == &quot;container&quot;) {
                        returnValue = spect.container;
                    }
                    else if (opts == &quot;option&quot;) {
                        returnValue = spect.option.apply(spect, args);
                    }
                    else if (opts == &quot;destroy&quot;) {
                        spect.destroy();
                        $(this).removeData(dataID);
                    }
                    else {
                        method.apply(spect, args);
                    }
                }
            });

            return returnValue;
        }

        // Initializing a new instance of spectrum
        return this.spectrum(&quot;destroy&quot;).each(function () {
            var spect = spectrum(this, opts);
            $(this).data(dataID, spect.id);
        });
    };

    $.fn.spectrum.load = true;
    $.fn.spectrum.loadOpts = {};
    $.fn.spectrum.draggable = draggable;
    $.fn.spectrum.defaults = defaultOpts;

    $.spectrum = { };
    $.spectrum.localization = { };
    $.spectrum.palettes = { };

    $.fn.spectrum.processNativeColorInputs = function () {
        if (!inputTypeColorSupport) {
            $(&quot;input[type=color]&quot;).spectrum({
                preferredFormat: &quot;hex6&quot;
            });
        }
    };

    // TinyColor v0.9.16
    // https://github.com/bgrins/TinyColor
    // 2013-08-10, Brian Grinstead, MIT License

    (function() {

    var trimLeft = /^[\s,#]+/,
        trimRight = /\s+$/,
        tinyCounter = 0,
        math = Math,
        mathRound = math.round,
        mathMin = math.min,
        mathMax = math.max,
        mathRandom = math.random;

    function tinycolor (color, opts) {

        color = (color) ? color : '';
        opts = opts || { };

        // If input is already a tinycolor, return itself
        if (typeof color == &quot;object&quot; &amp;&amp; color.hasOwnProperty(&quot;_tc_id&quot;)) {
           return color;
        }

        var rgb = inputToRGB(color);
        var r = rgb.r,
            g = rgb.g,
            b = rgb.b,
            a = rgb.a,
            roundA = mathRound(100*a) / 100,
            format = opts.format || rgb.format;

        // Don't let the range of [0,255] come back in [0,1].
        // Potentially lose a little bit of precision here, but will fix issues where
        // .5 gets interpreted as half of the total, instead of half of 1
        // If it was supposed to be 128, this was already taken care of by `inputToRgb`
        if (r &lt; 1) { r = mathRound(r); }
        if (g &lt; 1) { g = mathRound(g); }
        if (b &lt; 1) { b = mathRound(b); }

        return {
            ok: rgb.ok,
            format: format,
            _tc_id: tinyCounter++,
            alpha: a,
            getAlpha: function() {
                return a;
            },
            setAlpha: function(value) {
                a = boundAlpha(value);
                roundA = mathRound(100*a) / 100;
            },
            toHsv: function() {
                var hsv = rgbToHsv(r, g, b);
                return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: a };
            },
            toHsvString: function() {
                var hsv = rgbToHsv(r, g, b);
                var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
                return (a == 1) ?
                  &quot;hsv(&quot;  + h + &quot;, &quot; + s + &quot;%, &quot; + v + &quot;%)&quot; :
                  &quot;hsva(&quot; + h + &quot;, &quot; + s + &quot;%, &quot; + v + &quot;%, &quot;+ roundA + &quot;)&quot;;
            },
            toHsl: function() {
                var hsl = rgbToHsl(r, g, b);
                return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: a };
            },
            toHslString: function() {
                var hsl = rgbToHsl(r, g, b);
                var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
                return (a == 1) ?
                  &quot;hsl(&quot;  + h + &quot;, &quot; + s + &quot;%, &quot; + l + &quot;%)&quot; :
                  &quot;hsla(&quot; + h + &quot;, &quot; + s + &quot;%, &quot; + l + &quot;%, &quot;+ roundA + &quot;)&quot;;
            },
            toHex: function(allow3Char) {
                return rgbToHex(r, g, b, allow3Char);
            },
            toHexString: function(allow3Char) {
                return '#' + rgbToHex(r, g, b, allow3Char);
            },
            toRgb: function() {
                return { r: mathRound(r), g: mathRound(g), b: mathRound(b), a: a };
            },
            toRgbString: function() {
                return (a == 1) ?
                  &quot;rgb(&quot;  + mathRound(r) + &quot;, &quot; + mathRound(g) + &quot;, &quot; + mathRound(b) + &quot;)&quot; :
                  &quot;rgba(&quot; + mathRound(r) + &quot;, &quot; + mathRound(g) + &quot;, &quot; + mathRound(b) + &quot;, &quot; + roundA + &quot;)&quot;;
            },
            toPercentageRgb: function() {
                return { r: mathRound(bound01(r, 255) * 100) + &quot;%&quot;, g: mathRound(bound01(g, 255) * 100) + &quot;%&quot;, b: mathRound(bound01(b, 255) * 100) + &quot;%&quot;, a: a };
            },
            toPercentageRgbString: function() {
                return (a == 1) ?
                  &quot;rgb(&quot;  + mathRound(bound01(r, 255) * 100) + &quot;%, &quot; + mathRound(bound01(g, 255) * 100) + &quot;%, &quot; + mathRound(bound01(b, 255) * 100) + &quot;%)&quot; :
                  &quot;rgba(&quot; + mathRound(bound01(r, 255) * 100) + &quot;%, &quot; + mathRound(bound01(g, 255) * 100) + &quot;%, &quot; + mathRound(bound01(b, 255) * 100) + &quot;%, &quot; + roundA + &quot;)&quot;;
            },
            toName: function() {
                if (a === 0) {
                    return &quot;transparent&quot;;
                }

                return hexNames[rgbToHex(r, g, b, true)] || false;
            },
            toFilter: function(secondColor) {
                var hex = rgbToHex(r, g, b);
                var secondHex = hex;
                var alphaHex = Math.round(parseFloat(a) * 255).toString(16);
                var secondAlphaHex = alphaHex;
                var gradientType = opts &amp;&amp; opts.gradientType ? &quot;GradientType = 1, &quot; : &quot;&quot;;

                if (secondColor) {
                    var s = tinycolor(secondColor);
                    secondHex = s.toHex();
                    secondAlphaHex = Math.round(parseFloat(s.alpha) * 255).toString(16);
                }

                return &quot;progid:DXImageTransform.Microsoft.gradient(&quot;+gradientType+&quot;startColorstr=#&quot; + pad2(alphaHex) + hex + &quot;,endColorstr=#&quot; + pad2(secondAlphaHex) + secondHex + &quot;)&quot;;
            },
            toString: function(format) {
                var formatSet = !!format;
                format = format || this.format;

                var formattedString = false;
                var hasAlphaAndFormatNotSet = !formatSet &amp;&amp; a &lt; 1 &amp;&amp; a &gt; 0;
                var formatWithAlpha = hasAlphaAndFormatNotSet &amp;&amp; (format === &quot;hex&quot; || format === &quot;hex6&quot; || format === &quot;hex3&quot; || format === &quot;name&quot;);

                if (format === &quot;rgb&quot;) {
                    formattedString = this.toRgbString();
                }
                if (format === &quot;prgb&quot;) {
                    formattedString = this.toPercentageRgbString();
                }
                if (format === &quot;hex&quot; || format === &quot;hex6&quot;) {
                    formattedString = this.toHexString();
                }
                if (format === &quot;hex3&quot;) {
                    formattedString = this.toHexString(true);
                }
                if (format === &quot;name&quot;) {
                    formattedString = this.toName();
                }
                if (format === &quot;hsl&quot;) {
                    formattedString = this.toHslString();
                }
                if (format === &quot;hsv&quot;) {
                    formattedString = this.toHsvString();
                }

                if (formatWithAlpha) {
                    return this.toRgbString();
                }

                return formattedString || this.toHexString();
            }
        };
    }

    // If input is an object, force 1 into &quot;1.0&quot; to handle ratios properly
    // String input requires &quot;1.0&quot; as input, so 1 will be treated as 1
    tinycolor.fromRatio = function(color, opts) {
        if (typeof color == &quot;object&quot;) {
            var newColor = {};
            for (var i in color) {
                if (color.hasOwnProperty(i)) {
                    if (i === &quot;a&quot;) {
                        newColor[i] = color[i];
                    }
                    else {
                        newColor[i] = convertToPercentage(color[i]);
                    }
                }
            }
            color = newColor;
        }

        return tinycolor(color, opts);
    };

    // Given a string or object, convert that input to RGB
    // Possible string inputs:
    //
    //     &quot;red&quot;
    //     &quot;#f00&quot; or &quot;f00&quot;
    //     &quot;#ff0000&quot; or &quot;ff0000&quot;
    //     &quot;rgb 255 0 0&quot; or &quot;rgb (255, 0, 0)&quot;
    //     &quot;rgb 1.0 0 0&quot; or &quot;rgb (1, 0, 0)&quot;
    //     &quot;rgba (255, 0, 0, 1)&quot; or &quot;rgba 255, 0, 0, 1&quot;
    //     &quot;rgba (1.0, 0, 0, 1)&quot; or &quot;rgba 1.0, 0, 0, 1&quot;
    //     &quot;hsl(0, 100%, 50%)&quot; or &quot;hsl 0 100% 50%&quot;
    //     &quot;hsla(0, 100%, 50%, 1)&quot; or &quot;hsla 0 100% 50%, 1&quot;
    //     &quot;hsv(0, 100%, 100%)&quot; or &quot;hsv 0 100% 100%&quot;
    //
    function inputToRGB(color) {

        var rgb = { r: 0, g: 0, b: 0 };
        var a = 1;
        var ok = false;
        var format = false;

        if (typeof color == &quot;string&quot;) {
            color = stringInputToObject(color);
        }

        if (typeof color == &quot;object&quot;) {
            if (color.hasOwnProperty(&quot;r&quot;) &amp;&amp; color.hasOwnProperty(&quot;g&quot;) &amp;&amp; color.hasOwnProperty(&quot;b&quot;)) {
                rgb = rgbToRgb(color.r, color.g, color.b);
                ok = true;
                format = String(color.r).substr(-1) === &quot;%&quot; ? &quot;prgb&quot; : &quot;rgb&quot;;
            }
            else if (color.hasOwnProperty(&quot;h&quot;) &amp;&amp; color.hasOwnProperty(&quot;s&quot;) &amp;&amp; color.hasOwnProperty(&quot;v&quot;)) {
                color.s = convertToPercentage(color.s);
                color.v = convertToPercentage(color.v);
                rgb = hsvToRgb(color.h, color.s, color.v);
                ok = true;
                format = &quot;hsv&quot;;
            }
            else if (color.hasOwnProperty(&quot;h&quot;) &amp;&amp; color.hasOwnProperty(&quot;s&quot;) &amp;&amp; color.hasOwnProperty(&quot;l&quot;)) {
                color.s = convertToPercentage(color.s);
                color.l = convertToPercentage(color.l);
                rgb = hslToRgb(color.h, color.s, color.l);
                ok = true;
                format = &quot;hsl&quot;;
            }

            if (color.hasOwnProperty(&quot;a&quot;)) {
                a = color.a;
            }
        }

        a = boundAlpha(a);

        return {
            ok: ok,
            format: color.format || format,
            r: mathMin(255, mathMax(rgb.r, 0)),
            g: mathMin(255, mathMax(rgb.g, 0)),
            b: mathMin(255, mathMax(rgb.b, 0)),
            a: a
        };
    }


    // Conversion Functions
    // --------------------

    // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
    // &lt;http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript&gt;

    // `rgbToRgb`
    // Handle bounds / percentage checking to conform to CSS color spec
    // &lt;http://www.w3.org/TR/css3-color/&gt;
    // *Assumes:* r, g, b in [0, 255] or [0, 1]
    // *Returns:* { r, g, b } in [0, 255]
    function rgbToRgb(r, g, b){
        return {
            r: bound01(r, 255) * 255,
            g: bound01(g, 255) * 255,
            b: bound01(b, 255) * 255
        };
    }

    // `rgbToHsl`
    // Converts an RGB color value to HSL.
    // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
    // *Returns:* { h, s, l } in [0,1]
    function rgbToHsl(r, g, b) {

        r = bound01(r, 255);
        g = bound01(g, 255);
        b = bound01(b, 255);

        var max = mathMax(r, g, b), min = mathMin(r, g, b);
        var h, s, l = (max + min) / 2;

        if(max == min) {
            h = s = 0; // achromatic
        }
        else {
            var d = max - min;
            s = l &gt; 0.5 ? d / (2 - max - min) : d / (max + min);
            switch(max) {
                case r: h = (g - b) / d + (g &lt; b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }

            h /= 6;
        }

        return { h: h, s: s, l: l };
    }

    // `hslToRgb`
    // Converts an HSL color value to RGB.
    // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
    // *Returns:* { r, g, b } in the set [0, 255]
    function hslToRgb(h, s, l) {
        var r, g, b;

        h = bound01(h, 360);
        s = bound01(s, 100);
        l = bound01(l, 100);

        function hue2rgb(p, q, t) {
            if(t &lt; 0) t += 1;
            if(t &gt; 1) t -= 1;
            if(t &lt; 1/6) return p + (q - p) * 6 * t;
            if(t &lt; 1/2) return q;
            if(t &lt; 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        if(s === 0) {
            r = g = b = l; // achromatic
        }
        else {
            var q = l &lt; 0.5 ? l * (1 + s) : l + s - l * s;
            var p = 2 * l - q;
            r = hue2rgb(p, q, h + 1/3);
            g = hue2rgb(p, q, h);
            b = hue2rgb(p, q, h - 1/3);
        }

        return { r: r * 255, g: g * 255, b: b * 255 };
    }

    // `rgbToHsv`
    // Converts an RGB color value to HSV
    // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
    // *Returns:* { h, s, v } in [0,1]
    function rgbToHsv(r, g, b) {

        r = bound01(r, 255);
        g = bound01(g, 255);
        b = bound01(b, 255);

        var max = mathMax(r, g, b), min = mathMin(r, g, b);
        var h, s, v = max;

        var d = max - min;
        s = max === 0 ? 0 : d / max;

        if(max == min) {
            h = 0; // achromatic
        }
        else {
            switch(max) {
                case r: h = (g - b) / d + (g &lt; b ? 6 : 0); break;
                case g: h = (b - r) / d + 2; break;
                case b: h = (r - g) / d + 4; break;
            }
            h /= 6;
        }
        return { h: h, s: s, v: v };
    }

    // `hsvToRgb`
    // Converts an HSV color value to RGB.
    // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
    // *Returns:* { r, g, b } in the set [0, 255]
     function hsvToRgb(h, s, v) {

        h = bound01(h, 360) * 6;
        s = bound01(s, 100);
        v = bound01(v, 100);

        var i = math.floor(h),
            f = h - i,
            p = v * (1 - s),
            q = v * (1 - f * s),
            t = v * (1 - (1 - f) * s),
            mod = i % 6,
            r = [v, q, p, p, t, v][mod],
            g = [t, v, v, q, p, p][mod],
            b = [p, p, t, v, v, q][mod];

        return { r: r * 255, g: g * 255, b: b * 255 };
    }

    // `rgbToHex`
    // Converts an RGB color to hex
    // Assumes r, g, and b are contained in the set [0, 255]
    // Returns a 3 or 6 character hex
    function rgbToHex(r, g, b, allow3Char) {

        var hex = [
            pad2(mathRound(r).toString(16)),
            pad2(mathRound(g).toString(16)),
            pad2(mathRound(b).toString(16))
        ];

        // Return a 3 character hex if possible
        if (allow3Char &amp;&amp; hex[0].charAt(0) == hex[0].charAt(1) &amp;&amp; hex[1].charAt(0) == hex[1].charAt(1) &amp;&amp; hex[2].charAt(0) == hex[2].charAt(1)) {
            return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
        }

        return hex.join(&quot;&quot;);
    }

    // `equals`
    // Can be called with any tinycolor input
    tinycolor.equals = function (color1, color2) {
        if (!color1 || !color2) { return false; }
        return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
    };
    tinycolor.random = function() {
        return tinycolor.fromRatio({
            r: mathRandom(),
            g: mathRandom(),
            b: mathRandom()
        });
    };


    // Modification Functions
    // ----------------------
    // Thanks to less.js for some of the basics here
    // &lt;https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js&gt;

    tinycolor.desaturate = function (color, amount) {
        amount = (amount === 0) ? 0 : (amount || 10);
        var hsl = tinycolor(color).toHsl();
        hsl.s -= amount / 100;
        hsl.s = clamp01(hsl.s);
        return tinycolor(hsl);
    };
    tinycolor.saturate = function (color, amount) {
        amount = (amount === 0) ? 0 : (amount || 10);
        var hsl = tinycolor(color).toHsl();
        hsl.s += amount / 100;
        hsl.s = clamp01(hsl.s);
        return tinycolor(hsl);
    };
    tinycolor.greyscale = function(color) {
        return tinycolor.desaturate(color, 100);
    };
    tinycolor.lighten = function(color, amount) {
        amount = (amount === 0) ? 0 : (amount || 10);
        var hsl = tinycolor(color).toHsl();
        hsl.l += amount / 100;
        hsl.l = clamp01(hsl.l);
        return tinycolor(hsl);
    };
    tinycolor.darken = function (color, amount) {
        amount = (amount === 0) ? 0 : (amount || 10);
        var hsl = tinycolor(color).toHsl();
        hsl.l -= amount / 100;
        hsl.l = clamp01(hsl.l);
        return tinycolor(hsl);
    };
    tinycolor.complement = function(color) {
        var hsl = tinycolor(color).toHsl();
        hsl.h = (hsl.h + 180) % 360;
        return tinycolor(hsl);
    };


    // Combination Functions
    // ---------------------
    // Thanks to jQuery xColor for some of the ideas behind these
    // &lt;https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js&gt;

    tinycolor.triad = function(color) {
        var hsl = tinycolor(color).toHsl();
        var h = hsl.h;
        return [
            tinycolor(color),
            tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
            tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
        ];
    };
    tinycolor.tetrad = function(color) {
        var hsl = tinycolor(color).toHsl();
        var h = hsl.h;
        return [
            tinycolor(color),
            tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),
            tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
            tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
        ];
    };
    tinycolor.splitcomplement = function(color) {
        var hsl = tinycolor(color).toHsl();
        var h = hsl.h;
        return [
            tinycolor(color),
            tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),
            tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})
        ];
    };
    tinycolor.analogous = function(color, results, slices) {
        results = results || 6;
        slices = slices || 30;

        var hsl = tinycolor(color).toHsl();
        var part = 360 / slices;
        var ret = [tinycolor(color)];

        for (hsl.h = ((hsl.h - (part * results &gt;&gt; 1)) + 720) % 360; --results; ) {
            hsl.h = (hsl.h + part) % 360;
            ret.push(tinycolor(hsl));
        }
        return ret;
    };
    tinycolor.monochromatic = function(color, results) {
        results = results || 6;
        var hsv = tinycolor(color).toHsv();
        var h = hsv.h, s = hsv.s, v = hsv.v;
        var ret = [];
        var modification = 1 / results;

        while (results--) {
            ret.push(tinycolor({ h: h, s: s, v: v}));
            v = (v + modification) % 1;
        }

        return ret;
    };


    // Readability Functions
    // ---------------------
    // &lt;http://www.w3.org/TR/AERT#color-contrast&gt;

    // `readability`
    // Analyze the 2 colors and returns an object with the following properties:
    //    `brightness`: difference in brightness between the two colors
    //    `color`: difference in color/hue between the two colors
    tinycolor.readability = function(color1, color2) {
        var a = tinycolor(color1).toRgb();
        var b = tinycolor(color2).toRgb();
        var brightnessA = (a.r * 299 + a.g * 587 + a.b * 114) / 1000;
        var brightnessB = (b.r * 299 + b.g * 587 + b.b * 114) / 1000;
        var colorDiff = (
            Math.max(a.r, b.r) - Math.min(a.r, b.r) +
            Math.max(a.g, b.g) - Math.min(a.g, b.g) +
            Math.max(a.b, b.b) - Math.min(a.b, b.b)
        );

        return {
            brightness: Math.abs(brightnessA - brightnessB),
            color: colorDiff
        };
    };

    // `readable`
    // http://www.w3.org/TR/AERT#color-contrast
    // Ensure that foreground and background color combinations provide sufficient contrast.
    // *Example*
    //    tinycolor.readable(&quot;#000&quot;, &quot;#111&quot;) =&gt; false
    tinycolor.readable = function(color1, color2) {
        var readability = tinycolor.readability(color1, color2);
        return readability.brightness &gt; 125 &amp;&amp; readability.color &gt; 500;
    };

    // `mostReadable`
    // Given a base color and a list of possible foreground or background
    // colors for that base, returns the most readable color.
    // *Example*
    //    tinycolor.mostReadable(&quot;#123&quot;, [&quot;#fff&quot;, &quot;#000&quot;]) =&gt; &quot;#000&quot;
    tinycolor.mostReadable = function(baseColor, colorList) {
        var bestColor = null;
        var bestScore = 0;
        var bestIsReadable = false;
        for (var i=0; i &lt; colorList.length; i++) {

            // We normalize both around the &quot;acceptable&quot; breaking point,
            // but rank brightness constrast higher than hue.

            var readability = tinycolor.readability(baseColor, colorList[i]);
            var readable = readability.brightness &gt; 125 &amp;&amp; readability.color &gt; 500;
            var score = 3 * (readability.brightness / 125) + (readability.color / 500);

            if ((readable &amp;&amp; ! bestIsReadable) ||
                (readable &amp;&amp; bestIsReadable &amp;&amp; score &gt; bestScore) ||
                ((! readable) &amp;&amp; (! bestIsReadable) &amp;&amp; score &gt; bestScore)) {
                bestIsReadable = readable;
                bestScore = score;
                bestColor = tinycolor(colorList[i]);
            }
        }
        return bestColor;
    };


    // Big List of Colors
    // ------------------
    // &lt;http://www.w3.org/TR/css3-color/#svg-color&gt;
    var names = tinycolor.names = {
        aliceblue: &quot;f0f8ff&quot;,
        antiquewhite: &quot;faebd7&quot;,
        aqua: &quot;0ff&quot;,
        aquamarine: &quot;7fffd4&quot;,
        azure: &quot;f0ffff&quot;,
        beige: &quot;f5f5dc&quot;,
        bisque: &quot;ffe4c4&quot;,
        black: &quot;000&quot;,
        blanchedalmond: &quot;ffebcd&quot;,
        blue: &quot;00f&quot;,
        blueviolet: &quot;8a2be2&quot;,
        brown: &quot;a52a2a&quot;,
        burlywood: &quot;deb887&quot;,
        burntsienna: &quot;ea7e5d&quot;,
        cadetblue: &quot;5f9ea0&quot;,
        chartreuse: &quot;7fff00&quot;,
        chocolate: &quot;d2691e&quot;,
        coral: &quot;ff7f50&quot;,
        cornflowerblue: &quot;6495ed&quot;,
        cornsilk: &quot;fff8dc&quot;,
        crimson: &quot;dc143c&quot;,
        cyan: &quot;0ff&quot;,
        darkblue: &quot;00008b&quot;,
        darkcyan: &quot;008b8b&quot;,
        darkgoldenrod: &quot;b8860b&quot;,
        darkgray: &quot;a9a9a9&quot;,
        darkgreen: &quot;006400&quot;,
        darkgrey: &quot;a9a9a9&quot;,
        darkkhaki: &quot;bdb76b&quot;,
        darkmagenta: &quot;8b008b&quot;,
        darkolivegreen: &quot;556b2f&quot;,
        darkorange: &quot;ff8c00&quot;,
        darkorchid: &quot;9932cc&quot;,
        darkred: &quot;8b0000&quot;,
        darksalmon: &quot;e9967a&quot;,
        darkseagreen: &quot;8fbc8f&quot;,
        darkslateblue: &quot;483d8b&quot;,
        darkslategray: &quot;2f4f4f&quot;,
        darkslategrey: &quot;2f4f4f&quot;,
        darkturquoise: &quot;00ced1&quot;,
        darkviolet: &quot;9400d3&quot;,
        deeppink: &quot;ff1493&quot;,
        deepskyblue: &quot;00bfff&quot;,
        dimgray: &quot;696969&quot;,
        dimgrey: &quot;696969&quot;,
        dodgerblue: &quot;1e90ff&quot;,
        firebrick: &quot;b22222&quot;,
        floralwhite: &quot;fffaf0&quot;,
        forestgreen: &quot;228b22&quot;,
        fuchsia: &quot;f0f&quot;,
        gainsboro: &quot;dcdcdc&quot;,
        ghostwhite: &quot;f8f8ff&quot;,
        gold: &quot;ffd700&quot;,
        goldenrod: &quot;daa520&quot;,
        gray: &quot;808080&quot;,
        green: &quot;008000&quot;,
        greenyellow: &quot;adff2f&quot;,
        grey: &quot;808080&quot;,
        honeydew: &quot;f0fff0&quot;,
        hotpink: &quot;ff69b4&quot;,
        indianred: &quot;cd5c5c&quot;,
        indigo: &quot;4b0082&quot;,
        ivory: &quot;fffff0&quot;,
        khaki: &quot;f0e68c&quot;,
        lavender: &quot;e6e6fa&quot;,
        lavenderblush: &quot;fff0f5&quot;,
        lawngreen: &quot;7cfc00&quot;,
        lemonchiffon: &quot;fffacd&quot;,
        lightblue: &quot;add8e6&quot;,
        lightcoral: &quot;f08080&quot;,
        lightcyan: &quot;e0ffff&quot;,
        lightgoldenrodyellow: &quot;fafad2&quot;,
        lightgray: &quot;d3d3d3&quot;,
        lightgreen: &quot;90ee90&quot;,
        lightgrey: &quot;d3d3d3&quot;,
        lightpink: &quot;ffb6c1&quot;,
        lightsalmon: &quot;ffa07a&quot;,
        lightseagreen: &quot;20b2aa&quot;,
        lightskyblue: &quot;87cefa&quot;,
        lightslategray: &quot;789&quot;,
        lightslategrey: &quot;789&quot;,
        lightsteelblue: &quot;b0c4de&quot;,
        lightyellow: &quot;ffffe0&quot;,
        lime: &quot;0f0&quot;,
        limegreen: &quot;32cd32&quot;,
        linen: &quot;faf0e6&quot;,
        magenta: &quot;f0f&quot;,
        maroon: &quot;800000&quot;,
        mediumaquamarine: &quot;66cdaa&quot;,
        mediumblue: &quot;0000cd&quot;,
        mediumorchid: &quot;ba55d3&quot;,
        mediumpurple: &quot;9370db&quot;,
        mediumseagreen: &quot;3cb371&quot;,
        mediumslateblue: &quot;7b68ee&quot;,
        mediumspringgreen: &quot;00fa9a&quot;,
        mediumturquoise: &quot;48d1cc&quot;,
        mediumvioletred: &quot;c71585&quot;,
        midnightblue: &quot;191970&quot;,
        mintcream: &quot;f5fffa&quot;,
        mistyrose: &quot;ffe4e1&quot;,
        moccasin: &quot;ffe4b5&quot;,
        navajowhite: &quot;ffdead&quot;,
        navy: &quot;000080&quot;,
        oldlace: &quot;fdf5e6&quot;,
        olive: &quot;808000&quot;,
        olivedrab: &quot;6b8e23&quot;,
        orange: &quot;ffa500&quot;,
        orangered: &quot;ff4500&quot;,
        orchid: &quot;da70d6&quot;,
        palegoldenrod: &quot;eee8aa&quot;,
        palegreen: &quot;98fb98&quot;,
        paleturquoise: &quot;afeeee&quot;,
        palevioletred: &quot;db7093&quot;,
        papayawhip: &quot;ffefd5&quot;,
        peachpuff: &quot;ffdab9&quot;,
        peru: &quot;cd853f&quot;,
        pink: &quot;ffc0cb&quot;,
        plum: &quot;dda0dd&quot;,
        powderblue: &quot;b0e0e6&quot;,
        purple: &quot;800080&quot;,
        red: &quot;f00&quot;,
        rosybrown: &quot;bc8f8f&quot;,
        royalblue: &quot;4169e1&quot;,
        saddlebrown: &quot;8b4513&quot;,
        salmon: &quot;fa8072&quot;,
        sandybrown: &quot;f4a460&quot;,
        seagreen: &quot;2e8b57&quot;,
        seashell: &quot;fff5ee&quot;,
        sienna: &quot;a0522d&quot;,
        silver: &quot;c0c0c0&quot;,
        skyblue: &quot;87ceeb&quot;,
        slateblue: &quot;6a5acd&quot;,
        slategray: &quot;708090&quot;,
        slategrey: &quot;708090&quot;,
        snow: &quot;fffafa&quot;,
        springgreen: &quot;00ff7f&quot;,
        steelblue: &quot;4682b4&quot;,
        tan: &quot;d2b48c&quot;,
        teal: &quot;008080&quot;,
        thistle: &quot;d8bfd8&quot;,
        tomato: &quot;ff6347&quot;,
        turquoise: &quot;40e0d0&quot;,
        violet: &quot;ee82ee&quot;,
        wheat: &quot;f5deb3&quot;,
        white: &quot;fff&quot;,
        whitesmoke: &quot;f5f5f5&quot;,
        yellow: &quot;ff0&quot;,
        yellowgreen: &quot;9acd32&quot;
    };

    // Make it easy to access colors via `hexNames[hex]`
    var hexNames = tinycolor.hexNames = flip(names);


    // Utilities
    // ---------

    // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
    function flip(o) {
        var flipped = { };
        for (var i in o) {
            if (o.hasOwnProperty(i)) {
                flipped[o[i]] = i;
            }
        }
        return flipped;
    }

    // Return a valid alpha value [0,1] with all invalid values being set to 1
    function boundAlpha(a) {
        a = parseFloat(a);

        if (isNaN(a) || a &lt; 0 || a &gt; 1) {
            a = 1;
        }

        return a;
    }

    // Take input from [0, n] and return it as [0, 1]
    function bound01(n, max) {
        if (isOnePointZero(n)) { n = &quot;100%&quot;; }

        var processPercent = isPercentage(n);
        n = mathMin(max, mathMax(0, parseFloat(n)));

        // Automatically convert percentage into number
        if (processPercent) {
            n = parseInt(n * max, 10) / 100;
        }

        // Handle floating point rounding errors
        if ((math.abs(n - max) &lt; 0.000001)) {
            return 1;
        }

        // Convert into [0, 1] range if it isn't already
        return (n % max) / parseFloat(max);
    }

    // Force a number between 0 and 1
    function clamp01(val) {
        return mathMin(1, mathMax(0, val));
    }

    // Parse an integer into hex
    function parseHex(val) {
        return parseInt(val, 16);
    }

    // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
    // &lt;http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0&gt;
    function isOnePointZero(n) {
        return typeof n == &quot;string&quot; &amp;&amp; n.indexOf('.') != -1 &amp;&amp; parseFloat(n) === 1;
    }

    // Check to see if string passed in is a percentage
    function isPercentage(n) {
        return typeof n === &quot;string&quot; &amp;&amp; n.indexOf('%') != -1;
    }

    // Force a hex value to have 2 characters
    function pad2(c) {
        return c.length == 1 ? '0' + c : '' + c;
    }

    // Replace a decimal with it's percentage value
    function convertToPercentage(n) {
        if (n &lt;= 1) {
            n = (n * 100) + &quot;%&quot;;
        }

        return n;
    }

    var matchers = (function() {

        // &lt;http://www.w3.org/TR/css3-values/#integers&gt;
        var CSS_INTEGER = &quot;[-\\+]?\\d+%?&quot;;

        // &lt;http://www.w3.org/TR/css3-values/#number-value&gt;
        var CSS_NUMBER = &quot;[-\\+]?\\d*\\.\\d+%?&quot;;

        // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
        var CSS_UNIT = &quot;(?:&quot; + CSS_NUMBER + &quot;)|(?:&quot; + CSS_INTEGER + &quot;)&quot;;

        // Actual matching.
        // Parentheses and commas are optional, but not required.
        // Whitespace can take the place of commas or opening paren
        var PERMISSIVE_MATCH3 = &quot;[\\s|\\(]+(&quot; + CSS_UNIT + &quot;)[,|\\s]+(&quot; + CSS_UNIT + &quot;)[,|\\s]+(&quot; + CSS_UNIT + &quot;)\\s*\\)?&quot;;
        var PERMISSIVE_MATCH4 = &quot;[\\s|\\(]+(&quot; + CSS_UNIT + &quot;)[,|\\s]+(&quot; + CSS_UNIT + &quot;)[,|\\s]+(&quot; + CSS_UNIT + &quot;)[,|\\s]+(&quot; + CSS_UNIT + &quot;)\\s*\\)?&quot;;

        return {
            rgb: new RegExp(&quot;rgb&quot; + PERMISSIVE_MATCH3),
            rgba: new RegExp(&quot;rgba&quot; + PERMISSIVE_MATCH4),
            hsl: new RegExp(&quot;hsl&quot; + PERMISSIVE_MATCH3),
            hsla: new RegExp(&quot;hsla&quot; + PERMISSIVE_MATCH4),
            hsv: new RegExp(&quot;hsv&quot; + PERMISSIVE_MATCH3),
            hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
            hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
        };
    })();

    // `stringInputToObject`
    // Permissive string parsing.  Take in a number of formats, and output an object
    // based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
    function stringInputToObject(color) {

        color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase();
        var named = false;
        if (names[color]) {
            color = names[color];
            named = true;
        }
        else if (color == 'transparent') {
            return { r: 0, g: 0, b: 0, a: 0, format: &quot;name&quot; };
        }

        // Try to match string input using regular expressions.
        // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
        // Just return an object and let the conversion functions handle that.
        // This way the result will be the same whether the tinycolor is initialized with string or object.
        var match;
        if ((match = matchers.rgb.exec(color))) {
            return { r: match[1], g: match[2], b: match[3] };
        }
        if ((match = matchers.rgba.exec(color))) {
            return { r: match[1], g: match[2], b: match[3], a: match[4] };
        }
        if ((match = matchers.hsl.exec(color))) {
            return { h: match[1], s: match[2], l: match[3] };
        }
        if ((match = matchers.hsla.exec(color))) {
            return { h: match[1], s: match[2], l: match[3], a: match[4] };
        }
        if ((match = matchers.hsv.exec(color))) {
            return { h: match[1], s: match[2], v: match[3] };
        }
        if ((match = matchers.hex6.exec(color))) {
            return {
                r: parseHex(match[1]),
                g: parseHex(match[2]),
                b: parseHex(match[3]),
                format: named ? &quot;name&quot; : &quot;hex&quot;
            };
        }
        if ((match = matchers.hex3.exec(color))) {
            return {
                r: parseHex(match[1] + '' + match[1]),
                g: parseHex(match[2] + '' + match[2]),
                b: parseHex(match[3] + '' + match[3]),
                format: named ? &quot;name&quot; : &quot;hex&quot;
            };
        }

        return false;
    }

    // Expose tinycolor to window, does not need to run in non-browser context.
    window.tinycolor = tinycolor;

    })();


    $(function () {
        if ($.fn.spectrum.load) {
            $.fn.spectrum.processNativeColorInputs();
        }
    });

})(window, jQuery);
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fsitepad%2Fwww%2Fthemes%2Fdefault%2Fjs'>Back to Directory</a>