yiler-huang-adjusted-supermarket-design [Light]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Everymart: Interactive supermarket ======

By [[yiler-huang| Yiler Huang]]

This is my interactive supermarket design. You can try hovering on the image below to see details of the supermarket. The images for the sections were created using [[https://www.bing.com/create| Bing Image Creator]].

=== . ===


<html>
<!DOCTYPE html>
<style>
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

#section {
  color: #ffffff;
}

#popUpRect {
    opacity: 0;
    position: absolute;
    background-color: white;
    border-color: black;
    border-width: 4px;
    position: absolute;
    overflow: auto;
    z-index: 1;
    cursor: pointer;
    line-height: 1.6;
    padding: 2px;
    transition-property: height, opacity, top;
    transition-duration: 0.25s;
    font-family: 'Press Start 2P';font-size: 14px;
    color: #282828;
}

area:hover{
    cursor: pointer;
}

#allowSound {
    padding: 2px;
    background-color: black;
    color: white;
    position: absolute;
    text-align: left;
    float: right;
    left 100%;
    position: sticky;
    transition-property: opacity;
    transition-duration: 0.3s;
    font-family: 'Press Start 2P';font-size: 15px;
    color: #fdfdfd;
}


#allowSound:hover {
    cursor: pointer;
}

#dokuwiki__content {

}

.panel panel-default px-3 py-2: {
  background-color: #181818;
}
</style>
<body>
     
     <div id = 'allowSound'> 
     <p>Click to enable sound for full supermarket experience</p> 
     <p style="font-size:25px">點擊以啟用聲音以獲得完整的超市體驗</p>
     </div>
    <div id='popUpRect'></div>
</body>
<script>
//-----------------------------------------------------------------
//Add to popUpElements:

//--------------------------------------------------------------------------
//Local Version
//--------------------------------------------------------------------------
//Define necessary resources:
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  move(xDistance, yDistance) {
    return new Point(this.x + xDistance, this.y + yDistance);
  }
  moveByAngle(angle, distance) {
    let r = (angle * Math.PI) / 180;
    return new Point(
      this.x + distance * Math.sin(r),
      this.y + distance * Math.cos(r)
    );
  }
  distance(point2) {
    let point1 = new Point(this.x, this.y)
    let a = point1.x - point2.x
    let b = point1.y - point2.y
    if (a < 0) {
      a = a - (a * 2)
    }
    if (b < 0) {
      b = b - (b * 2)
    }
    let toSquare = (b ** 2) + (a ** 2)
    return Math.sqrt(toSquare)
  }
}
 
function enableSound (){
    let elem = document.getElementById('allowSound')
    elem.style.opacity = '0'
    setTimeout(() => {
        elem.remove()
    }, 1000)
    document.removeEventListener('click', enableSound);
}
 
function preloadAllAssets (){
    console.log('showing rect')
    Object.keys(popUpElements).forEach(x => {
        if (popUpElements[x].mappedImage !== undefined){
            Object.keys(popUpElements[x]).forEach(b => {
                let currentObj = popUpElements[x][b]
                if (b.includes('Style') === false && b !== 'mappedImage'){
                    if (currentObj.image !== undefined){
                        let imgPath = currentObj.image
                        currentObj.image = new Image()
                        currentObj.image.src = imgPath
                        currentObj.image.onclick = function (){ window.open(imgPath)}
                    }
                    else if (currentObj.audio !== undefined){
                        currentObj.audio = new Audio(currentObj.audio)
                        currentObj.audio.preload = 'auto'
                    }
                }
            })
        }
        else if (x.image !== undefined){
            let imgPath = x.image
            x.image = new Image()
            x.image.src = imgPath
        }
        else if (x.audio !== undefined){
            x.audio = new Audio(x.audio)
            x.audio.preload = 'auto'
        }
    })
}
//Preload images: https://stackoverflow.com/a/3646056/19515980
 
//Set up necessary items:
let mouse = new Point(0, 0)
let lastMousePosition=new Point(0,0)
let scrollPosition=new Point(0,0)
let mouseDown = false
let popUpElements = {}
let currentMouseOver = document.body
let popUpRect = document.getElementById('popUpRect')
popUpRect.style.opacity = '0'
 
//--------------------------------------------------------------------------
//Necessary Event Listeners:
 
document.addEventListener('scroll', ((e) => {
//calculating Mouse position:
  mouse.x = mouse.x+(window.scrollX-scrollPosition.x)
  mouse.y = mouse.y + (window.scrollY - scrollPosition.y)
  scrollPosition = new Point(window.scrollX,window.scrollY)
}))
 
document.addEventListener('pointermove', ((e) => {
    mouse.x = e.pageX
    mouse.y = e.pageY
    checkIfHideRect(e)
    lastMousePosition.x = mouse.x;
    lastMousePosition.y = mouse.y;
    setTimeout(() =>{
        checkIfShowRect(e)
    }, 202)
}))
 
