// source --> https://idcardsystem.com/wp-content/plugins/user-registration-plugin-for-woocommerce/checkout-blocks-compatibility/src/js/user-registration-fields/block.js?ver=1.0 
import { useEffect, useState, useCallback } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import React from 'react';

const get_field_detail = php_array.get_field_detail;

// const recaptcha_setting = php_array.recaptcha_setting;
var checkout_fields_heading = '';
if(get_field_detail.length > 0 ){
     checkout_fields_heading = php_array.recaptcha_setting.title;
}

export const Block = ({ checkoutExtensionData }) => {
    
    const [inputvalues, Set_Field_Values] = useState({});
    const [multicheckbox_and_radio, Set_multicheckbox_and_radio_Field_Values] = useState({});

    const { setExtensionData } = checkoutExtensionData;


    // useEffect(() => {

    // },);

    useEffect(() => {

        const script = document.createElement('script');
        script.src = 'https://www.google.com/recaptcha/api.js';
        script.async = true;
        script.defer = true;
        document.body.appendChild(script);

    },);

    const handleBlur = () => {

        setTimeout(hide_show_using_dependablilities, 3000);


    };


    // calling for dependentiblity check for multiselect
    jQuery('.af-afreg_add_select2').on('change', function (event) {
        set_value_on_multiselect_and_radio(event);
    });

    // const set_value_on_multiselect_and_radio = (field_name, value, event) => {

    const set_value_on_multiselect_and_radio = (event) => {

        let current_event_id = event.target.id;
        let current_event_type = event.target.type;
        let field_name = event.target.name;
        let element_type = event.target.tagName.toLowerCase(); // This will give you 'input', 'select', etc.

        let extr_attr = '';

        if ('radio' == current_event_type || 'checkbox' == current_event_type) {
            extr_attr = extr_attr + ':checked';
        }
        var select_value = '';

        if (element_type === 'select' && event.target.multiple) {
            jQuery('select#' + current_event_id + ' option:selected').each(function () {
                    
                select_value += ',' + jQuery(this).val();
            });

        } else if (element_type === 'input' && current_event_type === 'checkbox' && event.target.multiple) {


            jQuery(`input[name="${field_name}"]:checked`).each(function () {

                select_value += ',' + jQuery(this).val();
            });

        } else {
            select_value = jQuery('#' + current_event_id + extr_attr).val();
        }

        // Assuming setExtensionData is a function to store the values
        setExtensionData('addify_user_registration_field', field_name, select_value);

        hide_show_using_dependablilities();

    };


    return (
        <>
            <div className="af-urf-blocks-main-div ">
                < div key="af_urf_main_title">
                    <div className="af-urg-checkout-blocks" >

                        <h4>
                            {checkout_fields_heading}
                        </h4>
                        <div className="g-checkout_fields_heading" ></div>
                    </div>
                </div>
                {get_field_detail.map((field_details, key) => (
                        
                    < div key={key} className={`af-urg-checkout-blocks af-urg-dependable-field-main-div-blocks af-urg-checkout-blocks${field_details.current_field_id ? field_details.current_field_id : key} ${field_details.afreg_main_class ? field_details.afreg_main_class : ''}`}
                        {...(field_details.dependable_field_detail
                            ? Object.entries(field_details.dependable_field_detail).reduce((acc, [attrKey, attrValue]) => {                               
                                acc[attrKey] = attrValue;
                                
                                return acc;
                            }, {})
                            : {})}
                    >
                        
                        {field_details.type && (('number text tel email checkbox color date time password').indexOf(field_details.type) !== -1) && (
                            <>

                                <div>
                                    <div class="wc-block-components-checkout-step__heading">
                                        <h2 class="wc-block-components-title wc-block-components-checkout-step__title" aria-hidden="true">{field_details.field_label ? field_details.field_label : ''}</h2>
                                        <span class="wc-block-components-checkout-step__heading-content"></span>
                                    </div>
                                    <div class="wc-block-components-checkout-step__container">
                                        <p class="wc-block-components-checkout-step__description"></p>
                                        <div class="wc-block-components-checkout-step__content">
                                            <div class="wc-block-components-notices"></div>
                                            <div class="wc-block-components-notices__snackbar wc-block-components-notice-snackbar-list" tabindex="-1">
                                                <div></div>
                                            </div>
                                            <div id="contact" class="wc-block-components-address-form">
                                         
                                                <div class="wc-block-components-text-input wc-block-components-address-form__email is-active">
                                                    <input
                                                        type={field_details.type}
                                                        name={field_details.field_name}
                                                        value={'checkbox' == field_details.type ? 'yes' : inputvalues[field_details.field_name]}
                                                        id={field_details.id}
                                                        className={`af-ure-check-dependable-fields ${field_details.class}`}
                                                        placeholder={field_details.afreg_field_placeholder}
                                                        onInput={(e) => set_value_on_multiselect_and_radio(e)}
                                                        onKeyUp={(e) => set_value_on_multiselect_and_radio(e)}
                                                        onKeyDown={(e) => set_value_on_multiselect_and_radio(e)}
                                                        onFocus={(e) => set_value_on_multiselect_and_radio(e)}
                                                        onBlur={handleBlur}
                                                        {...Object.keys(field_details.data || {}).reduce((acc, dataKey) => {
                                                            acc[`data-${dataKey}`] = field_details.data[dataKey];
                                                            return acc;
                                                        }, {})}
                                                    />
                                                </div>
                                                
                                                <div
                                                    style={{ display: 'none' }}
                                                    className={`wc-block-components-validation-error af_reg_block_error_${field_details.field_name}`}
                                                    role="alert"
                                                    >
                                                    <p id="validate-error-shipping_first_name">
                                                        <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        viewBox="-2 -2 24 24"
                                                        width="24"
                                                        height="24"
                                                        aria-hidden="true"
                                                        focusable="false"
                                                        >
                                                        <path d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm1.13 9.38l.35-6.46H8.52l.35 6.46h2.26zm-.09 3.36c.24-.23.37-.55.37-.96 0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35-.82.12-1.07.35-.37.55-.37.97c0 .41.13.73.38.96.26.23.61.34 1.06.34s.8-.11 1.05-.34z"></path>
                                                        </svg>
                                                        <span>Required Field</span>
                                                    </p>
                                                    </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </>
                        )
                        }
                        {field_details.type && (('textarea').indexOf(field_details.type) !== -1) && (
                            <>
                            
                                <div>
                                    <div class="wc-block-components-checkout-step__heading">
                                        
                                        <h2 class="wc-block-components-title wc-block-components-checkout-step__title" aria-hidden="true">{field_details.field_label ? field_details.field_label : ''}</h2>
                                        <span class="wc-block-components-checkout-step__heading-content"></span>
                                    </div>
                                    <div class="wc-block-components-checkout-step__container">
                                        <p class="wc-block-components-checkout-step__description"></p>
                                        <div class="wc-block-components-checkout-step__content">
                                            <div class="wc-block-components-notices"></div>
                                            <div class="wc-block-components-notices__snackbar wc-block-components-notice-snackbar-list" tabindex="-1">
                                                <div></div>
                                            </div>
                                            <div id="contact" class="wc-block-components-address-form">
                                                <div class="wc-block-components-text-input wc-block-components-address-form__email is-active">
                                                    <textarea
                                                        name={field_details.field_name}
                                                        value={'checkbox' == field_details.type ? 'yes' : inputvalues[field_details.field_name]}
                                                        id={field_details.id}
                                                        className={`af-ure-check-dependable-fields af_reg_textara ${field_details.class}`}
                                                        placeholder={field_details.afreg_field_placeholder}
                                                        onInput={(e) => set_value_on_multiselect_and_radio(e)}
                                                        onKeyUp={(e) => set_value_on_multiselect_and_radio(e)}
                                                        onKeyDown={(e) => set_value_on_multiselect_and_radio(e)}
                                                        onFocus={(e) => set_value_on_multiselect_and_radio(e)}
                                                        onBlur={handleBlur}
                                                        {...Object.keys(field_details.data || {}).reduce((acc, dataKey) => {
                                                            acc[`data-${dataKey}`] = field_details.data[dataKey];
                                                            return acc;
                                                        }, {})}
                                                    ></textarea>
                                                </div>
                                               
                                                <div
                                                    style={{ display: 'none' }}
                                                    className={`wc-block-components-validation-error af_reg_block_error_${field_details.field_name}`}
                                                    role="alert"
                                                    >
                                                    <p id="validate-error-shipping_first_name">
                                                        <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        viewBox="-2 -2 24 24"
                                                        width="24"
                                                        height="24"
                                                        aria-hidden="true"
                                                        focusable="false"
                                                        >
                                                        <path d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm1.13 9.38l.35-6.46H8.52l.35 6.46h2.26zm-.09 3.36c.24-.23.37-.55.37-.96 0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35-.82.12-1.07.35-.37.55-.37.97c0 .41.13.73.38.96.26.23.61.34 1.06.34s.8-.11 1.05-.34z"></path>
                                                        </svg>
                                                        <span>Required Field</span>
                                                    </p>
                                                    </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </>
                        )
                        }
                        {field_details.options && field_details.type && (('select multiselect').indexOf(field_details.type) !== -1) && (
                            <>
                                <div class="wc-block-components-checkout-step__heading">
                                    <h2 class="wc-block-components-title wc-block-components-checkout-step__title" aria-hidden="true">{field_details.field_label ? field_details.field_label : ''}</h2>
                                </div>
                                <div class="wc-block-components-checkout-step__container">
                                    <p class="wc-block-components-checkout-step__description"></p>
                                    <div class="wc-block-components-checkout-step__content">
                                        <div class="wc-block-components-notices"></div>
                                        <div class="wc-block-components-notices__snackbar wc-block-components-notice-snackbar-list" tabindex="-1">
                                            <div></div>
                                        </div>
                                        <div class="wc-block-components-address-address-wrapper is-editing">
                                            <div class="wc-block-components-address-card-wrapper">
                                            </div>
                                            <div class="wc-block-components-address-form-wrapper">
                                                <div id="shipping" class="wc-block-components-address-form">
                                                    <div class="wc-block-components-address-form__country wc-block-components-country-input">
                                                        <div id="shipping-country" class="wc-block-components-combobox is-active">
                                                            <div>
                                                                <select width="100%"
                                                                    name={field_details.field_name}
                                                                    id={field_details.id}
                                                                    className={`af-afreg_add_select2 af-for_select2 af-ure-check-dependable-fields ${field_details.class}  ${field_details.current_attr_common_classes_for} `}
                                                                    placeholder={field_details.afreg_field_placeholder}
                                                                    value={inputvalues[field_details.field_name]}
                                                                    multiple={'multiselect' == field_details.type ? 'multiple' : ''}
                                                                    {...Object.keys(field_details.data || {}).reduce((acc, dataKey) => {
                                                                        acc[`data-${dataKey}`] = field_details.data[dataKey];
                                                                        return acc;
                                                                    }, {})}
                                                                >
                                                                    {Object.entries(field_details.options).map((option_detail, index) => (

                                                                        < option key={index} value={option_detail[0]} >
                                                                            {option_detail[1]}
                                                                        </option>
                                                                    ))}
                                                                    

                                                                </select>
                                                            </div>
                                                        </div>

                                                       
                                                <div
                                                    style={{ display: 'none' }}
                                                    className={`wc-block-components-validation-error af_reg_block_error_${field_details.field_name}`}
                                                    role="alert"
                                                    >
                                                    <p id="validate-error-shipping_first_name">
                                                        <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        viewBox="-2 -2 24 24"
                                                        width="24"
                                                        height="24"
                                                        aria-hidden="true"
                                                        focusable="false"
                                                        >
                                                        <path d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm1.13 9.38l.35-6.46H8.52l.35 6.46h2.26zm-.09 3.36c.24-.23.37-.55.37-.96 0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35-.82.12-1.07.35-.37.55-.37.97c0 .41.13.73.38.96.26.23.61.34 1.06.34s.8-.11 1.05-.34z"></path>
                                                        </svg>
                                                        <span>Required Field</span>
                                                    </p>
                                                    </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </>
                        )
                        }
                        {field_details.options && field_details.type && (('multi_checkbox radio').indexOf(field_details.type) !== -1) && (
                            <>
                                <div class="wc-block-components-checkout-step__heading"><h2 class="wc-block-components-title wc-block-components-checkout-step__title" aria-hidden="true">{field_details.field_label ? field_details.field_label : ''}</h2></div>
                                <div class="wc-block-components-checkout-step__container">
                                    <div class="wc-block-components-checkout-step__content">

                                        <div class="">

                                            {Object.entries(field_details.options).map((option_detail, index) => (
                                                React.createElement(
                                                    'div',
                                                    {
                                                        key: key,
                                                        className: "wc-block-components-radio-control-accordion-option",
                                                        placeholder: field_details.afreg_field_placeholder,

                                                    },
                                                    <>
                                                    
                                                        <label className="">
                                                            < input
                                                                key={key}
                                                                id={field_details.id}
                                                                value={option_detail[0]}
                                                                type={'multi_checkbox' == field_details.type ? 'checkbox' : field_details.type}
                                                                multiple={'multi_checkbox' == field_details.type ? true : false}
                                                                name={field_details.field_name}
                                                                className={`af-ure-check-dependable-fields ${field_details.class} ${field_details.field_name}`}
                                                                placeholder={field_details.afreg_field_placeholder}
                                                                onBlur={handleBlur}
                                                                onChange={(e) => set_value_on_multiselect_and_radio(e)}
                                                                {...Object.keys(field_details.data || {}).reduce((acc, dataKey) => {
                                                                    acc[`data-${dataKey}`] = field_details.data[dataKey];
                                                                    return acc;
                                                                }, {})}
                                                            />
                                                            <span className='af_radio_label_bl'>{option_detail[1]}</span>
                                                        </label>
                                                        
                                                    </>
                                                )
                                            ))}
                                        </div>
                                    </div>
                                </div>  
                               
                                                <div
                                                    style={{ display: 'none' }}
                                                    className={`wc-block-components-validation-error af_reg_block_error_${field_details.field_name}`}
                                                    role="alert"
                                                    >
                                                    <p id="validate-error-shipping_first_name">
                                                        <svg
                                                        xmlns="http://www.w3.org/2000/svg"
                                                        viewBox="-2 -2 24 24"
                                                        width="24"
                                                        height="24"
                                                        aria-hidden="true"
                                                        focusable="false"
                                                        >
                                                        <path d="M10 2c4.42 0 8 3.58 8 8s-3.58 8-8 8-8-3.58-8-8 3.58-8 8-8zm1.13 9.38l.35-6.46H8.52l.35 6.46h2.26zm-.09 3.36c.24-.23.37-.55.37-.96 0-.42-.12-.74-.36-.97s-.59-.35-1.06-.35-.82.12-1.07.35-.37.55-.37.97c0 .41.13.73.38.96.26.23.61.34 1.06.34s.8-.11 1.05-.34z"></path>
                                                        </svg>
                                                        <span>Required Field</span>
                                                    </p>
                                                    </div>                                
                            </>
                        )
                        }
                        {field_details.options && field_details.type && (('heading description').indexOf(field_details.type) !== -1) && (

                            React.createElement(
                                field_details.type === 'heading' ? field_details.afreg_field_heading_type : 'label',
                                {
                                    key: key,
                                    className: `af-urg-checkout-blocks af-urg-checkout-blocks${field_details.id} ${field_details.class} ${field_details.main_div_class}`,
                                    placeholder: field_details.afreg_field_placeholder,
                                    ...Object.keys(field_details.data || {}).reduce((acc, dataKey) => {
                                        acc[`data-${dataKey}`] = field_details.data[dataKey];
                                        return acc;
                                    }, {})
                                },
                                <h2 className='wc-block-components-title wc-block-components-checkout-step__title'>
                                    {field_details.field_label}
                                </h2>
                            )
                        )
                        }
                        <p className='afreg_field_description' >{'heading' != field_details.type ? field_details.afreg_field_description : ''}{'description' == field_details.type ? field_details.afreg_field_description_field : ''}</p>
                    </div >
                ))}
            </div >
        </>
    )
};


