--function to make any frame object movable
local AddOnName, nsVars = ...
local ss = nsVars.SS

local CreateFrame, CreateTexture, getglobal, tonumber, table, math = CreateFrame, CreateTexture, getglobal, tonumber, table, math
local strlower, pairs, select, string = strlower, pairs, select, string
local UIDropDownMenu_SetSelectedID, UIDropDownMenu_GetText, UIDropDownMenu_AddButton = UIDropDownMenu_SetSelectedID, UIDropDownMenu_GetText, UIDropDownMenu_AddButton
local UIDropDownMenu_Initialize, UIDropDownMenu_JustifyText = UIDropDownMenu_Initialize, UIDropDownMenu_JustifyText
local UIDropDownMenu_SetText, CloseDropDownMenus, UIDropDownMenu_SetSelectedValue = UIDropDownMenu_SetText, CloseDropDownMenus, UIDropDownMenu_SetSelectedValue
local InterfaceOptions_AddCategory = InterfaceOptions_AddCategory
local ColorPickerFrame, OpacitySliderFrame = ColorPickerFrame, OpacitySliderFrame

local setColorSelectColors = function(r, g, b, a)
  local fillColor = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getFillColor()

  ss.ConfigPreview.colorFields.colorFieldR:SetText(255 * r)
  ss.ConfigPreview.colorFields.colorFieldG:SetText(255 * g)
  ss.ConfigPreview.colorFields.colorFieldB:SetText(255 * b)
  ss.ConfigPreview.colorFields.colorFieldA:SetText(100 - (100 * a))

  if ss.ConfigPreview.colorFields.elementToChange == "Filling" then
    fillColor[1] = {r=r,g=g,b=b,a=a}
    ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setFillColor(fillColor)
  elseif ss.ConfigPreview.colorFields.elementToChange == "Second Filling" then
    fillColor[2] = {r=r,g=g,b=b,a=a}
    ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setFillColor(fillColor)
  elseif ss.ConfigPreview.colorFields.elementToChange == "SwirlColor" then
    ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setSwirlColor({r=r,g=g,b=b,a=a})
  elseif ss.ConfigPreview.colorFields.elementToChange == "SwirlColor1" then
    ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setSwirlColor({r=r,g=g,b=b,a=a}, 1)
  elseif ss.ConfigPreview.colorFields.elementToChange == "SwirlColor2" then
    ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setSwirlColor({r=r,g=g,b=b,a=a}, 2)
  elseif ss.ConfigPreview.colorFields.elementToChange == "SwirlColor3" then
    ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setSwirlColor({r=r,g=g,b=b,a=a}, 3)
  elseif ss.ConfigPreview.colorFields.elementToChange == "Font1" then
    ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setTextColor({r=r,g=g,b=b,a=a})
  elseif ss.ConfigPreview.colorFields.elementToChange == "Font2" then
    ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setTextColor2({r=r,g=g,b=b,a=a})
  end
end

local showColorSelect = function(xmlElement)
  local r,g,b,a

  if xmlElement == "Filling" then
    local fillColor = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getFillColor()
    r,g,b,a = ss:GetRGBAValues(fillColor[1])

    a = a or 1
  elseif xmlElement == "SwirlColor" then
    r,g,b,a = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getSwirlColor()
  elseif xmlElement == "SwirlColor1" then
    r,g,b,a = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getSwirlColor(1)
  elseif xmlElement == "SwirlColor2" then
    r,g,b,a = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getSwirlColor(2)
  elseif xmlElement == "SwirlColor3" then
    r,g,b,a = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getSwirlColor(3)
  elseif xmlElement == "Font1" then
    r,g,b,a = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getTextColor()
  elseif xmlElement == "Font2" then
    r,g,b,a = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getTextColor2()
  elseif xmlElement == "Second Filling" then
    local fillColor = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getFillColor()
    if fillColor[2] then
      r,g,b,a = ss:GetRGBAValues(fillColor[2])
    else
      r,g,b,a = ss:GetRGBAValues(fillColor[1])
    end

    a = a or 1
  end

  ss.ConfigPreview.colorFields:SetColorRGB(r,g,b)
  ss.ConfigPreview.colorFields.elementToChange = xmlElement
  ss.ConfigPreview.colorFields:SetScript("OnColorSelect", function(self)
    local r, g, b = self:GetColorRGB()
    setColorSelectColors(r, g, b, ((100 - ss.ConfigPreview.colorFields.colorFieldA:GetText()) / 100))
  end)

  ss.ConfigPreview.colorFields.colorFieldR:SetText(255 * r)
  ss.ConfigPreview.colorFields.colorFieldG:SetText(255 * g)
  ss.ConfigPreview.colorFields.colorFieldB:SetText(255 * b)
  ss.ConfigPreview.colorFields.colorFieldA:SetText(100 - (100 * a))
  ss.ConfigPreview.colorFields:Show()