document.addEventListener('mouseover',function (e){
    checkIfShowRect(e)
    currentMouseOver = e
    setTimeout(() =>{
        checkIfShowRect(e)
    }, 202)
    /*
    try{
        if (currentMouseOverpopUpRect.style.opacity === '0'){
            document.body.style.cursor = 'pointer'
        }
    }
    catch{}
    */
})
 
document.addEventListener('mouseout',function (e){
    currentMouseOver = e
})
 
document.addEventListener('click', enableSound);
 
//https://stackoverflow.com/a/2863570/19515980
 
window.addEventListener("load", (e) => {
    Object.keys(popUpElements).forEach(x => {
        generateImageMap(x, locationToAppendTo)
    })
    preloadAllAssets()
});
 
if ('ontouchstart' in window){
    console.log('this device supports touch')
    popUpRect.style.transitionDuration = '0.1s'
    document.addEventListener("click", (e) => processTouch(e), false);
    document.addEventListener("touchstart", (e) => processTouch(e), false);
    document.addEventListener("touchcancel", (e) => processTouch(e), false);
    document.addEventListener("touchend", (e) => processTouch(e), false);
}
 
function processTouch (e){
    checkIfShowRect(e)
    checkIfHideRect(e)
}
 
//--------------------------------------------------------------------------
//Show popUpRect functions
 
function checkIfShowRect (e){
    setTimeout(()=>{
        if (popUpRect.style.opacity == '0' && e.target.id !== undefined){
            console.log('showing')
            let data = findPopUpData(e)
            if (data !== undefined){
                if (data.audio !== undefined){
                    data.audio.play()
                 }
            }
        }
        else if (popUpRect.style.opacity == '0'){
            setTimeout(()=>{
                checkIfShowRect(e)
            }, 50)
        }
    },50)
}
 
function findPopUpData (e){
    let position = 'outer'
    let target;
    if (e.target.parentElement !== null){
        //console.log('name', e.target.id)
        target = Object.keys(popUpElements).find(x => x === e.target.parentElement.id)
    }
    //console.log('original target', e.target.id, target)
    if (target === undefined || target === -1){
        target = Object.keys(popUpElements).indexOf(e.target.id)
    }
    else {
        position = target
        target = Object.keys(popUpElements[target]).find(x => x === e.target.id)
    }
    //console.log('position', position)
    //console.log('target', target)
    if (target === undefined){
        return false
    }
    else if (position === ' outer'){
        showRect(e, popUpElements[target])
        return popUpElements[target]
    }
    else if (target !== -1){
        showRect(e, popUpElements[position][target])
        return popUpElements[position][target]
    }
}
 
let selectedPart;
function showRect (e, data){
    selectedPart = e
    console.log('showing rect')
    if (popUpRect.style.opacity == '0'){
            popUpRect.style.opacity = '1'
        //let elemInfo=elem.getBoundingClientRect()
       //browserZoomLevel = Math.round(window.devicePixelRatio * 100);
       //selectedPart.style.borderRight=window.innerWidth/10-selectedPart.getBoundingClientRect().width+3+'px solid white'
        //openPopUpRect(elemInfo.x + JSON.parse(mapPos[0]) + scrollX,elemInfo.y + scrollY + JSON.parse(mapPos[1]))
        //checkPopUpRectPosition(popUpRect)
    let parentData = Object.keys(popUpElements).map(x => {
        if (popUpElements[x][e.target.id] !== undefined){
            return popUpElements[x]
        }
    })[0]
        styleRect(e, data, parentData)
        positionRect(e, data, parentData)
        displayRectContent(e, data)
        scaleRect(data)
    }
}
 
function displayRectContent (e, data){
    let dataToDisplay = ''
    if (data.label !== undefined){
        dataToDisplay += '<b>' + data.label +': </b> <br> '
    }
    if (data.info !== undefined){
        dataToDisplay += data.info
    }
    popUpRect.innerHTML = dataToDisplay
    if (data.image !== undefined){
        displayRectImage(e, data)
    }
}
 
function displayRectImage (e, data){
    let rectWidth = data.imageWidth
    let rectHeight = data.imageHeight
    if (rectWidth === undefined){
        rectWidth = window.innerWidth / 8
    }
    if (rectHeight === undefined){
        rectHeight = window.innerHeight / 5.9
    }
    data.image.style.width = rectWidth + 'px'
    data.image.style.height = rectHeight + 'px'
    popUpRect.appendChild(data.image)
}
 
