<div id="natdogoooooviewer" width="256" height="256"></div>
<input id="blk" type="number" style="display:none" />

<script id="preview" mint="MINT_INSCRIPTION_ID">
// Retrieve render area
const root = document.getElementById('natdogoooooviewer')
root.parentElement.style.width = '100%'
root.parentElement.style.height = '100%'
root.parentElement.style.padding = '0px'
root.parentElement.style.margin = '0px'

const orgWidth = 212
const orgHeight = 212
let scaleW = 1
let scaleH = 1
let blockNumber = '0'

// Define the color map with the given colors
const colorMap = {
    1: "#DF4423", // Red
    2: "#0C57B0", // Deep blue
    3: "#FB9BC4", // Pink
    4: "#ACAD9C", // Gley
    5: "#69C0CE", // Sky blue
    6: "#30BE6D", // Green
    7: "#9568C5", // Purple
    8: "#372B28", // Dark
    9: "#D8C100", // Gold
    0: "#BBACC3", // Lilac
}

// Define the color map with the given colors
const colorMap2 = {
    1: "#FC6EA5", // Pink
    2: "#EC6A49", // Orange
    3: "#0057ED", // Blue
    4: "#9493FF", // Lilac
    5: "#FFFF00", // Yellow
    6: "#6B6B6B", // Gley
    7: "#403837", // Dark
    8: "#75FF00", // Dark red
    9: "#9E485F", // Luminous
    0: "#845DD5", // Ash purple
}


// Resize window
window.addEventListener('resize', resize, true)
resize()

// Retrieve content inscription id
let mintText = document.getElementById('preview').getAttribute('mint')

// Check no mint provided
if(mintText.includes('MINT_INSCRIPTION_ID')) {
  let input = document.getElementById('blk')
  input.style.display = 'block'
  input.style.position = 'absolute'
  input.style.fontSize = '20px'
  input.style.margin = '20px'
  input.style.top = '0'
  input.value = blockNumber
  input.addEventListener('input',(event) => {
      blockNumber = input.value
      update()
  })
  update()
}

// Mint was provided
else {
  const request = new XMLHttpRequest()
  try {
    request.open('GET', '/content/' + mintText)
    request.responseType = 'text'
    request.addEventListener('load', () => initialize(request.response))
    request.addEventListener('error', () => console.error('XHR error'))
    request.send()
  } catch (error) {
    console.error(`XHR error ${request.status}`)
  }
}

function initialize(result) {
  if(result) {
    console.log('Result', result)
    data = JSON.parse(result)
    blockNumber = data.blk
  }
  update()
}

function resize(event) {
  root.width = window.innerWidth
  root.height = window.innerHeight
  scaleW = root.width / orgWidth
  scaleH = root.height / orgHeight
  offsetX = 0
  offsetY = 0
  if(scaleH < scaleW) {
    scaleW = scaleH
    offsetX = (root.width - orgWidth * scaleW) / 2
  }
  else {
    scaleH = scaleW
    offsetY = (root.height - orgHeight * scaleH) / 2
  }
  root.style.zoom = scaleW / 2
  update('resize')
}

function update() {
  generateHtmlBasedOnBlockNumber(blockNumber)
}

function generateSvgForDigits(blockNumber) {
    const originalString = blockNumber.toString()
    const digits = originalString.padStart(7, '0').split('').map(Number).reverse()
    let svgs = []

    // left earling
    if (originalString.length >= 5) {
        const colorForThirdDigit = colorMap2[digits[4]] || "transparent"
        svgs.push(`
            <div style="position: absolute; top: 160px; left: 0
            px;">
                <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="25" cy="25" r="19" stroke="${colorForThirdDigit}" stroke-width="12"/>
                </svg>
            </div>
        `)
    }
    // right earling
    if (originalString.length >= 4) {
        const colorForFourthDigit = colorMap2[digits[3]] || "transparent"
        svgs.push(`
        <div style="position: absolute; top: 160px; left: 375px;">
                <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="25" cy="25" r="19" stroke="${colorForFourthDigit}" stroke-width="12"/>
                </svg>
            </div>
        `)
    }
    // body
    if (originalString.length >= 2) {
        const colorForSecondDigit = colorMap2[digits[1]] || "transparent"
        svgs.push(`
            <div style="position: absolute; top: 281px; left: 140px;">
                <svg width="106" height="144" viewBox="0 0 106 144" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <polygon points="0 24, 12.5 144, 106 144, 93.5 24" height="80" fill="${colorForSecondDigit}"/>
                    <polygon points="30 0, 34 26, 64 26, 60 0" height="80" fill="${colorForSecondDigit}"/>

                </svg>
            </div>
        `)
    }


    // face
      if (originalString.length >= 6) {
        const colorForFirstDigit = colorMap[digits[5]]
        svgs.push(`<div style="position: absolute; top: 44px; left: 50px;">
                        <svg width="325" height="246.62" viewBox="00 00 325 246.62" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path  class="cls-1" d="M260,188.52c-35.9,0-65-19.25-65-43s29.1-43,65-43,63.06,18,64.9,40.65c-2.48-45.15-53.6-82.71-122.12-93.46,0,0-14.14-2.76-21.31-10.93-7.09-8.08-14.79-21.61-18.97-38.78-4.37,21.02-12.09,31.64-18.35,39.05-5.99,7.08-23.23,10.87-23.23,10.87C51.32,61.22,0,100.23,0,146.61c0,55.23,72.75,100,162.5,100s162.5-44.77,162.5-100c0-.24,0-.47,0-.71-.31,23.57-29.29,42.62-64.99,42.62Zm-156.58,0c-35.9,0-65-19.25-65-43s29.1-43,65-43,65,19.25,65,43-29.1,43-65,43Zm221.57-42.62c-.01-.91-.04-1.82-.09-2.73,.06,.78,.1,1.56,.1,2.35,0,.13,0,.26,0,.38Z" fill="${colorForFirstDigit}"/>
                </svg>
            </div>
        `)
    }

    // nose
    if (originalString.length >= 3) {
        const colorForFifthDigit = colorMap2[digits[2]] || "transparent"
        svgs.push(`
            <div style="position: absolute; top: 200px; left: 219px;">
                <svg width="25" height="6" viewBox="0 0 25 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="3" cy="3" r="3" fill="${colorForFifthDigit}"/>
                <circle cx="22" cy="3" r="3" fill="${colorForFifthDigit}"/>
                </svg>
            </div>
        `)
    }

    // left arm
    if (originalString.length >= 4) {
        const colorForSixthDigit = colorMap[digits[3]] || "transparent"
        svgs.push(`
            <div style="position: absolute; top: 305px; left: 75;">
                <svg width="300" height="95" viewBox="0 0 300 95" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="84" y="59" width="9" height="12" fill="${colorForSixthDigit}"/>
                <polygon points ="34 0, 0 95, 120 95, 120 70, 42 70, 65 0" fill="${colorForSixthDigit}"/>
                </svg>
            </div>

        `)
    }

    // right arm
    if (originalString.length >= 1) {
        const colorForSecondDigit = colorMap2[digits[0]] || "transparent"
        svgs.push(`
            <div style="position: absolute; top: 305px; left: 75;">
                <svg width="300" height="95" viewBox="0 0 300 95" fill="none" xmlns="http://www.w3.org/2000/svg">
                <polygon points ="158 0, 200 95, 300 95, 300 70, 220 70, 188 0" fill="${colorForSecondDigit}"/>
                <rect x="266" y="59" width="9" height="12" fill="${colorForSecondDigit}"/>
                </svg>
            </div>

        `)
    }


    return svgs.join('')
}



