zoey-lin-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.
======Adjusted Supermarket Design======

Made by: [[zoey-lin|Zeoy]]

<html>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <style>
    html{
    background-color: white;
}

#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;
    min-height: 5%;
}

area:hover{
    cursor: pointer;
}

#allowSound {
    padding: 2px;
    background-color: black;
    color: yellow;
    position: absolute;
    text-align: right;
    float: right;
    left 100%;
    position: fixed;
    transition-property: height, opacity, top;
    transition-duration: 0.25s;
    font-size: 80px;
}

#allowSound:hover {
    cursor: pointer;
    opacity: 0.8
}

.triangle-up {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid white;
    transition-property: opacity;
    transition-duration: 0.5s;
    opacity: 0.1;
}

.arrow {
    position: absolute;
    left: 50px;
    width: 50px;
    height: 50px;
  border: solid white;
  border-width: 0 6px 6px 0;
  display: inline-block;
  padding: 3px;
    transition-property: opacity;
    transition-duration: 0.5s;
    opacity: 0.1;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

#rect{
    background-color: silver;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 100px;
    transition-property: left;
    transition-duration: 3s;
}

.trolley{
  height: 2px;
  width: 2px;
  background-color: #555;
  border-radius: 50%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 25px solid #555;
  position: absolute;
 /* transition-property: left, top, transform;*/
  transition-property: left, top;
  transition-duration: 3s;
}
</style>
    <body>
        <div id = 'allowSound'> Click to enable sound for full supermarket experience </div>
        <div id='popUpRect'></div>
        <script>//--------------------------------------------------------------------------
        //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 (){
            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)}
                            }
                            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
            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],
                bottom: parentInfo.y + mapPos[3],
            }
            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)
        }