function getMapPos (data){
    if (data.shape === 'rect'){
        return data.coords.split(',').map(x => {return JSON.parse(x)})
    }
    else if (data.shape === 'circle'){
        let splitedData = data.coords.split(',').map(x => {return JSON.parse(x)})
        return [splitedData[0] - splitedData[2], splitedData[1] - splitedData[2], splitedData[0] + splitedData[2], splitedData[1] + splitedData[2]]
    }
    else if (data.shape === 'poly'){
        let splitedData = data.coords.split(',').map(x => {return JSON.parse(x)})
        let yPositions = splitedData.filter((_, i) => i % 2 === 1);
        let xPositions = splitedData.filter((_, i) => i % 2 === 0);
        return [Math.min(... xPositions), Math.min(... yPositions), Math.max(... xPositions), Math.max(yPositions)]
    }
    else{
        console.error('Unexpected or Undefined shape', 'Supported shapes are rect, circle, and poly.')
    }
}
 
function positionRect (e, data, parentData){
    let mapPos = getMapPos(data)
    let parentInfo = parentData.mappedImage.getBoundingClientRect()
    let targetBoundingInfo = {
        x: parentInfo.x + mapPos[0],
        right: parentInfo.x + mapPos[2],
        y: parentInfo.y + mapPos[1] + scrollY,
        bottom: parentInfo.y + mapPos[3] + scrollY,
    }
    console.log('original', parentData.offset, targetBoundingInfo)
    targetBoundingInfo = removeOffset(targetBoundingInfo, parentData.offset)
    console.log('removeOffset', targetBoundingInfo)
    //console.log('info', targetBoundingInfo)
    //console.log('mapPos', mapPos)
    //console.log('parentInfo', e.target.parentElement.id, parentInfo)
    let rectHeight = data.height
    if (rectHeight === undefined){
        rectHeight = window.innerHeight / 5.9
    }
    let rectWidth = data.width
    if (rectWidth === undefined){
        rectWidth = window.innerWidth / 8
    }
    if (data.position === 'stack'){
        positionRectStackedWithTarget(targetBoundingInfo, data)
       //// return true
    }
    //HERE:
    else if (data.position === 'under' && checkIfPositionOutsideScreen(targetBoundingInfo.x, targetBoundingInfo.y, data) === undefined){
        positionRectUnderTarget(targetBoundingInfo, data)
        return true
    }
    else if (data.position === 'above' && checkIfPositionOutsideScreen(targetBoundingInfo.x, targetBoundingInfo.y - rectHeight, data) === undefined){
        positionRectAboveTarget(targetBoundingInfo, data)
        return true
    }
    else if (data.position === 'left' && checkIfPositionOutsideScreen(targetBoundingInfo.x - data.width, targetBoundingInfo.y, data) === undefined){
        positionRectLeftTarget(targetBoundingInfo, data)
        return true
    }
    else if (data.position === 'right' && checkIfPositionOutsideScreen(targetBoundingInfo.right, targetBoundingInfo.y, data) === undefined){
        positionRectRightTarget(targetBoundingInfo, data)
        return true
    }
    let availablePositions = findAvailablePositions(e, data, targetBoundingInfo)
    //console.log('availablePositions', availablePositions)
    pickBestPosition(targetBoundingInfo, data, availablePositions)
}
 
function removeOffset (targetBoundingInfo, offset){
    targetBoundingInfo.x -= offset.x
    targetBoundingInfo.right -= offset.x
    targetBoundingInfo.y -= offset.y
    targetBoundingInfo.bottom -= offset.y
    Object.keys(targetBoundingInfo).forEach(x => {
        let item = targetBoundingInfo[x]
        if (item < 0){
            console.log('reverting from negative', 'before', item)
            item = item * -1
        }
    })
    return targetBoundingInfo
}
 
function findAvailablePositions (e, data, targetBoundingInfo){
    let availablePositions = []
    if (checkIfPositionOutsideScreen(targetBoundingInfo.x, targetBoundingInfo.y, data) === undefined){
        availablePositions.push('under')
    }
    let rectHeight = data.height
    if (rectHeight === undefined){
        rectHeight = window.innerHeight / 5.9
    }
    if (checkIfPositionOutsideScreen(targetBoundingInfo.x, targetBoundingInfo.y - rectHeight, data) === undefined){
        availablePositions.push('above')
    }
    let rectWidth = data.width
    if (rectWidth === undefined){
        rectWidth = window.innerWidth / 8
    }
    if (checkIfPositionOutsideScreen(targetBoundingInfo.x - data.width, targetBoundingInfo.y, data) === undefined){
        availablePositions.push('left')
    }
    if (checkIfPositionOutsideScreen(targetBoundingInfo.right, targetBoundingInfo.y, data) === undefined){
        availablePositions.push('right')
    }
    return availablePositions
}
 
