--[[
to do:
1) dynamically scale the tabs to the text width
--]]


-- I like to set the unused space to a dark red
-- it's Red Green Blue, from 1-255, so change as you prefer!
-- 0,0,0 is black
setBorderColor (25, 0, 0)

-- and let's begin by creating the UI table
moonlightUI = moonlightUI or {}

-- we'll set the dimensions so the screen can dynamically scale
-- adjust these as you prefer, as well!
moonlightUI.dimensions = {}
moonlightUI.rightbar = 350
moonlightUI.bottombar = 15
-- oh, and set the font size for the chat windows
moonlightUI.fontsize = 8

-- now, we move that pesky main window!
setBorderTop (5)
setBorderLeft (5)
setBorderRight (moonlightUI.rightbar + 10)
setBorderBottom (moonlightUI.bottombar + 4)




-- ==================
--  Mapper Container
-- ==================

-- make a container to hold the map window
moonlightUI.mappercontainer = Geyser.Container:new ({
  x=0,y=0,width="100%",height="100%",name="mapper container"
  })
-- and put the map window in it! 
moonlightUI.mapper = Geyser.Mapper:new ({
  name = "mapper",
  x = "-" .. tostring (moonlightUI.rightbar + 5),
  y = "5",
  width = moonlightUI.rightbar,
  height = moonlightUI.rightbar - 50,
  }, moonlightUI.mappercontainer)



-- ==================
--  Gauges Container
-- ==================

-- make a container for gauges
moonlightUI.gauges = Geyser.Container:new ({
  name = "gauges",
  x="5",
  y = "-" .. tostring (moonlightUI.bottombar + 2),
  width = getMainConsoleWidth (),
  height= moonlightUI.bottombar,
  })

-- here's your health bar
moonlightUI.hpbar = Geyser.Gauge:new ({name="hpbar",x="0", y="0",width="20%", height="100%"},moonlightUI.gauges)
moonlightUI.hpbar.front:setStyleSheet (
[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FF0000, stop: 0.2 #FF0000, stop: 0.8 #660000, stop: 1 #990000);
  border-width: 1px;
  border-color: black;
  border-style: solid;
  border-radius: 6;
  ]])
moonlightUI.hpbar.back:setStyleSheet (
[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #AA0000, stop: 0.2 #AA0000, stop: 0.9 #440000, stop: 1 #660000);
  border-width: 2px;
  border-color: black;
  border-style: solid;
  border-radius: 6;
  ]])

-- here's your mana bar
moonlightUI.mpbar = Geyser.Gauge:new ({name="mpbar",x="20%",y="0",width="20%",height="100%"},moonlightUI.gauges)
moonlightUI.mpbar.front:setStyleSheet (
[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4C4CFF, stop: 0.2 #4C4CFF, stop: 0.8 #1E1E66, stop: 1 #2D2D99);
  border-width: 1px;
  border-color: black;
  border-style: solid;
  border-radius: 7;
  ]])
moonlightUI.mpbar.back:setStyleSheet (
[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #3131AA, stop: 0.2 #333399, stop: 0.8 #131344, stop: 1 #1D1D66);
  border-width: 2px;
  border-color: black;
  border-style: solid;
  border-radius: 7;
  ]])

-- here's your endurance bar
moonlightUI.edbar = Geyser.Gauge:new ({name="edbar",x="40%",y="0",width="20%",height="100%"},moonlightUI.gauges)
moonlightUI.edbar.front:setStyleSheet (
[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FFFF38, stop: 0.2 #FFFF38, stop: 0.9 #666616, stop: 1 #999921);
  border-width: 1px;
  border-color: black;
  border-style: solid;
  border-radius: 7;
  ]])
moonlightUI.edbar.back:setStyleSheet (
[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #AAAA25, stop: 0.2 #777700, stop: 0.9 #44440F, stop: 1 #666616);
  border-width: 2px;
  border-color: black;
  border-style: solid;
  border-radius: 7;
  ]])

-- here's youre willpower bar
moonlightUI.wpbar = Geyser.Gauge:new ({name="wpbar",x="60%",y="0",width="20%",height="100%"},moonlightUI.gauges)
moonlightUI.wpbar.front:setStyleSheet (
[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #FF00FF, stop: 0.2 #FF00FF, stop: 0.9 #660066, stop: 1 #990099);
  border-width: 1px;
  border-color: black;
  border-style: solid;
  border-radius: 7;
  ]])