end

local updateXMLText = function()
  local configName = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Get("configName")
  configName = configName == "vehicle" and "health" or configName
  configName = configName == "vehicleResource" and "mainResource" or configName

  if configName and ss.Layout.spheres[configName] then
    local text = ss.Layout.spheres[configName]:getText()
    local text2 = ss.Layout.spheres[configName]:getText2()

    ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setText(text)
    ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setText2(text2)
  else
    ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setText("")
    ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setText2("")
  end
end

local updateXMLTextures = function()
  if ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getFillColor()[2] then
    ss.ConfigPreview.sliderTargets.Filling = {
      "Color1",
      "Color2",
    };
  else
    ss.ConfigPreview.sliderTargets.Filling = {
      "Color",
    };
  end

  -- set rotaion and fill texture dropdoown
  if ss.ConfigPreview.RotationTexturesDropDown then
    UIDropDownMenu_SetText(ss.ConfigPreview.RotationTexturesDropDown,ss.db[ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Get("configName")].animation.id) -- loads from db
  end

  -- Fix default value for fill texture dropdown
  if ss.ConfigPreview.FillTexturesDropDown and not ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getFillColor()[2]then
    local mode = ss.profile.modeInfo[ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Get("configName")].mode
    local modeSpec = ss.profile.modeInfo[ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Get("configName")].modeSpec
    local connfigName = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Get("configName")
    local text = ss.db[connfigName].modes[modeSpec][mode].fillInfo["fillId"] == 1 and "moon" or ss.db[connfigName].modes[modeSpec][mode].fillInfo["fillId"]

    UIDropDownMenu_SetSelectedValue(ss.ConfigPreview.FillTexturesDropDown, text)
    UIDropDownMenu_SetText(ss.ConfigPreview.FillTexturesDropDown, text) -- loads from db
    ss.ConfigPreview.FillTexturesDropDown:Show();
    ss.ConfigPreview.FillTexturesDropDown.label:Show()
  else
    ss.ConfigPreview.FillTexturesDropDown:Hide();
    ss.ConfigPreview.FillTexturesDropDown.label:Hide()
  end

  if ss.ConfigPreview.TextFormattingDropdown then
    --set the selected value appropriately
    local textFormat = ss.db[ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Get("configName")].textFormat

    if textFormat == "truncated" then
      textFormat = "Truncate Value"
    elseif textFormat == "commaSeparated" then
      textFormat = "Comma Separated Value"
    else
      textFormat = "Raw Value"
    end

    UIDropDownMenu_SetSelectedValue(ss.ConfigPreview.TextFormattingDropdown, textFormat)
    UIDropDownMenu_SetText(ss.ConfigPreview.TextFormattingDropdown, textFormat)
  end

  ss.ConfigPreview.widgetFrame.SSSpherePercentageCheckBox:SetChecked(ss.db[ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Get("configName")].font[1].show)
  ss.ConfigPreview.widgetFrame.SSSphereValueCheckBox:SetChecked(ss.db[ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Get("configName")].font[2].show)