function pickBestPosition (targetBoundingInfo, data, availablePositions){
    if (availablePositions.length === 0){
        positionRectStackedWithTarget(targetBoundingInfo)
        return true
    }
    else if (availablePositions.length == 1){
        findAndUsePosition(availablePositions, targetBoundingInfo, data)
        return true
    }
    else if (positionRectOppositeOfUserPickedPosition(targetBoundingInfo, data, availablePositions) === true){
        return true
    }
    else{
        findAndUsePosition(availablePositions, targetBoundingInfo, data)
    }
    return true
}
 
function findAndUsePosition (availablePositions, targetBoundingInfo, data){
    if (availablePositions[0] === 'left'){
        positionRectLeftTarget(targetBoundingInfo, data)
    }
    else if (availablePositions[0] === 'right'){
        positionRectRightTarget(targetBoundingInfo, data)
    }
    else if (availablePositions[0] === 'above'){
        positionRectAboveTarget(targetBoundingInfo, data)
    }
    else if (availablePositions[0] === 'under'){
        positionRectUnderTarget(targetBoundingInfo, data)
    }
    return true
}
 
function positionRectOppositeOfUserPickedPosition(targetBoundingInfo, data, availablePositions){
    let userPickedPosition = data.position
    if (userPickedPosition === 'right' && availablePositions.indexOf('left') !== -1){
        positionRectLeftTarget(targetBoundingInfo, data)
        return true
    }
    else if (userPickedPosition === 'left' && availablePositions.indexOf('right') !== -1){
        positionRectRightTarget(targetBoundingInfo, data)
        return true
    }
    else if (userPickedPosition === 'above' && availablePositions.indexOf('above') !== -1){
        positionRectAboveTarget(targetBoundingInfo, data)
        return true
    }
    else if (userPickedPosition === 'under' && availablePositions.indexOf('under') !== undefined){
        positionRectUnderTarget(targetBoundingInfo, data)
        return true
    }
    return false
}
 
function positionRectUnderTarget (targetBoundingInfo, data, from){
    console.log('positioning under')
    popUpRect.style.left = targetBoundingInfo.x + 'px'
    popUpRect.style.top = targetBoundingInfo.bottom + 'px'
    popUpRect.style.opacity = '1'
    return true
}
 
function positionRectStackedWithTarget (targetBoundingInfo){
    popUpRect.style.left = targetBoundingInfo.x +'px'
    popUpRect.style.top = targetBoundingInfo.y + 'px'
    return true
}
 
function positionRectAboveTarget (targetBoundingInfo, data, from){
    let rectHeight = data.height
    if (rectHeight === undefined){
        rectHeight = window.innerHeight / 5.9
    }
    console.log('positioning above')
    popUpRect.style.left = targetBoundingInfo.x +'px'
    popUpRect.style.top = targetBoundingInfo.y - rectHeight + 'px'
    return true
}
 
function positionRectLeftTarget (targetBoundingInfo, data, from){
    let rectWidth = data.width
    if (rectWidth === undefined){
        rectWidth = window.innerWidth / 8
    }
    console.log('positining left')
    popUpRect.style.left = targetBoundingInfo.x - rectWidth + 'px'
    popUpRect.style.top = targetBoundingInfo.y + 'px'
    return true
}
 
function positionRectRightTarget (targetBoundingInfo, data, from){
    console.log('positioning right')
    popUpRect.style.left = targetBoundingInfo.right + 'px'
    popUpRect.style.top = targetBoundingInfo.y + 'px'
}
 
function checkIfPositionOutsideScreen (startX, startY, data){
    if (startX < 0 || startY < 0){
        return false
    }
    let rectWidth = data.width
    if (rectWidth === undefined){
        rectWidth = window.innerWidth / 8
    }
    if (startX + rectWidth > window.innerWidth){
        return false
    }
    let rectHeight = data.height
    if (data.height === undefined){
        data.height = window.innerHeight / 5.9
    }
    if (startY + data.height > window.innerHeight){
        return false
    }
}
 
function scaleRect (data){
    if (data.width === undefined){
        popUpRect.style.width = window.innerWidth / 8 + 'px'
    }
    else {
        popUpRect.style.width = data.width + 'px'
    }
    if (data.height === undefined){
        popUpRect.style.height = window.innerHeight/5.9 + 'px'
    }
    else {
        popUpRect.style.height = data.height + 'px'
    }
}
 