//eye direction
function getLook(number) {
    const numberStr = number.toString()
    const lastFourDigits = parseInt(numberStr.substring(numberStr.length - 4))

    if (lastFourDigits < 3334) {
        return "look_left"
    } else if (lastFourDigits >= 3334 && lastFourDigits <= 6666) {
        return "look_crossed"
    } else {
        return "look_center"
    }
}

function generateLookSvg(lookDir) {
    let lookHtml = ""
    if (lookDir === "look_center") {
        lookHtml = `<div style="position: absolute; top: 186px; left: 132px;">
                        <svg width="200" height="20" viewBox="0 0 200 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <ellipse cx="22" cy="0" rx="22" ry="20"  fill="#00BCFF"/>
                        <ellipse cx="176" cy="0" rx="22" ry="20"  fill="#00BCFF"/>
                        </svg>
                    </div>`
    } else if (lookDir === "look_left") {
        lookHtml =   `<div style="position: absolute; top: 186px; left: 100px;">
                        <svg width="200" height="20" viewBox="0 0 200 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <ellipse cx="22" cy="0" rx="22" ry="20"  fill="#00BCFF"/>
                        <ellipse cx="176" cy="0" rx="22" ry="20"  fill="#00BCFF"/>
                        </svg>
                    </div>`
    } else if (lookDir === "look_crossed") {
        lookHtml =  `<div style="position: absolute; top: 186px; left: 169px;">
                        <svg width="126" height="20" viewBox="0 0 126 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <ellipse cx="22" cy="0" rx="22" ry="20"  fill="#00BCFF"/>
                        <ellipse cx="103" cy="0" rx="22" ry="20"  fill="#00BCFF"/>
                        </svg>
                    </div>`
    }
    return lookHtml
}

function c607(number) {
    const numberStr = number.toString()
    return numberStr.includes('607')
}

// boob
function displayboob() {
    return  `<div style="position: absolute; top: 320px; left: 168px;">
        <svg width="96" height="55" viewBox="0 0 96 55" fill="none" xmlns="http://www.w3.org/2000/svg">
            <polygon points ="0 0, 0 55, 48 27.5" fill="#FFFF66"/>
            <polygon points ="48 0, 48 55, 96 27.5" fill="#FFFF66"/>
        </svg>
    </div>`
}

function c6a0(number) {
    const numberStr = number.toString()
    return numberStr.includes('6') && numberStr.includes('0')
}

// boob2
function displayboob2(number) {
    return `<div style="position: absolute; top: 320px; left: 168px;">
        <svg width="96" height="55" viewBox="0 0 96 55" fill="none" xmlns="http://www.w3.org/2000/svg">
            <polygon points ="0 0, 0 55, 48 27.5" fill="#9B272D"/>
            <polygon points ="48 0, 48 55, 96 27.5" fill="#9B272D"/>
        </svg>
    </div>`
}

function c0(number) {
    const numberStr = number.toString()
    return numberStr.includes('0')
}

// Horn
function displayHorn(number) {
    return `<div style="position: absolute; top: 46px; left: 66px;">
                <svg width="292" height="100" viewBox="0 0 292 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <polygon points ="20 0, 3 100, 40 84" fill="#DBF820"/>
                <polygon points ="275 0, 244 84, 292 100" fill="#DBF820"/>
                </svg>
    </div>`
}

function c00(number) {
    const numberStr = number.toString()
    return numberStr.includes('00')
}