moonlightUI.wpbar.back:setStyleSheet (
[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #AA00AA, stop: 0.2 #AA00AA, stop: 0.9 #440044, stop: 1 #660066);
  border-width: 2px;
  border-color: black;
  border-style: solid;
  border-radius: 7;
  ]])

-- and here's your xp bar
moonlightUI.xpbar = Geyser.Gauge:new ({name="xpbar",x="82%",y="0",width="18%", height="100%"}, moonlightUI.gauges)
moonlightUI.xpbar.front:setStyleSheet (
[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #C8C8C8, stop: 0.2 #C8C8C8, stop: 0.9 #515151, stop: 1 #7A7A7A);
  border-width: 1px;
  border-color: black;
  border-style: solid;
  border-radius: 7;
  ]])
moonlightUI.xpbar.back:setStyleSheet (
[[background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #898989, stop: 0.2 #898989, stop: 0.9 #383838, stop: 1 #515151);
  border-width: 2px;
  border-color: black;
  border-style: solid;
  border-radius: 7;
  ]])

-- let's set some base values
-- this is also your example of how to update them
-- just copy to a trigger and replace the 50 with your health percent 
moonlightUI.hpbar:setValue (50, 100)
moonlightUI.mpbar:setValue (50, 100)
moonlightUI.edbar:setValue (50, 100)
moonlightUI.wpbar:setValue (50, 100)
moonlightUI.xpbar:setValue (50, 100)




-- ================
--  Chat Container
-- ================

-- let's make the chat container
moonlightUI.chatcontainer = Geyser.Container:new ({
  name = "chatcontainer",
  x = "-" .. tostring (moonlightUI.rightbar + 5),
  y = -355,
  width = moonlightUI.rightbar,
  height = 350,
  })


-- here's something to hold the names of chat containers
moonlightUI.chatcontainers = {}