function styleRect (e, data, parentData){
    let parentStyling = parentData.rectStyle
    if (parentStyling === undefined) {
        popUpRect.style.backgroundColor = 'white'
        return true
    }
    if (data.backgroundColor !== undefined){
        popUpRect.style.backgroundColor = data.backgroundColor
    }
    else if (parentStyling.backgroundColor !== undefined){
        popUpRect.style.backgroundColor = parentStyling.backgroundColor
    }
    else{
        popUpRect.style.backgroundColor = 'white'
    }
    /*
    if (data.opacity !== undefined){
        popUpRect.style.opacity = data.opacity
    }
    else if (parentStyling.opacity !== undefined){
        popUpRect.style.opacity = parentStyling.opacity
    }
    else {
        popUpRect.style.opacity = '1'
    }
    */
    popUpRect.style.opacity = '1'
    if (data.borderColor !== undefined){
        popUpRect.style.borderColor = data.borderColor
    }
    else if (parentStyling.borderColor !== undefined){
        popUpRect.style.borderColor = parentStyling.borderColor
    }
    else {
        popUpRect.style.borderColor = '1'
    }
    if (data.borderWidth !== undefined){
        popUpRect.style.borderWidth = data.borderWidth
    }
    else if (parentStyling.borderWidth !== undefined){
        popUpRect.style.borderWidth = parentStyling.borderWidth
    }
    else {
        popUpRect.style.borderWidth = '1'
    }
    if (data.borderStyle !== undefined){
        popUpRect.style.borderStyle = data.borderStyle
    }
    else if (parentStyling.borderStyle !== undefined){
        popUpRect.style.borderStyle = parentStyling.borderStyle
    }
    else {
        popUpRect.style.borderStyle = '1'
    }
}
 
//--------------------------------------------------------------------------
//Hiding the popUpRect:
 
function checkIfHideRect (e){
    try{
        if (e.target != popUpRect && popUpRect.style.opacity == '1' && e.target != selectedPart && e.target.parentElement != popUpRect && e.target !== selectedPart.target && selectedPart.target !== currentMouseOver.target){
            //&& e.target.tagName !== 'AREA'
            hideRect(e)
        }}
    catch(e){
        //console.log('someting went wrong',e)
    }
}
 
function hideRect (e){
        console.log('hiding rect')
        //document.getElementById(focusedTag).style.border = 'none'
        //document.getElementById(focusedTag).style.backgroundColor = ''
        popUpRect.style.height = '0px'
        setTimeout(()=>{
            popUpRect.style.opacity = '0'
            popUpRect.style.height = '0px'
            selectedPart = undefined
            //checkIfShowRect(e)
        },200)
        //closePopUpRectAnimation()
        /*
        for (let i = 0; i < document.getElementsByClassName('labels').length; i++) {
            document.getElementsByClassName('labels')[i].style.zIndex='3'
        }
        */
        //document.getElementById('moreInfo').innerHTML=''
        //popUpRect=undefined
}
 
//--------------------------------------------------------------------------
//Generate image map from popUpElements data:
 
function generateImageMap (name, appendLocation){
    let currentImageMap = popUpElements[name]
    let image = document.createElement('img')
    styleMappedImage(image, currentImageMap)
    image.id = name + 'Image'
    let imageMap = document.createElement('map')
    imageMap.name = name + 'Map'
    imageMap.id = name
    Object.keys(currentImageMap).forEach(x => {
        if (x.includes('Style') === false && x !== 'mappedImage'){
            let area = document.createElement('area')
            let currentArea = currentImageMap[x]
            area.shape = currentArea.shape
            area.coords = currentArea.coords
            area.id = x
            imageMap.appendChild(area)
        }
    })
    if (document.getElementById('dokuwiki__content') !== null && appendLocation !== undefined){
        console.log('appeneded wiki mode')
        appendLocation.appendChild(image)
        appendLocation.appendChild(imageMap)
        currentImageMap.offset = new Point(document.getElementById('dokuwiki__content').getBoundingClientRect().x, document.getElementById('dokuwiki__content').getBoundingClientRect().y)
    }
    else if (appendLocation === undefined || appendLocation === 'auto'){
        document.body.appendChild(image)
        document.body.appendChild(imageMap)
        currentImageMap.offset = calculateOffset(document.body)
    }
    else {
        appendLocation.appendChild(image)
        appendLocation.appendChild(imageMap)
        currentImageMap.offset =
        currentImageMap.offset = new Point(appendLocation.x, appendLocation.y)
    }
    popUpElements[name].mappedImage = image
    image.useMap = '#' + name + 'Map'
    if (currentImageMap.cursorStyle !== undefined){
        enableCustomCursorSupport(name, currentImageMap)
    }
    moveAllowSoundToFront()
}
 
function moveAllowSoundToFront (){
    let allowSound = document.getElementById('allowSound')
    allowSound.style.zIndex = '3'
    allowSound.style.top = document.body.getBoundingClientRect().y + 'px'
}
 