// Catear
function displayCatear(number) {
    return  `<div style="position: absolute; top: 46px; left: 66px;">
                <svg width="292" height="100" viewBox="0 0 292 100" fill="none" xmlns="http://www.w3.org/2000/svg">
                <polygon points ="20 0, 3 100, 93 66" fill="#515050"/>
                <polygon points ="275 0, 202 65, 292 100" fill="#515050"/>
                </svg>
    </div>`
}

function c0000(number) {
    const numberStr = number.toString()
    return numberStr.includes('0000')
}
// Catearling
function displayCatearling(number) {
    return  `<div style="position: absolute; top: 70px; left: 334px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="2" y="7" width="20" height="8" transform="rotate(-10 12 12)" fill="#0097FF"/>
                </svg>
    </div>`
}

function c00000(number) {
    const numberStr = number.toString()
    return numberStr.includes('00000')
}
// Catearpiace 
function displayCatearpiace(number) {
    return `<div style="position: absolute; top: 100px; left: 338px;">
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="5" cy="5" r="5" fill="#FF3AFF"/>
                </svg>
    </div>`
}

function c3(number) {
    const numberStr = number.toString()
    return numberStr.includes('3')
}

// Planet1
function displayPlanet1(number) {
    return `<div style="position: absolute; top: 0px; left: 0px;">
                <svg width="425" height="90" viewBox="0 0 425 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="375" cy="35" r="24" fill="#169F94"/>
                <circle cx="20" cy="42" r="8" fill="#FFFFFF"/>
                <circle cx="70" cy="83" r="7" fill="#EEFE6B"/>
                </svg>
    </div>`
}

function c33(number) {
    const numberStr = number.toString()
    return numberStr.includes('33')
}

// Planet2
function displayPlanet2(number) {
    return  `<div style="position: absolute; top: 0px; left: 325px;">
                <svg width="100" height="80" viewBox="0 0 100 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                <ellipse cx="50" cy="35" rx="41" ry="8" stroke="#169F94" stroke-width="2"/>
                </svg>
    </div>`
}

function c333(number) {
    const numberStr = number.toString()
    return numberStr.includes('333')
}

// Planet3
function displayPlanet3(number) {
    return `<div style="position: absolute; top: 0px; left: 325px;">
                <svg width="100" height="80" viewBox="0 0 100 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="60" cy="41" r="3" fill="#FFE357"/>
                </svg>
    </div>`
}

function c3333(number) {
    const numberStr = number.toString()
    return numberStr.includes('3333')
}

// Planet4
function displayFlysLaserEyes(number) {
    return `<div style="position: absolute; top: 0px; left: 325px;">
                <svg width="100" height="80" viewBox="0 0 100 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="50" cy="42" r="4" fill="#FFFFFF"/>
                </svg>
            </div>`
}

function c4a4(number) {
    const numberStr = number.toString()
    const count = (numberStr.match(/4/g) || []).length
    return count >= 2 ? "c4a4" : null
}

// Mouth
function displayMouth(number) {
    return `<div style="position: absolute; top: 220px; left: 206px;">
                <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                <polygon points="0 40, 25 0, 50 40"  fill="#151515"/>
                </svg>
    </div>`
}

function c44(number) {
    const numberStr = number.toString()
    return numberStr.includes('44')
}

// Bigmouth
function displayBigmouth(number) {
    return `<div style="position: absolute; top: 220px; left: 206px;">
                <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="50" height="50" fill="#151515"/>
                </svg>
    </div>`
}

function c444(number) {
    const numberStr = number.toString()
    return numberStr.includes('444')
}

// Yellowmouth
function displayYellowmouth(number) {
    return `<div style="position: absolute; top: 220px; left: 206px;">
                <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="50" height="50" fill="#FFFF2D"/>
                </svg>
    </div>`
}

function c4444(number) {
    const numberStr = number.toString()
    return numberStr.includes('4444')
}

// Tonguepink
function displayTonguepink(number) {
    return  `<div style="position: absolute; top: 250px; left: 206px;">
                <svg width="80" height="20" viewBox="0 0 80 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="70" height="20" fill="#DB6182"/>
                <circle cx="70" cy="10" r="10" fill="#DB6182"/>
                </svg>
    </div>`
}

function c44444(number) {
    const numberStr = number.toString()
    return numberStr.includes('44444')
}

// Tongueblue
function displayTongueblue(number) {
    return  `<div style="position: absolute; top: 250px; left: 206px;">
                <svg width="80" height="20" viewBox="0 0 80 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="70" height="20" fill="#006182"/>
                <circle cx="70" cy="10" r="10" fill="#006182"/>
                </svg>
    </div>`
}

function cp6(number) {
    const numberStr = number.toString()
    // Loop through the number string
    for (let i = 0; i <= numberStr.length - 6; i++) { // Ensure there are at least 6 characters to check
        const substring = numberStr.substring(i, i + 6) // Get the substring of 6 characters
        // Check if the substring is a palindrome
        if (substring === substring.split('').reverse().join('')) {
            return "cp6"
        }
    }
    return null
}
// Arrow
function displayArrow(number) {
    return `<div style="position: absolute; top: 360px; left: 10px;">
        <svg width="50" height="40" viewBox="0 0 50 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <polygon points="0 15, 0 25, 29.5 25, 16.5 40, 33 40, 50 20, 33 0, 16.5 0, 29.5 15"  fill="#AA00FF"/>
        </svg>
    </div>`
}

function c9a9(number) {
    const numberStr = number.toString()
    const count = (numberStr.match(/9/g) || []).length
    return count >= 2 ? "c9a9" : null
}