-- important part: function to create a new chat window
moonlightUI.createchat = function (chatname, buttoncolor)
  -- prepend 'ChatBox' to the name
  local chatboxname = "ChatBox" .. chatname
  -- save that name in the list of chat boxes
  moonlightUI.chatcontainers[#moonlightUI.chatcontainers+1] = chatboxname
  -- and make the chat box!
  moonlightUI[chatboxname] = Geyser.MiniConsole:new ({
    name=chatboxname,
    -- we'll set it against the left, 30px from the top to give room for the tabs,
    -- and as wide as the chat container
    x = 0, y = 30, width = "100%",
    -- the height is set this way so it actually adheres to the height of the chat container
    -- if you just set 100% it actually overflows by an amount equal to the chatbox 'y' value
    height = tonumber((moonlightUI.chatcontainer.height:gsub("px",""))) - 30,
    }, moonlightUI.chatcontainer)
  -- set the buffer, wrap, and background color of the chatbox
  moonlightUI[chatboxname]:setBufferSize (500000, 100)
  local fontwidth, fontheight = calcFontSize (moonlightUI.fontsize)
  moonlightUI[chatboxname]:setWrap (math.floor (moonlightUI.rightbar/fontwidth))
  moonlightUI[chatboxname]:setColor ("black")
  -- set the font size
  setMiniConsoleFontSize (chatboxname, moonlightUI.fontsize)
  -- prepend 'ChatButton' to the name
  local chatbuttonname = "ChatButton" .. chatname
  -- figure out where the button should sit
  local buttonstart = (#moonlightUI.chatcontainers - 1) * 47
  -- and make the chat button!
  moonlightUI[chatbuttonname] = Geyser.Label:new ({
    name = chatbuttonname,
    -- we'll offset the buttons so they don't overlap, and set them against the top
    x = buttonstart, y = 0,
    -- give it some space (needs to be udpated to dynamically scale)
    width = 45, height = 25,
    -- set the font to black
    fgColor = "black",
    -- and the background to the color they wanted!
    color = buttoncolor,
    -- oh, don't forget the text...
    message = [[<center>]] .. chatname .. [[</center>]]
    }, moonlightUI.chatcontainer)
  -- this is so when we click it...
  moonlightUI[chatbuttonname]:setClickCallback ("moonlightUI." .. chatbuttonname .. "_press")
  -- ...we call this function to switch chat windows!
  moonlightUI[chatbuttonname .. "_press"] = function ()
    moonlightUI.chatpress (chatboxname)
  end -- func
  -- now, let's make a tiny tab to indicate which is current
  -- prepend 'CurrentTab' to the name
  local currenttabname = "CurrentTab" .. chatname
  -- now, let's make a tiny tab to indicate which is current
  -- and make the chat button!
  moonlightUI[currenttabname] = Geyser.Label:new ({
    name = currenttabname,
    -- we'll offset the buttons so they don't overlap, and set them against the top
    x = buttonstart, y = 26,
    -- give it some space (needs to be udpated to dynamically scale)
    width = 45, height = 3,
    -- and the background to the color they wanted!
    color = buttoncolor,
    }, moonlightUI.chatcontainer)
end -- func

-- here's that function to switch chat windows
moonlightUI.chatpress = function (chatname)
  -- first, hide them all
  for k, v in ipairs (moonlightUI.chatcontainers) do
      moonlightUI[v]:hide ()
      moonlightUI["CurrentTab" .. string.sub(v, 8)]:hide ()
  end -- func
  -- then show the one we want
  moonlightUI[chatname]:show ()
  moonlightUI["CurrentTab" .. string.sub(chatname, 8)]:show ()
end -- func

-- and another function to send chat to window
moonlightUI.sendChat = function (chatwindow, fcolor, bcolor)
  -- add a newline, to avoid overcrowding (unless sent to "All" only)
  if chatwindow ~= "All" then moonlightUI["ChatBox" .. chatwindow]:echo ("\n") end
  -- and paste in the text!
  selectCurrentLine ()
  -- set fcolor/bcolor 'or' to "nochange" to leave the colors as they are
  -- or set fcolor/bcolor 'or' to {r,g,b} to set your own defaults
  local fcolor = fcolor or "nochange"
  local bcolor = bcolor or "nochange"
  local _br,_bg,_bb = getBgColor ()
  local _fr,_fg,_fb = getFgColor ()
  if fcolor ~= "nochange" then setFgColor(fcolor[1],fcolor[2],fcolor[3]) end
  if bcolor ~= "nochange" then setBgColor(bcolor[1],bcolor[2],bcolor[3]) end
  copy ()
  setBgColor(_br,_bg,_bb)
  setFgColor(_fr,_fg,_fb)
  -- send to the chat window
  appendBuffer ("ChatBox" .. chatwindow)
  -- and send to the "All" window unless that's where it's already headed
  if chatwindow ~= "All" then appendBuffer ("ChatBoxAll") end
  resetFormat ()
end -- func

moonlightUI.speak = function (chatwindow, text)
  cecho ("ChatBox" .. chatwindow, text)
end -- func

-- finally, here we make some chat windows
-- don't remove the All tab
moonlightUI.createchat ("All", "green")
moonlightUI.createchat ("Order", "red")
moonlightUI.createchat ("House", "slate_blue")
moonlightUI.createchat ("City", "white")
moonlightUI.createchat ("Tells", "yellow")
moonlightUI.createchat ("Party", "brown")



-- this goes at the end to hide the chat windows
for k, v in ipairs (moonlightUI.chatcontainers) do
    moonlightUI[v]:hide ()
    moonlightUI["CurrentTab" .. string.sub(v, 8)]:hide ()
end -- for
-- then show the first one
moonlightUI[moonlightUI.chatcontainers[1]]:show ()
moonlightUI["CurrentTab" .. string.sub(moonlightUI.chatcontainers[1], 8)]:show ()


-- the following comment is how to send a trigger match to the a window
--   moonlightUI.sendChat ("Order")
-- the following comment is how to send it with colors specified: foreground
-- is declared first, anything missing is assumed, and "nochange" means don't
-- change the colors
--   moonlightUI.sendChat ("Order", {255,255,255})
--   moonlightUI.sendChat ("Order", {255,255,255}, {0,0,0})
--   moonlightUI.sendChat ("Order", "nochange", {0,0,0})

-- the following comment is how to replace long text with a shorter version
-- (this will replace it in the main window as well as the miniconsole)
--[[
selectString("(this is a very long clan name)", 1)
setBgColor(getBgColor())
setFgColor(getFgColor())
replace("(shortclanname)")
resetFormat ()
--]]