function enableCustomCursorSupport (name, currentImageMap){
    let image = name + 'Image'
    document.getElementById(image).style.cursor = 'url(' + currentImageMap.cursorStyle.idle + '), auto'
    document.getElementById(name).addEventListener('pointerover', function (e){
        console.log('changing cursor')
        changeCursor(e, name, currentImageMap)
    })
    document.getElementById(name).addEventListener('pointerenter', function (e){
        console.log('changing cursor')
        changeCursor(e, name, currentImageMap)
    })
    document.getElementById(name).addEventListener('pointerleave', function (e){
        if (e.target !== popUpRect && e.target.id !== name && e.target.parentElement.id !== name){
            console.log('default cursor')
            currentMouseOver.target.style.cursor = 'auto'
            popUpRect.style.cursor = 'auto'
        }
    })
}
/* https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/ */
 
 
function changeCursor(e, name, currentImageMap){
    if (e.target.parentElement.id === name && currentImageMap[e.target.id].cursor !== undefined && currentImageMap[e.target.id].cursor !== false){
        console.log('cursor url 1', 'url(' + currentImageMap[e.target.id].cursor + '), auto')
        popUpRect.style.cursor = 'url(' + currentImageMap[e.target.id].cursor + '), auto'
        setTimeout(() => {
            currentMouseOver.target.style.cursor = 'url(' + currentImageMap[e.target.id].cursor + '), auto'
        }, 10)
    }
    else if (e.target.parentElement.id === name && currentImageMap[e.target.id].cursor === undefined){
        console.log('cursor url 2', 'url(' + currentImageMap.cursorStyle.hover + '), auto')
        popUpRect.style.cursor = 'url(' + currentImageMap.cursorStyle.hover + '), auto'
        setTimeout(() => {
            currentMouseOver.target.style.cursor = 'url(' + currentImageMap.cursorStyle.hover + '), auto'
        }, 10)
    }
    else {
        console.log('cursor url 3', 'url(' + currentImageMap.cursorStyle.idle + '), auto')
        let image = name + 'Image'
        document.getElementById(image).style.cursor = 'url(' + currentImageMap.cursorStyle.idle + '), auto'
    }
    return true
}
 
function styleMappedImage (image, currentImageMap){
    let imageStyle = currentImageMap.imageStyle
    if (imageStyle === undefined){
        image.src = currentImageMap.mappedImage
        return false
    }
    if (imageStyle.opacity !== undefined){
        image.style.opacity = imageStyle.opacity
    }
    if (imageStyle.borderStyle !== undefined){
        image.style.borderStyle = imageStyle.borderStyle
    }
    if (imageStyle.borderColor !== undefined){
        image.style.borderColor = imageStyle.borderColor
    }
    if (typeof imageStyle.width === 'number'){
        image.style.width = imageStyle.width + 'px'
    }
    else {
        image.style.width = 'auto'
    }
    if (typeof imageStyle.height === 'number'){
        image.style.height = imageStyle.height + 'px'
    }
    else {
        image.style.height = 'auto'
    }
    if (typeof imageStyle.left === 'number'){
        console.log('left image style', imageStyle.left)
        enableCustomImagePositioning (image)
        image.style.left = imageStyle.left + 'px'
    }
    else if (typeof imageStyle.left === 'string'){
        enableCustomImagePositioning (image)
        image.style.left = imageStyle.left
    }
    if (typeof imageStyle.right === 'number'){
        enableCustomImagePositioning (image)
        image.style.right = imageStyle.right + 'px'
    }
    else if (typeof imageStyle.right === 'string'){
        enableCustomImagePositioning (image)
        image.style.right = imageStyle.right
    }
    if (typeof imageStyle.top === 'number'){
        enableCustomImagePositioning (image)
        image.style.top = imageStyle.top + 'px'
    }
    else if (typeof imageStyle.top === 'string'){
        enableCustomImagePositioning (image)
        image.style.top = imageStyle.top
    }
    if (typeof imageStyle.bottom === 'number'){
        enableCustomImagePositioning (image)
        image.style.bottom = imageStyle.bottom + 'px'
    }
    else if (typeof imageStyle.bottom === 'string'){
        enableCustomImagePositioning (image)
        image.style.bottom = imageStyle.bottom
    }
    image.src = currentImageMap.mappedImage
}
 
function enableCustomImagePositioning (image){
        image.style.position = 'absolute'
        image.style.display = 'block'
}
 
function calculateOffset (appendLocation){
    let offsetX = 0
    let offsetY = 0
    let currentElement = appendLocation
    while (currentElement.parentElement !== null){
        let currentElementPos = currentElement.getBoundingClientRect()
        offsetX += currentElementPos.x
        offsetY += currentElementPos.y
        currentElement = currentElement.parentElement
    }
    return new Point(offsetX, offsetY)
}

let locationToAppendTo = document.getElementById("section");