// Rifle1
function displayRifle1(number) {
    return `<div style="position: absolute; top: 296px; left: 140px;">
                <svg width="280" height="118" viewBox="0 0 280 118" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="34" cy="34" r="34" fill="#DB6182"/>
                <rect x="34" y="24" width="174" height="20"  fill="#DB6182"/>
                <circle cx="152" cy="34" r="34" fill="#DB6182"/>
                <rect x="34" y="0" width="120" height="68"  fill="#DB6182"/>
                <rect x="28" y="64" width="27" height="15"  fill="#DB6182"/>
                <rect x="28" y="104" width="27" height="10"  fill="#DB6182"/>
  
                <rect x="224" y="29" width="10" height="10"  fill="#FFFF00"/>
                <rect x="244" y="29" width="10" height="10"  fill="#FFFF00"/>
                <rect x="264" y="29" width="10" height="10"  fill="#FFFF00"/>
                </svg>
    </div>`
}

function c99(number) {
    const numberStr = number.toString()
    return numberStr.includes('99')
}

// Rifle2
function displayRifle2(number) {
    return `<div style="position: absolute; top: 296px; left: 190px;">
                <svg width="90" height="68" viewBox="0 0 90 68" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="0" y="0" width="18" height="68" fill="#49EFEF"/>
                <rect x="36" y="0" width="18" height="68" fill="#49EFEF"/>
                <rect x="72" y="0" width="18" height="68" fill="#49EFEF"/>
                </svg>
    </div>`
}

function c999(number) {
    const numberStr = number.toString()
    return numberStr.includes('999')
}

// Rifle3
function displayRifle3(number) {
    return `<div style="position: absolute; top: 296px; left: 140px;">
                <svg width="280" height="118" viewBox="0 0 280 118" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="28" y="64" width="27" height="15"  fill="#000000"/>
                <rect x="28" y="104" width="27" height="10"  fill="#000000"/>
                <circle cx="34" cy="34" r="34" fill="#00FFB5"/>
                <rect x="34" y="24" width="174" height="20"  fill="#00FFB5"/>
                <circle cx="152" cy="34" r="34" fill="#00FFB5"/>
                <rect x="34" y="0" width="120" height="68"  fill="#00FFB5"/>

                <rect x="224" y="29" width="10" height="10"  fill="#FF0000"/>
                <rect x="244" y="29" width="10" height="10"  fill="#FF0000"/>
                <rect x="264" y="29" width="10" height="10"  fill="#FF0000"/>
                </svg>
    </div>`
}

// Rifle4
function c9999(number) {
    const numberStr = number.toString()
    return numberStr.includes('9999')
}

function displayRifle4(number) {
    return `<div style="position: absolute; top: 296px; left: 140px;">
        <svg width="280" height="118" viewBox="0 0 280 118" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="28" y="64" width="27" height="15"  fill="#FFFF00"/>
                <rect x="28" y="104" width="27" height="10"  fill="#FFFF00"/>
                <circle cx="34" cy="34" r="34" fill="#FFFF00"/>
                <rect x="34" y="24" width="174" height="20"  fill="#FFFF00"/>
                <circle cx="152" cy="34" r="34" fill="#FFFF00"/>
                <rect x="34" y="0" width="120" height="68"  fill="#00FFB5"/>
                
                <rect x="224" y="29" width="10" height="10"  fill="#000000"/>
                <rect x="244" y="29" width="10" height="10"  fill="#000000"/>
                <rect x="264" y="29" width="10" height="10"  fill="#000000"/>
            </svg>
    </div>`
}

function cs5(number) {
    const numberStr = number.toString()
    for (let i = 0; i < numberStr.length - 4; i++) { // Ensure there are at least 3 characters to check
        const substring = numberStr.substring(i, i + 5) // Get the substring of 3 characters
        if (!substring.startsWith('0')) { // Exclude substrings starting with '0'
            const subNum = parseInt(substring, 10)
            const s = Math.sqrt(subNum)
            if (s === Math.floor(s)) { // Check if s is a perfect square
                return "cs5d" // Return a different identifier for 3-digit perfect squares
            }
        }
    }
    return null
}

// Halo
function displayHalo(number) {
    return `<div style="position: absolute; top: 20px; left: 130px;">
            <svg width="164" height="20" viewBox="0 0 164 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <ellipse cx="82" cy="10" rx="80" ry="8" stroke="#FFFF32" stroke-width="4"/>
            </svg>
    </div>`
}


// Function to check if a number contains a 4-digit square as a substring
function containsFourDigitSquare(number) {
    const numberStr = number.toString()
    for (let i = 0; i <= numberStr.length - 4; i++) {
        const substring = numberStr.substring(i, i + 4)
        const num = parseInt(substring, 10)
        if (Math.sqrt(num) % 1 === 0) {
            return true
        }
    }
    return false
}

// Determine the range for laser eyes based on the last four digits
function getLaserEyeRange(lastFourDigits) {
    if (lastFourDigits < 3334) {
        return "laser_left"
    } else if (lastFourDigits >= 3334 && lastFourDigits <= 6666) {
        return "laser_crossed"
    } else {
        return "laser_center"
    }
}

// Function to generate SVG for laser eyes based on direction
function displayLaserEyes(eyeDirection) {
    let svgHTML = ""
    switch (eyeDirection) {
       
        case "laser_center":
            svgHTML = `<div style="position: absolute; top: 134px; left: 94px;">
                     <svg width="278" height="120" viewBox="0 0 278 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <polygon points ="0 60, 50 70, 60 120, 70 70, 120 60, 70 50, 60 0, 50 50"  fill="#FF8000" />
                        <polygon points ="154 60, 204 70, 214 120, 224 70, 274 60, 224 50, 214 0, 204 50"  fill="#FF8000"/>

                        </svg>
                     </div>`
            break
    }
    return svgHTML
}


