local skinCost = math.random(150, 200)
local s = {guiGetScreenSize()}
local box = {200,50}
local pos = {s[1]/2 - box[1]/2,s[2]/1.9 - box[2]/2}
local font = dxCreateFont("assets/fonts/font.ttf", 14)

addEventHandler("onClientResourceStart", resourceRoot,
    function()
        for k,v in pairs(markers) do
            local x,y,z,int,dim,type = unpack(v)
            local marker = createMarker(x,y,z, "cylinder", 1, 255,153,51)
            setElementDimension(marker, dim)
            setElementInterior(marker, int)
            setElementData(marker, "skinshop >> marker", true)
            setElementData(marker, "skinshop >> type", type)
        end

        for k,v in pairs(getElementsByType("marker", root, true)) do
            if getElementType(v) == "marker" and getElementData(v, "skinshop >> marker") then
                cache[v] = true
            end
        end
    end
)

addEventHandler("onClientElementStreamIn", root,
    function()
        if getElementType(source) == "marker" and getElementData(source, "skinshop >> marker") then
            cache[source] = true
        end

        local id = 0
        for k,v in pairs(cache) do
            id = id + 1
            if id > 2 then
                return
            end
        end

        if id == 1 and not state then
            addEventHandler("onClientRender", root, drawnIcons, false, "low")
            state = true
			--setElementData(localPlayer, "hudVisible", false)
        end
    end
)

local ped
local pedPos = {359.244140625, 6.6425838470459, 842.69158935547}
local cameraMatrix = {359.25869750977, 12.592300415039, 844.83660888672, pedPos[1], pedPos[2], pedPos[3]}


addEventHandler("onClientElementStreamOut", root,
    function()
        if getElementType(source) == "marker" and getElementData(source, "skinshop >> marker") then
            cache[source] = nil
        end

        local id = 0
        for k,v in pairs(cache) do
            id = id + 1
            if id > 0 then
                return
            end
        end

        if id == 0 and state then
            removeEventHandler("onClientRender", root, drawnIcons)
            state = false
			--setElementData(localPlayer, "hudVisible", true)
        end
    end
)

function drawnIcons()
    for k,v in pairs(cache) do
        local x,y,z = getElementPosition(k)
        z = z + 1
        local sx, sy = getScreenFromWorldPosition(x,y,z)

        if sx and sy then
		    local xx, yy, zz = getElementPosition(localPlayer)
            local dist = getDistanceBetweenPoints3D(x, y, z, xx, yy, zz)
            if dist < maxDist then
                local fontsize = 1 - (dist / maxDist)
                local alpha = 255 * fontsize
                dxDrawImage(sx-25, sy-60, 60, 60, getElementData(k, "skinshop >> type"),0,0,0, tocolor(255,255,255,255))

		    end
        end
    end
end

addEventHandler("onClientMarkerHit", root,
    function(hitPlayer, matchingDimension)

        if hitPlayer ~= localPlayer then return end
        if getElementDimension(source) == getElementDimension(localPlayer) and getElementData(source, "skinshop >> marker") then
            addEventHandler("onClientRender", root, shopRender, false, "low")
            startTime = getTickCount()
            endTime = startTime + 2000
            setElementFrozen(localPlayer, true)
            nowSkin = 1
            setCameraMatrix(unpack(cameraMatrix))
            bindKeys()
            setElementData(localPlayer, "hudVisible", false)
            showChat(false)
            executeCommandHandler("togbar")
            markerDim = getElementDimension(source)
            markerType = getElementData(source, "skinshop >> type")
            if markerType == "assets/icons/male.png" then
                ped = createPed(maleSkins[1], unpack(pedPos))
                setElementInterior(ped, getElementInterior(localPlayer))
                setElementDimension(ped, getElementDimension(localPlayer))
                skin = maleSkins[1]
            elseif markerType == "assets/icons/female.png" then
                ped = createPed(femaleSkins[1], unpack(pedPos))
                setElementInterior(ped, getElementInterior(localPlayer))
                setElementDimension(ped, getElementDimension(localPlayer))
                skin = femaleSkins[1]
            end
        end
    end
)

function bindKeys()
    bindKey("backspace", "down", closePanel)
    bindKey("enter", "down", buyClothes)
    bindKey("arrow_r", "down", rightSwitch)
    bindKey("arrow_l", "down", leftSwitch)
end

function closePanel()
    unbindKeys()
    if isElement(ped) then
        destroyElement(ped)
        ped = nil
    end
    setCameraTarget(localPlayer, localPlayer)
    setElementFrozen(localPlayer, false)
    removeEventHandler("onClientRender", root, shopRender)
    setElementDimension(localPlayer, markerDim)
    setElementData(localPlayer, "hudVisible", true)
    showChat(true)
    executeCommandHandler("togbar")
end

function unbindKeys()
    unbindKey("backspace", "down", closePanel)
    unbindKey("enter", "down", buyClothes)
    unbindKey("arrow_r", "down", rightSwitch)
    unbindKey("arrow_l", "down", leftSwitch)