end

local previewSphere = function(label, dbConfig)
  ss.ConfigPreview.dbConfig = dbConfig
  ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setResource(ss.db[dbConfig])
  updateXMLTextures()
  updateXMLText()
  ss.ConfigPreview.widgetFrame.Title:SetText(label)
  dbConfig = dbConfig == "vehicle" and "health" or dbConfig
  dbConfig = dbConfig == "vehicleResource" and "mainResource" or dbConfig

  --    ss.ConfigPreview.widgetFrame.Title:SetTextColor(ss.private.config[dbConfig.."SphereButton"].color.r, ss.private.config[dbConfig.."SphereButton"].color.g, ss.private.config[dbConfig.."SphereButton"].color.b, ss.private.config[dbConfig.."SphereButton"].color.a)
  ss.ConfigPreview.widgetFrame.Title:SetTextColor(ss.ConfigTools.titleColor.r, ss.ConfigTools.titleColor.g, ss.ConfigTools.titleColor.b, ss.ConfigTools.titleColor.a)

  ss.ConfigPreview.SSTargetSlider:Hide()
  ss.ConfigPreview.colorFields:Hide()
  ColorPickerFrame.elementToChange = ""
  ss.ConfigPreview.colorFields.colorFieldR:SetText("")
  ss.ConfigPreview.colorFields.colorFieldG:SetText("")
  ss.ConfigPreview.colorFields.colorFieldB:SetText("")
  ss.ConfigPreview.colorFields.colorFieldA:SetText("")
  UIDropDownMenu_SetText(ss.ConfigPreview.SliderTargetDropDown, "Configure Sphere")
  UIDropDownMenu_SetSelectedValue(ss.ConfigPreview.ConfigSphereOptionsDropDown, "default")
  UIDropDownMenu_SetText(ss.ConfigPreview.ConfigSphereOptionsDropDown, "default")
end

local targetSliderValues = {
  ["Swirl"] = {
    ["Speed"] = {
      ["low"]  = 1,
      ["high"] = 10,
      ["step"] = 1,
    },
  },
  ["Animation"] = {
    ["Alpha"] = {
      ["low"]  = 0,
      ["high"] = 1,
      ["step"] = 0.001,
    },
    ["Scale"] = {
      ["low"]  = 0.001,
      ["high"] = 6,
      ["step"] = 0.001,
    },
    ["Strata"] = {
      ["low"]  = 1,
      ["high"] = 5,
      ["step"] = 0.001,
    },
    ["X Position"] = {
      ["low"]  = -2,
      ["high"] = 2,
      ["step"] = 0.001,
    },
    ["Y Position"] = {
      ["low"]  = -2,
      ["high"] = 2,
      ["step"] = 0.001,
    },
  },
};

local targetSliderGetValue = function(target)
  if target == "Animation - Scale" then
    return ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getAnimationScale()
  elseif target == "Animation - X Position" then
    return ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getAnimationOffset()
  elseif target == "Animation - Y Position" then
    return select(2, ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getAnimationOffset())
  elseif target == "Animation - Strata" then
    return ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getAnimationStrata() - ss.private.layout.config.frameLevelAdjust
  elseif target == "Animation - Alpha" then
    return ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getAnimationAlpha()
  elseif target == "Swirl - Speed" then
    return ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getSwirlSpeed()
  else
    return 1
  end
end

local initPreviewOption = function()
  UIDropDownMenu_SetText(ss.ConfigPreview.PreviewDropDown, "Health")
  previewSphere("Health", "health")
end

ss["ConfigPreview"] = {
};