function cs6(number) {
    const numberStr = number.toString()
    for (let i = 0; i < numberStr.length - 5; i++) { // Ensure there are at least 3 characters to check
        const substring = numberStr.substring(i, i + 6) // Get the substring of 3 characters
        if (!substring.startsWith('0')) { // Exclude substrings starting with '0'
            const subNum = parseInt(substring, 10)
            const s = Math.sqrt(subNum)
            if (s === Math.floor(s)) { // Check if s is a perfect square
                return "cs3d" // Return a different identifier for 3-digit perfect squares
            }
        }
    }
    return null
}

// Pauldron
function displayPauldron(number) {
    return `<div style="position: absolute; top: 305px; left: 60px;">
                <svg width="250" height="24" viewBox="0 0 250 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <polygon points=" 0 0, 40 24, 57 0 "  fill="#FFFF55"/>
                    <polygon points=" 196 0, 214 24, 250 0 "  fill="#FFFF55"/>
                </svg>
    </div>`
}


function m12(number) {
    return number % 12 === 0
}

// Thunder
function displayThunder(number) {
    return  `<div style="position: absolute; top: 30px; left: 120px;">
        <svg width="60" height="82" viewBox="0 0 60 82" fill="none" xmlns="http://www.w3.org/2000/svg">
            <polygon points ="0 0, 14 56, 25 46, 60 82, 48 25, 36 36" fill="#FFFF66"/>
        </svg>
    </div>`
}

function m13(number) {
    return number % 13 === 0
}

// Tear
function displayTear(number) {
    return `<div style="position: absolute; top: 250px; left: 100px;">
                <svg width="41" height="63" viewBox="0 0 41 63" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path class="cls-1" d="M38.59,31.74L20.74,0h-.41L2.49,31.74c-1.59,2.92-2.49,6.95-2.49,10.51,0,11.35,9.2,20.54,20.54,20.54s20.54-9.2,20.54-20.54c0-3.56-.9-7.59-2.49-10.51Z"  fill="#6CCBAB"/>
                </svg>
    </div>`
}


function m14(number) {
    return number % 14 === 0
}

// Knife
function displayKnife(number) {
    return`<div style="position: absolute; top: 308px; left: 346px;">
            <svg width="18" height="67" viewBox="0 0 18 67" fill="none" xmlns="http://www.w3.org/2000/svg">
                <polygon points ="0 0, 0 67, 9 67, 9 43, 18 43" fill="#FF9877"/>
            </svg>
    </div>`
}

function m15(number) {
    return number % 15 === 0
}

// Fork
function displayFork(number) {
    return `<div style="position: absolute; top: 312.7px; left: 165px;">
            <svg width="29" height="63" viewBox="0 0 29 63" fill="none" xmlns="http://www.w3.org/2000/svg">
                <polygon points ="1.5 0, 0 38, 10 38, 10 63, 19 63, 19 38, 29 38, 27.5 0, 21 0, 21 21, 17.5 21, 17.5 0, 11.5 0, 11.5 21, 8.11 21,8.11 0" fill="#FF9877"/>
            </svg>
    </div>`
}


function m16(number) {
    return number % 16 === 0
}
// Necklace
function displayNecklace(number) {
    return `<div style="position: absolute; top: 291px; left: 150px;">
                <svg width="70" height="14" viewBox="0 0 70 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0" y="0" width="70" height="14" fill="#A2FF00"/>
                    <polygon points ="0 0, 0 14, 14 0, 14 14, 28 0, 28 14, 42 0, 42 14, 56 0, 56 14, 70 0" fill="#FF9877"/>
                </svg>
    </div>`
}

function m69(number) {
    return number % 69 === 0
}

// Antenna
function displayAntenna(number) {
    return `<div style="position: absolute; top: 50px; left: 103px;">
                <svg width="220" height="30" viewBox="0 0 220 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                <polygon points ="0 0, 0 30, 220 0, 220 30" fill="#75FF00"/>

                </svg>
            </div>`
}