setTimeout(() => {
    
    jQuery('.af-afreg_add_select2').select2();
}, 3000);

jQuery(document).on('click', '.wc-block-checkout__create-account input', hide_show_using_dependablilities);

jQuery(document).on('click', '.af-afreg-registration-field', function () {
    jQuery(document).closest('.wc-block-components-notice-banner').remove();
});

setTimeout(hide_show_using_dependablilities, 3000);
function hide_show_using_dependablilities() {
    
    var selected_user_role = jQuery('#afreg_select_user_role').val();

    jQuery(document).on('change','#afreg_select_user_role',function(){
        hide_show_using_dependablilities();
    })

    jQuery('.af-urg-dependable-field-main-div-blocks').each(function () {

        let current_field = jQuery(this);
        let current_main_field = jQuery(this);
        let current_field_id = current_field.data('current_field_id') || '';

        var show_or_not = true;

        // setExtensionData('addify_user_registration_field', field_name, select_value);

        if ((current_field.data('dependable_field_id') && current_field.data('dependable_field_id') != undefined) || (current_field.data('dependable_field_on_user_role') && current_field.data('dependable_field_on_user_role') != undefined)) {

            let check_dependibilites = true;

            while (check_dependibilites) {

                let current_field_id = current_field.data('current_field_id') || '';
                let dependable_field_id = current_field.data('dependable_field_id') || '';
                let dependable_field_option = current_field.data('dependable_field_option') || '';
                let dependable_field_on_user_role = current_field.data('dependable_field_on_user_role') || '';
                
                let dependable_field_value = af_urf_get_field_value(jQuery('#afreg_additionalshowhide_blocks_' + dependable_field_id));

                // Ensure dependable_field_value is not undefined or empty.
                dependable_field_value = (typeof dependable_field_value !== 'undefined' && dependable_field_value !== '') ? dependable_field_value : '';

                if (dependable_field_id && dependable_field_id != undefined) {


                    if (dependable_field_option) {

                        dependable_field_option = dependable_field_option.split(',');

                        
                        if (!dependable_field_value || undefined == dependable_field_value) {

                            //debug point false
                            show_or_not = false;
                           
                        }

                        if ('array' == typeof dependable_field_value || 'object' == typeof dependable_field_value) {

                            const matchFound = dependable_field_value.some(value => dependable_field_option.includes(value));


                            if (!matchFound) {

                                //debug point false
                                show_or_not = false;


                            }

                        } else if (!dependable_field_option.includes(dependable_field_value)) {

                            show_or_not = false;
                        }

                    } else if (!jQuery('#afreg_additionalshowhide_blocks_' + dependable_field_id).is(':visible')) {;

                        show_or_not = false;
                    }

                }

                if (selected_user_role && dependable_field_on_user_role && dependable_field_on_user_role != undefined) {

                    dependable_field_on_user_role = dependable_field_on_user_role.split(",");

                    const matchFound = dependable_field_on_user_role.some(value => selected_user_role.includes(value));
                    
                    if (!show_or_not || (!dependable_field_id && !dependable_field_on_user_role)) {

                        break;

                    }
                    if (!dependable_field_on_user_role.includes(selected_user_role)) {

                        show_or_not = false;
                        break;

                    }

                    if (!matchFound) {

                        show_or_not = false;
                        break;

                    } else if (show_or_not) {

                        if (dependable_field_id && jQuery('.af-urg-checkout-blocks' + dependable_field_id).length) {

                            if (!jQuery('.af-urg-checkout-blocks' + dependable_field_id).data('dependable_field_on_user_role') && !jQuery('.af-urg-checkout-blocks' + dependable_field_id).data('dependable_field_id')) {
                                break;

                            }

                        } else {
                            break;

                        }

                    }

                    if (!show_or_not) {

                        break;

                    }

                }

                if (!dependable_field_on_user_role && !dependable_field_id) {

                    check_dependibilites = false;

                }

                if (dependable_field_id) {
                    current_field = jQuery('.af-urg-checkout-blocks' + dependable_field_id);
                }


                if (!show_or_not) {

                    break;
                }

            }
        }


        jQuery(this).removeClass('has-error');

        if (show_or_not) {

            jQuery(this).show('slow');

        } else {
            jQuery(this).hide('fast');

        }

    });

    if (jQuery('.wc-block-checkout__create-account input[type=checkbox]').is(':checked')) {
        jQuery('.af-urf-blocks-main-div').show();
    } else {
        jQuery('.af-urf-blocks-main-div').hide();
    }

}