function ss:InitializeConfigPreviewPanel()
  -- Create the config preview frame
  ss.ConfigPreview = ss.ConfigTools.createInterfaceOption{
    name = "Preview",
    parent = AddOnName,
    refresh = initPreviewOption,
  }
  ss.ConfigPreview.dbConfig = "health"

  -- Add the widget container
  ss.ConfigPreview.widgetFrame = ss.ConfigTools.getWidgetContainer(ss.ConfigPreview, "PreviewWidgetFrame")

  -- Add preview sphere select dropdown
  ss.Config.previewSphereList = {}
  ss.ConfigPreview.PreviewDropDown = ss.ConfigTools.createDropdown{
    name = "ConfigPreviewDropDown",
    parent = ss.ConfigPreview,
    tAlign = "LEFT",
    width = 400,
    height = 50,
    anchor = "TOPLEFT",
    x = ss.ConfigTools.itemPadCorner + ss.ConfigTools.leftLabelMargin,
    y = 5 - ss.ConfigTools.itemPadCorner,
    init = function(self, level)
      local stuff = {}

      for k,v in pairs(ss.Config.previewSphereList) do
        stuff = {}
        stuff.text = v[1]
        stuff.value = v[1]
          stuff.notCheckable = true

          stuff.func = function(self)
            if self:GetText() ~= "Select Sphere" then
              UIDropDownMenu_SetText(ss.ConfigPreview.PreviewDropDown, v[1])
              previewSphere(self:GetText(), k)
              InterfaceOptionsFrame_OpenToCategory(AddOnName.." Preview")
              CloseDropDownMenus()
            end
          end

          UIDropDownMenu_AddButton(stuff, level)
        end
      end,
    label = {
      name = "PreviewSphereLabel",
      text = "Preview Sphere",
      location = "left",
      color = ss.ConfigTools.headerItemColor,
    },
  };

  -- Add the title
  ss.ConfigPreview.widgetFrame.Title = ss.ConfigTools.createTitle("", ss.ConfigPreview.widgetFrame)

  -- Add the mode dropdown
  ss.ConfigPreview.ConfigSphereOptionsDropDown = ss.ConfigTools.createDropdown{
    name = "ConfigSphereOptionsDropDown",
    parent = ss.ConfigPreview,
    tAlign = "LEFT",
    width = 200,
    height = 50,
    anchor = "TOPLEFT",
    x = ss.ConfigTools.itemPadCorner + ss.ConfigTools.leftLabelMargin,
    y = 5 - ss.ConfigTools.itemPadCorner - ss.ConfigTools.itemHeight,
    init = function(self, level)
      local stuff = {}

      for k,v in pairs(ss.db[ss.ConfigPreview.dbConfig].modes[ss.profile.modeInfo[ss.ConfigPreview.dbConfig].modeSpec]) do
        stuff = {}
        stuff.text = k
        stuff.value = k
        stuff.func = function(self)
          UIDropDownMenu_SetSelectedID(ss.ConfigPreview.ConfigSphereOptionsDropDown, self:GetID())
          UIDropDownMenu_SetText(ss.ConfigPreview.ConfigSphereOptionsDropDown, k)
          ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setMode(v)
          ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Set("modeId", k)
          CloseDropDownMenus()
        end
        UIDropDownMenu_AddButton(stuff, level)
      end
    end,
    label = {
      name = "SphereModeLabel",
      text = "Mode",
      location = "left",
      color = ss.ConfigTools.headerItemColor,
    },
  };

  -- TextFormattingDropdown
  local fillOptions = {
    "Truncate Value",
    "Comma Separate Value",
    "Raw Value"
  };

  ss.ConfigPreview.TextFormattingDropdown = ss.ConfigTools.createDropdown{
    name = "TextFormattingDropdown",
    parent = ss.ConfigPreview,
    tAlign = "LEFT",
    width = 200,
    height = 45,
    anchor = "TOPLEFT",
    x = 0,
    y = ss.ConfigTools.topMargin - (ss.ConfigTools.itemHeight * 2),
    init = function(self, level)
      local stuff = {}

      for k,v in pairs(fillOptions) do
        stuff = {}
        stuff.text = v
        stuff.value = v
        stuff.func = function(self)
          UIDropDownMenu_SetSelectedID(ss.ConfigPreview.TextFormattingDropdown, self:GetID())
          UIDropDownMenu_SetText(ss.ConfigPreview.TextFormattingDropdown, self:GetText())

          if self:GetText() == "Truncate Value" then
            ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setTextFormat("truncated")
          elseif self:GetText() == "Comma Separate Value" then
            ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setTextFormat("commaSeparated")
          elseif self:GetText() == "Raw Value" then
            ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setTextFormat("raw")
          end

          updateXMLText()
          CloseDropDownMenus()
        end
        UIDropDownMenu_AddButton(stuff, level)
      end
    end,
    label = {
      name = "TextFormattingDropdownLabel",
      text = "Text Format",
      location = "top",
    },
  };

  ss.ConfigPreview.widgetFrame.SSSpherePercentageCheckBox = ss.ConfigTools.createCheckbox{
    name = "SS32SpherePercentageCheckBox",
    parent = ss.ConfigPreview.widgetFrame,
    anch = "TOPLEFT",
    x = 22,
    y = ss.ConfigTools.topMargin - (ss.ConfigTools.itemHeight * 3),
    text = "Show Percentage",
    onClick = function(self)
      ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:showFont(1, self:GetChecked())
    end,
  }

  -- Add the track combat check button and click event
  ss.ConfigPreview.widgetFrame.SSSphereValueCheckBox = ss.ConfigTools.createCheckbox{
    name = "SS32SphereValueCheckBox",
    parent = ss.ConfigPreview.widgetFrame,
    anch = "TOPLEFT",
    x = 22,
    y = ss.ConfigTools.topMargin - (ss.ConfigTools.itemHeight * 4),
    text = "Show Value",
    onClick = function(self)
      ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:showFont(2, self:GetChecked())
    end,
  }

  -- Add the preview sphere
  ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2 = CreateFrame("Frame", "xmlSphereDisplayFrame2", ss.ConfigPreview.widgetFrame)
  ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2:SetPoint("TOP",0,(ss.ConfigTools.topMargin-45))
  ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2:SetSize(ss.private.general.SphereSize, ss.private.general.SphereSize)

  -- Initialize the sphere
  ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere = ss.Sphere:New()
  ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:initialize(ss.db.health,ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2,"preview")
  ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2:SetScale(1.5)

  -- Background textures
  local textureNameTable = ss.FillTextures.list("primary")
  ss.ConfigPreview.FillTexturesDropDown = ss.ConfigTools.createDropdown{
    name = "FillTexturesDropDown",
    parent = ss.ConfigPreview,
    tAlign = "LEFT",
    width = 200,
    height = 45,
    anchor = "BOTTOMLEFT",
    x = 0,
    y = 15,
    init = function(self, level)
      local stuff = {}
      for k,v in pairs(textureNameTable) do
        stuff = {}
        stuff.text = k
        stuff.value = k
        stuff.func = function(self)
          UIDropDownMenu_SetSelectedID(ss.ConfigPreview.FillTexturesDropDown, self:GetID())
          UIDropDownMenu_SetText(ss.ConfigPreview.FillTexturesDropDown, self:GetText())
          ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setFillTexture("primary", self:GetText())
          CloseDropDownMenus()
        end
        stuff.checked = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:getFillTexture() == v
        UIDropDownMenu_AddButton(stuff, level)
      end
    end,
    label = {
      name = "FillTextureLabel",
      text = "Background",
      location = "top",
    },
  };

  -- Animations
  local animationNameTable = ss.Animations:List()
  ss.ConfigPreview.RotationTexturesDropDown = ss.ConfigTools.createDropdown{
    name = "RotationTexturesDropDown",
    parent = ss.ConfigPreview,
    tAlign = "LEFT",
    width = 200,
    height = 45,
    anchor = "BOTTOMLEFT",
    x = 150,
    y = 15,
    init = function(self, level, menuList)
      local stuff = {};

      if level == 1 then
        for k,v in pairs(animationNameTable) do
          stuff.text = k
          stuff.menuList = k
          stuff.hasArrow = true
          stuff.checked = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Get("animGroup") == k
          UIDropDownMenu_AddButton(stuff, level)
        end
      elseif level == 2 then
        for k,v in pairs(animationNameTable[menuList]) do
          stuff.text = k
          stuff.value = k
          stuff.checked = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Get("animId") == k
          stuff.func = function(self)
            UIDropDownMenu_SetText(ss.ConfigPreview.RotationTexturesDropDown, self:GetText())
            ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setAnimationDisplayInfo(ss.ConfigPreview.RotationTexturesDropDown.menuList,self:GetText())
            CloseDropDownMenus()
          end

          UIDropDownMenu_AddButton(stuff, level)
        end
      end
    end,
    label = {
      name = "SphereTextureLabel",
      text = "Animation",
      location = "top",
    },
  };

  -- Display the "slider target" dropdown to determine which value the slider should manage
  ss.ConfigPreview.sliderTargets = {
    ["Swirl"] = {
      "Speed",
      "Color",
      "Color1",
      "Color2",
      "Color3",
    },
    ["Filling"] = {
      "Color",
    },
    ["Font1"] = {
      "Color",
    },
    ["Font2"] = {
      "Color",
    },
    ["Animation"] = {
      "Alpha",
      "Scale",
      "Strata",
      "X Position",
      "Y Position",
    },
  };

  ss.ConfigPreview.SliderTargetDropDown = ss.ConfigTools.createDropdown{
    name = "SliderTargetDropDown",
    parent = ss.ConfigPreview,
    tAlign = "LEFT",
    width = 300,
    height = 45,
    anchor = "BOTTOMLEFT",
    x = 0,
    y = 112,
    init = function(self, level, menuList)
      local stuff = {};
      stuff.notCheckable = true

      if level == 1 then
        for k,v in pairs(ss.ConfigPreview.sliderTargets) do
          stuff.text = k
          stuff.menuList = k
          stuff.hasArrow = true

          UIDropDownMenu_AddButton(stuff, level)
        end
      elseif level == 2 then
        for k,v in pairs(ss.ConfigPreview.sliderTargets[menuList]) do
          stuff.text = v
          stuff.value = menuList
          stuff.func = function(self)
            if string.match(self:GetText(), "Color") then
              ss.ConfigPreview.SSTargetSlider:Hide()
              local target = self.value .. " - " .. self:GetText()

              UIDropDownMenu_SetSelectedID(ss.ConfigPreview.SliderTargetDropDown, self:GetID())
              UIDropDownMenu_SetText(ss.ConfigPreview.SliderTargetDropDown, target)

              if self.value == "Filling" then
                showColorSelect((self:GetText() == "Color2") and "Second Filling" or self.value)
              elseif self.value == "Swirl" then
                showColorSelect(self.value..self:GetText())
              else
                showColorSelect(self.value)
              end
            else
              ss.ConfigPreview.colorFields:Hide()
              local target = self.value .. " - " .. self:GetText()
              local sliderVals = targetSliderValues[self.value][self:GetText()]

              UIDropDownMenu_SetSelectedID(ss.ConfigPreview.SliderTargetDropDown, self:GetID())
              UIDropDownMenu_SetText(ss.ConfigPreview.SliderTargetDropDown, target)

              getglobal(ss.ConfigPreview.SSTargetSlider:GetName().."High"):SetText(sliderVals.high)
              getglobal(ss.ConfigPreview.SSTargetSlider:GetName().."Low"):SetText(sliderVals.low)
              ss.ConfigPreview.SSTargetSlider:SetMinMaxValues(sliderVals.low,sliderVals.high)
              ss.ConfigPreview.SSTargetSlider:SetValueStep(sliderVals.step)
              ss.ConfigPreview.SSTargetSlider:SetValue(targetSliderGetValue(target))

              ss.ConfigPreview.SSTargetSlider:Show()
            end

            CloseDropDownMenus()
          end

          UIDropDownMenu_AddButton(stuff, level)
        end
      end
    end,
  };

  ss.ConfigPreview.SSTargetSlider, ss.ConfigPreview.SSTargetSliderEditBox = ss.ConfigTools.createSliderField({
    name = "SSTargetSlider",
    parent = ss.ConfigPreview,
    len = 200,
    width = 16,
    anchor = "BOTTOMLEFT",
    x = 25,
    y = 90,
    onChanged = function(self)
      local target = UIDropDownMenu_GetText(ss.ConfigPreview.SliderTargetDropDown)

      if target == "Animation - Scale" then
        ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setAnimationScale(self:GetValue())
      elseif target == "Animation - X Position" then
        ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setAnimationOffset(self:GetValue(), nil)
      elseif target == "Animation - Y Position" then
        ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setAnimationOffset(nil,self:GetValue())
      elseif target == "Animation - Strata" then
        ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setAnimationStrata(self:GetValue() + ss.private.layout.config.frameLevelAdjust)
      elseif target == "Animation - Alpha" then
        ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setAnimationAlpha(self:GetValue())
      elseif target == "Swirl - Speed" then
        ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:setSwirlSpeed(self:GetValue())
      end

      if ss.ConfigPreview.SSTargetSliderEditBox then
        ss.ConfigPreview.SSTargetSliderEditBox:SetText(self:GetValue())
      end
    end,
  },{
    maxLetters = 5,
    onEnterPressed = function(self)
      local val = self:GetText()
      if tonumber(val) then
        self:GetParent():SetValue(val)
        self:SetText(self:GetParent():GetValue())
        self:ClearFocus()
      end
    end,
  });

  ss.ConfigPreview.SSTargetSlider:Hide()

  -- Add the color picker
  ss.ConfigPreview.colorFields = ss.ConfigTools.createColorPicker{
    parent = ss.ConfigPreview,
    anch = "BOTTOMRIGHT",
    x = -25,
    y = 75,
    onTextChanged = function(self)
      local val = self:GetText()
      if tonumber(val) then
        setColorSelectColors(
          (ss.ConfigPreview.colorFields.colorFieldR:GetText() / 255),
          (ss.ConfigPreview.colorFields.colorFieldG:GetText() / 255),
          (ss.ConfigPreview.colorFields.colorFieldB:GetText() / 255),
          ((100 - ss.ConfigPreview.colorFields.colorFieldA:GetText()) / 100)
        )
      end
    end,
  }

  -- Add the reset button
  ss.ConfigPreview.ResetButton =  ss.ConfigTools.createButton{
    parent = ss.ConfigPreview,
    name = "PreviewResetButton",
    anch = "BOTTOMRIGHT",
    x = -160,
    y = 15,
    text = "Reset",
    onClick = function()
      previewSphere(ss.ConfigPreview.widgetFrame.Title:GetText(), ss.ConfigPreview.dbConfig)
    end,
  }

  -- Add the save button
  ss.ConfigPreview.CommitButton =  ss.ConfigTools.createButton{
    parent = ss.ConfigPreview,
    name = "PreviewCommitButton",
    anch = "BOTTOMRIGHT",
    x = -15,
    y = 15,
    text = "Save Changes",
    onClick = function()
      ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:dbUpdate()

      local configName = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Get("configName")
      local dbConfig = ss.ConfigPreview.widgetFrame.xmlSphereDisplayFrame2.sphere:Get("configName")
      configName = configName == "vehicle" and "health" or configName
      configName = configName == "vehicleResource" and "mainResource" or configName

      if ss.Layout.spheres[configName] and (UnitInVehicle("player") or (not UnitInVehicle("player") and dbConfig ~= "vehicle" and dbConfig ~= "vehicleResource")) then
        ss.Layout.spheres[configName]:setResource(ss.db[dbConfig])
      end
    end,
  }
end