function m11(number) {
    return number % 11 === 0
}
// Darkmatter1
function displayDarkmatter1(number) {
    return `<div style="position: absolute; top: 50px; left: 10px;">
            <svg width="400" height="355" viewBox="0 0 400 355" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="cls-1" d="m6.8,29.37C-5.23,52.46-.37,81.1,14.13,102.9c11.57,17.38,29.71,34.88,24.85,54.87-3.01,12.38-14.21,21.2-22.21,31.43-10.43,13.36-15.7,30.21-14.61,46.76.16,2.37.5,4.87,2.09,6.71,3.03,3.49,8.76,2.91,13.46,2,14.91-2.87,29.81-5.74,44.72-8.61-.86,0-4.27,5.98-4.87,6.83-1.71,2.39-3.41,4.78-5.12,7.17-3.49,4.9-6.99,9.79-10.48,14.69-1.39,1.95-3.68,4.21-4.35,6.45-.58,1.94-.11,4.57.34,6.49,1.72,7.32,6.95,11.17,13.57,14.59,7.18,3.71,14.7,7.01,22.75,8.62,11.43,2.29,24.41.66,32.9-6.89,3.35-2.98,6.23-6.95,10.72-7.92,5.1-1.11,10.03,2.11,14.04,5.26,13.2,10.37,25.18,22.11,35.66,34.94,3.8,4.65,7.5,9.54,12.57,12.96,8.63,5.82,20.88,6.44,30.12,1.53s15.01-15.09,14.18-25.04c.27,3.21,5.11,8.43,6.99,11,2.93,4.01,6.14,7.81,9.61,11.37,3.16,3.24,6.75,7.25,10.58,9.67,11.5,7.27,20.87-5.73,23.99-15.09,2.14-6.43,2.65-13.39,1.86-20.1-1.52-12.76-7.19-24.7-12.8-36.4,2.42,18.15,16.76,33.54,34.08,41.84,3.44,1.65,7.01,3.07,10.66,4.26,12.24,4.02,25.24,5.57,38.15,5.91,5.92.16,11.62.22,17.16-2.05,5.16-2.11,9.65-5.61,13.09-9.77,5.43-6.57,8.43-14.64,10.38-22.76-1.19,3.73-4.3,6.77-8.01,8.49s-7.97,2.23-12.09,1.95c-2.76-.19-5.59-.76-7.85-2.27-2.26-1.51-3.83-4.13-3.39-6.7-.03,2.14-.17,4.38-1.33,6.22-1.26,1.98-3.56,3.21-5.94,3.76s-4.86.49-7.31.44c-1.61-.04-3.26-.09-4.73-.71-3.24-1.38-4.5-5.02-5.42-8.25.06,3.86-2.68,7.47-6.33,9.24s-8.02,1.87-12,.93c-3.25-.77-6.33-2.43-9.34-3.78-3.26-1.47-6.06-3.73-8.76-5.96-5.88-4.84-12.04-9.49-17.77-14.49-3.79-3.31-7.47-9.85-13.33-9-2.46.36-4.78,1.96-5.74,4.25-.71,1.71-.66,3.62-.59,5.47.12,3.34.33,5.82,1.29,9.05,1.72,5.79,3.37,11.59,4.94,17.42,1.01,3.75,2.88,7.31,3.63,11.13.55,2.76-.11,5.74-1.76,8.01-3.38,4.65-7.05,2.87-11.7-5.92,1.05.97,1.03,9.06-.22,9.79-1.41.83-4.55,1.54-5.95.66-3.71-2.31-7.05-8.93-9.12-12.66-3.15-5.68-6.22-12.54-10.87-17.16-4.15-4.12-13.86-8.56-18.94-3.84-1.62,1.5-2.06,3.77-2.57,5.85-.61,2.47-1.47,4.94-3.15,6.93-1.98,2.35-4.37,2.75-7.22,3.46-3.07.77-5.96,1.37-9.16,1.47-4.32.14-8.69-.53-12.69-2.09-12.55-4.91-21.24-15.65-29.27-25.96s-16.6-21.1-29.06-26.21c-5.67-2.33-12.55-3.24-17.84-.21-5.29,3.03-7.54,9.05-11.42,13.6-4.31,5.05-11.81,6.27-18.28,5.45-2.54-.32-5.08-1.52-7.36-2.56-.9-.41-1.79-.86-2.52-1.5-1.81-1.6-2.28-4.14-2.19-6.47.46-12.12,11.48-21.37,12.02-33.55.16-3.59.16-7.6-2.46-10.21-2.74-2.72-7.21-2.84-11.19-2.96-10.05-.32-20.02,1.57-27.95-4.23-7.93-5.81-10.02-14.44-5.75-23,2.82-5.66,8.27-12.7,12.83-17.25,12.43-12.4,12.09-33.92,7.54-50.42-4.55-16.5-14.8-31.01-24.88-45.17,8.28-.89,14.41-8.27,16.12-15.95,1.26-5.65,1.27-9.92-3.47-13.82-1.6-1.32-3.02-2.81-4.24-4.45-.96-1.29-1.79-2.7-2.07-4.25s.08-3.27,1.26-4.38c1.29-1.23,3.32-1.53,5.14-1.32s3.57.85,5.36,1.24c6.65,1.44,10.8-2.59,12.68-8.29.83-2.52-.92-4.54-1.59-7.01-.6-2.2-.15-5.01,2.04-5.98.83-.37,1.79-.41,2.71-.38,4.5.15,8.92,1.84,12.24,4.69,2.22,1.9,3.94,4.3,5.02,6.93.45,1.11.48,2.88,1.15,3.84.62.89,2.56,1.73,3.54,2.23,3.24,1.64,7.2,1.98,10.7.93.29-.09.6-.2.78-.43.2-.25.21-.59.21-.91-.01-2.14-.03-4.27-.04-6.41,0-.43,0-.87.21-1.25.45-.81,1.6-.96,2.56-.89,2.85.22,5.46,1.56,8.25,2.14s6.25.11,7.62-2.25c1.03-1.77.51-4-.47-5.8-1.21-2.23-3.05-4.1-5.01-5.79C85.42,6.48,68.83-.61,51.96.04,31.87.81,15.48,12.69,6.8,29.37Z" fill="#75FF00"/>
              </svg>
    </div>`
}


function m888(number) {
    return number % 888 === 0
}