end

function buyClothes()
    local money = tonumber(getElementData(localPlayer, "money"))
    if money >= skinCost then
        setElementData(localPlayer, "money", money - skinCost)
        setElementData(localPlayer, "newSkin", skin)
        outputChatBox("#ff9933[Replay]:#FFFFFF Sikeresen megvásároltad a kiválasztott kinézetet, ez #ff9933"..skinCost.."#FFFFFF $-ba került!",255,255,255,true)
        closePanel()
    else
        exports['dm_infobox']:addNotification("Nincs elég pénzed!", "error")
    end
end

function rightSwitch(element)
    if markerType == "assets/icons/male.png" then
        if maleSkins[nowSkin + 1] then
            nowSkin = nowSkin + 1
            skin = maleSkins[nowSkin]
            setElementModel(ped, skin)
            skinCost = math.random(150, 200)
        end
    elseif markerType == "assets/icons/female.png" then
        if femaleSkins[nowSkin + 1] then
            nowSkin = nowSkin + 1
            skin = femaleSkins[nowSkin]
            setElementModel(ped, skin)
            skinCost = math.random(150, 200)
        end
    end
end

function leftSwitch(element)
    if markerType == "assets/icons/male.png" then
        if maleSkins[nowSkin - 1] then
            nowSkin = nowSkin - 1
            skin = maleSkins[nowSkin]
            setElementModel(ped, skin)
            skinCost = math.random(150, 200)
        end
    elseif markerType == "assets/icons/female.png" then
        if femaleSkins[nowSkin - 1] then
            nowSkin = nowSkin - 1
            skin = femaleSkins[nowSkin]
            setElementModel(ped, skin)
            skinCost = math.random(150, 200)
        end
    end
end

local x1, y1 = 140, 80

function shopRender()

    rot = rot + 2

    if rot >= 360 then
        rot = -360
    elseif rot <= -360 then
        rot = -360
    end

    setElementRotation(ped, 0, 0, rot + 10)

    --[[local now = getTickCount()
	local elapsedTime = now - startTime
	local duration = endTime - startTime
	local progress = elapsedTime / duration

    local x = interpolateBetween(scy, 0, 0, scy - x1 - 30, 0, 0, progress, "OutInQuad")

    dxDrawRectangle(x, scy / 2 - y1/2-100, x1, y1, tocolor(0,0,0,220))
    dxDrawLine(x, scy / 2 + y1/2, x + x1, scy / 2 + y1/2, tocolor(87,87,255), 2)
    dxDrawText("Karakter kinézet:" .. skin, x + x1/2, scy / 2 - y1/2 + 20, x + x1/2, scy / 2 - y1/2 + 20, tocolor(255,255,255,255), 1, "sans", "center", "center")
    dxDrawText("Ár: " .. skinCost .. "Ft", x + x1/2, scy / 2 + y1/2 - 20, x + x1/2, scy / 2 + y1/2 - 20, tocolor(255,255,255,255), 1, "sans", "center", "center")]]

    dxDrawRectangle(pos[1], pos[2]+300, box[1], box[2], tocolor(22,22,22, 240))
    dxDrawBorder(pos[1], pos[2]+300, box[1], box[2],2, tocolor(0,0,0, 140))
    -- Ára
    dxDrawText("Kinézet ára:", pos[1]+49, pos[2]+301, 0,0, tocolor(0,0,0,255),1, font)
    dxDrawText("Kinézet ára:", pos[1]+50, pos[2]+300, 0,0, tocolor(255,255,255,255),1, font)
    dxDrawText("#ff9933" ..skinCost..  " #ffffff$", pos[1]+75, pos[2]+325, 0,0, tocolor(255,255,255,255),1, font, "left", "top", true, true, true, true)
    dxDrawText("" ..skinCost..  " $", pos[1]+76, pos[2]+326, 0,0, tocolor(0,0,0,255),1, font)
    if nowSkin > 1 then
     dxDrawImage(pos[1]-39, pos[2]+311, 30, 30, "assets/icons/left.png", 0,0,0, tocolor(0,0,0,255))
    dxDrawImage(pos[1]-40, pos[2]+310, 30, 30, "assets/icons/left.png", 0,0,0, tocolor(255,255,255,255))
    end
    dxDrawImage(pos[1]+209, pos[2]+311, 30, 30, "assets/icons/right.png", 0,0,0, tocolor(0,0,0,255))
    dxDrawImage(pos[1]+210, pos[2]+310, 30, 30, "assets/icons/right.png", 0,0,0, tocolor(255,255,255,255))
end

function clientClick(btn, state)
    if state == "down" then
        if isInSlot(pos[1]+210, pos[2]+310, 30, 30) then
            rightSwitch()
        elseif isInSlot(pos[1]-39, pos[2]+311, 30, 30) and nowSkin > 1 then
            leftSwitch()
        end
    end
end
addEventHandler("onClientClick", root, clientClick)