</script>
        <script>//-----------------------------------------------------------------
        //Add to popUpElements:
        
        let locationToAppendTo = document.getElementById('adjusted_supermarket_design')
        
        popUpElements.desk = {
        
            strawberryModel1: {
                position: 'below',
                coords: '1086.5,678.5625,1144.25,741.3125',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-strawberry.jpg',
                imageWidth:160,
                imageHeight: 160,
                width:170,
                height:170,
                backgroundColor: '#d7eef4ff',
            },
            strawberryModel2: {
                position: 'below',
                coords: '695.671875,453.703125,755.03125,518.1875',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-strawberry.jpg',
                imageWidth:160,
                imageHeight: 160,
                width:170,
                height:170,
                backgroundColor: '#d7eef4ff',
            },
            strawberryModel3: {
                position: 'below',
                coords: '1083.25,301.3125,1145.75,367.0625',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-strawberry.jpg',
                imageWidth:160,
                imageHeight: 160,
                width:170,
                height:170,
                backgroundColor: '#d7eef4ff',
            },
            strawberryModel4: {
                position: 'below',
                coords: '528.4375,206.09375,588.25,272.296875',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-strawberry.jpg',
                imageWidth:160,
                imageHeight: 160,
                width:170,
                height:170,
                backgroundColor: '#d7eef4ff',
            },
            strawberryModel5: {
                position: 'below',
                coords: '360.625,256.328125,421.609375,330.671875',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-strawberry.jpg',
                imageWidth:160,
                imageHeight: 160,
                width:170,
                height:170,
                backgroundColor: '#d7eef4ff',
            },
            strawberryModel6: {
                position: 'below',
                coords: '5.25,100.3125,68,172.8125',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-strawberry.jpg',
                imageWidth:160,
                imageHeight: 160,
                width:170,
                height:170,
                backgroundColor: '#d7eef4ff',
            },
            strawberryModel7: {
                position: 'below',
                coords: '58.140625,328.203125,119.765625,397.953125',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-strawberry.jpg',
                imageWidth:160,
                imageHeight: 160,
                width:170,
                height:170,
                backgroundColor: '#d7eef4ff',
            },
            strawberryModel8: {
                position: 'below',
                coords: '360.328125,360.0625,423.953125,435.125',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-strawberry.jpg',
                imageWidth:160,
                imageHeight: 160,
                width:170,
                height:170,
                backgroundColor: '#d7eef4ff',
            },
            strawberryModel9: {
                position: 'below',
                coords: '85.171875,665.296875,141.21875,725.703125',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-strawberry.jpg',
                imageWidth:160,
                imageHeight: 160,
                width:170,
                height:170,
                backgroundColor: '#d7eef4ff',
            },
            strawberryModel10: {
                position: 'below',
                coords: '692.953125,740.859375,752.578125,804.34375',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-strawberry.jpg',
                imageWidth:160,
                imageHeight: 160,
                width:170,
                height:170,
                backgroundColor: '#d7eef4ff',
            },
            strawberryPoster: {
                coords: '450.6666717529297,754.933349609375,340.80003356933594,441.3333435058594',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-_visual_advertisements2.png',
                imageWidth:504,
                imageHeight: 712.8,
                width:504,
                height:720.8,
                backgroundColor: 'white',
                position: 'right',
                audio : 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-audio_announcements-2.mp3',
            },
            friidayPoster: {
                position: 'above',
                coords: '772,759.25,1171,828.25',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-_visual_advertisements1-1.png',
                imageWidth:712.8,
                imageHeight: 504,
                width:712.8,
                height:512,
                backgroundColor: 'white',
                audio : 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-audio_announcements-1.mp3',
            },
            friidayProduct1: {
                position: 'below',
                coords: '1011.359375,612.078125,1063.453125,653.625',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-friidayposter-1.png',
                imageWidth:500,
                imageHeight: 500,
                width:510,
                height:510,
                backgroundColor: '#d7eef4ff',
            },
            friidayProduct2: {
                position: 'below',
                coords: '784.5000457763672,499.61669921875,833.6000823974609,446.2333679199219',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-friidayposter-2.png',
                imageWidth:500,
                imageHeight: 500,
                width:510,
                height:510,
                backgroundColor: '#d7eef4ff',
            },
            friidayProduct3: {
                position: 'below',
                coords: '779,245.5625,828,294.5625',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-friidayposter-3.png',
                imageWidth:500,
                imageHeight: 500,
                width:510,
                height:510,
                backgroundColor: '#d7eef4ff',
            },
            friidayProduct4: {
                position: 'below',
                coords: '1018.28125,92.03125,1067.828125,140.40625',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-friidayposter-4.png',
                imageWidth:500,
                imageHeight: 500,
                width:510,
                height:510,
                backgroundColor: '#d7eef4ff',
            },
            friidayProduct5: {
                position: 'below',
                coords: '444,295.5625,491.5,341.0625',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-friidayposter-5.png',
                imageWidth:500,
                imageHeight: 500,
                width:510,
                height:510,
                backgroundColor: '#d7eef4ff',
            },
            friidayProduct6: {
                position: 'left',
                coords: '90,92.0625,137.25,140.8125',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-friidayposter-6.png',
                imageWidth:500,
                imageHeight: 500,
                width:510,
                height:510,
                backgroundColor: '#d7eef4ff',
            },
            friidayProduct7: {
                position: 'above',
                coords: '133.734375,461,94.78125,418.3125',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-friidayposter-7.png',
                imageWidth:500,
                imageHeight: 500,
                width:510,
                height:510,
                backgroundColor: '#d7eef4ff',
            },
            friidayProduct8: {
                position: 'above',
                coords: '517.7667083740234,819.5833740234375,467.90000915527344,770.7333984375',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-friidayposter-8.png',
                imageWidth:500,
                imageHeight:500,
                width:510,
                height:510,
                backgroundColor: '#d7eef4ff',
            },
            dairyPoster: {
                position: 'below',
                coords: '687.109375,443.203125,435.0625,343.34375',
                shape: 'rect',
                image: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-supermarket-signage-1.png',
                imageWidth:594,
                imageHeight: 420,
                width:594,
                height:428,
                backgroundColor: '#d7eef4ff',
            },
            mappedImage: 'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=zoey-genera-layout-map.png',
            //mappedImage: 'w3-schools-workplace.jpg',
            rectStyle: {
                opacity: 1,
                backgroundColor: 'pink',
                borderColor: 'black',
                borderWidth: 4,
                width: window.innerWidth / 8,
                height: window.innerHeight / 5.9,
            },
            imageStyle: {
                opacity: 1,
                borderColor: 'black',
                borderStyle: 'solid',
                borderWidth: 2,
        
                left: 200,
            },
        
        }
</script>
    </body>
</html>

































































































.