// Darkmatter2
function displayDarkmatter2(number) {
    return `<div style="position: absolute; top: 50px; left: 10px;">
        <svg width="400" height="355" viewBox="0 0 400 355" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path class="cls-1" d="m6.8,29.37C-5.23,52.46-.37,81.1,14.13,102.9c11.57,17.38,29.71,34.88,24.85,54.87-3.01,12.38-14.21,21.2-22.21,31.43-10.43,13.36-15.7,30.21-14.61,46.76.16,2.37.5,4.87,2.09,6.71,3.03,3.49,8.76,2.91,13.46,2,14.91-2.87,29.81-5.74,44.72-8.61-.86,0-4.27,5.98-4.87,6.83-1.71,2.39-3.41,4.78-5.12,7.17-3.49,4.9-6.99,9.79-10.48,14.69-1.39,1.95-3.68,4.21-4.35,6.45-.58,1.94-.11,4.57.34,6.49,1.72,7.32,6.95,11.17,13.57,14.59,7.18,3.71,14.7,7.01,22.75,8.62,11.43,2.29,24.41.66,32.9-6.89,3.35-2.98,6.23-6.95,10.72-7.92,5.1-1.11,10.03,2.11,14.04,5.26,13.2,10.37,25.18,22.11,35.66,34.94,3.8,4.65,7.5,9.54,12.57,12.96,8.63,5.82,20.88,6.44,30.12,1.53s15.01-15.09,14.18-25.04c.27,3.21,5.11,8.43,6.99,11,2.93,4.01,6.14,7.81,9.61,11.37,3.16,3.24,6.75,7.25,10.58,9.67,11.5,7.27,20.87-5.73,23.99-15.09,2.14-6.43,2.65-13.39,1.86-20.1-1.52-12.76-7.19-24.7-12.8-36.4,2.42,18.15,16.76,33.54,34.08,41.84,3.44,1.65,7.01,3.07,10.66,4.26,12.24,4.02,25.24,5.57,38.15,5.91,5.92.16,11.62.22,17.16-2.05,5.16-2.11,9.65-5.61,13.09-9.77,5.43-6.57,8.43-14.64,10.38-22.76-1.19,3.73-4.3,6.77-8.01,8.49s-7.97,2.23-12.09,1.95c-2.76-.19-5.59-.76-7.85-2.27-2.26-1.51-3.83-4.13-3.39-6.7-.03,2.14-.17,4.38-1.33,6.22-1.26,1.98-3.56,3.21-5.94,3.76s-4.86.49-7.31.44c-1.61-.04-3.26-.09-4.73-.71-3.24-1.38-4.5-5.02-5.42-8.25.06,3.86-2.68,7.47-6.33,9.24s-8.02,1.87-12,.93c-3.25-.77-6.33-2.43-9.34-3.78-3.26-1.47-6.06-3.73-8.76-5.96-5.88-4.84-12.04-9.49-17.77-14.49-3.79-3.31-7.47-9.85-13.33-9-2.46.36-4.78,1.96-5.74,4.25-.71,1.71-.66,3.62-.59,5.47.12,3.34.33,5.82,1.29,9.05,1.72,5.79,3.37,11.59,4.94,17.42,1.01,3.75,2.88,7.31,3.63,11.13.55,2.76-.11,5.74-1.76,8.01-3.38,4.65-7.05,2.87-11.7-5.92,1.05.97,1.03,9.06-.22,9.79-1.41.83-4.55,1.54-5.95.66-3.71-2.31-7.05-8.93-9.12-12.66-3.15-5.68-6.22-12.54-10.87-17.16-4.15-4.12-13.86-8.56-18.94-3.84-1.62,1.5-2.06,3.77-2.57,5.85-.61,2.47-1.47,4.94-3.15,6.93-1.98,2.35-4.37,2.75-7.22,3.46-3.07.77-5.96,1.37-9.16,1.47-4.32.14-8.69-.53-12.69-2.09-12.55-4.91-21.24-15.65-29.27-25.96s-16.6-21.1-29.06-26.21c-5.67-2.33-12.55-3.24-17.84-.21-5.29,3.03-7.54,9.05-11.42,13.6-4.31,5.05-11.81,6.27-18.28,5.45-2.54-.32-5.08-1.52-7.36-2.56-.9-.41-1.79-.86-2.52-1.5-1.81-1.6-2.28-4.14-2.19-6.47.46-12.12,11.48-21.37,12.02-33.55.16-3.59.16-7.6-2.46-10.21-2.74-2.72-7.21-2.84-11.19-2.96-10.05-.32-20.02,1.57-27.95-4.23-7.93-5.81-10.02-14.44-5.75-23,2.82-5.66,8.27-12.7,12.83-17.25,12.43-12.4,12.09-33.92,7.54-50.42-4.55-16.5-14.8-31.01-24.88-45.17,8.28-.89,14.41-8.27,16.12-15.95,1.26-5.65,1.27-9.92-3.47-13.82-1.6-1.32-3.02-2.81-4.24-4.45-.96-1.29-1.79-2.7-2.07-4.25s.08-3.27,1.26-4.38c1.29-1.23,3.32-1.53,5.14-1.32s3.57.85,5.36,1.24c6.65,1.44,10.8-2.59,12.68-8.29.83-2.52-.92-4.54-1.59-7.01-.6-2.2-.15-5.01,2.04-5.98.83-.37,1.79-.41,2.71-.38,4.5.15,8.92,1.84,12.24,4.69,2.22,1.9,3.94,4.3,5.02,6.93.45,1.11.48,2.88,1.15,3.84.62.89,2.56,1.73,3.54,2.23,3.24,1.64,7.2,1.98,10.7.93.29-.09.6-.2.78-.43.2-.25.21-.59.21-.91-.01-2.14-.03-4.27-.04-6.41,0-.43,0-.87.21-1.25.45-.81,1.6-.96,2.56-.89,2.85.22,5.46,1.56,8.25,2.14s6.25.11,7.62-2.25c1.03-1.77.51-4-.47-5.8-1.21-2.23-3.05-4.1-5.01-5.79C85.42,6.48,68.83-.61,51.96.04,31.87.81,15.48,12.69,6.8,29.37Z" fill="#FF00FF"/>
              </svg>
    </div>`
}