function get_error_html() {
    return `<div class="wc-block-store-notice wc-block-components-notice-banner is-error is-dismissible">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
            <path d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"></path>
        </svg>
        <div class="wc-block-components-notice-banner__content"><div> - is required Field </div></div>
        <button class="wc-block-components-button wp-element-button wc-block-components-notice-banner__dismiss contained" aria-label="Dismiss this notice" type="button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
                <path class="af-afreg-registration-field" d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path>
            </svg>
        </button>
    </div>`;
}
function af_urf_get_field_value(event) {

    
    if (!event.prop("id")) {
        return '';
    }
    let current_event_id = event.prop("id");
    let element_type = (event.prop("tagName")).toLowerCase(); // This will give you 'input', 'select', etc.
    
    let current_event_type = event.prop("type"); // Using .prop() for type
    

    let extr_attr = '';
    if ('radio' == current_event_type || 'checkbox' == current_event_type) {
        extr_attr = extr_attr + ':checked';
    }


    if (element_type === 'select' && event.multiple) {

        var select_value = jQuery('select#' + current_event_id + ' option:selected').map(function () {
            return this.value;
        }).get();

    } else if (element_type === 'input' && current_event_type === 'checkbox' && event.attr('multiple') !== undefined) {
        
        var select_value = jQuery('input#' + current_event_id + ':checked').map(function () {
            return this.value;
        }).get();
    } else {
        var select_value = jQuery('#' + current_event_id + extr_attr).val();
    }

    return select_value;
}

