diff --git a/Jellyfin.Plugin.SkinManager/Configuration/ConfigController.js b/Jellyfin.Plugin.SkinManager/Configuration/ConfigController.js
new file mode 100644
index 0000000..735ddea
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/ConfigController.js
@@ -0,0 +1,152 @@
+class ConfigController {
+
+    constructor() {
+        console.log("ConfigController initialized");
+        this.pluginId = "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3";
+        this.MANAGED_CSS_MARKER = "/* Skin Manager CSS */";
+    }
+
+    async saveSkin(skin) {
+        skin.name = new Date().toLocaleString() + " - " + skin.name;
+        console.log("Saving skin:", skin);
+        const config = await this.getPluginConfiguration();
+        const serialized = this.serializeSkin(skin);
+        if (serialized) {
+            config.skinHistory.push(serialized);
+        }
+        const result = await ApiClient.updatePluginConfiguration(this.pluginId, config);
+        Dashboard.processPluginConfigurationUpdateResult(result);
+    }
+
+    async loadHistorySkins() {
+        const config = await this.getPluginConfiguration();
+        return [...config.skinHistory]
+            .reverse()
+            .map(s => this.deserializeSkin(s))
+            .filter(Boolean);
+    }
+
+    serializeSkin(skin) {
+        try {
+            // Convert the skin object into a JSON string
+            return JSON.stringify(skin);
+        } catch (error) {
+            console.error("Error serializing the skin:", error);
+            return null;
+        }
+    }
+
+
+    deserializeSkin(serializedSkin) {
+        try {
+            // Parse the JSON string back into a JavaScript object
+            const skinData = JSON.parse(serializedSkin);
+
+            return new Skin(skinData);
+        } catch (error) {
+            console.error("Error parsing the skin data:", error);
+            return null;
+        }
+    }
+
+    async saveUserCss(css) {
+        if (!css || !css.trim()) {
+            return;
+        }
+
+        const config = await this.getPluginConfiguration();
+
+        const existingHistory = config.userCssHistory
+            .map(entry => this.deserializeUserCssEntry(entry))
+            .filter(Boolean);
+
+        const lastEntry = existingHistory[existingHistory.length - 1];
+        if (lastEntry && lastEntry.css === css) {
+            return;
+        }
+
+        const cssEntry = this.createUserCssEntry(css);
+        const serialized = this.serializeUserCssEntry(cssEntry);
+        if (serialized) {
+            config.userCssHistory.push(serialized);
+        }
+        await ApiClient.updatePluginConfiguration(this.pluginId, config);
+    }
+
+    async loadUserCssHistory() {
+        const config = await this.getPluginConfiguration();
+        return config.userCssHistory
+            .map(entry => this.deserializeUserCssEntry(entry))
+            .filter(Boolean);
+    }
+
+    serializeUserCssEntry(entry) {
+        try {
+            return JSON.stringify(entry);
+        } catch (error) {
+            console.error("Error serializing user CSS entry:", error);
+            return null;
+        }
+    }
+
+    deserializeUserCssEntry(serializedEntry) {
+        if (!serializedEntry) {
+            return null;
+        }
+
+        try {
+            return JSON.parse(serializedEntry);
+        } catch (error) {
+            console.error("Error parsing user CSS entry:", error);
+            return null;
+        }
+    }
+
+    createUserCssEntry(css) {
+        const now = new Date().toISOString();
+        const id = this.generateId();
+
+        return {
+            id,
+            css,
+            savedAt: now
+        };
+    }
+
+    generateId() {
+        if (typeof window !== "undefined" && window.crypto && window.crypto.randomUUID) {
+            return window.crypto.randomUUID();
+        }
+
+        return `user-css-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
+    }
+
+    async getPluginConfiguration() {
+        const config = await ApiClient.getPluginConfiguration(this.pluginId);
+        if (!Array.isArray(config.skinHistory)) {
+            config.skinHistory = [];
+        }
+        if (!Array.isArray(config.userCssHistory)) {
+            config.userCssHistory = [];
+        }
+        return config;
+    }
+
+    async setSelectedSkin(skinName) {
+        const config = await this.getPluginConfiguration();
+        config.selectedSkin = skinName || "";
+
+        const result = await ApiClient.updatePluginConfiguration(this.pluginId, config);
+        Dashboard.processPluginConfigurationUpdateResult(result);
+    }
+
+    isManagedCss(css) {
+        if (!css) {
+            return false;
+        }
+
+        const trimmed = css.trimStart();
+        return trimmed.startsWith(this.MANAGED_CSS_MARKER)
+            || trimmed.startsWith("#Skin Manager CSS");
+    }
+}
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/HistoryController.js b/Jellyfin.Plugin.SkinManager/Configuration/HistoryController.js
new file mode 100644
index 0000000..72cab7d
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/HistoryController.js
@@ -0,0 +1,325 @@
+class HistoryController {
+    constructor() {
+        // Initialize ConfigController to handle skin serialization
+        this.configController = new ConfigController();
+
+        // Array to keep track of the history of saved skins
+        this.history = [];
+        this.currentSkin = null;
+        this.userCssHistory = [];
+        this.currentCss = null;
+
+        this.selectElement = document.getElementById("cssOptions-history");
+        this.optionsElement = document.getElementById("options-history");
+        this.setSkinButton = document.getElementById("setSkin-history");
+
+        this.cssContainerElement = document.getElementById("cssHistoryContainer");
+        this.cssSelectElement = document.getElementById("cssHistorySelect");
+        this.cssMetaElement = document.getElementById("cssHistoryMeta");
+        this.cssCodeElement = document.getElementById("cssHistoryCode");
+        this.cssEmptyElement = document.getElementById("cssHistoryEmpty");
+        this.restoreCssButton = document.getElementById("restoreCssButton");
+    }
+
+    // Initialize history controller logic
+    async init() {
+        console.log("HistoryController initialized");
+        this.history = await this.configController.loadHistorySkins();
+        this.populateSelect();
+        this.initEventListeners();
+
+        await this.loadUserCssHistory();
+        this.renderCssHistory();
+        this.initCssEventListeners();
+    }
+
+    populateSelect() {
+        this.selectElement.innerHTML = "";
+        this.history.forEach((skin, index) => {
+            const option = document.createElement("option");
+            option.value = index;
+            option.textContent = skin.name;
+            this.selectElement.appendChild(option);
+        });
+
+        if (this.history.length > 0) {
+            this.selectElement.value = 0;
+            this.currentSkin = this.history[0];
+            this.showSkin();
+        }
+    }
+
+    showSkin() {
+        this.optionsElement.innerHTML = this.currentSkin.generateHTML({ includePreview: false });
+        this.currentSkin.attachEventListeners();
+    }
+
+    changeSkin() {
+        const selectedIndex = this.selectElement.value;
+        this.currentSkin = this.history[selectedIndex];
+        this.showSkin();
+        console.log(`Skin changed to: ${this.currentSkin.name}`);
+    }
+
+    initEventListeners() {
+        this.setSkinButton.addEventListener('click', () => {
+            if (this.currentSkin) {
+                this.applyCurrentSkin();
+            }
+        });
+
+        this.selectElement.addEventListener('change', () => {
+            this.changeSkin();
+        });
+    }
+
+    async loadUserCssHistory() {
+        try {
+            const history = await this.configController.loadUserCssHistory();
+            this.userCssHistory = (history || [])
+                .filter(entry => entry && typeof entry.css === "string")
+                .map(entry => ({
+                    ...entry,
+                    id: entry.id ? String(entry.id) : this.generateEntryId(entry)
+                }))
+                .sort((a, b) => {
+                    const dateA = new Date(a.savedAt || 0).getTime();
+                    const dateB = new Date(b.savedAt || 0).getTime();
+                    return dateB - dateA;
+                });
+        } catch (error) {
+            console.error("Error loading user CSS history:", error);
+            this.userCssHistory = [];
+        }
+    }
+
+    renderCssHistory() {
+        if (!this.cssSelectElement) {
+            return;
+        }
+
+        this.cssSelectElement.innerHTML = "";
+
+        if (!this.userCssHistory.length) {
+            this.cssSelectElement.disabled = true;
+            this.updateCssContainerState(true);
+            if (this.cssEmptyElement) {
+                this.cssEmptyElement.textContent = "No saved CSS yet.";
+            }
+            this.clearCssDetail();
+            return;
+        }
+
+        this.cssSelectElement.disabled = false;
+        this.userCssHistory.forEach(entry => {
+            const option = document.createElement("option");
+            option.value = String(entry.id);
+            option.textContent = this.buildCssListLabel(entry);
+            this.cssSelectElement.appendChild(option);
+        });
+
+        const firstEntryId = String(this.userCssHistory[0].id);
+        this.cssSelectElement.value = firstEntryId;
+        this.selectCssEntry(firstEntryId);
+    }
+
+    generateEntryId(entry) {
+        if (entry.savedAt) {
+            return `user-css-${entry.savedAt}`;
+        }
+        return `user-css-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`;
+    }
+
+    buildCssListLabel(entry) {
+        const formattedDate = this.formatDate(entry.savedAt);
+        return formattedDate ? `Saved on ${formattedDate}` : "Saved CSS";
+    }
+
+    buildCssDetailMeta(entry) {
+        if (!entry.savedAt) {
+            return "";
+        }
+        return `Saved on ${this.formatDate(entry.savedAt)}`;
+    }
+
+    formatDate(isoString) {
+        if (!isoString) {
+            return "";
+        }
+
+        try {
+            const date = new Date(isoString);
+            if (Number.isNaN(date.getTime())) {
+                return isoString;
+            }
+            return date.toLocaleString();
+        } catch (error) {
+            console.warn("Unable to format date", error);
+            return isoString;
+        }
+    }
+
+    selectCssEntry(id) {
+        const normalizedId = String(id);
+        const entry = this.userCssHistory.find(item => String(item.id) === normalizedId);
+        if (!entry) {
+            this.clearCssDetail();
+            return;
+        }
+
+        this.currentCss = entry;
+        this.updateCssContainerState(false);
+
+        if (this.cssSelectElement && this.cssSelectElement.value !== normalizedId) {
+            this.cssSelectElement.value = normalizedId;
+        }
+
+        const metaText = this.buildCssDetailMeta(entry);
+        if (this.cssMetaElement) {
+            this.cssMetaElement.textContent = metaText;
+            this.cssMetaElement.style.display = metaText ? "block" : "none";
+        }
+
+        if (this.cssCodeElement) {
+            this.cssCodeElement.textContent = entry.css || "";
+        }
+
+        if (this.cssEmptyElement) {
+            this.cssEmptyElement.textContent = "Select a revision to inspect its content.";
+        }
+
+        this.toggleRestoreButton(true);
+    }
+
+    clearCssDetail() {
+        this.currentCss = null;
+        const hasEntries = this.userCssHistory.length > 0;
+        this.updateCssContainerState(!hasEntries);
+
+        if (this.cssMetaElement) {
+            this.cssMetaElement.textContent = "";
+            this.cssMetaElement.style.display = "none";
+        }
+
+        if (this.cssCodeElement) {
+            this.cssCodeElement.textContent = "";
+        }
+
+        if (this.cssSelectElement) {
+            if (hasEntries) {
+                this.cssSelectElement.disabled = false;
+            } else {
+                this.cssSelectElement.disabled = true;
+                this.cssSelectElement.value = "";
+            }
+        }
+
+        if (this.cssEmptyElement) {
+            this.cssEmptyElement.textContent = hasEntries
+                ? "Select a revision to inspect its content."
+                : "No saved CSS yet.";
+        }
+
+        this.toggleRestoreButton(false);
+    }
+
+    updateCssContainerState(isEmpty) {
+        if (this.cssContainerElement) {
+            this.cssContainerElement.dataset.empty = isEmpty ? "true" : "false";
+        }
+    }
+
+    toggleRestoreButton(enabled) {
+        if (!this.restoreCssButton) {
+            return;
+        }
+
+        if (this.restoreCssButton.dataset.restoreState === "working") {
+            return;
+        }
+
+        this.restoreCssButton.disabled = !enabled;
+    }
+
+    initCssEventListeners() {
+        if (this.cssSelectElement) {
+            this.cssSelectElement.addEventListener("change", event => {
+                const selectedId = event.target.value;
+                this.selectCssEntry(selectedId);
+            });
+        }
+
+        if (this.restoreCssButton) {
+            this.restoreCssButton.addEventListener("click", () => {
+                this.restoreCurrentCss();
+            });
+        }
+    }
+
+    async restoreCurrentCss() {
+        if (!this.currentCss) {
+            return;
+        }
+
+        this.showRestoreProgress();
+
+        try {
+            await this.applyCssToServer(this.currentCss.css);
+        } catch (error) {
+            console.error("Unable to restore CSS", error);
+            this.showRestoreIdle();
+        }
+    }
+
+    async applyCssToServer(css) {
+        const serverConfig = await ApiClient.getServerConfiguration();
+        await ApiClient.updateServerConfiguration(serverConfig);
+
+        const brandingConfig = await ApiClient.getNamedConfiguration("branding");
+        brandingConfig.CustomCss = css;
+        await ApiClient.updateNamedConfiguration("branding", brandingConfig);
+
+        Dashboard.processServerConfigurationUpdateResult();
+        window.location.reload(true);
+    }
+
+    showRestoreProgress() {
+        if (!this.restoreCssButton) {
+            return;
+        }
+
+        const label = this.restoreCssButton.querySelector("span");
+        const originalText = label ? label.textContent : this.restoreCssButton.textContent;
+
+        if (label) {
+            label.dataset.originalText = originalText;
+            label.textContent = "Restoring...";
+        } else {
+            this.restoreCssButton.dataset.originalText = originalText;
+            this.restoreCssButton.textContent = "Restoring...";
+        }
+
+        this.restoreCssButton.dataset.restoreState = "working";
+        this.restoreCssButton.disabled = true;
+    }
+
+    showRestoreIdle() {
+        if (!this.restoreCssButton) {
+            return;
+        }
+
+        const label = this.restoreCssButton.querySelector("span");
+        const originalText = label ? label.dataset.originalText : this.restoreCssButton.dataset.originalText;
+
+        if (label && originalText) {
+            label.textContent = originalText;
+            delete label.dataset.originalText;
+        } else if (originalText) {
+            this.restoreCssButton.textContent = originalText;
+            delete this.restoreCssButton.dataset.originalText;
+        }
+
+        delete this.restoreCssButton.dataset.restoreState;
+        this.restoreCssButton.disabled = !this.currentCss;
+    }
+}
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/MainController.js b/Jellyfin.Plugin.SkinManager/Configuration/MainController.js
new file mode 100644
index 0000000..1e9c646
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/MainController.js
@@ -0,0 +1,388 @@
+class MainController {
+    constructor(jsonUrl) {
+        this.jsonUrl = jsonUrl;
+        this.skins = [];
+        this.currentSkin = null;
+        this.selectElement = document.getElementById("cssOptions");
+        this.descriptionElement = document.getElementById("description");
+        this.optionsElement = document.getElementById("options");
+        this.setSkinButton = document.getElementById("setSkin");
+        this.configController = new ConfigController();
+    }
+
+    async init() {
+        try {
+            const [json, currentSkin] = await Promise.all([
+                this.fetchJson(),
+                this.loadCurrentSkinFromHistory()
+            ]);
+            this.loadSkins(json);
+            this.injectCurrentSkin(currentSkin);
+            this.populateSelect();
+            this.initEventListeners();
+        } catch (error) {
+            console.error("Error cargando las skins:", error);
+        }
+    }
+
+    async fetchJson() {
+        const response = await fetch(this.jsonUrl);
+        if (!response.ok) throw new Error(`Error HTTP: ${response.status}`);
+        return await response.json();
+    }
+
+    async loadCurrentSkinFromHistory() {
+        try {
+            const history = await this.configController.loadHistorySkins();
+            if (!Array.isArray(history) || history.length === 0) {
+                return null;
+            }
+            const latest = history[0];
+            return this.cloneAsCurrentSkin(latest);
+        } catch (error) {
+            console.warn("No se pudo cargar la skin actual:", error);
+            return null;
+        }
+    }
+
+    loadSkins(json) {
+        this.skins = json.skins.map(s => new Skin(s));
+    }
+
+    injectCurrentSkin(currentSkin) {
+        if (!currentSkin) {
+            return;
+        }
+        this.skins.unshift(currentSkin);
+    }
+
+    cloneAsCurrentSkin(skin) {
+        if (!skin) {
+            return null;
+        }
+
+        const plainSkin = JSON.parse(JSON.stringify(skin));
+        const baseName = this.extractSkinBaseName(plainSkin.name);
+        plainSkin.name = `Current Skin - ${baseName}`;
+        plainSkin.description = plainSkin.description || "Skin currently applied with your saved settings.";
+
+        if (Array.isArray(plainSkin.categories)) {
+            plainSkin.categories = plainSkin.categories.filter(cat => cat && cat.name !== "Custom CSS");
+        }
+
+        return new Skin(plainSkin);
+    }
+
+    extractSkinBaseName(name) {
+        if (!name) {
+            return "unknown";
+        }
+        const match = String(name).match(/-\s*(.+)$/);
+        if (match && match[1]) {
+            return match[1].trim();
+        }
+        return String(name).trim();
+    }
+
+    populateSelect() {
+        this.selectElement.innerHTML = ""; // Limpiar por si acaso
+        this.skins.forEach((skin, index) => {
+            const option = document.createElement("option");
+            option.value = index;
+            option.textContent = skin.name;
+            this.selectElement.appendChild(option);
+        });
+
+        // Mostrar la primera skin por defecto si existe
+        if (this.skins.length > 0) {
+            this.selectElement.value = 0;
+            this.currentSkin = this.skins[0];
+            this.showSkin();
+        }
+    }
+
+    showSkin() {
+        this.optionsElement.innerHTML = this.currentSkin.generateHTML();
+        this.currentSkin.attachEventListeners();
+    }
+
+    updateSkinInfo(index) {
+        const skin = this.skins[index];
+        if (!skin) return;
+
+        // Actualizar descripción
+        this.descriptionElement.textContent = `Skin: ${skin.name}`;
+
+        // Actualizar categorías
+        this.optionsElement.innerHTML = "";
+        skin.categories.forEach(cat => {
+            const div = document.createElement("div");
+            div.textContent = cat;
+            this.optionsElement.appendChild(div);
+        });
+
+        // Aplicar el CSS
+        this.applySkin(skin.css);
+    }
+
+
+
+    changeSkin() {
+        const selectedIndex = parseInt(this.selectElement.value, 10);
+        if (Number.isNaN(selectedIndex) || !this.skins[selectedIndex]) {
+            return;
+        }
+        this.currentSkin = this.skins[selectedIndex];
+        this.showSkin();
+        console.log(`Skin changed to: ${this.currentSkin.name}`);
+    }
+
+    async applyCurrentSkin() {
+        if (!this.currentSkin) return;
+
+        const css = this.currentSkin.generateCSS();
+        const appliedSkinName = this.currentSkin.name;
+
+        try {
+            const serverConfig = await ApiClient.getServerConfiguration();
+            await ApiClient.updateServerConfiguration(serverConfig);
+
+            const brandingConfig = await ApiClient.getNamedConfiguration("branding");
+            const existingCss = brandingConfig && typeof brandingConfig.CustomCss === "string"
+                ? brandingConfig.CustomCss
+                : "";
+
+            if (existingCss && !this.configController.isManagedCss(existingCss)) {
+                await this.configController.saveUserCss(existingCss);
+            }
+
+            brandingConfig.CustomCss = css;
+            await ApiClient.updateNamedConfiguration("branding", brandingConfig);
+            Dashboard.processServerConfigurationUpdateResult();
+
+            // Save the skin to history after a successful update
+            await this.configController.saveSkin(this.currentSkin);
+            await this.configController.setSelectedSkin(appliedSkinName);
+
+            window.location.reload(true);
+        } catch (error) {
+            console.error("Error applying skin:", error);
+        }
+    }
+
+
+
+    initEventListeners() {
+        this.setSkinButton.addEventListener('click', () => {
+            if (this.currentSkin) {
+                this.applyCurrentSkin();
+            }
+        });
+
+        this.selectElement.addEventListener('change', () => {
+            this.changeSkin();
+        });
+    }
+
+
+
+
+    async initDebug() {
+        try {
+            const json = `{
+    "skins": [
+        {
+            "name": "Finimalism",
+            "description": "A modern, customizable skin for Jellyfin.",
+            "css":"",
+            "categories": [
+            {
+                "name": "Default",
+                "controls": [
+                    {
+                        "type": "select",
+                        "label": "Mode",
+                        "description": "Select light or dark mode",
+                        "id": "mode",
+                        "default": "@import url('https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@latest/finimalism10.11.css');",
+                        "css": "%value%",
+                        "options": [
+                            {
+                                "label": "Colour",
+                                "value": "@import url('https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@latest/finimalism10.11.css');"
+                            },
+                            {
+                                "label": "Black",
+                                "value": "@import url('https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@latest/finimalism10.11-black.css');"
+                            }
+                        ]
+                    }
+                ]
+            }
+            ]
+
+        },
+        {
+            "name": "JellySkin",
+            "description": "A modern, customizable skin for Jellyfin.",
+            "css": "@import url('https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/main.css');",
+            "previews": [
+                {
+                    "name": "Login Page",
+                    "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Default/1.png"
+                },
+                {
+                    "name": "Home/Index Page",
+                    "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Default/2.png"
+                },
+                {
+                    "name": "Library Page",
+                    "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Default/3.png"
+                },
+                {
+                    "name": "Title page",
+                    "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Default/4.png"
+                }
+            ],
+            "categories": [
+                {
+                    "name": "Default",
+                    "controls": [
+                    {
+                            "type": "fontPicker",
+                            "label": "Base Font",
+                            "description": "Select the base font for the skin",
+                            "id": "baseFont",
+                            "default": "Arial, sans-serif",
+                            "css": ":root { --base-font: %value%; }"
+                    },
+                        {
+                            "type": "color",
+                            "label": "Background Color",
+                            "description": "Set the background color of the skin",
+                            "id": "bgColor",
+                            "default": "#ffffff",
+                            "css": ":root { --bg-color: %value%; }"
+                        },
+                        {
+                            "type": "color",
+                            "label": "Text Color",
+                            "id": "textColor",
+                            "default": "#000000",
+                            "css": ":root { --text-color: %value%; }"
+                        },
+                        {
+                            "type": "slider",
+                            "label": "Font Size",
+                            "id": "fontSize",
+                            "min": 10,
+                            "max": 30,
+                            "default": 16,
+                            "css": ":root { --font-size: %value%px; }"
+                        },
+                        {
+                            "type": "checkbox",
+                            "label": "Dark Mode",
+                            "description": "Enable dark mode",
+                            "id": "checkbox",
+                            "default": true,
+                            "css": ":root { --dark-mode: %value%; }"
+                        },
+                        {
+                            "type": "number",
+                            "label": "Border Radius",
+                            "description": "Set the border radius",
+                            "id": "borderRadius",
+                            "min": 0,
+                            "max": 50,
+                            "default": 0,
+                            "css": ":root { --border-radius: %value%px; }"
+                        },
+                        {
+                            "type": "select",
+                            "label": "Font Family",
+                            "description": "Select the font family",
+                            "id": "fontFamily",
+                            "default": "Arial",
+                            "css": ":root { --font-family: %value%; }",
+                            "options": [
+                                {
+                                    "label": "Arial",
+                                    "value": "Arial"
+                                },
+                                {
+                                    "label": "Verdana",
+                                    "value": "Verdana"
+                                },
+                                {
+                                    "label": "Georgia",
+                                    "value": "Georgia"
+                                },
+                                {
+                                    "label": "Times New Roman",
+                                    "value": "Times New Roman"
+                                },
+                                {
+                                    "label": "Trebuchet MS",
+                                    "value": "Trebuchet MS"
+                                },
+                                {
+                                    "label": "Arial Black",
+                                    "value": "Arial Black"
+                                },
+                                {
+                                    "label": "Impact",
+                                    "value": "Impact"
+                                },
+                                {
+                                    "label": "Comic Sans MS",
+                                    "value": "Comic Sans MS"
+                                },
+                                {
+                                    "label": "Courier New",
+                                    "value": "Courier New"
+                                },
+                                {
+                                    "label": "Lucida Console",
+                                    "value": "Lucida Console"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        { "name": "DarkSkin",
+            "description": "A sleek dark theme for Jellyfin.",
+            "css": "@import url('https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/dark.css');",
+            "previews": [],
+            "categories": [
+                {
+                    "name": "Dark Mode",
+                    "controls": [
+                        {
+                            "type": "color",
+                            "label": "Background Color",
+                            "description": "Set the background color of the skin",
+                            "id": "bgColor",
+                            "default": "#121212",
+                            "css": ":root { --bg-color: %value%; }"
+                        }
+                    ]
+                }
+            ]
+            }
+    ]
+}`;
+            const jsonObj = JSON.parse(json);
+            this.loadSkins(jsonObj);
+            const currentSkin = await this.loadCurrentSkinFromHistory();
+            this.injectCurrentSkin(currentSkin);
+            this.populateSelect();
+            this.initEventListeners();
+        } catch (error) {
+            console.error("Error cargando las skins:", error);
+        }
+
+    }
+}
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/PluginConfiguration.cs b/Jellyfin.Plugin.SkinManager/Configuration/PluginConfiguration.cs
index 40cdd61..dc74e48 100644
--- a/Jellyfin.Plugin.SkinManager/Configuration/PluginConfiguration.cs
+++ b/Jellyfin.Plugin.SkinManager/Configuration/PluginConfiguration.cs
@@ -7,12 +7,14 @@ namespace Jellyfin.Plugin.SkinManager.Configuration
     public class PluginConfiguration : BasePluginConfiguration
     {
         public string selectedSkin { get; set; }
-        public string[] options { get; set; }
+        public string[] skinHistory { get; set; }
+        public string[] userCssHistory { get; set; }
 
         public PluginConfiguration()
         {
             selectedSkin = "";
-            options = Array.Empty<String>();
+            skinHistory = Array.Empty<String>();
+            userCssHistory = Array.Empty<String>();
         }
     }
 }
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/colorpicker.js b/Jellyfin.Plugin.SkinManager/Configuration/colorpicker.js
new file mode 100644
index 0000000..cd439cd
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/colorpicker.js
@@ -0,0 +1,2341 @@
+// Spectrum Colorpicker v1.8.1
+// 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></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.on("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.on("paste", function () {
+                setTimeout(setFromTextInput, 1);
+            });
+            textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } });
+
+            cancelButton.text(opts.cancelText);
+            cancelButton.on("click.spectrum", function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+                revert();
+                hide();
+            });
+
+            clearButton.attr("title", opts.clearText);
+            clearButton.on("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.on("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.on("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();
+
+                    // If the picker is going to close immediately, a palette selection
+                    // is a change.  Otherwise, it's a move only.
+                    if (opts.hideAfterPaletteSelect) {
+                        updateOriginalInput(true);
+                        hide();
+                    } else {
+                        updateOriginalInput();
+                    }
+                }
+
+                return false;
+            }
+
+            var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum";
+            paletteContainer.on(paletteEvent, ".sp-thumb-el", paletteElementClick);
+            initialColorContainer.on(paletteEvent, ".sp-thumb-el:nth-child(1)", { 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);
+                move();
+                updateOriginalInput();
+            }
+            else {
+                var tiny = tinycolor(value);
+                if (tiny.isValid()) {
+                    set(tiny);
+                    move();
+                    updateOriginalInput();
+                }
+                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).on("keydown.spectrum", onkeydown);
+            $(doc).on("click.spectrum", clickout);
+            $(window).on("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).off("keydown.spectrum", onkeydown);
+            $(doc).off("click.spectrum", clickout);
+            $(window).off("resize.spectrum", resize);
+
+            replacer.removeClass("sp-active");
+            container.addClass("sp-hidden");
+
+            callbacks.hide(get());
+            boundElement.trigger('hide.spectrum', [get()]);
+        }
+
+        function revert() {
+            set(colorOnShow, true);
+            updateOriginalInput(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 * 1000) / 1000
+            }, { 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.off("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();
+        var offsetLeft = offset.left;
+        var offsetTop = offset.top;
+
+        offsetTop += inputHeight;
+
+        offsetLeft -=
+            Math.min(offsetLeft, (offsetLeft + dpWidth > viewWidth && viewWidth > dpWidth) ?
+                Math.abs(offsetLeft + dpWidth - viewWidth) : 0);
+
+        offsetTop -=
+            Math.min(offsetTop, ((offsetTop + dpHeight > viewHeight && viewHeight > dpHeight) ?
+                Math.abs(dpHeight + inputHeight - extraY) : extraY));
+
+        return {
+            top: offsetTop,
+            bottom: offset.bottom,
+            left: offsetLeft,
+            right: offset.right,
+            width: offset.width,
+            height: offset.height
+        };
+    }
+
+    /**
+    * 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).on(duringDragEvents);
+                    $(doc.body).addClass("sp-dragging");
+
+                    move(e);
+
+                    prevent(e);
+                }
+            }
+        }
+
+        function stop() {
+            if (dragging) {
+                $(doc).off(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).on("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({}, $(this).data(), opts);
+            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(1000 * this._a) / 1000;
+            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(1000 * this._a) / 1000;
+                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();
+        }
+    });
+
+});
\ No newline at end of file
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/common.js b/Jellyfin.Plugin.SkinManager/Configuration/common.js
new file mode 100644
index 0000000..e64f636
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/common.js
@@ -0,0 +1,16 @@
+const getConfigurationPageUrl = (name) => {
+    return 'configurationpage?name=' + encodeURIComponent(name);
+}
+
+function getTabs() {
+    var tabs = [
+        {
+            href: getConfigurationPageUrl('SkinManager'),
+            name: 'Skin Manager'
+        },
+        {
+            href: getConfigurationPageUrl('history'),
+            name: 'History'
+        }];
+    return tabs;
+}
\ No newline at end of file
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage copy.html b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage copy.html
new file mode 100644
index 0000000..5a40526
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage copy.html	
@@ -0,0 +1,1964 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Skin Manager</title>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+</head>
+
+<body>
+    <script src="/web/configurationpage?name=test.js"></script>
+    <div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage"
+        data-require="emby-input,emby-button" data-controller="__plugin/fontpicker.js">
+        <div data-role="content">
+            <div class="content-primary">
+                <form class="tbsConfigurationPage">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="sectionTitle">Skin Manager</h2>
+                        <a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank"
+                            href="https://prayag17.github.io/jellyfin-plugin-skin-manager/src/html/help.html">Help</a>
+                    </div>
+                    <div class="verticalSection">
+                        <p>Select the skin you want to install and click Set Skin</p>
+                        <br />
+                    </div>
+                    <div class="allOptions">
+                        <div class="selectContainer">
+                            <label for="css">Skin</label>
+                            <select is="emby-select" id="cssOptions" onchange="updateSelectors()"></select>
+                            <br />
+                            <div class="fieldDescription" id="description"></div>
+                        </div>
+                        <div class="checkboxList checkboxList-verticalwrap" id="options"></div>
+                        <br />
+                    </div>
+                </form>
+            </div>
+        </div>
+        <script type="text/javascript">
+            var data;
+            var fonts;
+            var hasGoogleFont = false;
+
+            function start() {
+
+                Dashboard.showLoadingMsg();
+                $.getJSON(
+                    "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/skins-3.0.json",
+                    function (json) {
+                        $.getJSON(
+                            "https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyB_bPGsf0vxnpO9GmkBjeoEIQ7rE9rbNck",
+                            function (jsonFonts) {
+                                fonts = jsonFonts;
+                            }
+                        );
+                        data = json;
+                        loadSkins();
+                        Dashboard.hideLoadingMsg();
+                        checkEasterEggs();
+                    }
+                );
+            }
+
+            function loadSkins() {
+                var cssOptions = document.getElementById("cssOptions");
+
+                data.forEach((element) => {
+                    var opt = document.createElement("option");
+                    opt.appendChild(document.createTextNode(element.name));
+                    opt.value = element.defaultCss;
+                    cssOptions.appendChild(opt);
+                });
+                updateSelectors();
+                loadConfig();
+                preloadPreviews();
+
+            }
+
+            function loadOptions(skin) {
+                var html = "";
+                html += '<div data-role="controlgroup" class="optionsContainer">';
+                skin.categories.forEach((categorie) => {
+                    if (categorie.options.length != 0) {
+                        html += getSection(categorie.name);
+                    }
+
+                    categorie.options.forEach((element) => {
+                        if (element.type == "checkBox") {
+                            html += getCheckBox(element);
+                        } else if (element.type == "colorPicker") {
+                            html += getColorPicker(element);
+                        } else if (element.type == "number") {
+                            html += getNumber(element);
+                        } else if (element.type == "selector") {
+                            html += getSelector(element);
+                        } else if (element.type == "slider") {
+                            html += getSlider(element);
+                        } else if (element.type == "googleFonts") {
+                            html += getFonts(element);
+                        } else if (element.type == "blurSlider") {
+                            html += getBlurSlider(element);
+                        }
+                    });
+                });
+                html += "</fieldset>";
+                html +=
+                    '<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()><span>Set Skin</span></button>';
+                html += loadPreviews(skin);
+                html += "</div>";
+                $("#options").html(html).trigger("create");
+                generatePlugins();
+            }
+
+            function preloadPreviews() {
+                data.forEach((skin) => {
+                    if (skin.previews != undefined) {
+                        skin.previews.forEach((img) => {
+                            var image = new Image();
+                            image.src = img.url;
+                        });
+                    }
+                });
+            }
+
+            function loadPreviews(skin) {
+                if (skin.previews == undefined) {
+                    return "";
+                }
+                var html = "";
+
+                html += '<h2 class="sectionTitle" >Previews</h2>';
+                skin.previews.forEach((element) => {
+                    html += getImage(element.url);
+                    html += getImgnames(element.name);
+                });
+                return html;
+            }
+
+            function getCheckBox(option, saved) {
+                var html = "";
+                var checked = saved == "true" ? 'checked="checked"' : "";
+                var id = "chkFolder";
+                var name = option.name;
+                var css = option.css;
+                var description = option.description;
+
+                //html += '<label><input is="emby-checkbox" class="chkLibrary" type="checkbox" data-mini="true" id="' + id + '" name="' + id + '" data-value="' + value + '" '+' /><span>' + name  + '</span></label>';
+                html +=
+                    '<div class="checkboxContainer checkboxContainer-withDescription"><label><input class = "checkbox" type="checkbox" is="emby-checkbox" id="' +
+                    id +
+                    '"name="' +
+                    id +
+                    '" data-css="' +
+                    css +
+                    '" ' +
+                    checked +
+                    " /><span>" +
+                    name +
+                    "</span>" +
+                    getToolTip(option) +
+                    '</label><div class="fieldDescription checkboxFieldDescription">' +
+                    description +
+                    "</div></div>";
+                return html;
+            }
+            var colorPickers = {};
+
+            function getColorPicker(option, saved) {
+                var html = "";
+                var id = "colorPicker" + Object.keys(colorPickers).length;
+                var name = option.name;
+                var defaultValue =
+                    option.default == undefined ? "#000000" : option.default;
+                defaultValue = saved == undefined ? defaultValue : saved;
+                colorPickers[id] = defaultValue
+                var css = option.css;
+                var description = option.description;
+                var mode = option.mode;
+                html +=
+                    '<div class="inputContainer"><label></span>' +
+                    getToolTip(option) +
+                    '</label><input class = color type=text  value="' +
+                    defaultValue +
+                    '"data-css = "' +
+                    css +
+                    '" data-mode="' +
+                    mode +
+                    '" id="' +
+                    id +
+                    '" name="' +
+                    id +
+                    '" label="' +
+                    name +
+                    '"  /><span>' +
+                    name +
+                    '<div class="fieldDescription">' +
+                    description +
+                    "</div></div>";
+                return html;
+            }
+
+            function getNumber(option, saved) {
+                var html = "";
+                var id = "number";
+                var name = option.name;
+                var css = option.css;
+                var step = option.step == undefined ? 1 : option.step;
+                var defaultValue = option.default;
+                defaultValue = saved == undefined ? defaultValue : saved;
+                var description = option.description;
+                //html += '<label for=number><input is="emby-input" type=number value=' + defaultValue + ' class = "number" data-css = "'+ css+ '" +  data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name  + '</span></label><br>';
+                html +=
+                    '<div class="inputContainer"><input is="emby-input" type="number" class = "number" value=' +
+                    defaultValue +
+                    " step=" +
+                    step +
+                    ' data-css = "' +
+                    css +
+                    '"  id="' +
+                    id +
+                    '" name="' +
+                    id +
+                    '"  min="0" max="300" label="' +
+                    name +
+                    '" /><div class="fieldDescription">' +
+                    description +
+                    "</div></div>";
+                return html;
+            }
+
+            function getSelector(option, saved) {
+                var html = "";
+                var id = "selector";
+                var name = option.name;
+                var css = option.css;
+                var defaultValue = option.default;
+                var description = option.description;
+                //html += '<label for=number><input is="emby-input" type=number value=' + defaultValue + ' class = "number" data-css = "'+ css+ '" +  data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name  + '</span></label><br>';
+                html +=
+                    '<div class="selectContainer"><select is="emby-select"  data-css= "' +
+                    css +
+                    '"class="selector" label="' +
+                    name +
+                    '">' +
+                    getOptions(option, saved) +
+                    "</select></div>";
+                return html;
+            }
+            var savedGoogleFont;
+
+            function getFonts(option, saved) {
+                var html = "";
+
+                var name = "Change Font";
+                var css =
+                    "html {font-family:  '$',sans-serif ;  } body,h1,h2,h3 { font-family: '$' ,sans-serif;}";
+                var description = "Change the default fonts";
+                //html += '<label for=number><input is="emby-input" type=number value=' + defaultValue + ' class = "number" data-css = "'+ css+ '" +  data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name  + '</span></label><br>';
+                //html += '<div class="selectContainer" ><select is="emby-select" id = "googleFonts" data-css= "'+css + '"class="selector" label="'+name+' " onchange="updateFontPreview()">' + getFontOptions(fonts)+'</select></div>'
+                //html += '<div class = "fontPreview"> This is a preview </div>';
+                //html += '<div id="font-picker"></div><div class = "apply-font"> This is a preview </div>'
+                //html += '	<div class="selectContainer"><label>Change Font </label><br> <input id="font-picker" type="text"> </div>';
+                html += '<div class="selectContainer"><label>Change Font </label><br> <input class="fonts" data-css= "' + option.css + '">'
+                if (saved != undefined) {
+                    savedGoogleFont = saved;
+                }
+                hasGoogleFont = true;
+                return html;
+            }
+
+            function getFontPreview(categories, option, selections, name) {
+                var html = "";
+                if (name == "Fonts") {
+                    html +=
+                        '<div class="fontCont><p style="font-family: ' +
+                        categories.option.selections.value +
+                        ';">Hello, This is your selected font-family.</p></div>"';
+                    return html;
+                } else {
+                    return "";
+                }
+            }
+
+            function getOptions(option, saved) {
+                var html = "";
+                var selections = option.selections;
+                var css = option.css;
+                selections.forEach((element) => {
+                    var name = element.name;
+                    var value = element.css;
+                    var selected = saved == name ? ' selected="selected"' : "";
+                    html +=
+                        '<option value= "' +
+                        value + '"' +
+                        selected +
+                        ">" +
+                        name +
+                        "</option>";
+                });
+                return html;
+            }
+
+            function getSlider(option, saved) {
+                var html = "";
+                var id = "slider";
+                var name = option.name;
+                var css = option.css;
+                var step = option.step == undefined ? 1 : option.step;
+                var defaultValue = option.default;
+                defaultValue = saved == undefined ? defaultValue : saved;
+                var description = option.description;
+                html +=
+                    +'<div class="inputContainer">' +
+                    '<input type="range" class="slider" value="' + defaultValue + '" step="' + step + '" data-css="' + css + '" id="' + id + '" name="' + id + '"  min="0" max="300" label="' + name + '">' +
+                    '<div class="fieldDescription">' +
+                    description +
+                    +'</div>' +
+                    '</div>';
+                return html;
+            }
+
+            var blurSliderCount = 0;
+
+            function getBlurSlider(option, saved) {
+
+                var html = "";
+                var id = "blurSlider" + blurSliderCount;
+                blurSliderCount++;
+                var name = option.name;
+                var css = option.css;
+                var step = option.step == undefined ? 1 : option.step;
+                var defaultValue = option.default;
+                defaultValue = saved == undefined ? defaultValue : saved;
+                var description = option.description;
+                html +=
+                    '<div class="inputContainer"><label><span>' + name + '</span></label><input type="range" class="slider" value="' + defaultValue + '" oninput ="updateBlur(' + "'" + id + "'" + ')"' + 'step="' + step + '" data-css="' + css + '" id="' + id + '" name="' + id + '" min="0" max="40" label="' + name + '">' +
+                    '<div class="fieldDescription">' + description + '</div>' +
+                    '</div>' +
+                    '<div class="img"><img id="' + id + 'image"' + 'src="https://i.imgur.com/sMDQSdV.png"></div>';
+                return html;
+            }
+
+            function updateBlur(id) {
+                var slider = document.getElementById(id);
+                var image = document.getElementById(id + 'image');
+                image.style.filter = "blur(" + slider.value + "px)";
+            }
+
+            function updateBlurSliders() {
+                var sliders = document.getElementsByClassName("slider");
+                Array.from(sliders).forEach(slider => {
+                    if (slider.id.substring(0, 10) == "blurSlider") {
+                        updateBlur(slider.id);
+                    }
+                })
+            }
+
+            function getImage(url) {
+                var html = "";
+                html +=
+                    '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="' +
+                    url +
+                    '">';
+                return html;
+            }
+
+            function getImgnames(name) {
+                var html = "";
+                html += "<legend>" + name + "</legend></fieldset>";
+                return html;
+            }
+
+            function getSection(name) {
+                var html = "";
+                html += "</fieldset>";
+                html +=
+                    '<fieldset class="verticalSection verticalSection-extrabottompadding">';
+                html += "<legend>" + name + "</legend>";
+                return html;
+            }
+
+            function getToolTip(option) {
+                if (option.preview == undefined) {
+                    return "";
+                }
+                html = "";
+                html +=
+                    '<div class="tooltip"><span class="material-icons">info</span><span class="tooltiptext">';
+                html += '<img src="' + option.preview + '">';
+                html += "</span></div>";
+                return html;
+            }
+
+            async function createCss() {
+
+                var savedHtml = "";
+                //process checkbox
+                var css = $("#cssOptions").val();
+                savedHtml += document.getElementById("cssOptions").innerHTML;
+                var checkboxes = document.getElementsByClassName("checkbox");
+
+                var selectedOptions = $(".checkbox:checked")
+                    .map(function () {
+                        return this.getAttribute("data-css");
+                    })
+                    .get();
+
+                selectedOptions.forEach((element) => {
+                    css += element + "\n";
+                });
+
+                //proccess selector
+                var selectors = document.getElementsByClassName("selector");
+                for (var i = 0; i < selectors.length; i++) {
+                    var element = selectors[i]
+                    if (checkForImport(element.selectedOptions[0].value)) {
+                        css = element.selectedOptions[0].value + "\n" + css
+                    } else {
+                        css +=
+                            element.selectedOptions[0].value +
+                            "\n";
+                        savedHtml += element.outerHTML;
+                    }
+                }
+
+                //process colorPicker
+                selectedOptions.forEach((element) => {
+                    css += element + "\n";
+                });
+                var inputs = document.getElementsByClassName("color");
+                for (var i = 0; i < inputs.length; i++) {
+                    var element = inputs[i]
+                    var values = $("#" + element.name).spectrum("get")
+                    var mode = element.getAttribute("data-mode");
+                    var color = "";
+                    switch (mode) {
+                        case "hex":
+                            color = "#" + values.toHex();
+                            break;
+                        case "only_numbers":
+                            color = values._r + "," + values._g + "," + values._b;
+                            break;
+                        default:
+                            color = "rgba(" + values._r + "," + values._g + "," + values._b + "," + values._a + ")";
+                            break;
+                    }
+                    css += element.getAttribute("data-css").replaceAll("$", color) + "\n";
+                }
+
+                //procces number selector
+                var numberSelectors = document.getElementsByClassName("number");
+                for (let element of numberSelectors) {
+                    savedHtml += element.outerHTML;
+                    css +=
+                        element.getAttribute("data-css").replaceAll("$", element.value) +
+                        "\n";
+                }
+
+                //procces slider
+                var sliders = document.getElementsByClassName("slider");
+                for (let element of sliders) {
+                    css +=
+                        element.getAttribute("data-css").replaceAll("$", element.value) +
+                        "\n";
+                }
+
+
+                //procces google Fonts
+                if (document.getElementsByClassName("fonts").length > 0) {
+                    var fontPickers = Array.from(
+                        document.getElementsByClassName(
+                            "fonts"
+                        )
+                    )
+                    for (var i = 0; i < fontPickers.length; i++) {
+                        var element = fontPickers[i]
+                        if (element.value != "") {
+                            var url = "https://fonts.googleapis.com/css?family=" + element.value;
+                            var promise = await fetch(url, {
+                                mode: 'no-cors'
+                            })
+                            var text = await promise.text()
+                            css += text
+                            css += element.getAttribute("data-css").replaceAll("$", element.value.replaceAll("+", " "));
+                        }
+                    }
+                    console.log("fuera del loop")
+                }
+
+                return css
+
+
+            }
+
+            function checkForImport(css) {
+                return css.includes("@import")
+            }
+
+
+
+            function generatePlugins() {
+                if (hasGoogleFont) {
+                    createFontPicker()
+                }
+                for (var colorPicker in colorPickers) {
+                    var id = "#" + colorPicker
+                    $(id).spectrum({
+                        color: colorPickers[colorPicker],
+                        showInput: true,
+                        className: "full-spectrum",
+                        showInitial: true,
+                        showPalette: true,
+                        showAlpha: true,
+                        showSelectionPalette: true,
+                        maxSelectionSize: 10,
+                        preferredFormat: "hex",
+                        localStorageKey: "spectrum.demo",
+                        move: function (color) {
+
+                        },
+                        show: function () {
+
+                        },
+                        beforeShow: function () {
+
+                        },
+                        hide: function () {
+
+                        },
+                        change: function () {
+
+                        },
+                        palette: [
+                            ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
+                                "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"
+                            ],
+                            ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
+                                "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"
+                            ],
+                            ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
+                                "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
+                                "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
+                                "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
+                                "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
+                                "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
+                                "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
+                                "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
+                                "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
+                                "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"
+                            ]
+                        ]
+                    });
+                }
+            }
+
+
+            function createFontPicker() {
+                $('input.fonts').fontpicker({
+                    variants: false
+                });
+
+                if (savedGoogleFont != undefined) {
+                    $('input.fonts').val(savedGoogleFont).trigger('change')
+                }
+            }
+
+            function applyFont(font) {
+                console.log("You selected font: " + font);
+
+                // Replace + signs with spaces for css
+                font = font.replace(/\+/g, " ");
+
+                // Split font into family and weight
+                font = font.split(":");
+
+                var fontFamily = font[0];
+                var fontWeight = font[1] || 400;
+
+                // Set selected font on paragraphs
+                $("fontPreview").css({
+                    fontFamily: "'" + fontFamily + "'",
+                    fontWeight: fontWeight,
+                });
+            }
+
+            //$("#font-picker")
+            //.fontselect()
+            //.on("change", function () {
+            //  applyFont(this.value);
+            //});
+
+            function getFontOptions(fonts) {
+                var html = "";
+                var selections = fonts.items;
+                selections.forEach((element) => {
+                    var name = element.family;
+                    var value = element.family;
+                    //var selected = saved==name?'selected="selected"' : "";
+                    var selected = "";
+                    html +=
+                        "<option value=" + value + selected + ">" + name + "</option>";
+                });
+                return html;
+            }
+
+            function updateFontPreview() {
+                var preview = document.getElementsByClassName("fontPreview")[0];
+                var selectedOption = document.getElementById("googleFonts")
+                    .selectedOptions[0].innerText;
+                var url =
+                    "https://fonts.googleapis.com/css?family=" +
+                    selectedOption.replaceAll(" ", "+");
+
+                fetch(url).then(function (response) {
+                    response.text().then(function (text) {
+                        var sheet = document.createElement("style");
+                        sheet.innerHTML =
+                            text + ".fontPreview{font-family:'" + selectedOption + "'}";
+                        preview.appendChild(sheet);
+                    });
+                });
+            }
+
+            function updateSelectors() {
+                var selected = document.getElementById("cssOptions");
+                var description = document.getElementById("description");
+                data.forEach((element) => {
+                    if (element.name == selected.selectedOptions[0].innerText) {
+                        loadOptions(element);
+                        description.innerHTML = element.description;
+                    }
+                });
+                updateBlurSliders();
+            }
+
+            var config = undefined;
+
+            function loadConfig() {
+                var pluginId = "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3";
+
+                ApiClient.getPluginConfiguration(pluginId).then(function (
+                    savedConfig
+                ) {
+                    config = savedConfig;
+
+                    if (!config) {
+                        config.selectedSkin = "";
+                        config.options = [];
+                    }
+                    loadSavedOptions();
+                });
+            }
+
+            function loadSavedOptions() {
+                var skin = undefined;
+                data.forEach((element) => {
+                    if (element.defaultCss == config.selectedSkin) {
+                        skin = element;
+                    }
+                });
+                if (skin == undefined) {
+                    return;
+                }
+                var count = 0;
+                for (let option of document.getElementById("cssOptions").options) {
+                    if (option.value == config.selectedSkin) {
+                        document.getElementById("cssOptions").selectedIndex = count;
+                    }
+                    count++;
+                }
+
+                var savedOptions = config.options;
+                var html = "";
+                html += '<div data-role="controlgroup">';
+                skin.categories.forEach((categorie) => {
+                    if (categorie.options.length != 0) {
+                        html += getSection(categorie.name);
+                    }
+                    var options = categorie.options;
+
+                    options.forEach((element) => {
+                        var savedValue = undefined;
+                        var count = 0;
+                        savedOptions.forEach((savedOption) => {
+                            if (element.css == savedOption) {
+                                savedValue = savedOptions[count + 1];
+                            }
+                            count++;
+                        });
+                        if (element.type == "checkBox") {
+                            html += getCheckBox(element, savedValue);
+                        } else if (element.type == "colorPicker") {
+                            html += getColorPicker(element, savedValue);
+                        } else if (element.type == "number") {
+                            html += getNumber(element, savedValue);
+                        } else if (element.type == "selector") {
+                            html += getSelector(element, savedValue);
+                        } else if (element.type == "slider") {
+                            html += getSlider(element, savedValue);
+                        } else if (element.type == "googleFonts") {
+                            html += getFonts(element, savedValue);
+                        } else if (element.type == "blurSlider") {
+                            html += getBlurSlider(element, savedValue);
+                        }
+                    });
+                });
+                html += "</fieldset>";
+                html +=
+                    '<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()><span>Set Skin</span></button>';
+                html += loadPreviews(skin);
+                html += "</div>";
+
+                $("#options").html(html).trigger("create");
+                generatePlugins()
+
+            }
+
+            function saveConfig() {
+                var pluginId = "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3";
+                config.selectedSkin = $("#cssOptions").val();
+
+                var options = [];
+                var count = 0;
+                data[
+                    document.getElementById("cssOptions").selectedIndex
+                ].categories.forEach((categorie) => {
+                    categorie.options.forEach((option) => {
+                        options[count] = option.css;
+                        options[count + 1] = getValue(option);
+                        count += 2;
+                    });
+                });
+                config.options = options;
+
+                ApiClient.getPluginConfiguration(pluginId).then(function (oldConfig) {
+                    oldConfig = config;
+                    ApiClient.updatePluginConfiguration(pluginId, oldConfig).then(
+                        function (res) {
+                            Dashboard.processPluginConfigurationUpdateResult(res);
+                        }
+                    );
+                });
+            }
+
+            function getValue(option) {
+                var result = "";
+                switch (option.type) {
+                    case "checkBox":
+                        Array.from(
+                            document.getElementsByClassName("checkbox emby-checkbox")
+                        ).forEach((element) => {
+                            if (option.css == element.getAttribute("data-css")) {
+                                result = element.checked ? "true" : "false";
+                            }
+
+                        });
+                        break;
+                    case "number":
+                        Array.from(
+                            document.getElementsByClassName("number emby-input")
+                        ).forEach((element) => {
+                            if (option.css == element.getAttribute("data-css")) {
+                                result = element.value;
+                            }
+
+                        });
+                        break;
+                    case "colorPicker":
+                        Array.from(document.getElementsByClassName("color")).forEach(
+                            (element) => {
+                                if (option.css == element.getAttribute("data-css")) {
+                                    result = element.value;
+                                }
+                            }
+                        );
+                        break;
+                    case "slider":
+                    case "blurSlider":
+                        Array.from(document.getElementsByClassName("slider")).forEach(
+                            (element) => {
+                                if (option.css == element.getAttribute("data-css")) {
+                                    result = element.value;
+                                }
+                            }
+                        );
+                        break;
+
+                    case "selector":
+                        Array.from(
+                            document.getElementsByClassName(
+                                "selector emby-select-withcolor emby-select"
+                            )
+                        ).forEach((element) => {
+                            if (option.css == element.getAttribute("data-css")) {
+                                result = element.selectedOptions[0].innerText;
+                            }
+
+
+                        });
+                        break;
+                    case "googleFonts":
+                        Array.from(
+                            document.getElementsByClassName(
+                                "fonts"
+                            )
+                        ).forEach((element) => {
+                            if (option.css == element.getAttribute("data-css")) {
+                                result = element.value;
+                            }
+                        });
+                        break;
+                }
+                return result;
+            }
+
+            function checkEasterEggs() {
+                var d = new Date();
+
+                if (
+                    (d.getDate() >= 18 && d.getMonth() == 11) ||
+                    (d.getDate() <= 10 && d.getMonth() == 0)
+                ) {
+                    //startChristmas();
+                }
+            }
+
+            function startChristmas() {
+                $.getScript(
+                    "https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js",
+                    function () {
+                        var sf = new Snowflakes({
+                            count: 200,
+                            maxSize: 25,
+                        });
+                    }
+                );
+            }
+            async function setSkin() {
+                saveConfig();
+                ApiClient.getServerConfiguration().then(function (config) {
+                    ApiClient.updateServerConfiguration(config).then(function () {
+                        ApiClient.getNamedConfiguration("branding").then(async function (
+                            brandingConfig
+                        ) {
+                            createCss().then(r => {
+                                console.log("despues de then")
+                                brandingConfig.CustomCss = r;
+                                ApiClient.updateNamedConfiguration(
+                                    "branding",
+                                    brandingConfig
+                                ).then(function () {
+                                    Dashboard.processServerConfigurationUpdateResult();
+                                    window.location.reload(true);
+                                });
+
+                            })
+                        });
+                    });
+                });
+            }
+
+            function hexToRgb(hex) {
+                // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
+                var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+                hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+                    return r + r + g + g + b + b;
+                });
+                var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+                return result ? {
+                    r: parseInt(result[1], 16),
+                    g: parseInt(result[2], 16),
+                    b: parseInt(result[3], 16),
+                } :
+                    null;
+            }
+        </script>
+        <script type="text/javascript">
+            var plugin = {
+                guid: "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3",
+            };
+            $("#configPage").on("pageshow", function () {
+                Dashboard.showLoadingMsg();
+                ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
+                    $("#cssOptions").val(config.selectedCss).change();
+                    Dashboard.hideLoadingMsg();
+                });
+            });
+            $("#configForm").on("submit", function () {
+                Dashboard.showLoadingMsg();
+                ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
+                    config.selectedCss = $("#cssOptions").val();
+                    ApiClient.updatePluginConfiguration(plugin.guid, config).then(
+                        function (result) {
+                            Dashboard.processPluginConfigurationUpdateResult(result);
+                        }
+                    );
+                });
+                return false;
+            });
+        </script>
+        <!-- ALL CSS is made and edited by @prayag17 -->
+        <style>
+            img {
+                width: 100%;
+            }
+
+            fieldset.verticalSection.verticalSection-extrabottompadding {
+                border: 1px solid #333333;
+                border-radius: 10px;
+            }
+
+            legend {
+                font-size: 135%;
+            }
+
+            .img {
+                overflow: hidden;
+            }
+
+            .tooltip {
+                position: relative;
+                display: inline-block;
+                border-bottom: 1px dotted black;
+            }
+
+            .tooltip .tooltiptext {
+                visibility: hidden;
+                width: 400px;
+                background-color: transparent;
+                color: #fff;
+                text-align: center;
+                border-radius: 6px;
+                padding: 5px 0;
+                /* Position the tooltip */
+                position: absolute;
+                z-index: 1;
+                top: -5px;
+                left: 105%;
+            }
+
+            .tooltip:hover .tooltiptext {
+                visibility: visible;
+            }
+
+            input#favcolor {
+                width: 100%;
+                height: 3em !important;
+                background: none;
+                border: none;
+            }
+        </style>
+        <style>
+            .font-select * {
+                -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+            }
+
+            .font-select {
+                font-size: 16px;
+                width: 100%;
+                position: relative;
+                display: inline-block;
+                border-color: red;
+            }
+
+            .font-select .fs-drop {
+                position: absolute;
+                top: 38px;
+                left: 0;
+                z-index: 999;
+                background: #292929;
+                color: #fff;
+                width: 100%;
+                border: 1px solid #aaa;
+                border-top: 0;
+                box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+                border-radius: 0 0 4px 4px;
+            }
+
+            .font-select>span {
+                outline: 0;
+                border-radius: 0.25rem;
+                border: 1px solid #ced4da;
+                display: block;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                height: 38px;
+                line-height: 32px;
+                padding: 3px 8px 3px 8px;
+                color: #fff;
+                background: #292929 url(https://cosycorner.co.nz/wp-content/uploads/revslider/slider-1/white-down-arrow-png-2.png) no-repeat right 0.75em center/8px 9px;
+                -webkit-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                background-size: 1.15em;
+            }
+
+            .font-select-active>span {
+                background-color: #292929;
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+
+            .font-select .fs-results {
+                max-height: 190px;
+                overflow-x: hidden;
+                overflow-y: auto;
+                margin: 0;
+                padding: 0;
+            }
+
+            .font-select .fs-results li {
+                line-height: 80%;
+                padding: 8px;
+                margin: 0;
+                list-style: none;
+                font-size: 18px;
+                white-space: nowrap;
+            }
+
+            .font-select .fs-results li.active {
+                background-color: #3875d7;
+                color: #fff;
+                cursor: pointer;
+            }
+
+            .font-select .fs-search {
+                border-bottom: 1px solid #aaa;
+                padding: 4px;
+                background: #292929;
+            }
+
+            .font-select .fs-search input {
+                padding: 7px;
+                width: 100%;
+                border: 1px solid #aaa;
+                font: 16px Helvetica, Sans-serif;
+                box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
+                border-radius: 0.1875rem;
+                background: #292929;
+                color: #fff
+            }
+
+            .font-picker {
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+                color: #000;
+                width: -webkit-fill-available;
+                pointer-events: auto;
+            }
+
+            .font-picker * {
+                -webkit-box-sizing: border-box;
+                box-sizing: border-box
+            }
+
+            .font-picker.fp-select {
+                outline: 0;
+                border-radius: .25rem;
+                border: 1px solid #292929;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                line-height: 28px;
+                padding: 3px 8px;
+                color: white;
+                background: #292929;
+                -webkit-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                font-size: 16px;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .font-picker.fp-select::after {
+                content: "\e5cf";
+                font-family: 'Material Icons';
+                font-size: 25px;
+            }
+
+            .fp-row,
+            .fp-btns {
+                display: flex
+            }
+
+            .fp-row>input,
+            .fp-row>select {
+                flex: 1
+            }
+
+            .fp-favorite {
+                display: inline-block;
+                width: 24px;
+                height: 24px;
+                margin-right: 2px;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-35.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5c0 201.2-356 429.3-356 429.3z' fill='%23fff'/%3E%3C/svg%3E");
+                background-repeat: no-repeat
+            }
+
+            .fp-favorite.checked {
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-3.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9z' fill='%23d00'/%3E%3C/svg%3E")
+            }
+
+            .font-picker .fp-btn {
+                display: inline-block;
+                background-color: #24272b;
+                color: #fff;
+                padding: 3px 8px;
+                font-size: 14px;
+                border-radius: 5px;
+                border: none;
+                cursor: pointer
+            }
+
+            .font-picker .fp-btn:hover {
+                background-color: #333;
+                -webkit-box-shadow: 0 0 4px #ddd;
+                box-shadow: 0 0 4px #ddd
+            }
+
+            .font-picker .fp-btn:active {
+                background-color: #fff;
+                color: #000
+            }
+
+            .font-picker .fp-btns {
+                position: absolute;
+                top: 6px;
+                right: 12px
+            }
+
+            .font-picker .fp-btn.apply {
+                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important
+            }
+
+            .font-picker .fp-header {
+                flex: none;
+                border-bottom: 1px solid #dee2e6;
+                padding: 4px 8px;
+                font-size: 20px
+            }
+
+            .font-picker .fp-header h5 {
+                margin: 0;
+                line-height: 1.5;
+                font-weight: 500
+            }
+
+            .font-picker .fp-header .fp-icons {
+                float: right;
+                margin-top: -2px
+            }
+
+            .font-picker .fp-header .fp-icons>span {
+                cursor: pointer
+            }
+
+            .fp-modal-open {
+                overflow: hidden
+            }
+
+            .font-picker .fp-modal-backdrop {
+                position: fixed;
+                top: 0;
+                left: 0;
+                z-index: 1040;
+                width: 100%;
+                height: 100%;
+                background-color: #000;
+                opacity: .5
+            }
+
+            .font-picker .fp-modal {
+                display: none;
+                flex-flow: column;
+                position: fixed;
+                height: 800px;
+                max-height: 95%;
+                width: 400px;
+                max-width: 95%;
+                background: #fff;
+                z-index: 1050;
+                box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+                border-radius: 4px;
+                left: 50%;
+                transform: translateX(-50%);
+                top: 15px;
+                bottom: 15px
+            }
+
+            .font-picker .fp-filter {
+                font-size: 12px;
+                border-bottom: 1px solid #aaa;
+                padding: 6px;
+                flex: none
+            }
+
+            .font-picker .fp-lang,
+            .font-picker .fp-search {
+                width: 100%;
+                font-size: 13px;
+                border: 1px solid #ced4da;
+                color: #495057;
+                box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06);
+                border-radius: .1875rem
+            }
+
+            .font-picker .fp-search:focus {
+                box-shadow: 0 0 0 2px #bfdeff
+            }
+
+            .font-picker .fp-search-wrap {
+                position: relative
+            }
+
+            .font-picker .fp-clear {
+                margin-left: 8px;
+                vertical-align: -2px;
+                width: 16px;
+                height: 16px;
+                display: inline-block;
+                cursor: pointer;
+                background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath fill='%23aaa' d='M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490c270.6,0,490-219.4,490-490C990,229.4,770.6,10,500,10z M718.5,631.1c24.1,24.1,24.1,63.3,0,87.4s-63.3,24.1-87.4,0L500,587.4L368.9,718.5c-24.1,24.1-63.3,24.1-87.4,0c-24.1-24.1-24.1-63.3,0-87.4L412.6,500L281.5,368.9c-24.1-24.1-24.1-63.3,0-87.4c24.1-24.1,63.3-24.1,87.4,0L500,412.6l131.1-131.1c24.1-24.1,63.3-24.1,87.4,0s24.1,63.3,0,87.4L587.4,500L718.5,631.1z'/%3e%3c/svg%3e") no-repeat right center/16px 16px
+            }
+
+            .font-picker .fp-search-wrap .fp-clear {
+                position: absolute;
+                top: 6px;
+                right: 4px
+            }
+
+            .font-picker .fp-lang {
+                padding: 4px 2px;
+                background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
+                -moz-appearance: none;
+                -webkit-appearance: none;
+                appearance: none;
+                outline: 0
+            }
+
+            .font-picker .fp-search {
+                padding: 5px 6px
+            }
+
+            .font-picker .fp-sample {
+                flex: none;
+                border-bottom: 1px solid #ced4da;
+                font-size: 18px;
+                height: 50px;
+                padding: 0 6px;
+                line-height: 50px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis
+            }
+
+            .font-picker .hr {
+                border-bottom: 1px solid #ced4da;
+                margin: 6px -6px
+            }
+
+            .font-picker .fp-divider {
+                background-color: #eee;
+                color: #666;
+                font-size: 14px !important;
+                padding: 6px 8px;
+                border-bottom: 1px solid #ced4da;
+                border-top: 1px solid #ced4da;
+                text-align: center;
+                cursor: default !important
+            }
+
+            .font-picker [contenteditable] {
+                outline: none
+            }
+
+            .font-picker .fp-results {
+                list-style: none;
+                overflow-x: hidden;
+                overflow-y: auto;
+                margin: 0;
+                padding: 0;
+                -webkit-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                margin-top: -1px;
+                outline: none
+            }
+
+            .font-picker .fp-results li {
+                padding: 6px 8px;
+                list-style: none;
+                font-size: 16px;
+                white-space: nowrap;
+                cursor: pointer
+            }
+
+            .font-picker .fp-results li>small {
+                font-size: 10px;
+                color: #999;
+                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important
+            }
+
+            .font-picker .fp-results li.fp-hover {
+                background-color: #d5e2f6
+            }
+
+            .font-picker .fp-results li.fp-active {
+                background-color: #3875d7;
+                color: #fff;
+                font-size: 18px;
+                padding: 8px;
+                position: relative
+            }
+
+            .font-picker .fp-results li.fp-active small {
+                color: #fff
+            }
+
+            .font-picker .fp-variants {
+                margin-top: 3px;
+                font-size: 12px;
+                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important
+            }
+
+            .font-picker .fp-pill {
+                -webkit-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                display: inline-block;
+                padding: 2px 6px;
+                margin-bottom: 2px;
+                white-space: nowrap;
+                border-radius: 5rem;
+                background-color: #eee;
+                color: #555;
+                cursor: pointer
+            }
+
+            .font-picker .fp-variants .fp-pill {
+                padding: 1px 4px;
+                border-radius: 5rem;
+                background-color: #eee;
+                color: #555
+            }
+
+            .font-picker .fp-pill.checked {
+                background-color: #000;
+                color: #fff
+            }
+
+            .font-picker .fp-variants .fp-pill.italic {
+                font-style: italic
+            }
+
+            .font-picker .fp-variants .fp-pill.italic.checked {
+                background-color: #804;
+                font-style: italic
+            }
+
+            /***
+Spectrum Colorpicker v1.8.1
+https://github.com/bgrins/spectrum
+Author: Brian Grinstead
+License: MIT
+***/
+
+            .sp-container {
+                position: absolute;
+                top: 0;
+                left: 0;
+                display: inline-block;
+                *display: inline;
+                *zoom: 1;
+                /* https://github.com/bgrins/spectrum/issues/40 */
+                z-index: 9999994;
+                overflow: hidden;
+            }
+
+            .sp-container.sp-flat {
+                position: relative;
+            }
+
+            /* Fix for * { box-sizing: border-box; } */
+
+            .sp-container,
+            .sp-container * {
+                -webkit-box-sizing: content-box;
+                -moz-box-sizing: content-box;
+                box-sizing: content-box;
+            }
+
+            /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
+
+            .sp-top {
+                position: relative;
+                width: 100%;
+                display: inline-block;
+            }
+
+            .sp-top-inner {
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+            }
+
+            .sp-color {
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 20%;
+            }
+
+            .sp-hue {
+                position: absolute;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                left: 84%;
+                height: 100%;
+            }
+
+            .sp-clear-enabled .sp-hue {
+                top: 33px;
+                height: 77.5%;
+            }
+
+            .sp-fill {
+                padding-top: 80%;
+            }
+
+            .sp-sat,
+            .sp-val {
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+
+            .sp-alpha-enabled .sp-top {
+                margin-bottom: 18px;
+                flex-shrink: 0;
+            }
+
+            .sp-alpha-enabled .sp-alpha {
+                display: block;
+            }
+
+            .sp-alpha-handle {
+                position: absolute;
+                top: -4px;
+                bottom: -4px;
+                width: 6px;
+                left: 50%;
+                cursor: pointer;
+                border: 1px solid black;
+                background: white;
+                opacity: .8;
+            }
+
+            .sp-alpha {
+                display: none;
+                position: absolute;
+                bottom: -18px;
+                right: 0;
+                left: 0;
+                height: 15px;
+            }
+
+            .sp-alpha-inner {
+                border: solid 1px #333;
+            }
+
+            .sp-clear {
+                display: none;
+            }
+
+            .sp-clear.sp-clear-display {
+                background-position: center;
+            }
+
+            .sp-clear-enabled .sp-clear {
+                display: block;
+                position: absolute;
+                top: 0px;
+                right: 0;
+                bottom: 0;
+                left: 84%;
+                height: 28px;
+            }
+
+            /* Don't allow text selection */
+
+            .sp-container,
+            .sp-replacer,
+            .sp-preview,
+            .sp-dragger,
+            .sp-slider,
+            .sp-alpha,
+            .sp-clear,
+            .sp-alpha-handle,
+            .sp-container.sp-dragging .sp-input,
+            .sp-container button {
+                -webkit-user-select: none;
+                -moz-user-select: -moz-none;
+                -o-user-select: none;
+                user-select: none;
+            }
+
+            .sp-container.sp-input-disabled .sp-input-container {
+                display: none;
+            }
+
+            .sp-container.sp-buttons-disabled .sp-button-container {
+                display: none;
+            }
+
+            .sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
+                display: none;
+            }
+
+            .sp-palette-only .sp-picker-container {
+                display: none;
+            }
+
+            .sp-palette-disabled .sp-palette-container {
+                display: none;
+            }
+
+            .sp-initial-disabled .sp-initial {
+                display: none;
+            }
+
+            /* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
+
+            .sp-sat {
+                background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
+                background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
+                background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+                background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+                background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+                background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
+                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
+                filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
+            }
+
+            .sp-val {
+                background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
+                background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
+                background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+                background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+                background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+                background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
+                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
+                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
+            }
+
+            .sp-hue {
+                background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+                background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+                background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+                background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
+                background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+                background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+            }
+
+            /* IE filters do not support multiple color stops.
+   Generate 6 divs, line them up, and do two color gradients for each.
+   Yes, really.
+ */
+
+            .sp-1 {
+                height: 17%;
+                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
+            }
+
+            .sp-2 {
+                height: 16%;
+                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
+            }
+
+            .sp-3 {
+                height: 17%;
+                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
+            }
+
+            .sp-4 {
+                height: 17%;
+                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
+            }
+
+            .sp-5 {
+                height: 16%;
+                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
+            }
+
+            .sp-6 {
+                height: 17%;
+                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
+            }
+
+            .sp-hidden {
+                display: none !important;
+            }
+
+            /* Clearfix hack */
+
+            .sp-cf:before,
+            .sp-cf:after {
+                content: "";
+                display: table;
+            }
+
+            .sp-cf:after {
+                clear: both;
+            }
+
+            .sp-cf {
+                *zoom: 1;
+            }
+
+            /* Mobile devices, make hue slider bigger so it is easier to slide */
+
+            @media (max-device-width: 480px) {
+                .sp-color {
+                    right: 40%;
+                }
+
+                .sp-hue {
+                    left: 63%;
+                }
+
+                .sp-fill {
+                    padding-top: 60%;
+                }
+            }
+
+            .sp-dragger {
+                border-radius: 5px;
+                height: 5px;
+                width: 5px;
+                border: 1px solid #fff;
+                background: #000;
+                cursor: pointer;
+                position: absolute;
+                top: 0;
+                left: 0;
+            }
+
+            .sp-slider {
+                position: absolute;
+                top: 0;
+                cursor: pointer;
+                height: 3px;
+                left: -1px;
+                right: -1px;
+                border: 1px solid #000;
+                background: white;
+                opacity: .8;
+            }
+
+            /*
+Theme authors:
+Here are the basic themeable display options (colors, fonts, global widths).
+See http://bgrins.github.io/spectrum/themes/ for instructions.
+*/
+            /*Edited by Prayag17*/
+
+            .sp-container {
+                background-color: rgb(62 62 62 / 99%);
+                padding: 0;
+                border-radius: 10px;
+                box-shadow: 0 0 15px #111;
+                display: flex;
+                flex-direction: column;
+                flex-flow: column-reverse;
+            }
+
+            .sp-container,
+            .sp-container button,
+            .sp-container input,
+            .sp-color,
+            .sp-hue,
+            .sp-clear {
+                font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+                -webkit-box-sizing: border-box;
+                -moz-box-sizing: border-box;
+                -ms-box-sizing: border-box;
+                box-sizing: border-box;
+            }
+
+            .sp-top {
+                margin-bottom: 3px;
+            }
+
+            .sp-color,
+            .sp-hue,
+            .sp-clear {
+                border: solid 1px #666;
+            }
+
+            /* Input */
+
+            .sp-input-container {
+                float: right;
+                width: 100px;
+                margin-bottom: 4px;
+            }
+
+            .sp-initial-disabled .sp-input-container {
+                width: 100%;
+            }
+
+            .sp-input {
+                font-size: 12px !important;
+                border: 1px inset;
+                padding: 4px 5px;
+                margin: 0;
+                width: 100%;
+                background: transparent;
+                border-radius: 3px;
+                color: #fff;
+            }
+
+            .sp-input:focus {
+                border: 1px solid orange;
+            }
+
+            .sp-input.sp-validation-error {
+                border: 1px solid red;
+                background: #fdd;
+            }
+
+            .sp-picker-container,
+            .sp-palette-container {
+                float: left;
+                position: relative;
+                padding: 10px;
+            }
+
+            .sp-picker-container {
+                width: calc(100% - 20px);
+                display: flex;
+                flex-wrap: wrap;
+                grid-gap: 5px;
+            }
+
+            /* Palettes */
+
+            .sp-palette-container {
+                border-bottom: 1px solid #5b5b5b;
+            }
+
+            .sp-palette-only .sp-palette-container {
+                border: 0;
+            }
+
+            .sp-palette .sp-thumb-el {
+                display: block;
+                position: relative;
+                float: left;
+                width: 24px;
+                height: 15px;
+                margin: 3px;
+                cursor: pointer;
+                border: solid 2px transparent;
+            }
+
+            .sp-palette .sp-thumb-el:hover,
+            .sp-palette .sp-thumb-el.sp-thumb-active {
+                border-color: orange;
+            }
+
+            .sp-thumb-el {
+                position: relative;
+            }
+
+            /* Initial */
+
+            .sp-initial {
+                float: left;
+                border: solid 1px #333;
+            }
+
+            .sp-initial span {
+                width: 30px;
+                height: 25px;
+                border: none;
+                display: block;
+                float: left;
+                margin: 0;
+            }
+
+            .sp-initial .sp-clear-display {
+                background-position: center;
+            }
+
+            /* Buttons */
+
+            .sp-palette-button-container,
+            .sp-button-container {
+                float: right;
+            }
+
+            /* Replacer (the little preview div that shows up instead of the <input>) */
+
+            .sp-replacer {
+                margin: 0;
+                overflow: hidden;
+                cursor: pointer;
+                padding: 4px;
+                border: 1px solid #333;
+                background: transparent;
+                width: -webkit-fill-available;
+                vertical-align: middle;
+                border-radius: 2.5px;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .sp-replacer.sp-disabled {
+                cursor: default;
+                border-color: silver;
+                color: silver;
+            }
+
+            .sp-dd {
+                padding: 0;
+                height: 0;
+                line-height: 0;
+                float: left;
+                font-size: 10px;
+                width: 16px;
+                color: white;
+            }
+
+            .sp-preview {
+                position: relative;
+                width: calc(100% - 26px);
+                height: 20px;
+                border: none;
+                float: left;
+                z-index: 0;
+            }
+
+            .sp-palette {
+                *width: 220px;
+                max-width: 220px;
+            }
+
+            .sp-palette .sp-thumb-el {
+                width: 16px;
+                height: 16px;
+                margin: 2px 1px;
+                border: solid 1px #d0d0d0;
+            }
+
+            .sp-container {
+                padding-bottom: 0;
+            }
+
+            /* Buttons: http://hellohappy.org/css3-buttons/ */
+
+            .sp-container button {
+                border: none;
+                border-radius: 50px;
+                color: #fff;
+                font-size: 15px;
+                padding: 4px 8px;
+                text-align: center;
+                vertical-align: middle;
+                background: #2db93c !important;
+                transition: .2s;
+            }
+
+            .sp-container button:hover {
+                background-color: #23802d !important;
+                cursor: pointer;
+            }
+
+            .sp-container button:active {
+                border: 1px solid #aaa;
+                border-bottom: 1px solid #888;
+                -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+                -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+                -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+                -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+                box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+            }
+
+            .sp-cancel:hover {
+                text-decoration: none;
+                background: #b23232 !important;
+            }
+
+            .sp-cancel {
+                font-size: 15px;
+                color: white;
+                margin: 0;
+                padding: 4px 8px;
+                margin-right: 5px;
+                vertical-align: middle;
+                text-decoration: none;
+                background: #d93f3f !important;
+                border-radius: 50px;
+                transition: .2s;
+            }
+
+            .sp-palette span:hover,
+            .sp-palette span.sp-thumb-active {
+                border-color: #000;
+            }
+
+            .sp-preview,
+            .sp-alpha,
+            .sp-thumb-el {
+                position: relative;
+                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+            }
+
+            .sp-preview-inner,
+            .sp-alpha-inner,
+            .sp-thumb-inner {
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+            }
+
+            .sp-palette .sp-thumb-inner {
+                background-position: 50% 50%;
+                background-repeat: no-repeat;
+            }
+
+            .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
+                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
+            }
+
+            .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
+                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
+            }
+
+            .sp-clear-display {
+                background-repeat: no-repeat;
+                background-position: center;
+                background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
+            }
+        </style>
+
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
index 4714deb..9f52371 100644
--- a/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
+++ b/Jellyfin.Plugin.SkinManager/Configuration/configurationpage.html
@@ -3,23 +3,39 @@
 
 <head>
     <title>Skin Manager</title>
-    <link href="/path/to/dist/jquery.fontpicker.min.css" rel="stylesheet">
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="/path/to/dist/jquery.fontpicker.min.js"></script>
-
-    <link href="/path/to/dist/jquery.fontpicker.min.css" rel="stylesheet">
-    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
-    <script src="/path/to/dist/jquery.fontpicker.min.js"></script>
 </head>
 
 <body>
-    <div data-role="page" class="page type-interior pluginConfigurationPage tbsConfigurationPage" data-require="emby-input,emby-button" data-controller="__plugin/fontpicker.js">
+    <div id="skinManagerPage" data-role="page"
+        class="page type-interior pluginConfigurationPage tbsConfigurationPage withTabs"
+        data-require="emby-input,emby-button" data-controller="__plugin/fontpicker.js">
+        <script src="/web/configurationpage?name=controls.Control.js"></script>
+        <script src="/web/configurationpage?name=controls.ColorControl.js"></script>
+        <script src="/web/configurationpage?name=controls.SliderControl.js"></script>
+        <script src="/web/configurationpage?name=controls.CheckBoxControl.js"></script>
+        <script src="/web/configurationpage?name=controls.NumberControl.js"></script>
+        <script src="/web/configurationpage?name=controls.SelectControl.js"></script>
+        <script src="/web/configurationpage?name=controls.FontPickerControl.js"></script>
+        <script src="/web/configurationpage?name=controls.TextAreaControl.js"></script>
+        <script src="/web/configurationpage?name=controls.Category.js"></script>
+        <script src="/web/configurationpage?name=skin.js"></script>
+        <script src="/web/configurationpage?name=fontpicker.js"></script>
+        <script src="/web/configurationpage?name=colorpicker.js"></script>
+        <script src="/web/configurationpage?name=MainController.js"></script>
+        <script src="/web/configurationpage?name=common.js"></script>
+        <script src="/web/configurationpage?name=ConfigController.js"></script>
+
+
+        <link rel="stylesheet" href="/web/configurationpage?name=style.css" />
+
         <div data-role="content">
             <div class="content-primary">
-                <form class="tbsConfigurationPage">
+                <div class="tbsConfigurationPage">
                     <div class="sectionTitleContainer flex align-items-center">
                         <h2 class="sectionTitle">Skin Manager</h2>
-                        <a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank" href="https://prayag17.github.io/jellyfin-plugin-skin-manager/src/html/help.html">Help</a>
+                        <a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank"
+                            href="https://prayag17.github.io/jellyfin-plugin-skin-manager/src/html/help.html">Help</a>
                     </div>
                     <div class="verticalSection">
                         <p>Select the skin you want to install and click Set Skin</p>
@@ -28,871 +44,69 @@
                     <div class="allOptions">
                         <div class="selectContainer">
                             <label for="css">Skin</label>
-                            <select is="emby-select" id="cssOptions" onchange="updateSelectors()"></select>
+                            <select is="emby-select" id="cssOptions"></select>
                             <br />
                             <div class="fieldDescription" id="description"></div>
                         </div>
-                        <div class="checkboxList checkboxList-verticalwrap" id="options"></div>
+                        <button is="emby-button" type="button" class="raised block" id="setSkin"><span>Set
+                                Skin</span></button>
                         <br />
+                        <div class="checkboxList checkboxList-verticalwrap" id="options"></div>
+
+
                     </div>
-                </form>
+                </div>
             </div>
         </div>
         <script type="text/javascript">
             var data;
             var fonts;
-            var hasGoogleFont = false;
+            let skin;
+            var skins = [];
 
-            function start() {
-
-                Dashboard.showLoadingMsg();
-                $.getJSON(
-                    "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/skins-3.0.json",
-                    function(json) {
-                        $.getJSON(
-                            "https://www.googleapis.com/webfonts/v1/webfonts?sort=popularity&key=AIzaSyB_bPGsf0vxnpO9GmkBjeoEIQ7rE9rbNck",
-                            function(jsonFonts) {
-                                fonts = jsonFonts;
-                            }
-                        );
-                        data = json;
-                        loadSkins();
-                        Dashboard.hideLoadingMsg();
-                        checkEasterEggs();
+            console.log("Main page loaded");
+            const setSkinManagerTabs = function () {
+                LibraryMenu.setTabs('skin manager', 0, getTabs);
+            };
+            if (!window.SkinManagerMainViewListener) {
+                window.SkinManagerMainViewListener = function (e) {
+                    if (e.target && e.target.id === 'skinManagerPage') {
+                        setSkinManagerTabs();
                     }
-                );
+                };
+                document.addEventListener('viewshow', window.SkinManagerMainViewListener);
+            }
+            setSkinManagerTabs();
+
+            //initWithDebug()
+            const controller = new MainController("url/del/json.json");
+            controller.initDebug();
+
+
+
+
+            function printCss() {
+                console.log(skin.generateCSS());
             }
 
-            function loadSkins() {
-                var cssOptions = document.getElementById("cssOptions");
-
-                data.forEach((element) => {
-                    var opt = document.createElement("option");
-                    opt.appendChild(document.createTextNode(element.name));
-                    opt.value = element.defaultCss;
-                    cssOptions.appendChild(opt);
-                });
-                updateSelectors();
-                loadConfig();
-                preloadPreviews();
-
-            }
-
-            function loadOptions(skin) {
-                var html = "";
-                html += '<div data-role="controlgroup">';
-                skin.categories.forEach((categorie) => {
-                    if (categorie.options.length != 0) {
-                        html += getSection(categorie.name);
-                    }
-
-                    categorie.options.forEach((element) => {
-                        if (element.type == "checkBox") {
-                            html += getCheckBox(element);
-                        } else if (element.type == "colorPicker") {
-                            html += getColorPicker(element);
-                        } else if (element.type == "number") {
-                            html += getNumber(element);
-                        } else if (element.type == "selector") {
-                            html += getSelector(element);
-                        } else if (element.type == "slider") {
-                            html += getSlider(element);
-                        } else if (element.type == "googleFonts") {
-                            html += getFonts(element);
-                        } else if (element.type == "blurSlider") {
-                            html += getBlurSlider(element);
-                        }
-                    });
-                });
-                html += "</fieldset>";
-                html +=
-                    '<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()><span>Set Skin</span></button>';
-                html += loadPreviews(skin);
-                html += "</div>";
-                $("#options").html(html).trigger("create");
-                generatePlugins();
-            }
-
-            function preloadPreviews() {
-                data.forEach((skin) => {
-                    if (skin.previews != undefined) {
-                        skin.previews.forEach((img) => {
-                            var image = new Image();
-                            image.src = img.url;
-                        });
-                    }
-                });
-            }
-
-            function loadPreviews(skin) {
-                if (skin.previews == undefined) {
-                    return "";
-                }
-                var html = "";
-
-                html += '<h2 class="sectionTitle" >Previews</h2>';
-                skin.previews.forEach((element) => {
-                    html += getImage(element.url);
-                    html += getImgnames(element.name);
-                });
-                return html;
-            }
-
-            function getCheckBox(option, saved) {
-                var html = "";
-                var checked = saved == "true" ? 'checked="checked"' : "";
-                var id = "chkFolder";
-                var name = option.name;
-                var css = option.css;
-                var description = option.description;
-
-                //html += '<label><input is="emby-checkbox" class="chkLibrary" type="checkbox" data-mini="true" id="' + id + '" name="' + id + '" data-value="' + value + '" '+' /><span>' + name  + '</span></label>';
-                html +=
-                    '<div class="checkboxContainer checkboxContainer-withDescription"><label><input class = "checkbox" type="checkbox" is="emby-checkbox" id="' +
-                    id +
-                    '"name="' +
-                    id +
-                    '" data-css="' +
-                    css +
-                    '" ' +
-                    checked +
-                    " /><span>" +
-                    name +
-                    "</span>" +
-                    getToolTip(option) +
-                    '</label><div class="fieldDescription checkboxFieldDescription">' +
-                    description +
-                    "</div></div>";
-                return html;
-            }
-            var colorPickers = {};
-
-            function getColorPicker(option, saved) {
-                var html = "";
-                var id = "colorPicker" + Object.keys(colorPickers).length;
-                var name = option.name;
-                var defaultValue =
-                    option.default == undefined ? "#000000" : option.default;
-                defaultValue = saved == undefined ? defaultValue : saved;
-                colorPickers[id] = defaultValue
-                var css = option.css;
-                var description = option.description;
-                var mode = option.mode;
-                html +=
-                    '<div class="inputContainer"><label></span>' +
-                    getToolTip(option) +
-                    '</label><input class = color type=text  value="' +
-                    defaultValue +
-                    '"data-css = "' +
-                    css +
-                    '" data-mode="' +
-                    mode +
-                    '" id="' +
-                    id +
-                    '" name="' +
-                    id +
-                    '" label="' +
-                    name +
-                    '"  /><span>' +
-                    name +
-                    '<div class="fieldDescription">' +
-                    description +
-                    "</div></div>";
-                return html;
-            }
-
-            function getNumber(option, saved) {
-                var html = "";
-                var id = "number";
-                var name = option.name;
-                var css = option.css;
-                var step = option.step == undefined ? 1 : option.step;
-                var defaultValue = option.default;
-                defaultValue = saved == undefined ? defaultValue : saved;
-                var description = option.description;
-                //html += '<label for=number><input is="emby-input" type=number value=' + defaultValue + ' class = "number" data-css = "'+ css+ '" +  data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name  + '</span></label><br>';
-                html +=
-                    '<div class="inputContainer"><input is="emby-input" type="number" class = "number" value=' +
-                    defaultValue +
-                    " step=" +
-                    step +
-                    ' data-css = "' +
-                    css +
-                    '"  id="' +
-                    id +
-                    '" name="' +
-                    id +
-                    '"  min="0" max="300" label="' +
-                    name +
-                    '" /><div class="fieldDescription">' +
-                    description +
-                    "</div></div>";
-                return html;
-            }
-
-            function getSelector(option, saved) {
-                var html = "";
-                var id = "selector";
-                var name = option.name;
-                var css = option.css;
-                var defaultValue = option.default;
-                var description = option.description;
-                //html += '<label for=number><input is="emby-input" type=number value=' + defaultValue + ' class = "number" data-css = "'+ css+ '" +  data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name  + '</span></label><br>';
-                html +=
-                    '<div class="selectContainer"><select is="emby-select"  data-css= "' +
-                    css +
-                    '"class="selector" label="' +
-                    name +
-                    '">' +
-                    getOptions(option, saved) +
-                    "</select></div>";
-                return html;
-            }
-            var savedGoogleFont;
-
-            function getFonts(option, saved) {
-                var html = "";
-
-                var name = "Change Font";
-                var css =
-                    "html {font-family:  '$',sans-serif ;  } body,h1,h2,h3 { font-family: '$' ,sans-serif;}";
-                var description = "Change the default fonts";
-                //html += '<label for=number><input is="emby-input" type=number value=' + defaultValue + ' class = "number" data-css = "'+ css+ '" +  data-mini="true" id="' + id + '" name="' + id + '" data-name="' + name + '" ' + ' /><span>' + name  + '</span></label><br>';
-                //html += '<div class="selectContainer" ><select is="emby-select" id = "googleFonts" data-css= "'+css + '"class="selector" label="'+name+' " onchange="updateFontPreview()">' + getFontOptions(fonts)+'</select></div>'
-                //html += '<div class = "fontPreview"> This is a preview </div>';
-                //html += '<div id="font-picker"></div><div class = "apply-font"> This is a preview </div>'
-                //html += '	<div class="selectContainer"><label>Change Font </label><br> <input id="font-picker" type="text"> </div>';
-                html += '<div class="selectContainer"><label>Change Font </label><br> <input class="fonts" data-css= "' + option.css + '">'
-                if (saved != undefined) {
-                    savedGoogleFont = saved;
-                }
-                hasGoogleFont = true;
-                return html;
-            }
-
-            function getFontPreview(categories, option, selections, name) {
-                var html = "";
-                if (name == "Fonts") {
-                    html +=
-                        '<div class="fontCont><p style="font-family: ' +
-                        categories.option.selections.value +
-                        ';">Hello, This is your selected font-family.</p></div>"';
-                    return html;
-                } else {
-                    return "";
-                }
-            }
-
-            function getOptions(option, saved) {
-                var html = "";
-                var selections = option.selections;
-                var css = option.css;
-                selections.forEach((element) => {
-                    var name = element.name;
-                    var value = element.css;
-                    var selected = saved == name ? ' selected="selected"' : "";
-                    html +=
-                        '<option value= "' +
-                        value + '"' +
-                        selected +
-                        ">" +
-                        name +
-                        "</option>";
-                });
-                return html;
-            }
-
-            function getSlider(option, saved) {
-                var html = "";
-                var id = "slider";
-                var name = option.name;
-                var css = option.css;
-                var step = option.step == undefined ? 1 : option.step;
-                var defaultValue = option.default;
-                defaultValue = saved == undefined ? defaultValue : saved;
-                var description = option.description;
-                html +=
-                    +'<div class="inputContainer">' +
-                    '<input type="range" class="slider" value="' + defaultValue + '" step="' + step + '" data-css="' + css + '" id="' + id + '" name="' + id + '"  min="0" max="300" label="' + name + '">' +
-                    '<div class="fieldDescription">' +
-                    description +
-                    +'</div>' +
-                    '</div>';
-                return html;
-            }
-
-            var blurSliderCount = 0;
-
-            function getBlurSlider(option, saved) {
-
-                var html = "";
-                var id = "blurSlider" + blurSliderCount;
-                blurSliderCount++;
-                var name = option.name;
-                var css = option.css;
-                var step = option.step == undefined ? 1 : option.step;
-                var defaultValue = option.default;
-                defaultValue = saved == undefined ? defaultValue : saved;
-                var description = option.description;
-                html +=
-                    '<div class="inputContainer"><label><span>' + name + '</span></label><input type="range" class="slider" value="' + defaultValue + '" oninput ="updateBlur(' + "'" + id + "'" + ')"' + 'step="' + step + '" data-css="' + css + '" id="' + id + '" name="' + id + '" min="0" max="40" label="' + name + '">' +
-                    '<div class="fieldDescription">' + description + '</div>' +
-                    '</div>' +
-                    '<div class="img"><img id="' + id + 'image"' + 'src="https://i.imgur.com/sMDQSdV.png"></div>';
-                return html;
-            }
-
-            function updateBlur(id) {
-                var slider = document.getElementById(id);
-                var image = document.getElementById(id + 'image');
-                image.style.filter = "blur(" + slider.value + "px)";
-            }
-
-            function updateBlurSliders() {
-                var sliders = document.getElementsByClassName("slider");
-                Array.from(sliders).forEach(slider => {
-                    if (slider.id.substring(0, 10) == "blurSlider") {
-                        updateBlur(slider.id);
-                    }
-                })
-            }
-
-            function getImage(url) {
-                var html = "";
-                html +=
-                    '<fieldset class="verticalSection verticalSection-extrabottompadding"><img src="' +
-                    url +
-                    '">';
-                return html;
-            }
-
-            function getImgnames(name) {
-                var html = "";
-                html += "<legend>" + name + "</legend></fieldset>";
-                return html;
-            }
-
-            function getSection(name) {
-                var html = "";
-                html += "</fieldset>";
-                html +=
-                    '<fieldset class="verticalSection verticalSection-extrabottompadding">';
-                html += "<legend>" + name + "</legend>";
-                return html;
-            }
-
-            function getToolTip(option) {
-                if (option.preview == undefined) {
-                    return "";
-                }
-                html = "";
-                html +=
-                    '<div class="tooltip"><span class="material-icons">info</span><span class="tooltiptext">';
-                html += '<img src="' + option.preview + '">';
-                html += "</span></div>";
-                return html;
-            }
-
-            async function createCss() {
-
-                var savedHtml = "";
-                //process checkbox
-                var css = $("#cssOptions").val();
-                savedHtml += document.getElementById("cssOptions").innerHTML;
-                var checkboxes = document.getElementsByClassName("checkbox");
-
-                var selectedOptions = $(".checkbox:checked")
-                    .map(function() {
-                        return this.getAttribute("data-css");
-                    })
-                    .get();
-
-                selectedOptions.forEach((element) => {
-                    css += element + "\n";
-                });
-
-                //proccess selector
-                var selectors = document.getElementsByClassName("selector");
-                for (var i = 0; i < selectors.length; i++) {
-                    var element = selectors[i]
-                    if(checkForImport(element.selectedOptions[0].value)){
-                        css = element.selectedOptions[0].value + "\n" + css
-                    }else{
-                        css +=
-                            element.selectedOptions[0].value +
-                            "\n";
-                        savedHtml += element.outerHTML;
-                    }
-                }
-
-                //process colorPicker
-                selectedOptions.forEach((element) => {
-                    css += element + "\n";
-                });
-                var inputs = document.getElementsByClassName("color");
-                for (var i = 0; i < inputs.length; i++) {
-                    var element = inputs[i]
-                    var values = $("#" + element.name).spectrum("get")
-                    var mode = element.getAttribute("data-mode");
-                    var color = "";
-                    switch (mode) {
-                        case "hex":
-                            color = "#" + values.toHex();
-                            break;
-                        case "only_numbers":
-                            color = values._r + "," + values._g + "," + values._b ;
-                            break;
-                        default:
-                            color = "rgba(" + values._r + "," + values._g + "," + values._b + "," + values._a + ")";
-                            break;
-                    }
-                    css += element.getAttribute("data-css").replaceAll("$", color) + "\n";
-                }
-
-                //procces number selector
-                var numberSelectors = document.getElementsByClassName("number");
-                for (let element of numberSelectors) {
-                    savedHtml += element.outerHTML;
-                    css +=
-                        element.getAttribute("data-css").replaceAll("$", element.value) +
-                        "\n";
-                }
-
-                //procces slider
-                var sliders = document.getElementsByClassName("slider");
-                for (let element of sliders) {
-                    css +=
-                        element.getAttribute("data-css").replaceAll("$", element.value) +
-                        "\n";
-                }
-
-
-                //procces google Fonts
-                if (document.getElementsByClassName("fonts").length > 0) {
-                    var fontPickers = Array.from(
-                        document.getElementsByClassName(
-                            "fonts"
-                        )
-                    )
-                    for (var i = 0; i < fontPickers.length; i++) {
-                        var element = fontPickers[i]
-                        if (element.value != "") {
-                            var url = "https://fonts.googleapis.com/css?family=" + element.value;
-                            var promise = await fetch(url, {
-                                mode: 'no-cors'
-                            })
-                            var text = await promise.text()
-                            css += text
-                            css += element.getAttribute("data-css").replaceAll("$", element.value.replaceAll("+", " "));
-                        }
-                    }
-                    console.log("fuera del loop")
-                }
-
-                return css
-
-
-            }
-
-            function checkForImport(css){
-                return css.includes("@import")
-            }
-
-
-
-            function generatePlugins() {
-                if (hasGoogleFont) {
-                    createFontPicker()
-                }
-                for (var colorPicker in colorPickers) {
-                    var id = "#" + colorPicker
-                    $(id).spectrum({
-                        color: colorPickers[colorPicker],
-                        showInput: true,
-                        className: "full-spectrum",
-                        showInitial: true,
-                        showPalette: true,
-                        showAlpha: true,
-                        showSelectionPalette: true,
-                        maxSelectionSize: 10,
-                        preferredFormat: "hex",
-                        localStorageKey: "spectrum.demo",
-                        move: function(color) {
-
-                        },
-                        show: function() {
-
-                        },
-                        beforeShow: function() {
-
-                        },
-                        hide: function() {
-
-                        },
-                        change: function() {
-
-                        },
-                        palette: [
-                            ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
-                                "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"
-                            ],
-                            ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
-                                "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"
-                            ],
-                            ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
-                                "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
-                                "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
-                                "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
-                                "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
-                                "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
-                                "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
-                                "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
-                                "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
-                                "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"
-                            ]
-                        ]
-                    });
-                }
-            }
-
-
-            function createFontPicker() {
-                $('input.fonts').fontpicker({
-                    variants: false
-                });
-
-                if (savedGoogleFont != undefined) {
-                    $('input.fonts').val(savedGoogleFont).trigger('change')
-                }
-            }
-
-            function applyFont(font) {
-                console.log("You selected font: " + font);
-
-                // Replace + signs with spaces for css
-                font = font.replace(/\+/g, " ");
-
-                // Split font into family and weight
-                font = font.split(":");
-
-                var fontFamily = font[0];
-                var fontWeight = font[1] || 400;
-
-                // Set selected font on paragraphs
-                $("fontPreview").css({
-                    fontFamily: "'" + fontFamily + "'",
-                    fontWeight: fontWeight,
-                });
-            }
-
-            //$("#font-picker")
-            //.fontselect()
-            //.on("change", function () {
-            //  applyFont(this.value);
-            //});
-
-            function getFontOptions(fonts) {
-                var html = "";
-                var selections = fonts.items;
-                selections.forEach((element) => {
-                    var name = element.family;
-                    var value = element.family;
-                    //var selected = saved==name?'selected="selected"' : "";
-                    var selected = "";
-                    html +=
-                        "<option value=" + value + selected + ">" + name + "</option>";
-                });
-                return html;
-            }
-
-            function updateFontPreview() {
-                var preview = document.getElementsByClassName("fontPreview")[0];
-                var selectedOption = document.getElementById("googleFonts")
-                    .selectedOptions[0].innerText;
-                var url =
-                    "https://fonts.googleapis.com/css?family=" +
-                    selectedOption.replaceAll(" ", "+");
-
-                fetch(url).then(function(response) {
-                    response.text().then(function(text) {
-                        var sheet = document.createElement("style");
-                        sheet.innerHTML =
-                            text + ".fontPreview{font-family:'" + selectedOption + "'}";
-                        preview.appendChild(sheet);
-                    });
-                });
-            }
-
-            function updateSelectors() {
-                var selected = document.getElementById("cssOptions");
-                var description = document.getElementById("description");
-                data.forEach((element) => {
-                    if (element.name == selected.selectedOptions[0].innerText) {
-                        loadOptions(element);
-                        description.innerHTML = element.description;
-                    }
-                });
-                updateBlurSliders();
-            }
-
-            var config = undefined;
-
-            function loadConfig() {
-                var pluginId = "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3";
-
-                ApiClient.getPluginConfiguration(pluginId).then(function(
-                    savedConfig
-                ) {
-                    config = savedConfig;
-
-                    if (!config) {
-                        config.selectedSkin = "";
-                        config.options = [];
-                    }
-                    loadSavedOptions();
-                });
-            }
-
-            function loadSavedOptions() {
-                var skin = undefined;
-                data.forEach((element) => {
-                    if (element.defaultCss == config.selectedSkin) {
-                        skin = element;
-                    }
-                });
-                if (skin == undefined) {
-                    return;
-                }
-                var count = 0;
-                for (let option of document.getElementById("cssOptions").options) {
-                    if (option.value == config.selectedSkin) {
-                        document.getElementById("cssOptions").selectedIndex = count;
-                    }
-                    count++;
-                }
-
-                var savedOptions = config.options;
-                var html = "";
-                html += '<div data-role="controlgroup">';
-                skin.categories.forEach((categorie) => {
-                    if (categorie.options.length != 0) {
-                        html += getSection(categorie.name);
-                    }
-                    var options = categorie.options;
-
-                    options.forEach((element) => {
-                        var savedValue = undefined;
-                        var count = 0;
-                        savedOptions.forEach((savedOption) => {
-                            if (element.css == savedOption) {
-                                savedValue = savedOptions[count + 1];
-                            }
-                            count++;
-                        });
-                        if (element.type == "checkBox") {
-                            html += getCheckBox(element, savedValue);
-                        } else if (element.type == "colorPicker") {
-                            html += getColorPicker(element, savedValue);
-                        } else if (element.type == "number") {
-                            html += getNumber(element, savedValue);
-                        } else if (element.type == "selector") {
-                            html += getSelector(element, savedValue);
-                        } else if (element.type == "slider") {
-                            html += getSlider(element, savedValue);
-                        } else if (element.type == "googleFonts") {
-                            html += getFonts(element, savedValue);
-                        } else if (element.type == "blurSlider") {
-                            html += getBlurSlider(element, savedValue);
-                        }
-                    });
-                });
-                html += "</fieldset>";
-                html +=
-                    '<button is="emby-button" type="button" class="raised block" id="refresh-library" onclick=setSkin()><span>Set Skin</span></button>';
-                html += loadPreviews(skin);
-                html += "</div>";
-
-                $("#options").html(html).trigger("create");
-                generatePlugins()
-
-            }
-
-            function saveConfig() {
-                var pluginId = "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3";
-                config.selectedSkin = $("#cssOptions").val();
-
-                var options = [];
-                var count = 0;
-                data[
-                    document.getElementById("cssOptions").selectedIndex
-                ].categories.forEach((categorie) => {
-                    categorie.options.forEach((option) => {
-                        options[count] = option.css;
-                        options[count + 1] = getValue(option);
-                        count += 2;
-                    });
-                });
-                config.options = options;
-
-                ApiClient.getPluginConfiguration(pluginId).then(function(oldConfig) {
-                    oldConfig = config;
-                    ApiClient.updatePluginConfiguration(pluginId, oldConfig).then(
-                        function(res) {
-                            Dashboard.processPluginConfigurationUpdateResult(res);
-                        }
-                    );
-                });
-            }
-
-            function getValue(option) {
-                var result = "";
-                switch (option.type) {
-                    case "checkBox":
-                        Array.from(
-                            document.getElementsByClassName("checkbox emby-checkbox")
-                        ).forEach((element) => {
-                            if (option.css == element.getAttribute("data-css")) {
-                                result = element.checked ? "true" : "false";
-                            }
-
-                        });
-                        break;
-                    case "number":
-                        Array.from(
-                            document.getElementsByClassName("number emby-input")
-                        ).forEach((element) => {
-                            if (option.css == element.getAttribute("data-css")) {
-                                result = element.value;
-                            }
-
-                        });
-                        break;
-                    case "colorPicker":
-                        Array.from(document.getElementsByClassName("color")).forEach(
-                            (element) => {
-                                if (option.css == element.getAttribute("data-css")) {
-                                    result = element.value;
-                                }
-                            }
-                        );
-                        break;
-                    case "slider":
-                    case "blurSlider":
-                        Array.from(document.getElementsByClassName("slider")).forEach(
-                            (element) => {
-                                if (option.css == element.getAttribute("data-css")) {
-                                    result = element.value;
-                                }
-                            }
-                        );
-                        break;
-
-                    case "selector":
-                        Array.from(
-                            document.getElementsByClassName(
-                                "selector emby-select-withcolor emby-select"
-                            )
-                        ).forEach((element) => {
-                            if (option.css == element.getAttribute("data-css")) {
-                                result = element.selectedOptions[0].innerText;
-                            }
-
-
-                        });
-                        break;
-                    case "googleFonts":
-                        Array.from(
-                            document.getElementsByClassName(
-                                "fonts"
-                            )
-                        ).forEach((element) => {
-                            if (option.css == element.getAttribute("data-css")) {
-                                result = element.value;
-                            }
-                        });
-                        break;
-                }
-                return result;
-            }
-
-            function checkEasterEggs() {
-                var d = new Date();
-
-                if (
-                    (d.getDate() >= 18 && d.getMonth() == 11) ||
-                    (d.getDate() <= 10 && d.getMonth() == 0)
-                ) {
-                    //startChristmas();
-                }
-            }
-
-            function startChristmas() {
-                $.getScript(
-                    "https://unpkg.com/magic-snowflakes/dist/snowflakes.min.js",
-                    function() {
-                        var sf = new Snowflakes({
-                            count: 200,
-                            maxSize: 25,
-                        });
-                    }
-                );
-            }
-            async function setSkin() {
-                saveConfig();
-                ApiClient.getServerConfiguration().then(function(config) {
-                    ApiClient.updateServerConfiguration(config).then(function() {
-                        ApiClient.getNamedConfiguration("branding").then(async function(
-                            brandingConfig
-                        ) {
-                            createCss().then(r => {
-                                console.log("despues de then")
-                                brandingConfig.CustomCss = r;
-                                ApiClient.updateNamedConfiguration(
-                                    "branding",
-                                    brandingConfig
-                                ).then(function() {
-                                    Dashboard.processServerConfigurationUpdateResult();
-                                    window.location.reload(true);
-                                });
-
-                            })
-                        });
-                    });
-                });
-            }
-
-            function hexToRgb(hex) {
-                // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-                var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-                hex = hex.replace(shorthandRegex, function(m, r, g, b) {
-                    return r + r + g + g + b + b;
-                });
-                var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-                return result ? {
-                        r: parseInt(result[1], 16),
-                        g: parseInt(result[2], 16),
-                        b: parseInt(result[3], 16),
-                    } :
-                    null;
-            }
         </script>
         <script type="text/javascript">
             var plugin = {
                 guid: "e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3",
             };
-            $("#configPage").on("pageshow", function() {
+            $("#configPage").on("pageshow", function () {
                 Dashboard.showLoadingMsg();
-                ApiClient.getPluginConfiguration(plugin.guid).then(function(config) {
+                ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
                     $("#cssOptions").val(config.selectedCss).change();
                     Dashboard.hideLoadingMsg();
                 });
             });
-            $("#configForm").on("submit", function() {
+            $("#configForm").on("submit", function () {
                 Dashboard.showLoadingMsg();
-                ApiClient.getPluginConfiguration(plugin.guid).then(function(config) {
+                ApiClient.getPluginConfiguration(plugin.guid).then(function (config) {
                     config.selectedCss = $("#cssOptions").val();
                     ApiClient.updatePluginConfiguration(plugin.guid, config).then(
-                        function(result) {
+                        function (result) {
                             Dashboard.processPluginConfigurationUpdateResult(result);
                         }
                     );
@@ -900,1049 +114,7 @@
                 return false;
             });
         </script>
-        <!-- ALL CSS is made and edited by @prayag17 -->
-        <style>
-            img {
-                width: 100%;
-            }
-            
-            fieldset.verticalSection.verticalSection-extrabottompadding {
-                border: 1px solid #333333;
-                border-radius: 10px;
-            }
-            
-            legend {
-                font-size: 135%;
-            }
-            
-            .img {
-                overflow: hidden;
-            }
-            
-            .tooltip {
-                position: relative;
-                display: inline-block;
-                border-bottom: 1px dotted black;
-            }
-            
-            .tooltip .tooltiptext {
-                visibility: hidden;
-                width: 400px;
-                background-color: transparent;
-                color: #fff;
-                text-align: center;
-                border-radius: 6px;
-                padding: 5px 0;
-                /* Position the tooltip */
-                position: absolute;
-                z-index: 1;
-                top: -5px;
-                left: 105%;
-            }
-            
-            .tooltip:hover .tooltiptext {
-                visibility: visible;
-            }
-            
-            input#favcolor {
-                width: 100%;
-                height: 3em !important;
-                background: none;
-                border: none;
-            }
-        </style>
-        <style>
-            .font-select * {
-                -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-            }
-            
-            .font-select {
-                font-size: 16px;
-                width: 100%;
-                position: relative;
-                display: inline-block;
-                border-color: red;
-            }
-            
-            .font-select .fs-drop {
-                position: absolute;
-                top: 38px;
-                left: 0;
-                z-index: 999;
-                background: #292929;
-                color: #fff;
-                width: 100%;
-                border: 1px solid #aaa;
-                border-top: 0;
-                box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
-                border-radius: 0 0 4px 4px;
-            }
-            
-            .font-select>span {
-                outline: 0;
-                border-radius: 0.25rem;
-                border: 1px solid #ced4da;
-                display: block;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                height: 38px;
-                line-height: 32px;
-                padding: 3px 8px 3px 8px;
-                color: #fff;
-                background: #292929 url(https://cosycorner.co.nz/wp-content/uploads/revslider/slider-1/white-down-arrow-png-2.png) no-repeat right 0.75em center/8px 9px;
-                -webkit-user-select: none;
-                -moz-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
-                background-size: 1.15em;
-            }
-            
-            .font-select-active>span {
-                background-color: #292929;
-                border-bottom-left-radius: 0;
-                border-bottom-right-radius: 0;
-            }
-            
-            .font-select .fs-results {
-                max-height: 190px;
-                overflow-x: hidden;
-                overflow-y: auto;
-                margin: 0;
-                padding: 0;
-            }
-            
-            .font-select .fs-results li {
-                line-height: 80%;
-                padding: 8px;
-                margin: 0;
-                list-style: none;
-                font-size: 18px;
-                white-space: nowrap;
-            }
-            
-            .font-select .fs-results li.active {
-                background-color: #3875d7;
-                color: #fff;
-                cursor: pointer;
-            }
-            
-            .font-select .fs-search {
-                border-bottom: 1px solid #aaa;
-                padding: 4px;
-                background: #292929;
-            }
-            
-            .font-select .fs-search input {
-                padding: 7px;
-                width: 100%;
-                border: 1px solid #aaa;
-                font: 16px Helvetica, Sans-serif;
-                box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
-                border-radius: 0.1875rem;
-                background: #292929;
-                color: #fff
-            }
-            
-            .font-picker {
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-                color: #000;
-                width: -webkit-fill-available;
-                pointer-events: auto;
-            }
-            
-            .font-picker * {
-                -webkit-box-sizing: border-box;
-                box-sizing: border-box
-            }
-            
-            .font-picker.fp-select {
-                outline: 0;
-                border-radius: .25rem;
-                border: 1px solid #292929;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                line-height: 28px;
-                padding: 3px 8px;
-                color: white;
-                background: #292929;
-                -webkit-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
-                font-size: 16px;
-                display: flex;
-                flex-direction: row;
-                justify-content: space-between;
-                align-items: center;
-            }
-            
-            .font-picker.fp-select::after {
-                content: "\e5cf";
-                font-family: 'Material Icons';
-                font-size: 25px;
-            }
-            
-            .fp-row,
-            .fp-btns {
-                display: flex
-            }
-            
-            .fp-row>input,
-            .fp-row>select {
-                flex: 1
-            }
-            
-            .fp-favorite {
-                display: inline-block;
-                width: 24px;
-                height: 24px;
-                margin-right: 2px;
-                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-35.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5c0 201.2-356 429.3-356 429.3z' fill='%23fff'/%3E%3C/svg%3E");
-                background-repeat: no-repeat
-            }
-            
-            .fp-favorite.checked {
-                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-3.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9z' fill='%23d00'/%3E%3C/svg%3E")
-            }
-            
-            .font-picker .fp-btn {
-                display: inline-block;
-                background-color: #24272b;
-                color: #fff;
-                padding: 3px 8px;
-                font-size: 14px;
-                border-radius: 5px;
-                border: none;
-                cursor: pointer
-            }
-            
-            .font-picker .fp-btn:hover {
-                background-color: #333;
-                -webkit-box-shadow: 0 0 4px #ddd;
-                box-shadow: 0 0 4px #ddd
-            }
-            
-            .font-picker .fp-btn:active {
-                background-color: #fff;
-                color: #000
-            }
-            
-            .font-picker .fp-btns {
-                position: absolute;
-                top: 6px;
-                right: 12px
-            }
-            
-            .font-picker .fp-btn.apply {
-                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important
-            }
-            
-            .font-picker .fp-header {
-                flex: none;
-                border-bottom: 1px solid #dee2e6;
-                padding: 4px 8px;
-                font-size: 20px
-            }
-            
-            .font-picker .fp-header h5 {
-                margin: 0;
-                line-height: 1.5;
-                font-weight: 500
-            }
-            
-            .font-picker .fp-header .fp-icons {
-                float: right;
-                margin-top: -2px
-            }
-            
-            .font-picker .fp-header .fp-icons>span {
-                cursor: pointer
-            }
-            
-            .fp-modal-open {
-                overflow: hidden
-            }
-            
-            .font-picker .fp-modal-backdrop {
-                position: fixed;
-                top: 0;
-                left: 0;
-                z-index: 1040;
-                width: 100%;
-                height: 100%;
-                background-color: #000;
-                opacity: .5
-            }
-            
-            .font-picker .fp-modal {
-                display: none;
-                flex-flow: column;
-                position: fixed;
-                height: 800px;
-                max-height: 95%;
-                width: 400px;
-                max-width: 95%;
-                background: #fff;
-                z-index: 1050;
-                box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-                border-radius: 4px;
-                left: 50%;
-                transform: translateX(-50%);
-                top: 15px;
-                bottom: 15px
-            }
-            
-            .font-picker .fp-filter {
-                font-size: 12px;
-                border-bottom: 1px solid #aaa;
-                padding: 6px;
-                flex: none
-            }
-            
-            .font-picker .fp-lang,
-            .font-picker .fp-search {
-                width: 100%;
-                font-size: 13px;
-                border: 1px solid #ced4da;
-                color: #495057;
-                box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06);
-                border-radius: .1875rem
-            }
-            
-            .font-picker .fp-search:focus {
-                box-shadow: 0 0 0 2px #bfdeff
-            }
-            
-            .font-picker .fp-search-wrap {
-                position: relative
-            }
-            
-            .font-picker .fp-clear {
-                margin-left: 8px;
-                vertical-align: -2px;
-                width: 16px;
-                height: 16px;
-                display: inline-block;
-                cursor: pointer;
-                background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath fill='%23aaa' d='M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490c270.6,0,490-219.4,490-490C990,229.4,770.6,10,500,10z M718.5,631.1c24.1,24.1,24.1,63.3,0,87.4s-63.3,24.1-87.4,0L500,587.4L368.9,718.5c-24.1,24.1-63.3,24.1-87.4,0c-24.1-24.1-24.1-63.3,0-87.4L412.6,500L281.5,368.9c-24.1-24.1-24.1-63.3,0-87.4c24.1-24.1,63.3-24.1,87.4,0L500,412.6l131.1-131.1c24.1-24.1,63.3-24.1,87.4,0s24.1,63.3,0,87.4L587.4,500L718.5,631.1z'/%3e%3c/svg%3e") no-repeat right center/16px 16px
-            }
-            
-            .font-picker .fp-search-wrap .fp-clear {
-                position: absolute;
-                top: 6px;
-                right: 4px
-            }
-            
-            .font-picker .fp-lang {
-                padding: 4px 2px;
-                background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
-                -moz-appearance: none;
-                -webkit-appearance: none;
-                appearance: none;
-                outline: 0
-            }
-            
-            .font-picker .fp-search {
-                padding: 5px 6px
-            }
-            
-            .font-picker .fp-sample {
-                flex: none;
-                border-bottom: 1px solid #ced4da;
-                font-size: 18px;
-                height: 50px;
-                padding: 0 6px;
-                line-height: 50px;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis
-            }
-            
-            .font-picker .hr {
-                border-bottom: 1px solid #ced4da;
-                margin: 6px -6px
-            }
-            
-            .font-picker .fp-divider {
-                background-color: #eee;
-                color: #666;
-                font-size: 14px!important;
-                padding: 6px 8px;
-                border-bottom: 1px solid #ced4da;
-                border-top: 1px solid #ced4da;
-                text-align: center;
-                cursor: default!important
-            }
-            
-            .font-picker [contenteditable] {
-                outline: none
-            }
-            
-            .font-picker .fp-results {
-                list-style: none;
-                overflow-x: hidden;
-                overflow-y: auto;
-                margin: 0;
-                padding: 0;
-                -webkit-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
-                margin-top: -1px;
-                outline: none
-            }
-            
-            .font-picker .fp-results li {
-                padding: 6px 8px;
-                list-style: none;
-                font-size: 16px;
-                white-space: nowrap;
-                cursor: pointer
-            }
-            
-            .font-picker .fp-results li>small {
-                font-size: 10px;
-                color: #999;
-                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important
-            }
-            
-            .font-picker .fp-results li.fp-hover {
-                background-color: #d5e2f6
-            }
-            
-            .font-picker .fp-results li.fp-active {
-                background-color: #3875d7;
-                color: #fff;
-                font-size: 18px;
-                padding: 8px;
-                position: relative
-            }
-            
-            .font-picker .fp-results li.fp-active small {
-                color: #fff
-            }
-            
-            .font-picker .fp-variants {
-                margin-top: 3px;
-                font-size: 12px;
-                font-family: "Helvetica Neue", Helvetica, Arial, sans-serif!important
-            }
-            
-            .font-picker .fp-pill {
-                -webkit-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
-                display: inline-block;
-                padding: 2px 6px;
-                margin-bottom: 2px;
-                white-space: nowrap;
-                border-radius: 5rem;
-                background-color: #eee;
-                color: #555;
-                cursor: pointer
-            }
-            
-            .font-picker .fp-variants .fp-pill {
-                padding: 1px 4px;
-                border-radius: 5rem;
-                background-color: #eee;
-                color: #555
-            }
-            
-            .font-picker .fp-pill.checked {
-                background-color: #000;
-                color: #fff
-            }
-            
-            .font-picker .fp-variants .fp-pill.italic {
-                font-style: italic
-            }
-            
-            .font-picker .fp-variants .fp-pill.italic.checked {
-                background-color: #804;
-                font-style: italic
-            }
-            /***
-Spectrum Colorpicker v1.8.1
-https://github.com/bgrins/spectrum
-Author: Brian Grinstead
-License: MIT
-***/
-            
-            .sp-container {
-                position: absolute;
-                top: 0;
-                left: 0;
-                display: inline-block;
-                *display: inline;
-                *zoom: 1;
-                /* https://github.com/bgrins/spectrum/issues/40 */
-                z-index: 9999994;
-                overflow: hidden;
-            }
-            
-            .sp-container.sp-flat {
-                position: relative;
-            }
-            /* Fix for * { box-sizing: border-box; } */
-            
-            .sp-container,
-            .sp-container * {
-                -webkit-box-sizing: content-box;
-                -moz-box-sizing: content-box;
-                box-sizing: content-box;
-            }
-            /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
-            
-            .sp-top {
-                position: relative;
-                width: 100%;
-                display: inline-block;
-            }
-            
-            .sp-top-inner {
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
-            }
-            
-            .sp-color {
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 20%;
-            }
-            
-            .sp-hue {
-                position: absolute;
-                top: 0;
-                right: 0;
-                bottom: 0;
-                left: 84%;
-                height: 100%;
-            }
-            
-            .sp-clear-enabled .sp-hue {
-                top: 33px;
-                height: 77.5%;
-            }
-            
-            .sp-fill {
-                padding-top: 80%;
-            }
-            
-            .sp-sat,
-            .sp-val {
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-            }
-            
-            .sp-alpha-enabled .sp-top {
-                margin-bottom: 18px;
-                flex-shrink: 0;
-            }
-            
-            .sp-alpha-enabled .sp-alpha {
-                display: block;
-            }
-            
-            .sp-alpha-handle {
-                position: absolute;
-                top: -4px;
-                bottom: -4px;
-                width: 6px;
-                left: 50%;
-                cursor: pointer;
-                border: 1px solid black;
-                background: white;
-                opacity: .8;
-            }
-            
-            .sp-alpha {
-                display: none;
-                position: absolute;
-                bottom: -18px;
-                right: 0;
-                left: 0;
-                height: 15px;
-            }
-            
-            .sp-alpha-inner {
-                border: solid 1px #333;
-            }
-            
-            .sp-clear {
-                display: none;
-            }
-            
-            .sp-clear.sp-clear-display {
-                background-position: center;
-            }
-            
-            .sp-clear-enabled .sp-clear {
-                display: block;
-                position: absolute;
-                top: 0px;
-                right: 0;
-                bottom: 0;
-                left: 84%;
-                height: 28px;
-            }
-            /* Don't allow text selection */
-            
-            .sp-container,
-            .sp-replacer,
-            .sp-preview,
-            .sp-dragger,
-            .sp-slider,
-            .sp-alpha,
-            .sp-clear,
-            .sp-alpha-handle,
-            .sp-container.sp-dragging .sp-input,
-            .sp-container button {
-                -webkit-user-select: none;
-                -moz-user-select: -moz-none;
-                -o-user-select: none;
-                user-select: none;
-            }
-            
-            .sp-container.sp-input-disabled .sp-input-container {
-                display: none;
-            }
-            
-            .sp-container.sp-buttons-disabled .sp-button-container {
-                display: none;
-            }
-            
-            .sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
-                display: none;
-            }
-            
-            .sp-palette-only .sp-picker-container {
-                display: none;
-            }
-            
-            .sp-palette-disabled .sp-palette-container {
-                display: none;
-            }
-            
-            .sp-initial-disabled .sp-initial {
-                display: none;
-            }
-            /* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
-            
-            .sp-sat {
-                background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
-                background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
-                background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
-                background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
-                background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
-                background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
-                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
-                filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
-            }
-            
-            .sp-val {
-                background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
-                background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
-                background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
-                background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
-                background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
-                background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
-                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
-                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
-            }
-            
-            .sp-hue {
-                background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-                background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-                background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-                background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
-                background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-                background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
-            }
-            /* IE filters do not support multiple color stops.
-   Generate 6 divs, line them up, and do two color gradients for each.
-   Yes, really.
- */
-            
-            .sp-1 {
-                height: 17%;
-                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
-            }
-            
-            .sp-2 {
-                height: 16%;
-                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
-            }
-            
-            .sp-3 {
-                height: 17%;
-                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
-            }
-            
-            .sp-4 {
-                height: 17%;
-                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
-            }
-            
-            .sp-5 {
-                height: 16%;
-                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
-            }
-            
-            .sp-6 {
-                height: 17%;
-                filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
-            }
-            
-            .sp-hidden {
-                display: none !important;
-            }
-            /* Clearfix hack */
-            
-            .sp-cf:before,
-            .sp-cf:after {
-                content: "";
-                display: table;
-            }
-            
-            .sp-cf:after {
-                clear: both;
-            }
-            
-            .sp-cf {
-                *zoom: 1;
-            }
-            /* Mobile devices, make hue slider bigger so it is easier to slide */
-            
-            @media (max-device-width: 480px) {
-                .sp-color {
-                    right: 40%;
-                }
-                .sp-hue {
-                    left: 63%;
-                }
-                .sp-fill {
-                    padding-top: 60%;
-                }
-            }
-            
-            .sp-dragger {
-                border-radius: 5px;
-                height: 5px;
-                width: 5px;
-                border: 1px solid #fff;
-                background: #000;
-                cursor: pointer;
-                position: absolute;
-                top: 0;
-                left: 0;
-            }
-            
-            .sp-slider {
-                position: absolute;
-                top: 0;
-                cursor: pointer;
-                height: 3px;
-                left: -1px;
-                right: -1px;
-                border: 1px solid #000;
-                background: white;
-                opacity: .8;
-            }
-            /*
-Theme authors:
-Here are the basic themeable display options (colors, fonts, global widths).
-See http://bgrins.github.io/spectrum/themes/ for instructions.
-*/
-            /*Edited by Prayag17*/
-            
-            .sp-container {
-                background-color: rgb(62 62 62 / 99%);
-                padding: 0;
-                border-radius: 10px;
-                box-shadow: 0 0 15px #111;
-                display: flex;
-                flex-direction: column;
-                flex-flow: column-reverse;
-            }
-            
-            .sp-container,
-            .sp-container button,
-            .sp-container input,
-            .sp-color,
-            .sp-hue,
-            .sp-clear {
-                font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
-                -webkit-box-sizing: border-box;
-                -moz-box-sizing: border-box;
-                -ms-box-sizing: border-box;
-                box-sizing: border-box;
-            }
-            
-            .sp-top {
-                margin-bottom: 3px;
-            }
-            
-            .sp-color,
-            .sp-hue,
-            .sp-clear {
-                border: solid 1px #666;
-            }
-            /* Input */
-            
-            .sp-input-container {
-                float: right;
-                width: 100px;
-                margin-bottom: 4px;
-            }
-            
-            .sp-initial-disabled .sp-input-container {
-                width: 100%;
-            }
-            
-            .sp-input {
-                font-size: 12px !important;
-                border: 1px inset;
-                padding: 4px 5px;
-                margin: 0;
-                width: 100%;
-                background: transparent;
-                border-radius: 3px;
-                color: #fff;
-            }
-            
-            .sp-input:focus {
-                border: 1px solid orange;
-            }
-            
-            .sp-input.sp-validation-error {
-                border: 1px solid red;
-                background: #fdd;
-            }
-            
-            .sp-picker-container,
-            .sp-palette-container {
-                float: left;
-                position: relative;
-                padding: 10px;
-            }
-            
-            .sp-picker-container {
-                width: calc(100% - 20px);
-                display: flex;
-                flex-wrap: wrap;
-                grid-gap: 5px;
-            }
-            /* Palettes */
-            
-            .sp-palette-container {
-                border-bottom: 1px solid #5b5b5b;
-            }
-            
-            .sp-palette-only .sp-palette-container {
-                border: 0;
-            }
-            
-            .sp-palette .sp-thumb-el {
-                display: block;
-                position: relative;
-                float: left;
-                width: 24px;
-                height: 15px;
-                margin: 3px;
-                cursor: pointer;
-                border: solid 2px transparent;
-            }
-            
-            .sp-palette .sp-thumb-el:hover,
-            .sp-palette .sp-thumb-el.sp-thumb-active {
-                border-color: orange;
-            }
-            
-            .sp-thumb-el {
-                position: relative;
-            }
-            /* Initial */
-            
-            .sp-initial {
-                float: left;
-                border: solid 1px #333;
-            }
-            
-            .sp-initial span {
-                width: 30px;
-                height: 25px;
-                border: none;
-                display: block;
-                float: left;
-                margin: 0;
-            }
-            
-            .sp-initial .sp-clear-display {
-                background-position: center;
-            }
-            /* Buttons */
-            
-            .sp-palette-button-container,
-            .sp-button-container {
-                float: right;
-            }
-            /* Replacer (the little preview div that shows up instead of the <input>) */
-            
-            .sp-replacer {
-                margin: 0;
-                overflow: hidden;
-                cursor: pointer;
-                padding: 4px;
-                border: 1px solid #333;
-                background: transparent;
-                width: -webkit-fill-available;
-                vertical-align: middle;
-                border-radius: 2.5px;
-                display: flex;
-                flex-direction: row;
-                justify-content: space-between;
-                align-items: center;
-            }
-            
-            .sp-replacer.sp-disabled {
-                cursor: default;
-                border-color: silver;
-                color: silver;
-            }
-            
-            .sp-dd {
-                padding: 0;
-                height: 0;
-                line-height: 0;
-                float: left;
-                font-size: 10px;
-                width: 16px;
-                color: white;
-            }
-            
-            .sp-preview {
-                position: relative;
-                width: calc(100% - 26px);
-                height: 20px;
-                border: none;
-                float: left;
-                z-index: 0;
-            }
-            
-            .sp-palette {
-                *width: 220px;
-                max-width: 220px;
-            }
-            
-            .sp-palette .sp-thumb-el {
-                width: 16px;
-                height: 16px;
-                margin: 2px 1px;
-                border: solid 1px #d0d0d0;
-            }
-            
-            .sp-container {
-                padding-bottom: 0;
-            }
-            /* Buttons: http://hellohappy.org/css3-buttons/ */
-            
-            .sp-container button {
-                border: none;
-                border-radius: 50px;
-                color: #fff;
-                font-size: 15px;
-                padding: 4px 8px;
-                text-align: center;
-                vertical-align: middle;
-                background: #2db93c !important;
-                transition: .2s;
-            }
-            
-            .sp-container button:hover {
-                background-color: #23802d !important;
-                cursor: pointer;
-            }
-            
-            .sp-container button:active {
-                border: 1px solid #aaa;
-                border-bottom: 1px solid #888;
-                -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-                -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-                -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-                -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-                box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-            }
-            
-            .sp-cancel:hover {
-                text-decoration: none;
-                background: #b23232 !important;
-            }
-            
-            .sp-cancel {
-                font-size: 15px;
-                color: white;
-                margin: 0;
-                padding: 4px 8px;
-                margin-right: 5px;
-                vertical-align: middle;
-                text-decoration: none;
-                background: #d93f3f !important;
-                border-radius: 50px;
-                transition: .2s;
-            }
-            
-            .sp-palette span:hover,
-            .sp-palette span.sp-thumb-active {
-                border-color: #000;
-            }
-            
-            .sp-preview,
-            .sp-alpha,
-            .sp-thumb-el {
-                position: relative;
-                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
-            }
-            
-            .sp-preview-inner,
-            .sp-alpha-inner,
-            .sp-thumb-inner {
-                display: block;
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                right: 0;
-            }
-            
-            .sp-palette .sp-thumb-inner {
-                background-position: 50% 50%;
-                background-repeat: no-repeat;
-            }
-            
-            .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
-                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
-            }
-            
-            .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
-                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
-            }
-            
-            .sp-clear-display {
-                background-repeat: no-repeat;
-                background-position: center;
-                background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
-            }
-        </style>
+
 
     </div>
 </body>
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/controls/Category.js b/Jellyfin.Plugin.SkinManager/Configuration/controls/Category.js
new file mode 100644
index 0000000..bcee98c
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/controls/Category.js
@@ -0,0 +1,48 @@
+class Category {
+
+    constructor(name, controls) {
+        console.log('Initializing Category with controls:', controls);
+        this.name = name;
+        this.controls = controls.map(controlConfig => {
+            switch (controlConfig.type) {
+                case 'color':
+                    return new ColorControl(controlConfig);
+                case 'slider':
+                    return new SliderControl(controlConfig);
+                case 'checkbox':
+                    return new CheckBoxControl(controlConfig);
+                case 'number':
+                    return new NumberControl(controlConfig);
+                case 'select':
+                    return new SelectControl(controlConfig);
+                case 'fontPicker':
+                    return new FontPickerControl(controlConfig);
+                case 'textarea':
+                    return new TextAreaControl(controlConfig);
+            }
+        });
+    }
+
+    generateHeader() {
+        return `<fieldset class="verticalSection verticalSection-extrabottompadding"><legend>${this.name}</legend>`;
+    }
+
+    generateFooter() {
+        return "</fieldset>";
+    }
+
+    generateHTML() {
+        return this.generateHeader() + this.controls.map(control => control.generateHTML()).join('</br>') + this.generateFooter();
+    }
+
+    generateCSS() {
+        return this.controls.map(control => control.generateCSS()).join('\n');
+    }
+
+    attachEventListeners() {
+        this.controls.forEach(control => control.attachEventListeners());
+    }
+
+}
+
+window.Category = Category;
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/controls/CheckBoxControl.js b/Jellyfin.Plugin.SkinManager/Configuration/controls/CheckBoxControl.js
new file mode 100644
index 0000000..664924d
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/controls/CheckBoxControl.js
@@ -0,0 +1,28 @@
+class CheckBoxControl extends Control {
+    constructor(config) {
+        super(config);
+        this.type = 'checkbox';
+    }
+
+    generateHTML() {
+        var checkValue = this.value ? "checked" : "";
+        return `<div class="checkboxContainer checkboxContainer-withDescription">
+                    <label>
+                        <input class = "checkbox" type="checkbox" is="emby-checkbox" id= ${this.id} ${checkValue}/>
+                        <span>${this.label}</span>
+                    </label>
+                    <div class="fieldDescription checkboxFieldDescription">${this.label}</div>
+                </div>`;
+
+    }
+
+    attachEventListeners() {
+        const checkbox = document.getElementById(this.id);
+        checkbox.addEventListener('change', (event) => {
+            this.value = event.target.checked;
+        });
+    }
+
+}
+
+window.CheckBoxControl = CheckBoxControl;
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/controls/ColorControl.js b/Jellyfin.Plugin.SkinManager/Configuration/controls/ColorControl.js
new file mode 100644
index 0000000..6ef0f8c
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/controls/ColorControl.js
@@ -0,0 +1,84 @@
+class ColorControl extends Control {
+    constructor(config) {
+        super(config);
+        this.type = 'color';
+    }
+
+    generateHTML() {
+        return `
+            <div class="inputContainer">
+                <label for="${this.id}">${this.label}</label>
+                <input
+                class="color"
+                type="text"
+                id="${this.id}"
+                name="${this.id}"
+                data-css="${this.css}"
+                />
+                <div class="fieldDescription">${this.description}</div>
+            </div>
+            `;
+    }
+
+    attachEventListeners() {
+        this.initColorpicker();
+    }
+
+    initColorpicker() {
+        const $el = $("#" + this.id);
+
+        $el.spectrum({
+            color: this.value,
+            showInput: true,
+            className: "full-spectrum",
+            showInitial: true,
+            showPalette: true,
+            showAlpha: true,
+            showSelectionPalette: true,
+            maxSelectionSize: 10,
+            preferredFormat: "hex",
+            localStorageKey: "spectrum.demo",
+            move: (color) => {
+                this.value = this._formatColor(color);
+            },
+            show: function () {
+
+            },
+            beforeShow: function () {
+
+            },
+            hide: function () {
+
+            },
+            change: (color) => {
+                this.value = this._formatColor(color);
+                $el.val(this.value).trigger("input");
+            },
+            palette: [
+                ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
+                    "rgb(204, 204, 204)", "rgb(217, 217, 217)", "rgb(255, 255, 255)"
+                ],
+                ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
+                    "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"
+                ],
+                ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)",
+                    "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)",
+                    "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)",
+                    "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)",
+                    "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)",
+                    "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
+                    "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
+                    "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
+                    "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)",
+                    "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"
+                ]
+            ]
+        });
+    }
+
+    _formatColor(color) {
+        return color.getAlpha() < 1 ? color.toHex8String() : color.toHexString();
+    }
+}
+
+window.ColorControl = ColorControl;
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/controls/Control.js b/Jellyfin.Plugin.SkinManager/Configuration/controls/Control.js
new file mode 100644
index 0000000..4dff5bb
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/controls/Control.js
@@ -0,0 +1,19 @@
+class Control {
+    constructor({ label, description, value, default: defaultValue, css }) {
+        this.id = this.constructor.name + Math.random().toString(36).substring(7);
+        this.label = label;
+        this.value = value ?? defaultValue;
+        this.css = css;
+        this.description = description || '';
+    }
+
+    generateHTML() {
+        return "";
+    }
+
+    generateCSS() {
+        return this.css.replace("%value%", this.value);
+    }
+}
+
+window.Control = Control;
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/controls/FontPickerControl.js b/Jellyfin.Plugin.SkinManager/Configuration/controls/FontPickerControl.js
new file mode 100644
index 0000000..e510b07
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/controls/FontPickerControl.js
@@ -0,0 +1,117 @@
+class FontPickerControl extends Control {
+    constructor(config) {
+        super(config);
+        this.type = 'fontPicker';
+        this.previewText = config.previewText || "Hello, This is your selected font-family.";
+    }
+
+    generateHTML() {
+        const fontValue = this.value ?? "";
+        const safeValue = fontValue.replace(/"/g, "&quot;");
+        const parsed = this._parseFontSpec(fontValue);
+        const previewStyle = parsed.family
+            ? ` style="${this._composePreviewStyle(parsed)}"`
+            : "";
+
+        return `<div class="inputContainer">
+                    <label for="${this.id}">${this.label}</label>
+                    <input
+                        is="emby-input"
+                        type="text"
+                        class="fontPickerInput"
+                        id="${this.id}"
+                        name="${this.id}"
+                        value="${safeValue}"
+                    />
+                    <div class="fontCont fontPreviewContainer">
+                        <p class="fontPreviewText" id="${this.id}-preview"${previewStyle}>${this.previewText}</p>
+                    </div>
+                    <div class="fieldDescription">${this.description}</div>
+                </div>`;
+    }
+
+    attachEventListeners() {
+        const input = document.getElementById(this.id);
+        const preview = document.getElementById(`${this.id}-preview`);
+
+        const updatePreview = (fontValue) => {
+            const sanitizedValue = fontValue || "";
+            this.value = sanitizedValue;
+            const { family, weight, italic } = this._parseFontSpec(sanitizedValue);
+            if (preview) {
+                preview.style.fontFamily = family || sanitizedValue;
+                preview.style.fontWeight = weight ? String(weight) : "";
+                preview.style.fontStyle = italic ? "italic" : "";
+            }
+        };
+
+        if (input) {
+            const $input = window.jQuery ? window.jQuery(input) : null;
+            if ($input && $input.fontpicker) {
+                $input.fontpicker({ variants: true });
+                $input.on('change', (event) => updatePreview(event.target.value));
+            }
+
+            input.addEventListener('input', (event) => updatePreview(event.target.value));
+            input.addEventListener('change', (event) => updatePreview(event.target.value));
+        }
+
+        updatePreview(this.value);
+    }
+
+    _escapeFontFamily(fontFamily) {
+        return (fontFamily || "").replace(/"/g, '\\"');
+    }
+
+    _parseFontSpec(fontSpec) {
+        if (!fontSpec) {
+            return { family: "", weight: null, italic: false };
+        }
+
+        const [familyPart, variantRaw = ""] = fontSpec.split(":");
+        const family = (familyPart || "").trim();
+        const variant = (variantRaw || "").trim().toLowerCase();
+
+        let weight = null;
+        let italic = false;
+
+        if (!variant) {
+            return { family, weight, italic };
+        }
+
+        const match = variant.match(/^(\d+)(i)?$/i);
+        if (match) {
+            weight = parseInt(match[1], 10);
+            italic = !!match[2];
+            return { family, weight, italic };
+        }
+
+        if (variant === "italic") {
+            italic = true;
+            return { family, weight, italic };
+        }
+
+        const numeric = parseInt(variant, 10);
+        if (!isNaN(numeric)) {
+            weight = numeric;
+        }
+
+        return { family, weight, italic };
+    }
+
+    _composePreviewStyle({ family, weight, italic }) {
+        const parts = [];
+        if (family) {
+            parts.push(`font-family: ${this._escapeFontFamily(family)};`);
+        }
+        if (weight) {
+            parts.push(`font-weight: ${weight};`);
+        }
+        if (italic) {
+            parts.push("font-style: italic;");
+        }
+        return parts.join(" ");
+    }
+}
+
+window.FontPickerControl = FontPickerControl;
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/controls/NumberControl.js b/Jellyfin.Plugin.SkinManager/Configuration/controls/NumberControl.js
new file mode 100644
index 0000000..c0a3f5f
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/controls/NumberControl.js
@@ -0,0 +1,26 @@
+class NumberControl extends Control {
+    constructor(config) {
+        super(config);
+        this.min = config.min;
+        this.max = config.max;
+        this.type = 'number';
+    }
+
+    generateHTML() {
+        return `<div class="inputContainer">
+                    <input is="emby-input" type="number" class="number"
+                    value='${this.value}' id='${this.id}' min='${this.min}' max='${this.max}' label='${this.label}'>
+                    <div class="fieldDescription">${this.description}</div>
+            </div>`;
+
+    }
+
+    attachEventListeners() {
+        const numberInput = document.getElementById(this.id);
+        numberInput.addEventListener('input', (event) => {
+            this.value = event.target.value;
+        });
+    }
+}
+
+window.NumberControl = NumberControl;
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/controls/SelectControl.js b/Jellyfin.Plugin.SkinManager/Configuration/controls/SelectControl.js
new file mode 100644
index 0000000..27940a2
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/controls/SelectControl.js
@@ -0,0 +1,29 @@
+class SelectControl extends Control {
+    constructor(config) {
+        super(config);
+        this.options = config.options;
+        this.type = 'select';
+    }
+
+    generateHTML() {
+
+
+        return `<div class="selectContainer"> 
+                    <label for= "${this.id}" > ${this.label}</label >
+                    <select is="emby-select" id="${this.id}">
+                        ${this.options.map(option => `<option value="${option.value}"
+                            ${option.value == this.value ? "selected" : ""} >${option.label}</option>`).join('')}
+                    </select> 
+                </div>`;
+    }
+
+    attachEventListeners() {
+        const select = document.getElementById(this.id);
+        select.addEventListener('change', (event) => {
+            console.log("selected ", event.target.value);
+            this.value = event.target.value;
+        });
+    }
+}
+
+window.SelectControl = SelectControl;
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/controls/SliderControl.js b/Jellyfin.Plugin.SkinManager/Configuration/controls/SliderControl.js
new file mode 100644
index 0000000..88839d4
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/controls/SliderControl.js
@@ -0,0 +1,26 @@
+class SliderControl extends Control {
+    constructor(config) {
+        super(config);
+        this.min = config.min;
+        this.max = config.max;
+        this.type = 'slider';
+    }
+
+    generateHTML() {
+        return `<div class="inputContainer" >
+            <input type="range" class="slider" value="${this.value}" data-css="${this.css}" id="${this.id}" min="${this.min}" max="${this.max}" label="${this.name}">
+                <div class="fieldDescription">${this.label}
+                </div>
+            </div>`;
+    }
+
+    attachEventListeners() {
+        const slider = document.getElementById(this.id);
+        slider.addEventListener('input', (event) => {
+            console.log(event.target.value);
+            this.value = event.target.value;
+        });
+    }
+}
+
+window.SliderControl = SliderControl;
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/controls/TextAreaControl.js b/Jellyfin.Plugin.SkinManager/Configuration/controls/TextAreaControl.js
new file mode 100644
index 0000000..c44d105
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/controls/TextAreaControl.js
@@ -0,0 +1,24 @@
+class TextAreaControl extends Control {
+    constructor(config) {
+        super(config);
+        this.type = 'textarea';
+    }
+
+    generateHTML() {
+        return `<div class="inputContainer customCssContainer">
+                    <label class= "textareaLabel" for="${this.id}">${this.label}</label>
+                    <textarea is="emby-textarea" class= "textarea-mono emby-textarea" id="${this.id}" rows="1">${this.value}</textarea>
+                    <div class="fieldDescription">${this.description}</div>
+                </div>`;
+    }
+
+    attachEventListeners() {
+        const textArea = document.getElementById(this.id);
+        textArea.addEventListener('input', (event) => {
+            this.value = event.target.value;
+        });
+    }
+
+}
+
+window.TextAreaControl = TextAreaControl;
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/fontpicker.js b/Jellyfin.Plugin.SkinManager/Configuration/fontpicker.js
index 8c1301e..899231e 100644
--- a/Jellyfin.Plugin.SkinManager/Configuration/fontpicker.js
+++ b/Jellyfin.Plugin.SkinManager/Configuration/fontpicker.js
@@ -9,7 +9,7 @@
  */
 
 
-(function($){
+(function ($) {
 
 	var pluginName = 'fontpicker';
 	var fontsLoaded = {};
@@ -56,9 +56,9 @@
 		return nr;
 	}
 
-	$.fn.fontpicker = function(options) {
+	$.fn.fontpicker = function (options) {
 
-		var __scrollIntoViewIfNeeded = function(elem) {
+		var __scrollIntoViewIfNeeded = function (elem) {
 			var container = elem.parentElement;
 			var rectElem = elem.getBoundingClientRect(), rectContainer = container.getBoundingClientRect();
 			if (rectElem.bottom > rectContainer.bottom) { elem.scrollIntoView(false); }
@@ -75,17 +75,17 @@
 		 * @param {string} value Value to store. Omit to get a cookie, provide to set a cookie.
 		 * @return {string} The value for a cookie (when value is omitted, of course).
 		 */
-		var __cookie = function(key, value) {
+		var __cookie = function (key, value) {
 			var cookieName = 'jqfs', cookieDays = 365, result, date = new Date(), jar = {}, expires = '', x, pts, pt;
-			result = (result = new RegExp('(?:^|; )'+cookieName+'=([^;]*)').exec(document.cookie)) ? decodeURIComponent(result[1]) : null;
+			result = (result = new RegExp('(?:^|; )' + cookieName + '=([^;]*)').exec(document.cookie)) ? decodeURIComponent(result[1]) : null;
 
 			if (null !== result) {
 				pts = result.split('||');
 				for (x in pts) {
 					try {
-						pt = pts[x].split('|',2);
+						pt = pts[x].split('|', 2);
 						jar[pt[0]] = pt[1];
-					} catch (e) {}
+					} catch (e) { }
 				}
 			}
 
@@ -104,12 +104,12 @@
 
 			pts = [];
 			for (x in jar) {
-				pts.push(x+'|'+jar[x]);
+				pts.push(x + '|' + jar[x]);
 			}
 
 			if (cookieDays > 0) {
-				date.setTime(date.getTime()+(cookieDays*24*60*60*1000));
-				expires = '; expires='+date.toGMTString();
+				date.setTime(date.getTime() + (cookieDays * 24 * 60 * 60 * 1000));
+				expires = '; expires=' + date.toGMTString();
 			}
 			document.cookie = cookieName + '=' + encodeURIComponent(pts.join('||')) + '; path=/; SameSite=Lax' + expires;
 		};
@@ -5337,7 +5337,7 @@
 			}
 		}; // End settings
 
-		var Fontpicker = (function() {
+		var Fontpicker = (function () {
 
 			function Fontpicker(original, options) {
 				if (options.googleFonts && Array.isArray(options.googleFonts)) {
@@ -5364,7 +5364,7 @@
 
 				this.dictionary = dictionaries[options.lang];
 
-				this.allFonts = {'google':options.googleFonts, 'local':options.localFonts};
+				this.allFonts = { 'google': options.googleFonts, 'local': options.localFonts };
 				this.options = options;
 				this.$original = $(original);
 				this.setupHtml();
@@ -5379,15 +5379,15 @@
 				 * @param {string} type Font type, either 'google' or 'local'.
 				 * @param {string} font Font family name. F.e: 'Chakra', 'Zilla Slab'.
 				 */
-				loadFont: function(type, font) {
+				loadFont: function (type, font) {
 					if (fontsLoaded[font]) { return; }
 					fontsLoaded[font] = true;
 
-					switch(type) {
+					switch (type) {
 						case 'google':
-							var url = 'https://fonts.googleapis.com/css?family=' + font.replace(/ /g,'+') + ':' + this.options.googleFonts[font].variants + '&display=swap';
+							var url = 'https://fonts.googleapis.com/css?family=' + font.replace(/ /g, '+') + ':' + this.options.googleFonts[font].variants + '&display=swap';
 							this.options.debug && console.log('Loading Google font ' + font + ' from ' + url);
-							$('head').append($('<link>', {href:url, rel:'stylesheet', type:'text/css'}));
+							$('head').append($('<link>', { href: url, rel: 'stylesheet', type: 'text/css' }));
 							break;
 
 						case 'local':
@@ -5402,7 +5402,7 @@
 				 *
 				 * @param {object} $li jQuery list object to extract font spec from (stored in data attributes).
 				 */
-				showSample: function($li) {
+				showSample: function ($li) {
 					$('.fp-sample', this.$element).css({
 						fontFamily: "'" + $li.data('font-family') + "'",
 						fontStyle: $li.data('font-italic') ? 'italic' : 'normal',
@@ -5416,7 +5416,7 @@
 				 * @param {object} e Event.
 				 * @param {object} el Element that received the event.
 				 */
-				keyDown: function(e, el) {
+				keyDown: function (e, el) {
 					function stop(e) {
 						e.preventDefault();
 						e.stopPropagation();
@@ -5428,11 +5428,11 @@
 						// Numbers 1-9
 						stop(e);
 						var fw = 100 * (e.keyCode - (e.keyCode >= 97 ? 96 : 48));
-						$('.fp-pill[data-font-weight='+fw+']', $activeLi).trigger('click');
+						$('.fp-pill[data-font-weight=' + fw + ']', $activeLi).trigger('click');
 						return;
 					}
-                    var $nextLi = undefined
-					switch(e.keyCode) {
+					var $nextLi = undefined
+					switch (e.keyCode) {
 						case 73: // i, italic
 							stop(e);
 							$('.fp-pill.italic:visible', $activeLi).trigger('click');
@@ -5478,7 +5478,7 @@
 				 * @param {object} e Event.
 				 * @param {object} el Element that received the event.
 				 */
-				mouseEnter: function(e, el) {
+				mouseEnter: function (e, el) {
 					var $li = $(el);
 					$('li.fp-hover', this.$results).removeClass('fp-hover');
 					$li.addClass('fp-hover');
@@ -5492,7 +5492,7 @@
 				 * @param {object} e Event.
 				 * @param {object} el Element that received the event.
 				 */
-				click: function(e, el) {
+				click: function (e, el) {
 					var $li = $(el), self = this,
 						fontType = $li.data('font-type'),
 						fontFamily = $li.data('font-family'),
@@ -5511,74 +5511,74 @@
 
 					$btns.append(
 						$('<span class="fp-favorite' + (isFav ? ' checked' : '') + '"></span>')
-						.on('click', function(e) {
-							e.stopPropagation();
+							.on('click', function (e) {
+								e.stopPropagation();
 
-							var idx = favoriteFonts.indexOf(fontType + ':' + fontFamily);
-							if ($(this).is('.checked')) {
-								// Remove from favorites
-								if (idx != -1) {
-									favoriteFonts.splice(idx, 1);
+								var idx = favoriteFonts.indexOf(fontType + ':' + fontFamily);
+								if ($(this).is('.checked')) {
+									// Remove from favorites
+									if (idx != -1) {
+										favoriteFonts.splice(idx, 1);
+									}
 								}
-							}
-							else {
-								// Add to favorites
-								if (-1 == idx) {
-									favoriteFonts.push(fontType + ':' + fontFamily);
+								else {
+									// Add to favorites
+									if (-1 == idx) {
+										favoriteFonts.push(fontType + ':' + fontFamily);
+									}
 								}
-							}
-							$(this).toggleClass('checked');
-							__cookie('favs', favoriteFonts.join(','));
-						}),
+								$(this).toggleClass('checked');
+								__cookie('favs', favoriteFonts.join(','));
+							}),
 
 						$('<button type="button" class="fp-btn apply">')
-						.html(this.dictionary['select'])
-						.on('click', function(e) {
-							e.stopPropagation();
+							.html(this.dictionary['select'])
+							.on('click', function (e) {
+								e.stopPropagation();
 
-							italic = $li.data('font-italic');
-							weight = $li.data('font-weight') || 400;
+								italic = $li.data('font-italic');
+								weight = $li.data('font-weight') || 400;
 
-							var value = fontFamily;
-							if (self.options.variants) {
-								value += ':' + weight + (italic ? 'i':'');
-							}
-
-							self.$select.css({
-								fontFamily: "'" + fontFamily  + "'",
-								fontStyle: italic ? 'italic' : 'normal',
-								fontWeight: weight
-							}).find('.fp-fontspec').html(value);
-
-							self.$original.val(value).change(); // Update original <input> element
-
-							// Call onSelect callback, if specified
-							if (!!self.options.onSelect) {
-								self.options.onSelect({
-									fontType: fontType,
-									fontFamily: fontFamily,
-									fontStyle: italic ? 'italic' : 'normal',
-									fontWeight: weight,
-									fontSpec: value
-								});
-							}
-
-							self.toggleModal('hide');
-
-							// Save recent
-							if (!!self.options.nrRecents) {
-								var recentFonts = __cookie('recents'),
-									cookieVal = $li.data('font-type') + ':' + fontFamily;
-
-								recentFonts = recentFonts ? recentFonts.split(',') : [];
-								if (recentFonts.indexOf(cookieVal) == -1) {
-									recentFonts.unshift(cookieVal);
+								var value = fontFamily;
+								if (self.options.variants) {
+									value += ':' + weight + (italic ? 'i' : '');
 								}
 
-								recentFonts = recentFonts.slice(0,self.options.nrRecents); // Remember last X
-								__cookie('recents', recentFonts.join(','));
-							}
-						})
+								self.$select.css({
+									fontFamily: "'" + fontFamily + "'",
+									fontStyle: italic ? 'italic' : 'normal',
+									fontWeight: weight
+								}).find('.fp-fontspec').html(value);
+
+								self.$original.val(value).change(); // Update original <input> element
+
+								// Call onSelect callback, if specified
+								if (!!self.options.onSelect) {
+									self.options.onSelect({
+										fontType: fontType,
+										fontFamily: fontFamily,
+										fontStyle: italic ? 'italic' : 'normal',
+										fontWeight: weight,
+										fontSpec: value
+									});
+								}
+
+								self.toggleModal('hide');
+
+								// Save recent
+								if (!!self.options.nrRecents) {
+									var recentFonts = __cookie('recents'),
+										cookieVal = $li.data('font-type') + ':' + fontFamily;
+
+									recentFonts = recentFonts ? recentFonts.split(',') : [];
+									if (recentFonts.indexOf(cookieVal) == -1) {
+										recentFonts.unshift(cookieVal);
+									}
+
+									recentFonts = recentFonts.slice(0, self.options.nrRecents); // Remember last X
+									__cookie('recents', recentFonts.join(','));
+								}
+							})
 					)
 					$btns.appendTo($li);
 
@@ -5596,50 +5596,50 @@
 							}
 
 							let variant = variants[v],
-								fontWeight = +variant.replace(/i$/,'');
+								fontWeight = +variant.replace(/i$/, '');
 
 							v > 0 && $variants.append(' '); // Separate by space
 
 							$('<span data-font-weight="' + fontWeight + '" class="fp-pill weight' + (weight == fontWeight ? ' checked' : '') + '">')
-							.text(variant)
-							.on('click', function(e) {
-								e.stopPropagation();
+								.text(variant)
+								.on('click', function (e) {
+									e.stopPropagation();
 
-								if (variants.indexOf(fontWeight+'i') == -1) {
-									// This font weight does not have an italic variant
-									$('.fp-pill.italic', $li).removeClass('checked').css('display', 'none');
-									italic = false;
-									$li.data('font-italic', italic);
-								}
-								else {
-									// This font weight does have an italic variant
-									$('.fp-pill.italic', $li).css('display', '');
-								}
+									if (variants.indexOf(fontWeight + 'i') == -1) {
+										// This font weight does not have an italic variant
+										$('.fp-pill.italic', $li).removeClass('checked').css('display', 'none');
+										italic = false;
+										$li.data('font-italic', italic);
+									}
+									else {
+										// This font weight does have an italic variant
+										$('.fp-pill.italic', $li).css('display', '');
+									}
 
-								$('span.fp-pill.weight', $li).removeClass('checked');
-								$(this).addClass('checked');
+									$('span.fp-pill.weight', $li).removeClass('checked');
+									$(this).addClass('checked');
 
-								$lis.data('font-weight', fontWeight); // Set for favorite and normal
+									$lis.data('font-weight', fontWeight); // Set for favorite and normal
 
-								self.showSample($li);
-							})
-							.appendTo($variants);
+									self.showSample($li);
+								})
+								.appendTo($variants);
 						}
 
 						if (hasItalic) {
 							$variants.append(' ');
 							$('<span class="fp-pill italic ' + (italic ? ' checked' : '') + '">')
-							.css('display', variants.indexOf(weight+'i') == -1 ? 'none' : '')
-							.html('italic')
-							.on('click', function(e) {
-								e.stopPropagation();
-								italic = !italic;
-								$(this).toggleClass('checked');
+								.css('display', variants.indexOf(weight + 'i') == -1 ? 'none' : '')
+								.html('italic')
+								.on('click', function (e) {
+									e.stopPropagation();
+									italic = !italic;
+									$(this).toggleClass('checked');
 
-								$lis.data('font-italic', italic); // Set for favorite and normal
+									$lis.data('font-italic', italic); // Set for favorite and normal
 
-								self.showSample($li);
-							}).appendTo($variants);
+									self.showSample($li);
+								}).appendTo($variants);
 						}
 
 						$li.append($variants);
@@ -5656,7 +5656,7 @@
 				 * @param {string} fontSpec The font specification to split into components.
 				 * @return {object} An object containing 3 items: family (string), weight (int) and italic (bool).
 				 */
-				fontSpecToComponents: function(fontSpec) {
+				fontSpecToComponents: function (fontSpec) {
 					var tmp = fontSpec.split(':'),
 						family = tmp[0],
 						variant = tmp[1] || '400',
@@ -5682,12 +5682,12 @@
 				 *
 				 * @param {string} fontSpec The font specification, f.e: 'Changa:400i' or 'Arial'.
 				 */
-				applyFontToOriginalInput: function(fontSpec) {
+				applyFontToOriginalInput: function (fontSpec) {
 					if ('' === fontSpec) {
 						this.$select
-						.removeAttr('style')
-						.find('.fp-fontspec')
-						.html(this.dictionary['selectFont']);
+							.removeAttr('style')
+							.find('.fp-fontspec')
+							.html(this.dictionary['selectFont']);
 
 						this.$original.val('');
 						return;
@@ -5701,30 +5701,30 @@
 						fontStyle: font.italic ? 'italic' : 'normal',
 						fontWeight: font.weight
 					})
-					.find('.fp-fontspec').html(fontSpec);
+						.find('.fp-fontspec').html(fontSpec);
 				},
 
 				/**
 				 * Bind all events.
 				 */
-				bindEvents: function() {
+				bindEvents: function () {
 					var self = this;
 
 					this.$results
-					.on('keydown', function(e) {
-						self.keyDown(e, this);
-					})
-					.on('mouseenter', 'li:not(.fp-divider):visible', function(e) {
-						self.mouseEnter(e, this);
-					})
-					.on('click', 'li:not(.fp-divider):visible', function(e) {
-						self.click(e, this);
-					})
-					.on('dblclick', 'li:not(.fp-divider):visible', function(e) {
-						$('li.fp-active', this.$results).find('button.apply').trigger('click');
-					});
+						.on('keydown', function (e) {
+							self.keyDown(e, this);
+						})
+						.on('mouseenter', 'li:not(.fp-divider):visible', function (e) {
+							self.mouseEnter(e, this);
+						})
+						.on('click', 'li:not(.fp-divider):visible', function (e) {
+							self.click(e, this);
+						})
+						.on('dblclick', 'li:not(.fp-divider):visible', function (e) {
+							$('li.fp-active', this.$results).find('button.apply').trigger('click');
+						});
 
-					this.$original.on('change', function(e) {
+					this.$original.on('change', function (e) {
 						self.applyFontToOriginalInput(this.value);
 					});
 				},
@@ -5732,13 +5732,13 @@
 				/**
 				 * Automatically load fonts as they come in to view.
 				 */
-				lazyLoad: function() {
+				lazyLoad: function () {
 					if (!window.IntersectionObserver) { return; }
 
 					var self = this, $li;
 
-					var observer = new IntersectionObserver(function(lis) {
-						[].forEach.call(lis, function(li) {
+					var observer = new IntersectionObserver(function (lis) {
+						[].forEach.call(lis, function (li) {
 							if (li.intersectionRatio > 0) {
 								observer.unobserve(li.target); // Load only once per li
 								$li = $(li.target);
@@ -5748,7 +5748,7 @@
 						});
 					});
 
-					$('li:not(.fp-divider)', this.$results).each(function() {
+					$('li:not(.fp-divider)', this.$results).each(function () {
 						observer.observe(this);
 					});
 				},
@@ -5758,7 +5758,7 @@
 				 *
 				 * @param {string} state Either 'hide' or 'show'. When omitted visibility of the modal is toggled.
 				 */
-				toggleModal: function(state) {
+				toggleModal: function (state) {
 					if (!state) {
 						state = this.$modal.is(':visible') ? 'hide' : 'show';
 					}
@@ -5767,7 +5767,7 @@
 						// Hide modal
 						$('.fp-fav,.fp-variants,.fp-btns').remove();
 
-						this.$modal.css('display','none');
+						this.$modal.css('display', 'none');
 						$('.fp-modal-backdrop', this.$element).remove();
 						$(this.options.parentElement).removeClass('fp-modal-open');
 						$('span', this.$select).focus();
@@ -5778,13 +5778,13 @@
 
 						this.$element.append(
 							$('<div class="fp-modal-backdrop">')
-							.on('click', function() {
-								// Click outside modal window closes the modal
-								$('.fp-close', this.$modal).trigger('click');
-							})
+								.on('click', function () {
+									// Click outside modal window closes the modal
+									$('.fp-close', this.$modal).trigger('click');
+								})
 						);
 
-						this.$modal.css('display','flex');
+						this.$modal.css('display', 'flex');
 
 						this.getFavorites(); // List favorites & recents
 
@@ -5814,12 +5814,12 @@
 				/**
 				 * Apply user filters to font list: language, categories and search term.
 				 */
-				applyFilter: function() {
+				applyFilter: function () {
 					var lang = this.$lang.val(),
 						searchTerm = this.$search.val().trim(),
 						cats = [];
 
-					$('.fp-category', this.$filter).each(function() {
+					$('.fp-category', this.$filter).each(function () {
 						if ($(this).hasClass('checked')) {
 							cats.push($(this).data('category'));
 						}
@@ -5836,9 +5836,9 @@
 								$li = $("li[data-font-family='" + f + "']", this.$results),
 								cat = item.category || 'other';
 
-							if ( ('' == lang || langs.indexOf(lang) != -1) &&
-								 (cats.indexOf(cat) != -1) &&
-								 ('' == searchTerm || f.toLowerCase().indexOf(searchTerm.toLowerCase()) != -1) ) {
+							if (('' == lang || langs.indexOf(lang) != -1) &&
+								(cats.indexOf(cat) != -1) &&
+								('' == searchTerm || f.toLowerCase().indexOf(searchTerm.toLowerCase()) != -1)) {
 								$li.show();
 							}
 							else {
@@ -5851,33 +5851,33 @@
 				/**
 				 * Construct filter UI.
 				 */
-				getFilterUI: function() {
+				getFilterUI: function () {
 					var self = this,
 						$searchWrap = $('<div class="fp-search-wrap">');
 
 					this.$filter = $('<div class="fp-filter">');
 
 					// Search input
-					this.$search = $('<input>', {'class':'fp-search', type:'text', placeholder:this.dictionary['search'], spellcheck:false})
-					.on('keyup', function() {
-						self.applyFilter();
-					})
-					.appendTo($searchWrap);
+					this.$search = $('<input>', { 'class': 'fp-search', type: 'text', placeholder: this.dictionary['search'], spellcheck: false })
+						.on('keyup', function () {
+							self.applyFilter();
+						})
+						.appendTo($searchWrap);
 
 					// Clear button
 					$('<div class="fp-clear">')
-					.on('click', function() {
-						self.$search.val('').focus();
-						self.applyFilter();
-					})
-					.appendTo($searchWrap);
+						.on('click', function () {
+							self.$search.val('').focus();
+							self.applyFilter();
+						})
+						.appendTo($searchWrap);
 
 					// Language pulldown
 					var opts = ['<option value="">' + this.dictionary['allLangs'] + '</option>'];
 					for (var l in googleFontLangs) {
 						opts.push('<option value="' + l + '">' + googleFontLangs[l] + '</option>');
 					}
-					this.$lang = $('<select class="fp-lang">').on('change', function() {
+					this.$lang = $('<select class="fp-lang">').on('change', function () {
 						self.applyFilter();
 					}).html(opts.join(''));
 
@@ -5894,20 +5894,20 @@
 					gFontCats.push('other');
 					for (var g = 0; g < gFontCats.length; g++) {
 						$('<span class="fp-category fp-pill checked">')
-						.data('category', gFontCats[g])
-						.text(gFontCats[g])
-						.on('click', function() {
-							$(this).toggleClass('checked');
-							self.applyFilter();
-						})
-						.appendTo(this.$filter);
+							.data('category', gFontCats[g])
+							.text(gFontCats[g])
+							.on('click', function () {
+								$(this).toggleClass('checked');
+								self.applyFilter();
+							})
+							.appendTo(this.$filter);
 					}
 				},
 
 				/**
 				 * Construct font list.
 				 */
-				getFontsList: function() {
+				getFontsList: function () {
 					var self = this,
 						$frag = $(document.createDocumentFragment()), // Use a document fragment to increase performance
 						$li,
@@ -5928,8 +5928,8 @@
 							small = ' <small>' + items.join(', ') + '</small>';
 						}
 
-						$li = $('<li>', {'data-font-type':fontType, 'data-font-family':fontFamily})
-						.html(fontFamily + small);
+						$li = $('<li>', { 'data-font-type': fontType, 'data-font-family': fontFamily })
+							.html(fontFamily + small);
 
 						$frag.append($li[0]);
 					}
@@ -5952,13 +5952,13 @@
 						}
 					}
 
-					this.$results = $('<ul>', {'class':'fp-results', tabindex:0}).append($frag);
+					this.$results = $('<ul>', { 'class': 'fp-results', tabindex: 0 }).append($frag);
 				},
 
 				/**
 				 * Construct list of favorited and recently picked fonts
 				 */
-				getFavorites: function() {
+				getFavorites: function () {
 					var favoriteFonts = __cookie('favs'),
 						recentFonts = __cookie('recents');
 
@@ -5974,9 +5974,9 @@
 					}
 
 					var $frag = $(document.createDocumentFragment()), $li = null, $orgLi, tmp;
-                    var fontType = "";
-                    var fontFamily = "";
-                    var font = undefined;
+					var fontType = "";
+					var fontFamily = "";
+					var font = undefined;
 					for (var f = 0; f < fonts.length; f++) {
 						tmp = fonts[f].split(':'), fontType = tmp[0], fontFamily = tmp[1], font = this.allFonts[fontType][fontFamily];
 						if (!font) { continue; }
@@ -5997,7 +5997,7 @@
 				/**
 				 * Setup HTML structure for the font picker.
 				 */
-				setupHtml: function() {
+				setupHtml: function () {
 					var self = this,
 						fontSpec = this.$original.val();
 
@@ -6005,46 +6005,46 @@
 
 					this.$select =
 						$('<div class="font-picker fp-select">')
-						.on('click', function() {
-							self.toggleModal('show');
-						})
-						.on('keydown', function(e) {
-							// Open the modal with spacebar
-							if (e.keyCode == 32) {
-								e.stopPropagation();
-								e.preventDefault();
+							.on('click', function () {
 								self.toggleModal('show');
-							}
-						})
-						.append('<span class="fp-fontspec" tabindex="0">' + (fontSpec ? fontSpec : this.dictionary['selectFont']) + '</span>');
+							})
+							.on('keydown', function (e) {
+								// Open the modal with spacebar
+								if (e.keyCode == 32) {
+									e.stopPropagation();
+									e.preventDefault();
+									self.toggleModal('show');
+								}
+							})
+							.append('<span class="fp-fontspec" tabindex="0">' + (fontSpec ? fontSpec : this.dictionary['selectFont']) + '</span>');
 
 
 					if (!!self.options.showClear) {
 						// Add a clear button
 						self.$select
-						.append($('<span class="fp-clear"></span>')
-						.on('click', function(e) {
-							e.stopPropagation();
+							.append($('<span class="fp-clear"></span>')
+								.on('click', function (e) {
+									e.stopPropagation();
 
-							self.$select
-							.removeAttr('style')
-							.find('.fp-fontspec')
-							.html(self.dictionary['selectFont']);;
+									self.$select
+										.removeAttr('style')
+										.find('.fp-fontspec')
+										.html(self.dictionary['selectFont']);;
 
-							self.$original.val('').change(); // Update original <input> element
-						}));
+									self.$original.val('').change(); // Update original <input> element
+								}));
 					}
 
 					this.$original.after(this.$select);
 
-					this.$element = $('<div>', {'class': 'font-picker'});
+					this.$element = $('<div>', { 'class': 'font-picker' });
 
 					this.$modal = $('<div class="fp-modal">').appendTo(this.$element);
 
 					this.$modal.append(
 						$('<div class="fp-header">').append(
 							$('<div class="fp-icons">').append(
-								$('<span class="fp-close">&times</span>').on('click', function() {
+								$('<span class="fp-close">&times</span>').on('click', function () {
 									self.toggleModal('hide');
 								})
 							),
@@ -6055,7 +6055,7 @@
 					this.getFilterUI();
 					this.$modal.append(this.$filter);
 
-					this.$sample = $('<div>', {'class':'fp-sample', contenteditable:true, spellcheck:false, title:this.dictionary['sampleTextEditable']})
+					this.$sample = $('<div>', { 'class': 'fp-sample', contenteditable: true, spellcheck: false, title: this.dictionary['sampleTextEditable'] })
 						.html(this.dictionary['sampleText'])
 						.appendTo(this.$modal);
 
@@ -6070,7 +6070,7 @@
 
 					if (cats) {
 						cats = cats.split(',');
-						$('.fp-category', this.$filter).each(function() {
+						$('.fp-category', this.$filter).each(function () {
 							if (-1 == cats.indexOf($(this).data('category'))) {
 								$(this).removeClass('checked');
 							}
@@ -6096,10 +6096,10 @@
 				/**
 				 * Show the fontpicker.
 				 */
-				show: function() {
+				show: function () {
 					var el = $(this).data('plugin_' + pluginName);
 					if (!el.$select) {
-						throw new Error('jquery.'+pluginName+': Cannot show, as I\'ve been destroyed.');
+						throw new Error('jquery.' + pluginName + ': Cannot show, as I\'ve been destroyed.');
 					}
 					el.toggleModal('show');
 				},
@@ -6107,10 +6107,10 @@
 				/**
 				 * Hide the fontpicker.
 				 */
-				hide: function() {
+				hide: function () {
 					var el = $(this).data('plugin_' + pluginName);
 					if (!el.$select) {
-						throw new Error('jquery.'+pluginName+': Cannot hide, as I\'ve been destroyed.');
+						throw new Error('jquery.' + pluginName + ': Cannot hide, as I\'ve been destroyed.');
 					}
 					el.toggleModal('hide');
 				},
@@ -6118,10 +6118,10 @@
 				/**
 				 * Destroy the fontpicker plugin, revert element back to original.
 				 */
-				destroy: function() {
+				destroy: function () {
 					var el = $(this).data('plugin_' + pluginName);
 					if (!el.$select) {
-						throw new Error('jquery.'+pluginName+': Cannot destroy, as I\'ve been destroyed already.');
+						throw new Error('jquery.' + pluginName + ': Cannot destroy, as I\'ve been destroyed already.');
 					}
 					el.toggleModal('hide');
 					el.$select.remove();
@@ -6141,23 +6141,23 @@
 				args = Array.prototype.slice.call(arguments, 1),
 				returnVal;
 
-			this.each(function() {
+			this.each(function () {
 				if ($.data(this, 'plugin_' + pluginName) && typeof $.data(this, 'plugin_' + pluginName)[methodName] === 'function') {
 					returnVal = $.data(this, 'plugin_' + pluginName)[methodName].apply(this, args);
 				}
 				else {
-					throw new Error('jquery.'+pluginName+': Method ' +  methodName + ' does not exist.');
+					throw new Error('jquery.' + pluginName + ': Method ' + methodName + ' does not exist.');
 				}
 			});
 
 			return returnVal !== undefined ? returnVal : this; // Preserve chainablility
 		}
 
-		return this.each(function() {
-			if (!$.data(this, 'plugin_'+pluginName)) {
+		return this.each(function () {
+			if (!$.data(this, 'plugin_' + pluginName)) {
 				// If options exist, merge them
 				options && $.extend(settings, options);
-				$.data(this, 'plugin_'+pluginName, new Fontpicker(this, settings));
+				$.data(this, 'plugin_' + pluginName, new Fontpicker(this, settings));
 			}
 		});
 	};
@@ -6168,2341 +6168,2338 @@
 // 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></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.on("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.on("paste", function () {
-                setTimeout(setFromTextInput, 1);
-            });
-            textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } });
-
-            cancelButton.text(opts.cancelText);
-            cancelButton.on("click.spectrum", function (e) {
-                e.stopPropagation();
-                e.preventDefault();
-                revert();
-                hide();
-            });
-
-            clearButton.attr("title", opts.clearText);
-            clearButton.on("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.on("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.on("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();
-
-                    // If the picker is going to close immediately, a palette selection
-                    // is a change.  Otherwise, it's a move only.
-                    if (opts.hideAfterPaletteSelect) {
-                        updateOriginalInput(true);
-                        hide();
-                    } else {
-                        updateOriginalInput();
-                    }
-                }
-
-                return false;
-            }
-
-            var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum";
-            paletteContainer.on(paletteEvent, ".sp-thumb-el", paletteElementClick);
-            initialColorContainer.on(paletteEvent, ".sp-thumb-el:nth-child(1)", { 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);
-                move();
-                updateOriginalInput();
-            }
-            else {
-                var tiny = tinycolor(value);
-                if (tiny.isValid()) {
-                    set(tiny);
-                    move();
-                    updateOriginalInput();
-                }
-                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).on("keydown.spectrum", onkeydown);
-            $(doc).on("click.spectrum", clickout);
-            $(window).on("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).off("keydown.spectrum", onkeydown);
-            $(doc).off("click.spectrum", clickout);
-            $(window).off("resize.spectrum", resize);
-
-            replacer.removeClass("sp-active");
-            container.addClass("sp-hidden");
-
-            callbacks.hide(get());
-            boundElement.trigger('hide.spectrum', [ get() ]);
-        }
-
-        function revert() {
-            set(colorOnShow, true);
-            updateOriginalInput(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 * 1000) / 1000
-            }, { 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.off("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();
-        var offsetLeft = offset.left;
-        var offsetTop = offset.top;
-
-        offsetTop += inputHeight;
-
-        offsetLeft -=
-            Math.min(offsetLeft, (offsetLeft + dpWidth > viewWidth && viewWidth > dpWidth) ?
-            Math.abs(offsetLeft + dpWidth - viewWidth) : 0);
-
-        offsetTop -=
-            Math.min(offsetTop, ((offsetTop + dpHeight > viewHeight && viewHeight > dpHeight) ?
-            Math.abs(dpHeight + inputHeight - extraY) : extraY));
-
-        return {
-            top: offsetTop,
-            bottom: offset.bottom,
-            left: offsetLeft,
-            right: offset.right,
-            width: offset.width,
-            height: offset.height
-        };
-    }
-
-    /**
-    * 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).on(duringDragEvents);
-                    $(doc.body).addClass("sp-dragging");
-
-                    move(e);
-
-                    prevent(e);
-                }
-            }
-        }
-
-        function stop() {
-            if (dragging) {
-                $(doc).off(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).on("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({}, $(this).data(), opts);
-            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(1000 * this._a) / 1000;
-        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(1000 * this._a) / 1000;
-            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();
-        }
-    });
-
-});
-
-
-start()
+	"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></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.on("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.on("paste", function () {
+				setTimeout(setFromTextInput, 1);
+			});
+			textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } });
+
+			cancelButton.text(opts.cancelText);
+			cancelButton.on("click.spectrum", function (e) {
+				e.stopPropagation();
+				e.preventDefault();
+				revert();
+				hide();
+			});
+
+			clearButton.attr("title", opts.clearText);
+			clearButton.on("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.on("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.on("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();
+
+					// If the picker is going to close immediately, a palette selection
+					// is a change.  Otherwise, it's a move only.
+					if (opts.hideAfterPaletteSelect) {
+						updateOriginalInput(true);
+						hide();
+					} else {
+						updateOriginalInput();
+					}
+				}
+
+				return false;
+			}
+
+			var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum";
+			paletteContainer.on(paletteEvent, ".sp-thumb-el", paletteElementClick);
+			initialColorContainer.on(paletteEvent, ".sp-thumb-el:nth-child(1)", { 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);
+				move();
+				updateOriginalInput();
+			}
+			else {
+				var tiny = tinycolor(value);
+				if (tiny.isValid()) {
+					set(tiny);
+					move();
+					updateOriginalInput();
+				}
+				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).on("keydown.spectrum", onkeydown);
+			$(doc).on("click.spectrum", clickout);
+			$(window).on("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).off("keydown.spectrum", onkeydown);
+			$(doc).off("click.spectrum", clickout);
+			$(window).off("resize.spectrum", resize);
+
+			replacer.removeClass("sp-active");
+			container.addClass("sp-hidden");
+
+			callbacks.hide(get());
+			boundElement.trigger('hide.spectrum', [get()]);
+		}
+
+		function revert() {
+			set(colorOnShow, true);
+			updateOriginalInput(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 * 1000) / 1000
+			}, { 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.off("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();
+		var offsetLeft = offset.left;
+		var offsetTop = offset.top;
+
+		offsetTop += inputHeight;
+
+		offsetLeft -=
+			Math.min(offsetLeft, (offsetLeft + dpWidth > viewWidth && viewWidth > dpWidth) ?
+				Math.abs(offsetLeft + dpWidth - viewWidth) : 0);
+
+		offsetTop -=
+			Math.min(offsetTop, ((offsetTop + dpHeight > viewHeight && viewHeight > dpHeight) ?
+				Math.abs(dpHeight + inputHeight - extraY) : extraY));
+
+		return {
+			top: offsetTop,
+			bottom: offset.bottom,
+			left: offsetLeft,
+			right: offset.right,
+			width: offset.width,
+			height: offset.height
+		};
+	}
+
+	/**
+	* 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).on(duringDragEvents);
+					$(doc.body).addClass("sp-dragging");
+
+					move(e);
+
+					prevent(e);
+				}
+			}
+		}
+
+		function stop() {
+			if (dragging) {
+				$(doc).off(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).on("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({}, $(this).data(), opts);
+			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(1000 * this._a) / 1000;
+			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(1000 * this._a) / 1000;
+				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();
+		}
+	});
+
+});
\ No newline at end of file
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/history.html b/Jellyfin.Plugin.SkinManager/Configuration/history.html
new file mode 100644
index 0000000..b7895b1
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/history.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Skin Manager</title>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+</head>
+
+<body>
+    <div id="historyPage" data-role="page"
+        class="page type-interior pluginConfigurationPage tbsConfigurationPage withTabs"
+        data-require="emby-input,emby-button" data-controller="__plugin/fontpicker.js">
+        <script src="/web/configurationpage?name=controls.Control.js"></script>
+        <script src="/web/configurationpage?name=controls.ColorControl.js"></script>
+        <script src="/web/configurationpage?name=controls.SliderControl.js"></script>
+        <script src="/web/configurationpage?name=controls.CheckBoxControl.js"></script>
+        <script src="/web/configurationpage?name=controls.NumberControl.js"></script>
+        <script src="/web/configurationpage?name=controls.SelectControl.js"></script>
+        <script src="/web/configurationpage?name=controls.FontPickerControl.js"></script>
+        <script src="/web/configurationpage?name=controls.TextAreaControl.js"></script>
+        <script src="/web/configurationpage?name=controls.Category.js"></script>
+        <script src="/web/configurationpage?name=skin.js"></script>
+        <script src="/web/configurationpage?name=fontpicker.js"></script>
+        <script src="/web/configurationpage?name=colorpicker.js"></script>
+        <script src="/web/configurationpage?name=MainController.js"></script>
+        <script src="/web/configurationpage?name=common.js"></script>
+        <script src="/web/configurationpage?name=ConfigController.js"></script>
+        <script src="/web/configurationpage?name=HistoryController.js"></script>
+
+        <link rel="stylesheet" href="/web/configurationpage?name=style.css" />
+
+        <div data-role="content">
+            <div class="content-primary">
+                <div class="tbsConfigurationPage">
+                    <div class="sectionTitleContainer flex align-items-center">
+                        <h2 class="sectionTitle">Skin Manager</h2>
+                        <a is="emby-linkbutton" class="raised button-alt headerHelpButton emby-button" target="_blank"
+                            href="https://prayag17.github.io/jellyfin-plugin-skin-manager/src/html/help.html">Help</a>
+                    </div>
+                    <div class="history-split">
+                        <section class="history-column history-column-skins">
+                            <header class="history-column-header">
+                                <h3>Skin History</h3>
+                                <p>Reapply any skin you used before.</p>
+                            </header>
+                            <div class="history-card">
+                                <label for="cssOptions-history" class="history-label">Select a skin</label>
+                                <select is="emby-select" id="cssOptions-history" class="history-select"></select>
+                            </div>
+                            <div class="history-panel" id="skinHistoryPanel">
+                                <div class="history-panel-inner checkboxList checkboxList-verticalwrap"
+                                    id="options-history"></div>
+                            </div>
+                            <button is="emby-button" type="button" class="raised history-action"
+                                id="setSkin-history"><span>Apply skin</span></button>
+                        </section>
+                        <section class="history-column history-column-css">
+                            <header class="history-column-header">
+                                <h3>User CSS</h3>
+                                <p>Keep your personal tweaks safe when switching skins.</p>
+                            </header>
+                            <div class="css-history" id="cssHistoryContainer" data-empty="true">
+                                <div class="history-card">
+                                    <label for="cssHistorySelect" class="history-label">Select a revision</label>
+                                    <select is="emby-select" id="cssHistorySelect" class="history-select"></select>
+                                </div>
+                                <button is="emby-button" type="button" class="raised history-action-secondary"
+                                    id="restoreCssButton">
+                                    <span>Restore CSS</span>
+                                </button>
+                                <p class="css-history-meta" id="cssHistoryMeta"></p>
+                                <pre class="css-history-code" id="cssHistoryCode"></pre>
+                                <div class="css-history-empty" id="cssHistoryEmpty">
+                                    No saved CSS yet.
+                                </div>
+                            </div>
+                        </section>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <script>
+            console.log("history page loaded");
+            const setHistoryTabs = function () {
+                LibraryMenu.setTabs('history', 1, getTabs);
+            };
+            if (!window.SkinManagerHistoryViewListener) {
+                window.SkinManagerHistoryViewListener = function (e) {
+                    if (e.target && e.target.id === 'historyPage') {
+                        setHistoryTabs();
+                    }
+                };
+                document.addEventListener('viewshow', window.SkinManagerHistoryViewListener);
+            }
+            setHistoryTabs();
+            let historyController = new HistoryController();
+            historyController.init();
+        </script>
+    </div>
+</body>
+
+</html>
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/skin.js b/Jellyfin.Plugin.SkinManager/Configuration/skin.js
new file mode 100644
index 0000000..69fc6de
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/skin.js
@@ -0,0 +1,88 @@
+class Skin {
+    constructor({ name, description, css, previews, categories }) {
+        this.name = name;
+        this.description = description;
+        this.css = css;
+        this.previews = previews;
+        this.categories = categories.map(category => new Category(category.name, category.controls));
+        this.addCustomCssInput();
+
+        console.log(`Skin "${this.name}" initialized with ${this.categories.length} categories.`);
+    }
+
+    generateHTML({ includePreview = true } = {}) {
+        const categoriesHTML = this.categories
+            .map(category => category.generateHTML())
+            .join('');
+
+        const previewsHTML = includePreview ? this.generatePreviewHTML() : '';
+
+        return `
+            <div data-role="controlgroup" class="optionsContainer">
+                <div class="categoriesContainer">
+                    ${categoriesHTML}
+                </div>
+                <br/>
+                ${previewsHTML}
+            </div>
+        `;
+    }
+
+
+    generateCSS() {
+        const marker = "/* Skin Manager CSS */";
+        const sections = [marker];
+
+        if (typeof this.css === "string" && this.css.trim()) {
+            sections.push(this.css.trim());
+        }
+
+        const categoryCss = this.categories
+            .map(c => c.generateCSS())
+            .filter(Boolean)
+            .map(section => typeof section === "string" ? section.trim() : section)
+            .filter(section => !!section && (typeof section !== "string" || section.length));
+
+        sections.push(...categoryCss);
+
+        return sections.join("\n\n") + "\n";
+    }
+
+    attachEventListeners() {
+        this.categories.forEach(category => category.attachEventListeners());
+    }
+
+    generatePreviewHTML() {
+        if (!this.previews || this.previews.length === 0) return '';
+
+        return `
+            <div class="verticalSection verticalSection-extrabottompadding previewSection">
+                <h2 class="sectionTitle">Previews</h2>
+                ${this.previews
+                .map(p => `
+                    <fieldset class="verticalSection verticalSection-extrabottompadding">
+                    <img src="${p.url}" alt="${p.name || ''}">
+                    <legend>${p.name}</legend>
+                    </fieldset>`
+                )
+                .join("")}
+            </div>
+        `;
+    }
+
+
+    addCustomCssInput() {
+        const CustomCssControl = new TextAreaControl({
+            label: "Custom CSS",
+            description: "Add your own CSS rules here. These will be applied last, so they can override other settings.",
+            value: "",
+            default: "",
+            css: "%value%"
+        });
+
+        const CustomCategory = new Category("Custom CSS", [CustomCssControl]);
+        this.categories.push(CustomCategory);
+    }
+
+}
+
diff --git a/Jellyfin.Plugin.SkinManager/Configuration/style.css b/Jellyfin.Plugin.SkinManager/Configuration/style.css
new file mode 100644
index 0000000..1b96fb9
--- /dev/null
+++ b/Jellyfin.Plugin.SkinManager/Configuration/style.css
@@ -0,0 +1,1250 @@
+ img {
+     width: 100%;
+ }
+
+ fieldset.verticalSection.verticalSection-extrabottompadding {
+     border: 1px solid #333333;
+     border-radius: 10px;
+ }
+
+ .history-split {
+     display: flex;
+     gap: 24px;
+     margin-top: 16px;
+ }
+
+ .history-column {
+     flex: 1 1 0;
+     display: flex;
+     flex-direction: column;
+     gap: 16px;
+     padding: 20px;
+     border: 1px solid rgba(255, 255, 255, 0.08);
+     border-radius: 16px;
+     background: rgba(255, 255, 255, 0.02);
+     min-width: 0;
+ }
+
+ .history-column-header h3 {
+     margin: 0 0 4px;
+     font-size: 1.4rem;
+ }
+
+ .history-column-header p {
+     margin: 0;
+     color: rgba(255, 255, 255, 0.7);
+     font-size: 0.95rem;
+ }
+
+ .history-label {
+     display: block;
+     margin-bottom: 6px;
+     font-weight: 600;
+ }
+
+ .history-card {
+     display: flex;
+     flex-direction: column;
+     gap: 8px;
+ }
+
+ .history-panel {
+     flex: 1 1 auto;
+     min-height: 220px;
+     border: 1px solid rgba(255, 255, 255, 0.08);
+     border-radius: 12px;
+     background: rgba(0, 0, 0, 0.25);
+     padding: 16px;
+     overflow: auto;
+ }
+
+ .history-panel-inner {
+     display: flex;
+     flex-direction: column;
+     gap: 12px;
+ }
+
+ .history-action {
+     align-self: flex-start;
+     min-width: 160px;
+ }
+
+ .history-action-secondary {
+     min-width: 140px;
+ }
+
+.css-history {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+#cssHistoryContainer[data-empty="true"] .history-card,
+#cssHistoryContainer[data-empty="true"] .history-action-secondary,
+#cssHistoryContainer[data-empty="true"] .css-history-meta,
+#cssHistoryContainer[data-empty="true"] .css-history-code {
+    display: none;
+}
+
+#cssHistoryContainer[data-empty="true"] .css-history-empty {
+    display: block;
+}
+
+#cssHistoryContainer[data-empty="false"] .css-history-empty {
+    display: none;
+}
+
+.css-history-empty {
+    margin: 0;
+    color: rgba(255, 255, 255, 0.7);
+    text-align: center;
+    line-height: 1.6;
+}
+
+.css-history-meta {
+    margin: 0;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.css-history-code {
+    margin: 0;
+    padding: 16px;
+    border-radius: 12px;
+    background: rgba(0, 0, 0, 0.45);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    max-height: 320px;
+    overflow: auto;
+    font-size: 0.9rem;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+ @media (max-width: 900px) {
+     .history-split {
+         flex-direction: column;
+     }
+
+     .history-column {
+         padding: 16px;
+     }
+ }
+
+ legend {
+     font-size: 135%;
+ }
+
+ .img {
+     overflow: hidden;
+ }
+
+ .tooltip {
+     position: relative;
+     display: inline-block;
+     border-bottom: 1px dotted black;
+ }
+
+ .tooltip .tooltiptext {
+     visibility: hidden;
+     width: 400px;
+     background-color: transparent;
+     color: #fff;
+     text-align: center;
+     border-radius: 6px;
+     padding: 5px 0;
+     /* Position the tooltip */
+     position: absolute;
+     z-index: 1;
+     top: -5px;
+     left: 105%;
+ }
+
+ .tooltip:hover .tooltiptext {
+     visibility: visible;
+ }
+
+ input#favcolor {
+     width: 100%;
+     height: 3em !important;
+     background: none;
+     border: none;
+ }
+
+ .optionsContainer {
+     display: flex;
+     flex-direction: row;
+     gap: 10px;
+ }
+
+ .optionsContainer .categoriesContainer {
+     flex: 6;
+ }
+
+
+ .optionsContainer:only-child .categoriesContainer,
+ .optionsContainer .categoriesContainer:only-child {
+     flex: 1 1 100%;
+ }
+
+ @media (max-width: 600px) {
+     .optionsContainer {
+         flex-direction: column;
+     }
+
+     .optionsContainer .categoriesContainer,
+     .optionsContainer div {
+         flex: 1 1 100%;
+     }
+ }
+
+.fontPickerInput {
+    width: 100%;
+}
+
+.fontCont {
+    margin-top: 8px;
+    padding: 10px 12px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.fontPreviewText {
+    margin: 0;
+    font-size: 1.05rem;
+}
+
+
+ .previewSection {
+     max-width: fit-content;
+ }
+
+ .textareaLabel {
+     display: inline-block;
+     margin-bottom: .25em;
+     transition: all .2s ease-out;
+ }
+
+
+ .emby-textarea {
+     box-sizing: border-box;
+     color: inherit;
+     display: block;
+     font-family: inherit;
+     font-size: inherit;
+     font-weight: inherit;
+     margin: 0;
+     margin-bottom: 0 !important;
+     outline: none !important;
+     padding: .35em .25em;
+     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+     width: 100%;
+ }
+
+ .font-select * {
+     -webkit-box-sizing: border-box;
+     box-sizing: border-box;
+ }
+
+ .font-select {
+     font-size: 16px;
+     width: 100%;
+     position: relative;
+     display: inline-block;
+     border-color: red;
+ }
+
+ .font-select .fs-drop {
+     position: absolute;
+     top: 38px;
+     left: 0;
+     z-index: 999;
+     background: #292929;
+     color: #fff;
+     width: 100%;
+     border: 1px solid #aaa;
+     border-top: 0;
+     box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+     border-radius: 0 0 4px 4px;
+ }
+
+ .font-select>span {
+     outline: 0;
+     border-radius: 0.25rem;
+     border: 1px solid #ced4da;
+     display: block;
+     overflow: hidden;
+     white-space: nowrap;
+     text-overflow: ellipsis;
+     height: 38px;
+     line-height: 32px;
+     padding: 3px 8px 3px 8px;
+     color: #fff;
+     background: #292929 url(https://cosycorner.co.nz/wp-content/uploads/revslider/slider-1/white-down-arrow-png-2.png) no-repeat right 0.75em center/8px 9px;
+     -webkit-user-select: none;
+     -moz-user-select: none;
+     -ms-user-select: none;
+     user-select: none;
+     background-size: 1.15em;
+ }
+
+ .font-select-active>span {
+     background-color: #292929;
+     border-bottom-left-radius: 0;
+     border-bottom-right-radius: 0;
+ }
+
+ .font-select .fs-results {
+     max-height: 190px;
+     overflow-x: hidden;
+     overflow-y: auto;
+     margin: 0;
+     padding: 0;
+ }
+
+ .font-select .fs-results li {
+     line-height: 80%;
+     padding: 8px;
+     margin: 0;
+     list-style: none;
+     font-size: 18px;
+     white-space: nowrap;
+ }
+
+ .font-select .fs-results li.active {
+     background-color: #3875d7;
+     color: #fff;
+     cursor: pointer;
+ }
+
+ .font-select .fs-search {
+     border-bottom: 1px solid #aaa;
+     padding: 4px;
+     background: #292929;
+ }
+
+ .font-select .fs-search input {
+     padding: 7px;
+     width: 100%;
+     border: 1px solid #aaa;
+     font: 16px Helvetica, Sans-serif;
+     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
+     border-radius: 0.1875rem;
+     background: #292929;
+     color: #fff
+ }
+
+ .font-picker {
+     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+     color: #000;
+     width: -webkit-fill-available;
+     pointer-events: auto;
+ }
+
+ .font-picker * {
+     -webkit-box-sizing: border-box;
+     box-sizing: border-box
+ }
+
+ .font-picker.fp-select {
+     outline: 0;
+     border-radius: .25rem;
+     border: 1px solid #292929;
+     overflow: hidden;
+     white-space: nowrap;
+     text-overflow: ellipsis;
+     line-height: 28px;
+     padding: 3px 8px;
+     color: white;
+     background: #292929;
+     -webkit-user-select: none;
+     -ms-user-select: none;
+     user-select: none;
+     font-size: 16px;
+     display: flex;
+     flex-direction: row;
+     justify-content: space-between;
+     align-items: center;
+ }
+
+ .font-picker.fp-select::after {
+     content: "\e5cf";
+     font-family: 'Material Icons';
+     font-size: 25px;
+ }
+
+ .fp-row,
+ .fp-btns {
+     display: flex
+ }
+
+ .fp-row>input,
+ .fp-row>select {
+     flex: 1
+ }
+
+ .fp-favorite {
+     display: inline-block;
+     width: 24px;
+     height: 24px;
+     margin-right: 2px;
+     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-35.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5c0 201.2-356 429.3-356 429.3z' fill='%23fff'/%3E%3C/svg%3E");
+     background-repeat: no-repeat
+ }
+
+ .fp-favorite.checked {
+     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M923 283.6a260.04 260.04 0 0 0-56.9-82.8a264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39c-10 6.1-19.5 12.8-28.5 20.1c-9-7.3-18.5-14-28.5-20.1c-41.8-25.5-89.9-39-139.2-39c-3.5 0-69.9 6.8-102.4 20.3c-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9c0 33.3 6.8 68 20.3 103.3c11.3 29.5 27.5 60.1 48.2 91c32.8 48.9 77.9 99.9 133.9 151.6c92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3c56-51.7 101.1-102.7 133.9-151.6c20.7-30.9 37-61.5 48.2-91c13.5-35.3 20.3-70 20.3-103.3c.1-35.3-7-69.6-20.9-101.9z' fill='%23d00'/%3E%3C/svg%3E")
+ }
+
+ .font-picker .fp-btn {
+     display: inline-block;
+     background-color: #24272b;
+     color: #fff;
+     padding: 3px 8px;
+     font-size: 14px;
+     border-radius: 5px;
+     border: none;
+     cursor: pointer
+ }
+
+ .font-picker .fp-btn:hover {
+     background-color: #333;
+     -webkit-box-shadow: 0 0 4px #ddd;
+     box-shadow: 0 0 4px #ddd
+ }
+
+ .font-picker .fp-btn:active {
+     background-color: #fff;
+     color: #000
+ }
+
+ .font-picker .fp-btns {
+     position: absolute;
+     top: 6px;
+     right: 12px
+ }
+
+ .font-picker .fp-btn.apply {
+     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important
+ }
+
+ .font-picker .fp-header {
+     flex: none;
+     border-bottom: 1px solid #dee2e6;
+     padding: 4px 8px;
+     font-size: 20px
+ }
+
+ .font-picker .fp-header h5 {
+     margin: 0;
+     line-height: 1.5;
+     font-weight: 500
+ }
+
+ .font-picker .fp-header .fp-icons {
+     float: right;
+     margin-top: -2px
+ }
+
+ .font-picker .fp-header .fp-icons>span {
+     cursor: pointer
+ }
+
+ .fp-modal-open {
+     overflow: hidden
+ }
+
+ .font-picker .fp-modal-backdrop {
+     position: fixed;
+     top: 0;
+     left: 0;
+     z-index: 1040;
+     width: 100%;
+     height: 100%;
+     background-color: #000;
+     opacity: .5
+ }
+
+ .font-picker .fp-modal {
+     display: none;
+     flex-flow: column;
+     position: fixed;
+     height: 800px;
+     max-height: 95%;
+     width: 400px;
+     max-width: 95%;
+     background: #fff;
+     z-index: 1050;
+     box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+     border-radius: 4px;
+     left: 50%;
+     transform: translateX(-50%);
+     top: 15px;
+     bottom: 15px
+ }
+
+ .font-picker .fp-filter {
+     font-size: 12px;
+     border-bottom: 1px solid #aaa;
+     padding: 6px;
+     flex: none
+ }
+
+ .font-picker .fp-lang,
+ .font-picker .fp-search {
+     width: 100%;
+     font-size: 13px;
+     border: 1px solid #ced4da;
+     color: #495057;
+     box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06);
+     border-radius: .1875rem
+ }
+
+ .font-picker .fp-search:focus {
+     box-shadow: 0 0 0 2px #bfdeff
+ }
+
+ .font-picker .fp-search-wrap {
+     position: relative
+ }
+
+ .font-picker .fp-clear {
+     margin-left: 8px;
+     vertical-align: -2px;
+     width: 16px;
+     height: 16px;
+     display: inline-block;
+     cursor: pointer;
+     background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3e%3cpath fill='%23aaa' d='M500,10C229.4,10,10,229.4,10,500c0,270.6,219.4,490,490,490c270.6,0,490-219.4,490-490C990,229.4,770.6,10,500,10z M718.5,631.1c24.1,24.1,24.1,63.3,0,87.4s-63.3,24.1-87.4,0L500,587.4L368.9,718.5c-24.1,24.1-63.3,24.1-87.4,0c-24.1-24.1-24.1-63.3,0-87.4L412.6,500L281.5,368.9c-24.1-24.1-24.1-63.3,0-87.4c24.1-24.1,63.3-24.1,87.4,0L500,412.6l131.1-131.1c24.1-24.1,63.3-24.1,87.4,0s24.1,63.3,0,87.4L587.4,500L718.5,631.1z'/%3e%3c/svg%3e") no-repeat right center/16px 16px
+ }
+
+ .font-picker .fp-search-wrap .fp-clear {
+     position: absolute;
+     top: 6px;
+     right: 4px
+ }
+
+ .font-picker .fp-lang {
+     padding: 4px 2px;
+     background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23303030' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
+     -moz-appearance: none;
+     -webkit-appearance: none;
+     appearance: none;
+     outline: 0
+ }
+
+ .font-picker .fp-search {
+     padding: 5px 6px
+ }
+
+ .font-picker .fp-sample {
+     flex: none;
+     border-bottom: 1px solid #ced4da;
+     font-size: 18px;
+     height: 50px;
+     padding: 0 6px;
+     line-height: 50px;
+     white-space: nowrap;
+     overflow: hidden;
+     text-overflow: ellipsis
+ }
+
+ .font-picker .hr {
+     border-bottom: 1px solid #ced4da;
+     margin: 6px -6px
+ }
+
+ .font-picker .fp-divider {
+     background-color: #eee;
+     color: #666;
+     font-size: 14px !important;
+     padding: 6px 8px;
+     border-bottom: 1px solid #ced4da;
+     border-top: 1px solid #ced4da;
+     text-align: center;
+     cursor: default !important
+ }
+
+ .font-picker [contenteditable] {
+     outline: none
+ }
+
+ .font-picker .fp-results {
+     list-style: none;
+     overflow-x: hidden;
+     overflow-y: auto;
+     margin: 0;
+     padding: 0;
+     -webkit-user-select: none;
+     -ms-user-select: none;
+     user-select: none;
+     margin-top: -1px;
+     outline: none
+ }
+
+ .font-picker .fp-results li {
+     padding: 6px 8px;
+     list-style: none;
+     font-size: 16px;
+     white-space: nowrap;
+     cursor: pointer
+ }
+
+ .font-picker .fp-results li>small {
+     font-size: 10px;
+     color: #999;
+     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important
+ }
+
+ .font-picker .fp-results li.fp-hover {
+     background-color: #d5e2f6
+ }
+
+ .font-picker .fp-results li.fp-active {
+     background-color: #3875d7;
+     color: #fff;
+     font-size: 18px;
+     padding: 8px;
+     position: relative
+ }
+
+ .font-picker .fp-results li.fp-active small {
+     color: #fff
+ }
+
+ .font-picker .fp-variants {
+     margin-top: 3px;
+     font-size: 12px;
+     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important
+ }
+
+ .font-picker .fp-pill {
+     -webkit-user-select: none;
+     -ms-user-select: none;
+     user-select: none;
+     display: inline-block;
+     padding: 2px 6px;
+     margin-bottom: 2px;
+     white-space: nowrap;
+     border-radius: 5rem;
+     background-color: #eee;
+     color: #555;
+     cursor: pointer
+ }
+
+ .font-picker .fp-variants .fp-pill {
+     padding: 1px 4px;
+     border-radius: 5rem;
+     background-color: #eee;
+     color: #555
+ }
+
+ .font-picker .fp-pill.checked {
+     background-color: #000;
+     color: #fff
+ }
+
+ .font-picker .fp-variants .fp-pill.italic {
+     font-style: italic
+ }
+
+ .font-picker .fp-variants .fp-pill.italic.checked {
+     background-color: #804;
+     font-style: italic
+ }
+
+ /***
+Spectrum Colorpicker v1.8.1
+https://github.com/bgrins/spectrum
+Author: Brian Grinstead
+License: MIT
+***/
+
+ .sp-container {
+     position: absolute;
+     top: 0;
+     left: 0;
+     display: inline-block;
+     *display: inline;
+     *zoom: 1;
+     /* https://github.com/bgrins/spectrum/issues/40 */
+     z-index: 9999994;
+     overflow: hidden;
+ }
+
+ .sp-container.sp-flat {
+     position: relative;
+ }
+
+ /* Fix for * { box-sizing: border-box; } */
+
+ .sp-container,
+ .sp-container * {
+     -webkit-box-sizing: content-box;
+     -moz-box-sizing: content-box;
+     box-sizing: content-box;
+ }
+
+ /* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
+
+ .sp-top {
+     position: relative;
+     width: 100%;
+     display: inline-block;
+ }
+
+ .sp-top-inner {
+     position: absolute;
+     top: 0;
+     left: 0;
+     bottom: 0;
+     right: 0;
+ }
+
+ .sp-color {
+     position: absolute;
+     top: 0;
+     left: 0;
+     bottom: 0;
+     right: 20%;
+ }
+
+ .sp-hue {
+     position: absolute;
+     top: 0;
+     right: 0;
+     bottom: 0;
+     left: 84%;
+     height: 100%;
+ }
+
+ .sp-clear-enabled .sp-hue {
+     top: 33px;
+     height: 77.5%;
+ }
+
+ .sp-fill {
+     padding-top: 80%;
+ }
+
+ .sp-sat,
+ .sp-val {
+     position: absolute;
+     top: 0;
+     left: 0;
+     right: 0;
+     bottom: 0;
+ }
+
+ .sp-alpha-enabled .sp-top {
+     margin-bottom: 18px;
+     flex-shrink: 0;
+ }
+
+ .sp-alpha-enabled .sp-alpha {
+     display: block;
+ }
+
+ .sp-alpha-handle {
+     position: absolute;
+     top: -4px;
+     bottom: -4px;
+     width: 6px;
+     left: 50%;
+     cursor: pointer;
+     border: 1px solid black;
+     background: white;
+     opacity: .8;
+ }
+
+ .sp-alpha {
+     display: none;
+     position: absolute;
+     bottom: -18px;
+     right: 0;
+     left: 0;
+     height: 15px;
+ }
+
+ .sp-alpha-inner {
+     border: solid 1px #333;
+ }
+
+ .sp-clear {
+     display: none;
+ }
+
+ .sp-clear.sp-clear-display {
+     background-position: center;
+ }
+
+ .sp-clear-enabled .sp-clear {
+     display: block;
+     position: absolute;
+     top: 0px;
+     right: 0;
+     bottom: 0;
+     left: 84%;
+     height: 28px;
+ }
+
+ /* Don't allow text selection */
+
+ .sp-container,
+ .sp-replacer,
+ .sp-preview,
+ .sp-dragger,
+ .sp-slider,
+ .sp-alpha,
+ .sp-clear,
+ .sp-alpha-handle,
+ .sp-container.sp-dragging .sp-input,
+ .sp-container button {
+     -webkit-user-select: none;
+     -moz-user-select: -moz-none;
+     -o-user-select: none;
+     user-select: none;
+ }
+
+ .sp-container.sp-input-disabled .sp-input-container {
+     display: none;
+ }
+
+ .sp-container.sp-buttons-disabled .sp-button-container {
+     display: none;
+ }
+
+ .sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
+     display: none;
+ }
+
+ .sp-palette-only .sp-picker-container {
+     display: none;
+ }
+
+ .sp-palette-disabled .sp-palette-container {
+     display: none;
+ }
+
+ .sp-initial-disabled .sp-initial {
+     display: none;
+ }
+
+ /* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
+
+ .sp-sat {
+     background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
+     background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
+     background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+     background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+     background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+     background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
+     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
+     filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
+ }
+
+ .sp-val {
+     background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
+     background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
+     background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+     background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+     background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+     background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
+     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
+     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
+ }
+
+ .sp-hue {
+     background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+     background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+     background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+     background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
+     background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+     background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+ }
+
+ /* IE filters do not support multiple color stops.
+   Generate 6 divs, line them up, and do two color gradients for each.
+   Yes, really.
+ */
+
+ .sp-1 {
+     height: 17%;
+     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
+ }
+
+ .sp-2 {
+     height: 16%;
+     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
+ }
+
+ .sp-3 {
+     height: 17%;
+     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
+ }
+
+ .sp-4 {
+     height: 17%;
+     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
+ }
+
+ .sp-5 {
+     height: 16%;
+     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
+ }
+
+ .sp-6 {
+     height: 17%;
+     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
+ }
+
+ .sp-hidden {
+     display: none !important;
+ }
+
+ /* Clearfix hack */
+
+ .sp-cf:before,
+ .sp-cf:after {
+     content: "";
+     display: table;
+ }
+
+ .sp-cf:after {
+     clear: both;
+ }
+
+ .sp-cf {
+     *zoom: 1;
+ }
+
+ /* Mobile devices, make hue slider bigger so it is easier to slide */
+
+ @media (max-device-width: 480px) {
+     .sp-color {
+         right: 40%;
+     }
+
+     .sp-hue {
+         left: 63%;
+     }
+
+     .sp-fill {
+         padding-top: 60%;
+     }
+ }
+
+ .sp-dragger {
+     border-radius: 5px;
+     height: 5px;
+     width: 5px;
+     border: 1px solid #fff;
+     background: #000;
+     cursor: pointer;
+     position: absolute;
+     top: 0;
+     left: 0;
+ }
+
+ .sp-slider {
+     position: absolute;
+     top: 0;
+     cursor: pointer;
+     height: 3px;
+     left: -1px;
+     right: -1px;
+     border: 1px solid #000;
+     background: white;
+     opacity: .8;
+ }
+
+ /*
+Theme authors:
+Here are the basic themeable display options (colors, fonts, global widths).
+See http://bgrins.github.io/spectrum/themes/ for instructions.
+*/
+ /*Edited by Prayag17*/
+
+ .sp-container {
+     background-color: rgb(62 62 62 / 99%);
+     padding: 0;
+     border-radius: 10px;
+     box-shadow: 0 0 15px #111;
+     display: flex;
+     flex-direction: column;
+     flex-flow: column-reverse;
+ }
+
+ .sp-container,
+ .sp-container button,
+ .sp-container input,
+ .sp-color,
+ .sp-hue,
+ .sp-clear {
+     font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+     -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+     -ms-box-sizing: border-box;
+     box-sizing: border-box;
+ }
+
+ .sp-top {
+     margin-bottom: 3px;
+ }
+
+ .sp-color,
+ .sp-hue,
+ .sp-clear {
+     border: solid 1px #666;
+ }
+
+ /* Input */
+
+ .sp-input-container {
+     float: right;
+     width: 100px;
+     margin-bottom: 4px;
+ }
+
+ .sp-initial-disabled .sp-input-container {
+     width: 100%;
+ }
+
+ .sp-input {
+     font-size: 12px !important;
+     border: 1px inset;
+     padding: 4px 5px;
+     margin: 0;
+     width: 100%;
+     background: transparent;
+     border-radius: 3px;
+     color: #fff;
+ }
+
+ .sp-input:focus {
+     border: 1px solid orange;
+ }
+
+ .sp-input.sp-validation-error {
+     border: 1px solid red;
+     background: #fdd;
+ }
+
+ .sp-picker-container,
+ .sp-palette-container {
+     float: left;
+     position: relative;
+     padding: 10px;
+ }
+
+ .sp-picker-container {
+     width: calc(100% - 20px);
+     display: flex;
+     flex-wrap: wrap;
+     grid-gap: 5px;
+ }
+
+ /* Palettes */
+
+ .sp-palette-container {
+     border-bottom: 1px solid #5b5b5b;
+ }
+
+ .sp-palette-only .sp-palette-container {
+     border: 0;
+ }
+
+ .sp-palette .sp-thumb-el {
+     display: block;
+     position: relative;
+     float: left;
+     width: 24px;
+     height: 15px;
+     margin: 3px;
+     cursor: pointer;
+     border: solid 2px transparent;
+ }
+
+ .sp-palette .sp-thumb-el:hover,
+ .sp-palette .sp-thumb-el.sp-thumb-active {
+     border-color: orange;
+ }
+
+ .sp-thumb-el {
+     position: relative;
+ }
+
+ /* Initial */
+
+ .sp-initial {
+     float: left;
+     border: solid 1px #333;
+ }
+
+ .sp-initial span {
+     width: 30px;
+     height: 25px;
+     border: none;
+     display: block;
+     float: left;
+     margin: 0;
+ }
+
+ .sp-initial .sp-clear-display {
+     background-position: center;
+ }
+
+ /* Buttons */
+
+ .sp-palette-button-container,
+ .sp-button-container {
+     float: right;
+ }
+
+ /* Replacer (the little preview div that shows up instead of the <input>) */
+
+ .sp-replacer {
+     margin: 0;
+     overflow: hidden;
+     cursor: pointer;
+     padding: 4px;
+     border: 1px solid #333;
+     background: transparent;
+     width: -webkit-fill-available;
+     vertical-align: middle;
+     border-radius: 2.5px;
+     display: flex;
+     flex-direction: row;
+     justify-content: space-between;
+     align-items: center;
+ }
+
+ .sp-replacer.sp-disabled {
+     cursor: default;
+     border-color: silver;
+     color: silver;
+ }
+
+ .sp-dd {
+     padding: 0;
+     height: 0;
+     line-height: 0;
+     float: left;
+     font-size: 10px;
+     width: 16px;
+     color: white;
+ }
+
+ .sp-preview {
+     position: relative;
+     width: calc(100% - 26px);
+     height: 20px;
+     border: none;
+     float: left;
+     z-index: 0;
+ }
+
+ .sp-palette {
+     *width: 220px;
+     max-width: 220px;
+ }
+
+ .sp-palette .sp-thumb-el {
+     width: 16px;
+     height: 16px;
+     margin: 2px 1px;
+     border: solid 1px #d0d0d0;
+ }
+
+ .sp-container {
+     padding-bottom: 0;
+ }
+
+ /* Buttons: http://hellohappy.org/css3-buttons/ */
+
+ .sp-container button {
+     border: none;
+     border-radius: 50px;
+     color: #fff;
+     font-size: 15px;
+     padding: 4px 8px;
+     text-align: center;
+     vertical-align: middle;
+     background: #2db93c !important;
+     transition: .2s;
+ }
+
+ .sp-container button:hover {
+     background-color: #23802d !important;
+     cursor: pointer;
+ }
+
+ .sp-container button:active {
+     border: 1px solid #aaa;
+     border-bottom: 1px solid #888;
+     -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+     -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+     -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+     -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+     box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ }
+
+ .sp-cancel:hover {
+     text-decoration: none;
+     background: #b23232 !important;
+ }
+
+ .sp-cancel {
+     font-size: 15px;
+     color: white;
+     margin: 0;
+     padding: 4px 8px;
+     margin-right: 5px;
+     vertical-align: middle;
+     text-decoration: none;
+     background: #d93f3f !important;
+     border-radius: 50px;
+     transition: .2s;
+ }
+
+ .sp-palette span:hover,
+ .sp-palette span.sp-thumb-active {
+     border-color: #000;
+ }
+
+ .sp-preview,
+ .sp-alpha,
+ .sp-thumb-el {
+     position: relative;
+     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+ }
+
+ .sp-preview-inner,
+ .sp-alpha-inner,
+ .sp-thumb-inner {
+     display: block;
+     position: absolute;
+     top: 0;
+     left: 0;
+     bottom: 0;
+     right: 0;
+ }
+
+ .sp-palette .sp-thumb-inner {
+     background-position: 50% 50%;
+     background-repeat: no-repeat;
+ }
+
+ .sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
+     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
+ }
+
+ .sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
+     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
+ }
+
+ .sp-clear-display {
+     background-repeat: no-repeat;
+     background-position: center;
+     background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
+ }
diff --git a/Jellyfin.Plugin.SkinManager/Jellyfin.Plugin.SkinManager.csproj b/Jellyfin.Plugin.SkinManager/Jellyfin.Plugin.SkinManager.csproj
index 14f2769..2077c8b 100644
--- a/Jellyfin.Plugin.SkinManager/Jellyfin.Plugin.SkinManager.csproj
+++ b/Jellyfin.Plugin.SkinManager/Jellyfin.Plugin.SkinManager.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
-    <TargetFramework>NET8.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
     <IsPackable>true</IsPackable>
     <AssemblyVersion>2.0.2</AssemblyVersion>
     <FileVersion>2.0.2</FileVersion>
@@ -10,15 +10,18 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Jellyfin.Controller" Version="10.10.0" />
+    <PackageReference Include="Jellyfin.Controller" Version="10.11.0" />
   </ItemGroup>
 
   <ItemGroup>
-    <None Remove="Configuration\configurationpage.html" />
-    <EmbeddedResource Include="Configuration\configurationpage.html" />
 
-    <None Remove="Configuration\fontpicker.js" />
-    <EmbeddedResource Include="Configuration\fontpicker.js" />
+
+  <None Remove="Configuration\*" />
+	<EmbeddedResource Include="Configuration\*" />
+
+  <None Remove="Configuration\controls\*" />
+	<EmbeddedResource Include="Configuration\controls\*" />
+
   </ItemGroup>
 
   <ItemGroup>
diff --git a/Jellyfin.Plugin.SkinManager/Plugin.cs b/Jellyfin.Plugin.SkinManager/Plugin.cs
index 287b085..b87fe46 100644
--- a/Jellyfin.Plugin.SkinManager/Plugin.cs
+++ b/Jellyfin.Plugin.SkinManager/Plugin.cs
@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using Jellyfin.Plugin.SkinManager.Configuration;
 using MediaBrowser.Common.Configuration;
 using MediaBrowser.Common.Plugins;
@@ -20,32 +21,53 @@ namespace Jellyfin.Plugin.SkinManager
 
         public static Plugin Instance { get; private set; }
 
-        public override string Description
-            => "Skin Manager";
+        public override string Description => "Skin Manager";
 
         private readonly Guid _id = new Guid("e9ca8b8e-ca6d-40e7-85dc-58e536df8eb3");
         public override Guid Id => _id;
 
+        public PluginConfiguration PluginConfiguration => Configuration;
+
         public IEnumerable<PluginPageInfo> GetPages()
         {
-            return new[]
+            var pageNames = new[]
             {
-                new PluginPageInfo
-                {
-                    Name = "SkinManager",
-                    EmbeddedResourcePath = GetType().Namespace + ".Configuration.configurationpage.html"
-                },
-                 new PluginPageInfo
-                {
-                    Name = "fontpicker.js",
-                    EmbeddedResourcePath = GetType().Namespace + ".Configuration.fontpicker.js"
-                }, 
-                new PluginPageInfo
-                {
-                    Name = "fontpicker.css",
-                    EmbeddedResourcePath = GetType().Namespace + ".Configuration.jquery.fontpicker.min.css"
-                }
+                "SkinManager",
+                "fontpicker.js",
+                "fontpicker.css",
+                "skin.js",
+                "controls.Control.js",
+                "controls.ColorControl.js",
+                "controls.SliderControl.js",
+                "controls.CheckBoxControl.js",
+                "controls.NumberControl.js",
+                "controls.SelectControl.js",
+                "controls.FontPickerControl.js",
+                "controls.TextAreaControl.js",
+                "controls.Category.js",
+                "colorpicker.js",
+                "MainController.js",
+                "style.css",
+                "common.js",
+                "history",
+                "ConfigController.js",
+                "HistoryController.js",
             };
+
+            var prefix = GetType().Namespace + ".Configuration.";
+
+            return pageNames.Select(name => new PluginPageInfo
+            {
+                Name = name,
+                EmbeddedResourcePath = name switch
+                {
+                    "SkinManager"   => prefix + "configurationpage.html",
+                    "history"       => prefix + "history.html",
+                    "fontpicker.css" => prefix + "jquery.fontpicker.min.css",
+                    _                => prefix + name
+                },
+                EnableInMainMenu = name.Equals("SkinManager", StringComparison.OrdinalIgnoreCase)
+            });
         }
     }
 }
diff --git a/skins-4.0.json b/skins-4.0.json
new file mode 100644
index 0000000..f47baef
--- /dev/null
+++ b/skins-4.0.json
@@ -0,0 +1,126 @@
+{
+    "skins": [
+        {
+            "name": "JellySkin",
+            "description": "A modern, customizable skin for Jellyfin.",
+            "css": "@import url('https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/main.css');",
+            "previews": [
+                {
+                    "name": "Login Page",
+                    "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Default/1.png"
+                },
+                {
+                    "name": "Home/Index Page",
+                    "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Default/2.png"
+                },
+                {
+                    "name": "Library Page",
+                    "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Default/3.png"
+                },
+                {
+                    "name": "Title page",
+                    "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Default/4.png"
+                }
+            ],
+            "categories": [
+                {
+                    "name": "Default",
+                    "controls": [
+                        {
+                            "type": "color",
+                            "label": "Background Color",
+                            "description": "Set the background color of the skin",
+                            "id": "bgColor",
+                            "default": "#ffffff",
+                            "css": ":root { --bg-color: %value%; }"
+                        },
+                        {
+                            "type": "color",
+                            "label": "Text Color",
+                            "id": "textColor",
+                            "default": "#000000",
+                            "css": ":root { --text-color: %value%; }"
+                        },
+                        {
+                            "type": "slider",
+                            "label": "Font Size",
+                            "id": "fontSize",
+                            "min": 10,
+                            "max": 30,
+                            "default": 16,
+                            "css": ":root { --font-size: %value%px; }"
+                        },
+                        {
+                            "type": "checkbox",
+                            "label": "Dark Mode",
+                            "description": "Enable dark mode",
+                            "id": "checkbox",
+                            "default": true,
+                            "css": ":root { --dark-mode: %value%; }"
+                        },
+                        {
+                            "type": "number",
+                            "label": "Border Radius",
+                            "description": "Set the border radius",
+                            "id": "borderRadius",
+                            "min": 0,
+                            "max": 50,
+                            "default": 0,
+                            "css": ":root { --"
+                        },
+                        {
+                            "type": "select",
+                            "label": "Font Family",
+                            "description": "Select the font family",
+                            "id": "fontFamily",
+                            "default": "Arial",
+                            "css": ":root { --font-family: %value%; }",
+                            "options": [
+                                {
+                                    "label": "Arial",
+                                    "value": "Arial"
+                                },
+                                {
+                                    "label": "Verdana",
+                                    "value": "Verdana"
+                                },
+                                {
+                                    "label": "Georgia",
+                                    "value": "Georgia"
+                                },
+                                {
+                                    "label": "Times New Roman",
+                                    "value": "Times New Roman"
+                                },
+                                {
+                                    "label": "Trebuchet MS",
+                                    "value": "Trebuchet MS"
+                                },
+                                {
+                                    "label": "Arial Black",
+                                    "value": "Arial Black"
+                                },
+                                {
+                                    "label": "Impact",
+                                    "value": "Impact"
+                                },
+                                {
+                                    "label": "Comic Sans MS",
+                                    "value": "Comic Sans MS"
+                                },
+                                {
+                                    "label": "Courier New",
+                                    "value": "Courier New"
+                                },
+                                {
+                                    "label": "Lucida Console",
+                                    "value": "Lucida Console"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file