function ce8(number) {
    let numberStr = number.toString()
    let exponent = 8
    let power = 1
    while (true) {
        let exponentStr = Math.pow(exponent, power).toString()
        if (numberStr.includes(exponentStr)) {
            return true
        }
        if (Math.pow(exponent, power) > number) break // Stop if the exponent value exceeds the number
        power++
    }
    return false
}

function displayNightVision() {
    return ` <div style="position: absolute; top: 189.5px; left: 88px">
                <svg width="288" height="45" viewBox="0 0 288 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <ellipse cx="66" cy="0" rx="66" ry="45"  fill="#00BCFF"/>
                    <ellipse cx="221" cy="0" rx="66" ry="45" fill="#00BCFF"/>
                    <ellipse cx="66" cy="0" rx="10" ry="10"  fill="#00865E"/>
                    <ellipse cx="221" cy="0" rx="10" ry="10" fill="#00865E"/>
                </svg>
            </div>`
}


//fixed elements
function generateHtmlBasedOnBlockNumber(blockNumber) {
    const lookDir = getLook(blockNumber)
    const lookHtml = generateLookSvg(lookDir)
    let boob = c607(blockNumber) ? displayboob() : ""
    let boob2 = c6a0(blockNumber) ? displayboob2() : ""
    let Horn = c0(blockNumber) ? displayHorn() : ""
    let Catear = c00(blockNumber) ? displayCatear() : ""
    let Catearling = c0000(blockNumber) ? displayCatearling() : ""
    let Catearpiace = c00000(blockNumber) ? displayCatearpiace() : ""
    let Planet1 = c3(blockNumber) ? displayPlanet1() : ""
    let Planet2 = c33(blockNumber) ? displayPlanet2() : ""
    let Planet3 = c333(blockNumber) ? displayPlanet3() : ""
    let flysLaserEyes = c3333(blockNumber) ? displayFlysLaserEyes() : ""
    let Mouth = c4a4(blockNumber) ? displayMouth() : ""
    let Bigmouth = c44(blockNumber) ? displayBigmouth() : ""
    let Yellowmouth = c444(blockNumber) ? displayYellowmouth() : ""
    let Tonguepink = c4444(blockNumber) ? displayTonguepink() : ""
    let Tongueblue = c44444(blockNumber) ? displayTongueblue() : ""
    let Arrow = cp6(blockNumber) ? displayArrow() : ""
    let Halo = cs5(blockNumber) ? displayHalo() : ""
    let Pauldron = cs6(blockNumber) ? displayPauldron() : ""
    let Rifle1 = c9a9(blockNumber) ? displayRifle1() : ""
    let Rifle2 = c99(blockNumber) ? displayRifle2() : ""
    let Rifle3 = c999(blockNumber) ? displayRifle3() : ""
    let Rifle4 = c9999(blockNumber) ? displayRifle4() : ""
    let Darkmatter1 = m11(blockNumber) ? displayDarkmatter1() : ""
    let Darkmatter2 = m888(blockNumber) ? displayDarkmatter2() : ""
    let nightVision = ce8(blockNumber) ? displayNightVision() : ""
    let Thunder = m12(blockNumber) ? displayThunder() : ""
    let Tear = m13(blockNumber) ? displayTear() : ""
    let Knife = m14(blockNumber) ? displayKnife() : ""
    let Fork = m15(blockNumber) ? displayFork() : ""
    let Necklace = m16(blockNumber) ? displayNecklace() : ""
    let Antenna = m69(blockNumber) ? displayAntenna() : ""
    const containsSquare = containsFourDigitSquare(blockNumber)
    const eyeDirection = getLaserEyeRange(parseInt(blockNumber.toString().slice(-4)))
    const laserEyes = containsSquare ? displayLaserEyes(eyeDirection) : ""
    const svgsForDigits = generateSvgForDigits(blockNumber)


    //background
    const background = `<div style="position: absolute; top: 0px; left: 0px;">
            <svg width="425" height="425" viewBox="0 0 425 425" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="425" height="425" fill="#E5E4DC"/> 
            </svg>
        </div>`;

    // eyes
    const eyes = `
        <div style="position: absolute; top: 144.5px; left: 88px;">
                <svg width="288" height="90" viewBox="0 0 288 90" fill="none" xmlns="http://www.w3.org/2000/svg">
                <ellipse cx="66" cy="44" rx="66" ry="45" fill="white"/>
                <ellipse cx="221" cy="44" rx="66" ry="45" fill="white"/>
  
                </svg>
            </div>`

    // eyelib
    const eyelib = `
        <div style="position: absolute; top: 144.5px; left: 88px">
                <svg width="288" height="45" viewBox="0 0 288 45" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <ellipse cx="66" cy="44" rx="66" ry="45"  fill="#009C92"/>
                    <ellipse cx="221" cy="44" rx="66" ry="45" fill="#009C92"/>
                </svg>
            </div>`

//construction
    const htmlContent = background + Horn + Catear + Catearling + eyes + nightVision + lookHtml + eyelib + svgsForDigits + boob2 + boob + Planet1 + Planet2 + Planet3 + Fork + Necklace + Bigmouth + Mouth + Darkmatter1 + Yellowmouth + Thunder + Knife + Antenna + Tear + Tonguepink + Tongueblue + Rifle1 + Rifle2 + Rifle3 + Rifle4 + Halo + Pauldron + Darkmatter2 + Arrow + Catearpiace + flysLaserEyes + laserEyes
    document.getElementById('natdogoooooviewer').innerHTML = htmlContent
}
</script>