popUpElements.mart = {
    //example: {
    //coords: *the coords here*,
    //label: "this is an example,
    //shape: *poly, circle, or rect*
    //}
    restaurant: {
        position: "right",
        coords: "210,5,621,1,624,60,514,169,205,164",
        label: "Restaurant",
        shape: "poly",
        info: "This is a restaurant",
        height: 65
        //cursor: 'steve-angry-mouse.png'
    },
    imported: {
        position: "right",
        coords: "7,65,202,66,209,167,179,170,177,450,9,453",
        label: "Imported",
        shape: "poly",
        info: "This is the imported section",
        height: 65
        //cursor: 'steve-angry-mouse.png'
    },
    counters: {
        position: "right",
        coords: "13,574,231,576,231,732,9,741",
        label: "counters",
        shape: "poly",
        info: "This is the counters",
        height: 65
        //cursor: 'steve-angry-mouse.png'
    },
    iceCreamR: {
        position: "right",
        coords: "178,777,226,772,231,891,175,895",
        shape: "poly",
        image: "https://renickbell.net/middleschool/lib/exe/fetch.php?cache=&media=students:yiler-welcome-to-the-machine.png",
        width: 932 * 0.5,
        height: 1121 * 0.5,
        imageWidth: 932 * 0.5,
        imageHeight: 1121 * 0.5
        //cursor: 'steve-angry-mouse.png'
    },
    iceCreamL: {
        position: "right",
        coords: "13,781,57,779,72,888,17,896",
        shape: "poly",
        image: "https://renickbell.net/middleschool/lib/exe/fetch.php?cache=&media=students:yiler-welcome-to-the-machine.png",
        width: 932 * 0.5,
        height: 1121 * 0.5,
        imageWidth: 932 * 0.5,
        imageHeight: 1121 * 0.5
        //cursor: 'steve-angry-mouse.png'
    },
    meat: {
        position: "right",
        coords: "362,225,498,361,497,413,455,413,318,269",
        label: "Meat and seafood",
        shape: "poly",
        info: "This is the meat and seafood section",
        backgroundColor: "#e87b9c",
        height: 110
        //cursor: 'steve-angry-mouse.png'
    },
    frozen: {
        position: "right",
        coords: "665,122,517,271,468,226,618,75,625,117",
        label: "Frozen food",
        shape: "poly",
        info: "This is the frozen food section",
        backgroundColor: "#96e6fa",
        height: 90
        //cursor: 'steve-angry-mouse.png'
    },
    snacks: {
        position: "right",
        coords: "501,344,788,351,794,414,502,409",
        label: "Snacks",
        shape: "poly",
        info: "This is the snacks section",
        backgroundColor: "#f09ec7",
        height: 68
        //cursor: 'steve-angry-mouse.png'
    },
    vegetable: {
        position: "right",
        coords: "650.9999847412109,139,897.9999847412109,137,971.9999847412109,64,624.9999847412109,62,621.9999847412109,102,666.9999847412109,116",
        label: "Vegetable and fruit",
        shape: "poly",
        info: "This is the vegetable and fruit section",
        backgroundColor: "#8ced97",
        height: 110
        //cursor: 'steve-angry-mouse.png'
    },
    hosuehold: {
        position: "right",
        coords: "816.9999847412109,412,816.9999847412109,342,851.9999847412109,340,716.9999847412109,195,671.9999847412109,241,795.9999847412109,363,795.9999847412109,411",
        label: "Household",
        shape: "poly",
        info: "This is the household section section",
        backgroundColor: "#faf48c",
        height: 90
        //cursor: 'steve-angry-mouse.png'
    },
    dairy: {
        position: "right",
        coords: "984,338,993,406,826,414,820,345",
        label: "Dairy",
        shape: "poly",
        info: "This is the dairy section",
        backgroundColor: "#f0e9c9",
        height: 68
        //cursor: 'steve-angry-mouse.png'
    },
    dryFood: {
        position: "right",
        coords: "1031.999984741211,110,890.9999847412109,256,841.9999847412109,201,986.9999847412109,64",
        label: "Dry food",
        shape: "poly",
        info: "This is the dry food section",
        backgroundColor: "#f2df99",
        height: 68
        //cursor: 'steve-angry-mouse.png'
    },
    bakery: {
        position: "right",
        coords: "988,63,1144,231,1152,60",
        label: "Bakery",
        shape: "poly",
        info: "This is the bakery section",
        backgroundColor: "#c29057",
        height: 68
        //cursor: 'steve-angry-mouse.png'
    },
    health: {
        position: "right",
        coords: "1086,253,1150,408",
        label: "Health",
        shape: "rect",
        info: "This is the health section",
        backgroundColor: "#ff9191",
        height: 68
        //cursor: 'steve-angry-mouse.png'
    },
    electronics: {
        position: "right",
        coords: "1084,418,1146,632",
        label: "Electronics",
        shape: "rect",
        info: "This is the electronics section",
        backgroundColor: '#95c9ed',
        height: 90
        //cursor: 'steve-angry-mouse.png'
    },
    pets: {
        position: "right",
        coords: "927,414,990,637",
        backgroundColor: "#dba958",
        label: "Pets",
        shape: "rect",
        info: "This is the pets section",
        height: 68
        //cursor: 'steve-angry-mouse.png'
    },
    entrance: {
        position: "right",
        coords: "993,687,1089,719",
        shape: "rect",
        image: "https://renickbell.net/middleschool/lib/exe/fetch.php?cache=&media=students:yiler-super-market-logo.png",
        width: 730,
        height: 317,
        imageWidth: 730,
        imageHeight: 317
    },
    arrow1: {
        position: "right",
        coords: "1046,644,1043,609,1062,607,1043,576,1017,603,1036,608,1036,646",
        shape: "poly",
        image: "https://renickbell.net/middleschool/lib/exe/fetch.php?cache=&media=students:yiler-visit-more-save-more.png",
        width: 932 * 0.5,
        height: 1121 * 0.5,
        imageWidth: 932 * 0.5,
        imageHeight: 1121 * 0.5
    },
    arrow2: {
        coords: "1019,266,1056,332",
        shape: "rect",
        audio: "https://renickbell.net/middleschool/lib/exe/fetch.php?media=students:yiler-supermarket-announcement1.mp3",
        width: 0,
        height: 0
    },
    arrow3: {
        position: "right",
        coords: "981,218,1017,205,1005,196,1032,166,1024,158,1002,182,989,173",
        shape: "poly",
        image: "https://renickbell.net/middleschool/lib/exe/fetch.php?cache=&media=students:yiler-free-ice-cream.png",
        width: 932 * 0.5,
        height: 1121 * 0.5,
        imageWidth: 932 * 0.5,
        imageHeight: 1121 * 0.5
    },
    arrow4: {
        position: "right",
        coords: "846,291,855,280,882,308,891,299,862,274,872,263,837,251",
        shape: "poly",
        audio: "https://renickbell.net/middleschool/lib/exe/fetch.php?media=students:yiler-supermarket-announcement2.mp3",
        width: 0,
        height: 0
    },
    arrow5: {
        position: "right",
        coords: "629,202,667,193,656,181,684,154,674,146,647,175,641,164",
        shape: "poly",
        image: "https://renickbell.net/middleschool/lib/exe/fetch.php?cache=&media=students:yiler-visit-more-save-more.png",
        width: 932 * 0.5,
        height: 1121 * 0.5,
        imageWidth: 932 * 0.5,
        imageHeight: 1121 * 0.5
    },
    arrow6: {
        coords: "602,230,658,281",
        shape: "rect",
        audio: "https://renickbell.net/middleschool/lib/exe/fetch.php?media=students:yiler-supermarket-announcement1.mp3",
        width: 0,
        height: 0
    },
    arrow7: {
        position: "right",
        coords: "580,295,654,330",
        shape: "rect",
        image: "https://renickbell.net/middleschool/lib/exe/fetch.php?cache=&media=students:yiler-free-ice-cream.png",
        width: 932 * 0.5,
        height: 1121 * 0.5,
        imageWidth: 932 * 0.5,
        imageHeight: 1121 * 0.5
    },
    arrow8: {
        position: "right",
        coords: "480,280,534,331",
        shape: "rect",
        audio: "https://renickbell.net/middleschool/lib/exe/fetch.php?media=students:yiler-supermarket-announcement2.mp3",
        width: 0,
        height: 0
    },
    arrow9: {
        position: "right",
        coords: "293,177,365,211",
        shape: "rect",
        image: "https://renickbell.net/middleschool/lib/exe/fetch.php?cache=&media=students:yiler-free-ice-cream.png",
        width: 932 * 0.5,
        height: 1121 * 0.5,
        imageWidth: 932 * 0.5,
        imageHeight: 1121 * 0.5
        },
    staff: {
        position: "right",
        coords: "948,646,974,684",
        shape: "rect",
        label: "Staff",
        info: "This is Jeff, his job is standing here the whole day.",
        height: 110
    },
    star: {
        position: "right",
        coords: "82,484,150,549",
        shape: "rect",
        info: "Your journey in the store ends here, congratuations! *clapping sound*",
        height: 90,
        width: 270
    },
    secretBox: {
        coords: "990,867,1072,922",
        shape: "rect",
        label: "THE SECRET BOX",
        height: 28
    },
    rectStyle: {
        opacity: 1,
        backgroundColor: 'white',
        borderColor: 'black',
        borderWidth: 4,
        width: window.innerWidth / 8,
        height: window.innerHeight / 5.9,
    },
    mappedImage: "https://renickbell.net/middleschool/lib/exe/fetch.php?cache=&media=students:yiler-supermarket-map.png",

};
</script>
</html>