elSvgCont = document.querySelector('div#svg-wrapper')
elSvg = elSvgCont.childNodes[0]
elCoordBox = document.createElement('div')
elCoordBox.style.display='none'
elCoordBox.style.position='absolute'
elCoordBox.style.padding='3px'
elCoordBox.style.background='#ffffff99'
elCoordBox.style.border='1px solid black'
elSvgCont.appendChild(elCoordBox)
elScale = elSvg.getAttribute('mwscale')
elSvgCont.addEventListener('click', (e) => {
    e.preventDefault()
    console.log(e)
    if (!e.ctrlKey) {
        elInput = document.getElementById('wpTextbox1')
        elInput.setRangeText(`[${elCoordBox.textContent}]`)
        elInput.selectionStart += elCoordBox.textContent.length + 2
    } else {
        navigator.clipboard.writeText(`[${elCoordBox.textContent}]`)
    }
    
})
elSvgCont.addEventListener('contextmenu', (e) => {e.preventDefault()})
elSvgCont.addEventListener('auxclick', (e) => {
    e.preventDefault()
    console.log(e)
    if (!e.ctrlKey) {
        elInput = document.getElementById('wpTextbox1')
        elInput.setRangeText(` ${elCoordBox.textContent.replace(',','')}`)
        elInput.selectionStart += elCoordBox.textContent.length
    } else {
        navigator.clipboard.writeText(` ${elCoordBox.textContent.replace(',','')}`)
    }
    
})
elSvgCont.addEventListener('mouseenter', () => {elCoordBox.style.display='block'})
elSvgCont.addEventListener('mouseleave', () => {elCoordBox.style.display='none'})
elSvgCont.addEventListener('mousemove',(e) => {
    xPoint = ((e.offsetX / elSvgCont.clientWidth) * elSvg.width.baseVal.value / elScale).toFixed(1)
    yPoint = ((e.offsetY / elSvgCont.clientHeight) * elSvg.height.baseVal.value / elScale).toFixed(1)
    elCoordBox.textContent = `${xPoint}, ${yPoint}`
    elCoordBox.style.left = e.offsetX + 6
    elCoordBox.style.top = e.offsetY + 12
})
document.addEventListener('keydown',(e) => {
    if (e.altKey && e.shiftKey && !e.ctrlKey && e.key == "C") {
        coordParse = /(\[?)([0-9]+)\s?,\s?([0-9]+)(\]?)/
        oldCoord = coordParse.exec(window.getSelection().toString())
        if (oldCoord) {
            calcX = (oldCoord[2] / 100 * elSvg.width.baseVal.value / elScale).toFixed(1)
            calcY = (oldCoord[3] / 100 * elSvg.height.baseVal.value / elScale).toFixed(1)
            elInput = document.getElementById('wpTextbox1')
            elInput.setRangeText(`${oldCoord[1]}${calcX}, ${calcY}${oldCoord[4]}`)
        }
    }
})