jQuery(document).ready(function ($) {
    // Wait a bit to ensure elements are fully rendered

    setTimeout(function () {
        
        // Directly target the checkout button and the proceed-to-checkout button
        $('.wc-block-components-checkout-place-order-button, .wp-block-woocommerce-proceed-to-checkout-block').click(function (event) {


            let required_error_is = '';

let reg_fields_arr = php_array.get_field_detail;

// loop through all visible blocks
jQuery('.af-urg-checkout-blocks:visible').each(function () {

    let classes = jQuery(this).attr('class'); // full class list

    // extract number only
    let matched_key = classes.match(/af-urg-checkout-blocks(\d+)/);
    matched_key = matched_key ? matched_key[1] : null; // only the number, or null if not found

    if (!matched_key) return; // skip if not matched

    reg_fields_arr.forEach(field => {

        if (String(matched_key) === String(field.current_field_id)) {

            let $input = jQuery('#afreg_additionalshowhide_blocks_' + field.current_field_id);

            // text-like fields
            if (['text', 'email', 'password', 'textarea', 'time', 'date', 'number', 'multiselect'].includes(field.current_field_type)) {

                if (field.afreg_field_required === 'on') {
                    if (!$input.val()) {
                        $input.closest('.wc-block-components-text-input').addClass('has-error');
                        jQuery('.af_reg_block_error_afreg_additional_' + field.current_field_id).show();

                        required_error_is += get_error_html();
                    } else {
                        $input.closest('.wc-block-components-text-input').removeClass('has-error');
                        jQuery('.af_reg_block_error_afreg_additional_' + field.current_field_id).hide();
                    }
                }
            }

            // multi_checkbox / radio
            if (['multi_checkbox', 'radio'].includes(field.current_field_type)) {

                if (field.afreg_field_required === 'on') {
                    if (!jQuery('.afreg_additional_' + field.current_field_id).is(':checked')) {
                        $input.closest('.wc-block-components-text-input').addClass('has-error');
                        jQuery('.af_reg_block_error_afreg_additional_' + field.current_field_id).show();

                        required_error_is += get_error_html();
                    } else {
                        $input.closest('.wc-block-components-text-input').removeClass('has-error');
                        jQuery('.af_reg_block_error_afreg_additional_' + field.current_field_id).hide();
                    }
                }
            }

            // single checkbox
            if (field.current_field_type === 'checkbox') {

                if (field.afreg_field_required === 'on') {
                    if (!$input.is(':checked')) {
                        $input.closest('.wc-block-components-text-input').addClass('has-error');
                        jQuery('.af_reg_block_error_afreg_additional_' + field.current_field_id).first().show();

                        required_error_is += get_error_html();
                    } else {
                        $input.closest('.wc-block-components-text-input').removeClass('has-error');
                        jQuery('.af_reg_block_error_afreg_additional_' + field.current_field_id).first().hide();
                    }
                }
            }
        }
    });
});



            if (jQuery('.wc-block-checkout__create-account input[type=checkbox]').is(':checked') && required_error_is) {





                

                // console.log(reg_fields_arr);


                var noticeContainer = jQuery('.woocommerce-notices-wrapper, .woocommerce-message, .wc-block-components-notices');

                if (!jQuery('.wp-block-woocommerce-cart').length) {

                    noticeContainer.first().html('');

                     jQuery('html, body').animate({
                        scrollTop: jQuery('.af-urf-blocks-main-div ').offset().top
                    }, 'slow');
                    // jQuery('html, body').animate({
                    //     scrollTop: jQuery('.af-afreg-registration-field').offset().top
                    // }, 500); // 500 is the duration of the scroll in milliseconds

                    event.preventDefault();

                    // Optionally, stop event propagation
                    return false;

                }
            }

        });

    }, 2000);  // Delay the execution by 1 second (adjust as necessary)

    for (let index = 1; index < 5; index++) {

        setTimeout(function () {
            jQuery('.af-urg-checkout-blocks').each(function () {

                if ($(this).data('current_field_id') && undefined != $(this).data('current_field_id')) {

                    let current_field_id = $(this).data('current_field_id');

                    let step__heading = jQuery(this).find('.wc-block-components-checkout-step__heading');
                    let step__container = jQuery(this).find('.wc-block-components-checkout-step__container');


                    // Keep only the first and remove the rest
                    step__heading.not(':first').remove();
                    step__container.not(':first').remove();
                }
            });

        }, 1000 * index);

    }
});


function IsEmail(email) {
    const regex =
        /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!regex.test(email)) {
        return false;
    }
    else {
        return true;
    }
}


jQuery(document).on('change', '#afreg_select_user_role', function () {


    // setExtensionData('addify_user_registration_field', 'afreg_select_user_role', jQuery(this).val());

});
// source --> https://idcardsystem.com/wp-content/plugins/user-registration-plugin-for-woocommerce/front/js/afreg_color_spectrum.js?ver=1.0 
// Spectrum Colorpicker v1.8.0
// https://github.com/bgrins/spectrum
// Author: Brian Grinstead
// License: MIT

(function (factory) {
	"use strict";

	if (typeof define === 'function' && define.amd) { // AMD
		define(['jquery'], factory);
	} else if (typeof exports == "object" && typeof module == "object") { // CommonJS
		module.exports = factory(require('jquery'));
	} else { // Browser
		factory(jQuery);
	}
})(function ($, undefined) {
	"use strict";

	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: true,
		showInitial: false,
		showPalette: false,
		showPaletteOnly: false,
		hideAfterPaletteSelect: false,
		togglePaletteOnly: false,
		showSelectionPalette: true,
		localStorageKey: false,
		appendTo: "body",
		maxSelectionSize: 7,
		cancelText: "cancel",
		chooseText: "choose",
		togglePaletteMoreText: "more",
		togglePaletteLessText: "less",
		clearText: "Clear Color Selection",
		noColorSelectedText: "No Color Selected",
		preferredFormat: false,
		className: "", // Deprecated - use containerClassName and replacerClassName instead.
		containerClassName: "",
		replacerClassName: "",
		showAlpha: false,
		theme: "sp-light",
		palette: [["#ffffff", "#000000", "#ff0000", "#ff8000", "#ffff00", "#008000", "#0000ff", "#4b0082", "#9400d3"]],
		selectionPalette: [],
		disabled: false,
		offset: null
	},
		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');
		})(),
		replaceInput = [
			"<div class='sp-replacer'>",
			"<div class='sp-preview'><div class='sp-preview-inner'></div></div>",
			"<div class='sp-dd'>&#9660;</div>",
			"</div>"
		].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 = "";
			if (IE) {
				for (var i = 1; i <= 6; i++) {
					gradientFix += "<div class='sp-" + i + "'></div>";
				}
			}

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

	function paletteTemplate(p, color, className, opts) {
		var html = [];
		for (var i = 0; i < p.length; i++) {
			var current = p[i];
			if (current) {
				var tiny = tinycolor(current);
				var c = tiny.toHsl().l < 0.5 ? "sp-thumb-el sp-thumb-dark" : "sp-thumb-el sp-thumb-light";
				c += (tinycolor.equals(color, current)) ? " sp-thumb-active" : "";
				var formattedString = tiny.toString(opts.preferredFormat || "rgb");
				var swatchStyle = rgbaSupport ? ("background-color:" + tiny.toRgbString()) : "filter:" + tiny.toFilter();
				html.push('<span title="' + formattedString + '" data-color="' + tiny.toRgbString() + '" class="' + c + '"><span class="sp-thumb-inner" style="' + swatchStyle + ';" /></span>');
			} else {
				var cls = 'sp-clear-display';
				html.push($('<div />')
					.append($('<span data-color="" style="background-color:transparent;" class="' + cls + '"></span>')
						.attr('title', opts.noColorSelectedText)
					)
					.html()
				);
			}
		}
		return "<div class='sp-cf " + className + "'>" + html.join('') + "</div>";
	}

	function hideAll() {
		for (var i = 0; i < 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,
			isDragging = 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 = [],
			paletteArray = [],
			paletteLookup = {},
			selectionPalette = opts.selectionPalette.slice(0),
			maxSelectionSize = opts.maxSelectionSize,
			draggingClass = "sp-dragging",
			shiftMovementDirection = null;

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

		function applyOptions() {

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

			toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);

			if (opts.palette) {
				palette = opts.palette.slice(0);
				paletteArray = $.isArray(palette[0]) ? palette : [palette];
				paletteLookup = {};
				for (var i = 0; i < paletteArray.length; i++) {
					for (var j = 0; j < paletteArray[i].length; j++) {
						var rgb = tinycolor(paletteArray[i][j]).toRgbString();
						paletteLookup[rgb] = true;
					}
				}
			}

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

			reflow();
		}

		function initialize() {

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

			applyOptions();

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

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

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

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

				appendTo.append(container);
			}

			updateSelectionPaletteFromStorage();

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

				e.stopPropagation();

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

			if (boundElement.is(":disabled") || (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("paste", function () {
				setTimeout(setFromTextInput, 1);
			});
			textInput.keydown(function (e) {
				if (e.keyCode == 13) {
					setFromTextInput();
				}
			});

			cancelButton.text(opts.cancelText);
			cancelButton.bind("click.spectrum", function (e) {
				e.stopPropagation();
				e.preventDefault();
				revert();
				hide();
			});

			clearButton.attr("title", opts.clearText);
			clearButton.bind("click.spectrum", 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("click.spectrum", function (e) {
				e.stopPropagation();
				e.preventDefault();

				if (IE && textInput.is(":focus")) {
					textInput.trigger('change');
				}

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

			toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
			toggleButton.bind("click.spectrum", function (e) {
				e.stopPropagation();
				e.preventDefault();

				opts.showPaletteOnly = !opts.showPaletteOnly;

				// To make sure the Picker area is drawn on the right, next to the
				// Palette area (and not below the palette), first move the Palette
				// to the left to make space for the picker, plus 5px extra.
				// The 'applyOptions' function puts the whole container back into place
				// and takes care of the button-text and the sp-palette-only CSS class.
				if (!opts.showPaletteOnly && !flat) {
					container.css('left', '-=' + (pickerContainer.outerWidth(true) + 5));
				}
				applyOptions();
			});

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

				move();
			}, dragStart, dragStop);

			draggable(slider, function (dragX, dragY) {
				currentHue = parseFloat(dragY / slideHeight);
				isEmpty = false;
				if (!opts.showAlpha) {
					currentAlpha = 1;
				}
				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) > Math.abs(dragY - oldDragY);

					shiftMovementDirection = furtherFromX ? "x" : "y";
				}

				var setSaturation = !shiftMovementDirection || shiftMovementDirection === "x";
				var setValue = !shiftMovementDirection || shiftMovementDirection === "y";

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

				isEmpty = false;
				if (!opts.showAlpha) {
					currentAlpha = 1;
				}

				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 = opts.preferredFormat || tinycolor(initialColor).format;

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

			if (flat) {
				show();
			}

			function paletteElementClick(e) {
				if (e.data && e.data.ignore) {
					set($(e.target).closest(".sp-thumb-el").data("color"));
					move();
				} else {
					set($(e.target).closest(".sp-thumb-el").data("color"));
					move();
					updateOriginalInput(true);
					if (opts.hideAfterPaletteSelect) {
						hide();
					}
				}

				return false;
			}

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

		function updateSelectionPaletteFromStorage() {

			if (localStorageKey && window.localStorage) {

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

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

		function addColorToSelectionPalette(color) {
			if (showSelectionPalette) {
				var rgb = tinycolor(color).toRgbString();
				if (!paletteLookup[rgb] && $.inArray(rgb, selectionPalette) === -1) {
					selectionPalette.push(rgb);
					while (selectionPalette.length > maxSelectionSize) {
						selectionPalette.shift();
					}
				}

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

		function getUniqueSelectionPalette() {
			var unique = [];
			if (opts.showPalette) {
				for (var i = 0; i < selectionPalette.length; i++) {
					var rgb = tinycolor(selectionPalette[i]).toRgbString();

					if (!paletteLookup[rgb]) {
						unique.push(selectionPalette[i]);
					}
				}
			}

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

		function drawPalette() {

			var currentColor = get();

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

			updateSelectionPaletteFromStorage();

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

			paletteContainer.html(html.join(""));
		}

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

		function dragStart() {
			if (dragHeight <= 0 || dragWidth <= 0 || slideHeight <= 0) {
				reflow();
			}
			isDragging = true;
			container.addClass(draggingClass);
			shiftMovementDirection = null;
			boundElement.trigger('dragstart.spectrum', [get()]);
		}

		function dragStop() {
			isDragging = false;
			container.removeClass(draggingClass);
			boundElement.trigger('dragstop.spectrum', [get()]);
		}

		function setFromTextInput() {

			var value = textInput.val();

			if ((value === null || value === "") && allowEmpty) {
				set(null);
				updateOriginalInput(true);
			} else {
				var tiny = tinycolor(value);
				if (tiny.isValid()) {
					set(tiny);
					updateOriginalInput(true);
				} else {
					textInput.addClass("sp-validation-error");
				}
			}
		}

		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("keydown.spectrum", onkeydown);
			$(doc).bind("click.spectrum", clickout);
			$(window).bind("resize.spectrum", resize);
			replacer.addClass("sp-active");
			container.removeClass("sp-hidden");

			reflow();
			updateUI();

			colorOnShow = get();

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

		function onkeydown(e) {
			// Close on ESC
			if (e.keyCode === 27) {
				hide();
			}
		}

		function clickout(e) {
			// Return on right click.
			if (e.button == 2) {
				return;
			}

			// If a drag event was happening during the mouseup, don't hide
			// on click.
			if (isDragging) {
				return;
			}

			if (clickoutFiresChange) {
				updateOriginalInput(true);
			} else {
				revert();
			}
			hide();
		}

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

			$(doc).unbind("keydown.spectrum", onkeydown);
			$(doc).unbind("click.spectrum", clickout);
			$(window).unbind("resize.spectrum", resize);

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

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

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

		function set(color, ignoreFormatChange) {
			if (tinycolor.equals(color, get())) {
				// Update UI just in case a validation error needs
				// to be cleared.
				updateUI();
				return;
			}

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

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

			if (newColor && newColor.isValid() && !ignoreFormatChange) {
				currentPreferredFormat = opts.preferredFormat || newColor.getFormat();
			}
		}

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

			if (allowEmpty && 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("sp-validation-error");
		}

		function move() {
			updateUI();

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

		function updateUI() {

			textInput.removeClass("sp-validation-error");

			updateHelperLocations();

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

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

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

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

			if (!realColor && allowEmpty) {
				// Update the replaced elements background with icon indicating no color selection
				previewElement.addClass("sp-clear-display");
			} 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("background-color", realRgb);
				} else {
					previewElement.css("background-color", "transparent");
					previewElement.css("filter", realColor.toFilter());
				}

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

					if (IE) {
						alphaSliderInner.css("filter", tinycolor(realAlpha).toFilter({ gradientType: 1 }, realHex));
					} else {
						alphaSliderInner.css("background", "-webkit-" + gradient);
						alphaSliderInner.css("background", "-moz-" + gradient);
						alphaSliderInner.css("background", "-ms-" + gradient);
						// Use current syntax gradient on unprefixed property.
						alphaSliderInner.css("background",
							"linear-gradient(to right, " + realAlpha + ", " + realHex + ")");
					}
				}

				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 && 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({
					"top": dragY + "px",
					"left": dragX + "px"
				});

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

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

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

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

		function reflow() {
			if (!visible) {
				return; // Calculations would be useless and wouldn't be reliable anyways
			}
			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("position", "absolute");
				if (opts.offset) {
					container.offset(opts.offset);
				} else {
					container.offset(getOffset(container, offsetElement));
				}
			}

			updateHelperLocations();

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

			boundElement.trigger('reflow.spectrum');
		}

		function destroy() {
			boundElement.show();
			offsetElement.unbind("click.spectrum touchstart.spectrum");
			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;

			if (optionName === "preferredFormat") {
				currentPreferredFormat = opts.preferredFormat;
			}
			applyOptions();
		}

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

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

		function setOffset(coord) {
			opts.offset = coord;
			reflow();
		}

		initialize();

		var spect = {
			show: show,
			hide: hide,
			toggle: toggle,
			reflow: reflow,
			option: option,
			enable: enable,
			disable: disable,
			offset: setOffset,
			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 > viewWidth && viewWidth > dpWidth) ?
				Math.abs(offset.left + dpWidth - viewWidth) : 0);

		offset.top -=
			Math.min(offset.top, ((offset.top + dpHeight > viewHeight && viewHeight > 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 = document;
		var dragging = false;
		var offset = {};
		var maxHeight = 0;
		var maxWidth = 0;
		var hasTouch = ('ontouchstart' in window);

		var duringDragEvents = {};
		duringDragEvents["selectstart"] = prevent;
		duringDragEvents["dragstart"] = prevent;
		duringDragEvents["touchmove mousemove"] = move;
		duringDragEvents["touchend mouseup"] = 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 && doc.documentMode < 9 && !e.button) {
					return stop();
				}

				var t0 = e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0];
				var pageX = t0 && t0.pageX || e.pageX;
				var pageY = t0 && t0.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);

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

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

					move(e);

					prevent(e);
				}
			}
		}

		function stop() {
			if (dragging) {
				$(doc).unbind(duringDragEvents);
				$(doc.body).removeClass("sp-dragging");

				// Wait a tick before notifying observers to allow the click event
				// to fire in Chrome.
				setTimeout(function () {
					onstop.apply(element, arguments);
				}, 0);
			}
			dragging = false;
		}

		$(element).bind("touchstart mousedown", 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 inputTypeColorSupport() {
		return $.fn.spectrum.inputTypeColorSupport();
	}

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

		if (typeof opts == "string") {

			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("Spectrum: no such method: '" + opts + "'");
					}

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

			return returnValue;
		}

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

	$.fn.spectrum.load = true;
	$.fn.spectrum.loadOpts = {};
	$.fn.spectrum.draggable = draggable;
	$.fn.spectrum.defaults = defaultOpts;
	$.fn.spectrum.inputTypeColorSupport = function inputTypeColorSupport() {
		if (typeof inputTypeColorSupport._cachedResult === "undefined") {
			var colorInput = $("<input type='color'/>")[0]; // if color element is supported, value will default to not null
			inputTypeColorSupport._cachedResult = colorInput.type === "color" && colorInput.value !== "";
		}
		return inputTypeColorSupport._cachedResult;
	};

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

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

	// TinyColor v1.1.2
	// https://github.com/bgrins/TinyColor
	// 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;

		var tinycolor = function (color, opts) {

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

			// If input is already a tinycolor, return itself
			if (color instanceof tinycolor) {
				return color;
			}
			// If we are called as a function, call using new instead
			if (!(this instanceof tinycolor)) {
				return new tinycolor(color, opts);
			}

			var rgb = inputToRGB(color);
			this._originalInput = color,
				this._r = rgb.r,
				this._g = rgb.g,
				this._b = rgb.b,
				this._a = rgb.a,
				this._roundA = mathRound(100 * this._a) / 100,
				this._format = opts.format || rgb.format;
			this._gradientType = opts.gradientType;

			// 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 (this._r < 1) {
				this._r = mathRound(this._r);
			}
			if (this._g < 1) {
				this._g = mathRound(this._g);
			}
			if (this._b < 1) {
				this._b = mathRound(this._b);
			}

			this._ok = rgb.ok;
			this._tc_id = tinyCounter++;
		};

		tinycolor.prototype = {
			isDark: function () {
				return this.getBrightness() < 128;
			},
			isLight: function () {
				return !this.isDark();
			},
			isValid: function () {
				return this._ok;
			},
			getOriginalInput: function () {
				return this._originalInput;
			},
			getFormat: function () {
				return this._format;
			},
			getAlpha: function () {
				return this._a;
			},
			getBrightness: function () {
				var rgb = this.toRgb();
				return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
			},
			setAlpha: function (value) {
				this._a = boundAlpha(value);
				this._roundA = mathRound(100 * this._a) / 100;
				return this;
			},
			toHsv: function () {
				var hsv = rgbToHsv(this._r, this._g, this._b);
				return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };
			},
			toHsvString: function () {
				var hsv = rgbToHsv(this._r, this._g, this._b);
				var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
				return (this._a == 1) ?
					"hsv(" + h + ", " + s + "%, " + v + "%)" :
					"hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")";
			},
			toHsl: function () {
				var hsl = rgbToHsl(this._r, this._g, this._b);
				return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };
			},
			toHslString: function () {
				var hsl = rgbToHsl(this._r, this._g, this._b);
				var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
				return (this._a == 1) ?
					"hsl(" + h + ", " + s + "%, " + l + "%)" :
					"hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")";
			},
			toHex: function (allow3Char) {
				return rgbToHex(this._r, this._g, this._b, allow3Char);
			},
			toHexString: function (allow3Char) {
				return '#' + this.toHex(allow3Char);
			},
			toHex8: function () {
				return rgbaToHex(this._r, this._g, this._b, this._a);
			},
			toHex8String: function () {
				return '#' + this.toHex8();
			},
			toRgb: function () {
				return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
			},
			toRgbString: function () {
				return (this._a == 1) ?
					"rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" :
					"rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")";
			},
			toPercentageRgb: function () {
				return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a };
			},
			toPercentageRgbString: function () {
				return (this._a == 1) ?
					"rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" :
					"rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
			},
			toName: function () {
				if (this._a === 0) {
					return "transparent";
				}

				if (this._a < 1) {
					return false;
				}

				return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
			},
			toFilter: function (secondColor) {
				var hex8String = '#' + rgbaToHex(this._r, this._g, this._b, this._a);
				var secondHex8String = hex8String;
				var gradientType = this._gradientType ? "GradientType = 1, " : "";

				if (secondColor) {
					var s = tinycolor(secondColor);
					secondHex8String = s.toHex8String();
				}

				return "progid:DXImageTransform.Microsoft.gradient(" + gradientType + "startColorstr=" + hex8String + ",endColorstr=" + secondHex8String + ")";
			},
			toString: function (format) {
				var formatSet = !!format;
				format = format || this._format;

				var formattedString = false;
				var hasAlpha = this._a < 1 && this._a >= 0;
				var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "name");

				if (needsAlphaFormat) {
					// Special case for "transparent", all other non-alpha formats
					// will return rgba when there is transparency.
					if (format === "name" && this._a === 0) {
						return this.toName();
					}
					return this.toRgbString();
				}
				if (format === "rgb") {
					formattedString = this.toRgbString();
				}
				if (format === "prgb") {
					formattedString = this.toPercentageRgbString();
				}
				if (format === "hex" || format === "hex6") {
					formattedString = this.toHexString();
				}
				if (format === "hex3") {
					formattedString = this.toHexString(true);
				}
				if (format === "hex8") {
					formattedString = this.toHex8String();
				}
				if (format === "name") {
					formattedString = this.toName();
				}
				if (format === "hsl") {
					formattedString = this.toHslString();
				}
				if (format === "hsv") {
					formattedString = this.toHsvString();
				}

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

			_applyModification: function (fn, args) {
				var color = fn.apply(null, [this].concat([].slice.call(args)));
				this._r = color._r;
				this._g = color._g;
				this._b = color._b;
				this.setAlpha(color._a);
				return this;
			},
			lighten: function () {
				return this._applyModification(lighten, arguments);
			},
			brighten: function () {
				return this._applyModification(brighten, arguments);
			},
			darken: function () {
				return this._applyModification(darken, arguments);
			},
			desaturate: function () {
				return this._applyModification(desaturate, arguments);
			},
			saturate: function () {
				return this._applyModification(saturate, arguments);
			},
			greyscale: function () {
				return this._applyModification(greyscale, arguments);
			},
			spin: function () {
				return this._applyModification(spin, arguments);
			},

			_applyCombination: function (fn, args) {
				return fn.apply(null, [this].concat([].slice.call(args)));
			},
			analogous: function () {
				return this._applyCombination(analogous, arguments);
			},
			complement: function () {
				return this._applyCombination(complement, arguments);
			},
			monochromatic: function () {
				return this._applyCombination(monochromatic, arguments);
			},
			splitcomplement: function () {
				return this._applyCombination(splitcomplement, arguments);
			},
			triad: function () {
				return this._applyCombination(triad, arguments);
			},
			tetrad: function () {
				return this._applyCombination(tetrad, arguments);
			}
		};

		// If input is an object, force 1 into "1.0" to handle ratios properly
		// String input requires "1.0" as input, so 1 will be treated as 1
		tinycolor.fromRatio = function (color, opts) {
			if (typeof color == "object") {
				var newColor = {};
				for (var i in color) {
					if (color.hasOwnProperty(i)) {
						if (i === "a") {
							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:
		//
		//     "red"
		//     "#f00" or "f00"
		//     "#ff0000" or "ff0000"
		//     "#ff000000" or "ff000000"
		//     "rgb 255 0 0" or "rgb (255, 0, 0)"
		//     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
		//     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
		//     "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
		//     "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
		//     "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
		//     "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
		//
		function inputToRGB(color) {

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

			if (typeof color == "string") {
				color = stringInputToObject(color);
			}

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

				if (color.hasOwnProperty("a")) {
					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:
		// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>

		// `rgbToRgb`
		// Handle bounds / percentage checking to conform to CSS color spec
		// <http://www.w3.org/TR/css3-color/>
		// *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 > 0.5 ? d / (2 - max - min) : d / (max + min);
				switch (max) {
					case r: h = (g - b) / d + (g < 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 < 0) {
					t += 1;
				}
				if (t > 1) {
					t -= 1;
				}
				if (t < 1 / 6) {
					return p + (q - p) * 6 * t;
				}
				if (t < 1 / 2) {
					return q;
				}
				if (t < 2 / 3) {
					return p + (q - p) * (2 / 3 - t) * 6;
				}
				return p;
			}

			if (s === 0) {
				r = g = b = l; // achromatic
			} else {
				var q = l < 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 < 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 && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
				return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
			}

			return hex.join("");
		}
		// `rgbaToHex`
		// Converts an RGBA color plus alpha transparency to hex
		// Assumes r, g, b and a are contained in the set [0, 255]
		// Returns an 8 character hex
		function rgbaToHex(r, g, b, a) {

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

			return hex.join("");
		}

		// `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
		// <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>

		function desaturate(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);
		}

		function saturate(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);
		}

		function greyscale(color) {
			return tinycolor(color).desaturate(100);
		}

		function lighten(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);
		}

		function brighten(color, amount) {
			amount = (amount === 0) ? 0 : (amount || 10);
			var rgb = tinycolor(color).toRgb();
			rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100))));
			rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100))));
			rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100))));
			return tinycolor(rgb);
		}

		function darken(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);
		}

		// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
		// Values outside of this range will be wrapped into this range.
		function spin(color, amount) {
			var hsl = tinycolor(color).toHsl();
			var hue = (mathRound(hsl.h) + amount) % 360;
			hsl.h = hue < 0 ? 360 + hue : hue;
			return tinycolor(hsl);
		}

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

		function complement(color) {
			var hsl = tinycolor(color).toHsl();
			hsl.h = (hsl.h + 180) % 360;
			return tinycolor(hsl);
		}

		function triad(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 })
			];
		}

		function tetrad(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 })
			];
		}

		function splitcomplement(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 })
			];
		}

		function analogous(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 >> 1)) + 720) % 360; --results;) {
				hsl.h = (hsl.h + part) % 360;
				ret.push(tinycolor(hsl));
			}
			return ret;
		}

		function monochromatic(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;
		}

		// Utility Functions
		// ---------------------

		tinycolor.mix = function (color1, color2, amount) {
			amount = (amount === 0) ? 0 : (amount || 50);

			var rgb1 = tinycolor(color1).toRgb();
			var rgb2 = tinycolor(color2).toRgb();

			var p = amount / 100;
			var w = p * 2 - 1;
			var a = rgb2.a - rgb1.a;

			var w1;

			if (w * a == -1) {
				w1 = w;
			} else {
				w1 = (w + a) / (1 + w * a);
			}

			w1 = (w1 + 1) / 2;

			var w2 = 1 - w1;

			var rgba = {
				r: rgb2.r * w1 + rgb1.r * w2,
				g: rgb2.g * w1 + rgb1.g * w2,
				b: rgb2.b * w1 + rgb1.b * w2,
				a: rgb2.a * p + rgb1.a * (1 - p)
			};

			return tinycolor(rgba);
		};


		// Readability Functions
		// ---------------------
		// <http://www.w3.org/TR/AERT#color-contrast>

		// `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 c1 = tinycolor(color1);
			var c2 = tinycolor(color2);
			var rgb1 = c1.toRgb();
			var rgb2 = c2.toRgb();
			var brightnessA = c1.getBrightness();
			var brightnessB = c2.getBrightness();
			var colorDiff = (
				Math.max(rgb1.r, rgb2.r) - Math.min(rgb1.r, rgb2.r) +
				Math.max(rgb1.g, rgb2.g) - Math.min(rgb1.g, rgb2.g) +
				Math.max(rgb1.b, rgb2.b) - Math.min(rgb1.b, rgb2.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.isReadable("#000", "#111") => false
		tinycolor.isReadable = function (color1, color2) {
			var readability = tinycolor.readability(color1, color2);
			return readability.brightness > 125 && readability.color > 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("#123", ["#fff", "#000"]) => "#000"
		tinycolor.mostReadable = function (baseColor, colorList) {
			var bestColor = null;
			var bestScore = 0;
			var bestIsReadable = false;
			for (var i = 0; i < colorList.length; i++) {

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

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

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


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

		// 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 < 0 || a > 1) {
				a = 1;
			}

			return a;
		}

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

			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) < 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 a base-16 hex value into a base-10 integer
		function parseIntFromHex(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
		// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
		function isOnePointZero(n) {
			return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
		}

		// Check to see if string passed in is a percentage
		function isPercentage(n) {
			return typeof n === "string" && 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 <= 1) {
				n = (n * 100) + "%";
			}

			return n;
		}

		// Converts a decimal to a hex value
		function convertDecimalToHex(d) {
			return Math.round(parseFloat(d) * 255).toString(16);
		}
		// Converts a hex value to a decimal
		function convertHexToDecimal(h) {
			return (parseIntFromHex(h) / 255);
		}

		var matchers = (function () {

			// <http://www.w3.org/TR/css3-values/#integers>
			var CSS_INTEGER = "[-\\+]?\\d+%?";

			// <http://www.w3.org/TR/css3-values/#number-value>
			var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";

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

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

			return {
				rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
				rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
				hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
				hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
				hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
				hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
				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})$/,
				hex8: /^([0-9a-fA-F]{2})([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: "name" };
			}

			// 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.hsva.exec(color))) {
				return { h: match[1], s: match[2], v: match[3], a: match[4] };
			}
			if ((match = matchers.hex8.exec(color))) {
				return {
					a: convertHexToDecimal(match[1]),
					r: parseIntFromHex(match[2]),
					g: parseIntFromHex(match[3]),
					b: parseIntFromHex(match[4]),
					format: named ? "name" : "hex8"
				};
			}
			if ((match = matchers.hex6.exec(color))) {
				return {
					r: parseIntFromHex(match[1]),
					g: parseIntFromHex(match[2]),
					b: parseIntFromHex(match[3]),
					format: named ? "name" : "hex"
				};
			}
			if ((match = matchers.hex3.exec(color))) {
				return {
					r: parseIntFromHex(match[1] + '' + match[1]),
					g: parseIntFromHex(match[2] + '' + match[2]),
					b: parseIntFromHex(match[3] + '' + match[3]),
					format: named ? "name" : "hex"
				};
			}

			return false;
		}

		window.tinycolor = tinycolor;
	})();

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

});