old-man-info:steve-old-man-ingram-infographic [Designing Service]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Old Man Ingram =====
<html>
<div id='infographic'>
<script>
function removeAllDokuWikiStuff(){
    let bodyChildren = document.documentElement.childNodes
    for (let i = 0; i < bodyChildren.length; i++) {
        if (bodyChildren[i].id !== 'compareResults'){
            bodyChildren[i].remove()
        }
    }
}
//removeAllDokuWikiStuff()
</script>
    <title> Old Man Ingram </title>
    <div id='notification'> </div>
    <header id = 'title'> <strong> Old Man Ingram</strong> </header>
<style>
html {
    background-color: hsl(0, 0%, 95%);
    width: 90%;
    height: 70%;
}

#title{
    left: 1%;
    position: relative;
}

header {
    color: #2196f3;
    background-color: hsl(0, 0%, 95%);
    font-size: 33px;
}

body {
    background-color: hsl(0, 0%, 95%);
    z-index: -1;
    padding: none;
    height: 7%;
}

#settings {
    position: absolute;
    top: 5px;
    background-color: white;
    width: 15%;
    text-align: center;
    height: 25%;
    border: 1px solid black;
    border-left: 9px solid darkgrey;
    /*slategrey*/
    transition-property: right, width;
    transition-duration: 0.8s;
    opacity: 1;
    display: block;
    right: 0px;
    aspect-ratio: 1/2;
    overflow: scroll;
      display: grid;
    grid-template-areas: 'settingsOpener settingsTab'

}
/* https://youtu.be/Qhaz36TZG5Y */

#settings:hover {
    border-left: 9px solid grey;
}

#settingsOpener {
    width: 15px;
    height: auto;
    top: 5px;
    left: 0px;
    z-index: 2;
/*    transform: scale(1);
    transform: translateY(-50%);
    */
    cursor: pointer;
    transition-property: left;
    transition-duration: 0.8s;
}

#settingsOpener:hover {
    opacity: 0.5;
}

#settingsTab {
    transition-property: display;
    transition-duration: 0.8s;
    overflow: scroll;
}

#external-internal {
    position: absolute;
    left: 5px;
    top: 70px;
}

#young-old {
    position: absolute;
    left: 5px;
    top: 25px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 2s;
}

#infographicContent {
    display: grid;
    /* orginal, 64% was 60% */
    grid-template-columns: 43% 64%;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 84%;
    grid-template-areas: "textArea contentArea";
    transition-duration: 5s;
    transition-property: opacity;
}

#contentArea {
    display: flex;
    justify-content: center;
    align-items: center;
}

#detailedView {
    display: none;
    grid-template-columns: 30% 30% 30%;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 30px;
    grid-template-areas: "bigImg smallImg lotsOfInfo";
    z-index: -20;
    align-items: center;
}

#bigImg{
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 1400px) {
    #infographicContent {
        grid-template-columns: 100%;
        grid-template-areas:
            "textArea"
            "contentArea";
    }
    #contentArea {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #settingsTab {
        transition-property: display;
        transition-duration: 0.8s;
        overflow: auto;
    }
    #detailedView {
        grid-template-columns: 100%;
        grid-template-areas: "bigImg"
        "smallImg"
        "lotsOfInfo";
    }
}


#smallImg{
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: 4px solid black;
}

/* helped by chatgpt. The max-width height and object-fit for smallImg and bigImg */
#lotsOfInfo{
}



#bigImg {
}

/*
#imgContent{
    position: absolute;
    width: 500px;
    height: auto;
    left: 10px;
    top: 0px;
    display: flex;
}
*/

#figure {
    width: 44%;
    height: auto;
}

/*
#rect {
    width: 100px;
    height: 200px;
    position: absolute;
    background-color: black;
    opacity: 0.5;
}
*/

#textArea {
    /*text-indent: 50px;*/
    left: 3%;
    position: relative;
    line-height: 1.5;
}

#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.5s;
}

#volumeControls {
    position: absolute;
    top: 50%;
    left: 40px;
    height: 60px;
    z-index: 20;
}

.audioControls {
    position: absolute;
    height: 20px;
    width: auto;
    left: 6px;
    top: 63%;
    z-index: 20;
}

#volumeControls:hover {
    cursor: pointer;
}

#volumeControls:focus {
    cursor: grabbing;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    font-size: 8px;
    font-weight: bold;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #2196f3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

#oldYoungText {
    padding-top: 10px;
    padding-left: 31px;
    text-indent: 3px;
    padding-top: 12px;
    float: left;
    align: left;
    font-size: 6px;
}

#inOutText {
    padding-top: 10px;
    padding-left: 31px;
    text-indent: 6px;
    padding-top: 8px;
    float: left;
    align: left;
    font-size: 6px;
}

#oldYoungToggle {
    left: 90px;
    text-indent: 0px;
    text-align: left;
}

#inOutToggle {
    left: 90px;
    text-indent: -20px;
    text-align: left;
    text-align-last: left;
}

#backText {
    position: absolute;
    top: 0px;
    left: 28px;
    white-space: nowrap;
    color: black;
    z-index: 30;
    cursor: pointer;
}

#backText:hover {
    color: grey;
}

#backLogo {
    position: absolute;
    width: 20px;
    height: auto;
    padding-right: 190px;
    cursor: pointer;
    top: 8%;
}

#backText {
    position: absolute;
    top: 8%;
    left: 28px;
    white-space: nowrap;
    color: black;
    z-index: 30;
    cursor: pointer;
}

#backText:hover {
    color: grey;
}

#backLogo2 {
    position: fixed;
    width: 20px;
    height: auto;
    cursor: pointer;
}

#backText2 {
    position: fixed;
    white-space: nowrap;
    color: black;
    z-index: 30;
    cursor: pointer;
}

#backText2:hover {
    color: grey;
}
/*--------------------------------------------------------------------------
Keyframes style starts here: */

@keyframes down {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        top: 100%;
    }
}

.down {
    animation-name: down;
    animation-duration: 0.2s;
}

@keyframes up {
    from {opacity:0; top:100%;}
    to {opacity:1;top:0%}
}

.up{
animation-name:up;
animation-duration: 0.5s;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeOut {
    animation-name: fadeOut;
    animation-duration: 2s;
}

/*--------------------------------------------------------------------------
Keyframes style ends here: */

#notification {
    display: none;
    position: fixed;
    text-wrap: wrap;
    color: white;
    background-color: black;
    border-color: grey;
    transition: top 1s;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 0.5%;
    padding-bottom: 0.5%;
    font-size: 160%;
  -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
    top: 1%;
    right: 0.5%;
    z-Index: 1;
}
/* https://stackoverflow.com/a/6900392/19515980 */

#notification:hover{
    cursor: pointer;
    opacity: 0.9;
}

#settingsTip{
    font-size: 900%;
    z-index: 2;
    left: 120%;
    transition-property: left;
    transition-duration: 0.8s;
    position: absolute;
}

</style>
    <audio id='oldSound'>
        <source id='changeSrc' src="https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=old-man-info:i-am-ingram-i-am-old.mp3" type="audio/mpeg">

    </audio>
    <body>
    <div id='popUpRect'></div>
    <div id = 'infographicContent'>
        <div id = 'textArea'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a commodo ipsum. Aliquam nec scelerisque nulla. In scelerisque at lacus quis elementum. Aenean eu dapibus urna, non malesuada augue. Duis pellentesque, lectus et maximus fermentum, purus lectus ultrices massa, nec commodo velit sem commodo lectus. Pellentesque sollicitudin vel massa et sollicitudin. Donec a risus in dui vehicula mollis. Suspendisse id nunc auctor nisl pulvinar pharetra. Praesent vel libero condimentum, efficitur eros eget, facilisis massa. Vestibulum vitae volutpat nisl. Nulla facilisi. Pellentesque interdum vitae sem vitae auctor. Nam sollicitudin semper erat, ut lacinia purus hendrerit in.
        </div>
        <div id = 'contentArea'>
            <img id = 'figure' usemap="#figureMap" src = 'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=old-man-info:young-lines.png'/>
            <map name = 'figureMap' id = 'figureMap'>
            </map>
            <map name = 'insideMap' id = 'insideMap'>
            </map>
</div>
<div id='settingsTip'> </div>
        <div id="settings" part="settings">
            <div id="settingsTab" part="settings">
                <strong id="settingsTitle" part="settings"> Settings </strong>
<div id='settings-part1'>
                    <p id='young-old' part='settings'><b><u>Young</u></b>/Old<p>
                    <label onchange='toggleOldYoung()' id='oldYoungToggle' class="switch" part='settings'>
                          <input type="checkbox" part='settings'>
                            <span id='oldYoungText'class="slider round" part='settings'> Young</span>
                    </label>
</div>
<div id='settings-part2'>
                    <p id='external-internal' part='settings'><b><u>External</u></b>/Internal</p>
                    <label onchange='toggleInOut()' id='inOutToggle'class="switch" part='settings'>
                          <input type="checkbox" part='settings'>

                            <span id='inOutText' class="slider round" part='settings'> External</span>
                    </label>
</div>
            </div>
        </div>
</div>
        <div id='detailedView'>
                <img id='backLogo' src='https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=old-man-info:old.png' alt='https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=old-man-info:grey-shadow.png' onmouseover='highlightHover(this.id)' onmouseout='highlightHover(this.id)'></img>
                <p id='backText' onmouseover='highlightHover("backLogo")' onmouseout='highlightHover("backLogo")' > Back To Main Page </p>
                <img id='bigImg'>
                <img id='smallImg'>
                <p id='lotsOfInfo'> </p>
                <img id='backLogo2' src='https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=old-man-info:old.png' alt='https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=old-man-info:grey-shadow.png' onmouseover='highlightHover(this.id)' onmouseout='highlightHover(this.id)' ></img>
                <p id='backText2' onmouseover='highlightHover("backLogo2")' onmouseout='highlightHover("backLogo2")' > Back To Main Page </p>
        </div>
        <script>
        let browserChromiumBased = false

try{
    if (chrome !== undefined){
        browserChromiumBased = true
    }
}
catch{}

        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)
  }
  roundOff (decimalPlaces, replace){
     if (replace == true){
         this.x = JSON.parse(this.x.toFixed(decimalPlaces))
         this.y = JSON.parse(this.y.toFixed(decimalPlaces))
     }
         return new Point(JSON.parse(this.x.toFixed(decimalPlaces)), JSON.parse(this.y.toFixed(decimalPlaces)))
  }
   inRange (otherPoint, range){
       // If in range will return true.
       if (this.x - range < otherPoint.x && this.x + range > otherPoint.x && this.y - range < otherPoint.y && this.y + range > otherPoint.y){
           return true
       }
       return false
     }
}

        settings.state = false

//Normal text to Title case:
function titleCase (inputString){
//The input string should be in proper English. To Make sure a word does not get capitalized put * infront of it.
inputString=inputString.split('')
inputString.forEach((x,i)=>{ 
if (inputString[i-1]==' ' || inputString[i-1]=='\n' ){
    inputString[i]=inputString[i].toUpperCase()}
})
inputString[0]=inputString[0].toUpperCase()
inputString=inputString.join('')
inputString=inputString.replaceAll('*','')
return inputString}

function roundOff (number,decimalPlaces){
let roundedNumber=number.toFixed(decimalPlaces);
return JSON.parse(roundedNumber)}

function randomRange(min, max,decimalPlaces) {
if (decimalPlaces==undefined){decimalPlaces=0}
  return roundOff(min + (max - min) * (Math.random()),decimalPlaces);
}

let startTime = performance.now() / 1000
function getTime () {
  return (performance.now() / 1000) - startTime
}

let csvArray = [{"part":"general-young","label":"--","young":"--","old-shorter":"---","old-longer":"--","intro":"This semester, one of the main topics of learning deals with the issue of elderly care and how social facilities and processes can be structured and designed in a way that is friendlier to elderly people's lives. In order to better understand this issue, the class researched some information about the functions of some different internal and external body parts that show particular change with age and may affect the ease of day-to-day life. Scroll over the different external and internal body parts of the \"young\" version to learn about how different body parts and organs normally function and what we use them for. <br> 本學期，學習的主要主題之一涉及老年人護理和照顧問題，以及如何以對老年人生活更友好的方式構建和設計社會設施和流程。為了更好地理解這個問題，班級研究了一些關於身體內部和外部不同部位的功能的一些信息，這些部位隨著年齡的增長而表現出特殊的變化，可能會影響日常生活的舒適度。 滾動瀏覽“年輕”版本的不同外部和內部身體部位，了解不同身體部位和器官的正常功能以及我們使用它們的方式。"},{"part":"general-old","label":"","young":"","old-shorter":"---","old-longer":"---","intro":"<br> Our bodies change and sometimes deteriorate with age and usage. While each individual's body is different, we all go through this process to some degree. If we are to better design a community to better serve the needs of all people, including the elderly, we first need to better understand these changes and also how they affect our daily lives. Hover and click over the different external and internal body parts to see how they might change with age. <br> 我們的身體會隨著年齡的增長和使用而發生變化，有時會功能下降或變得不方便。雖然每個人的身體都不同，但我們都會在某種程度上經歷這個過程。如果我們要更好地設計一個社區以更好地服務所有人，包括老年人的需求，我們首先需要更好地了解這些變化以及它們如何影響我們的日常生活。將鼠標懸停在不同的外部和內部身體部位上並單擊，以查看不同身體部分如何隨年齡而變化。"},{"part":"eyes","label":"Eyes 眼睛","young":"See things and watch things. 看東西","old-shorter":"Age-related macular degeneration is common.容易有老花眼、青光眼","old-longer":"Age-related macular degeneration is common. May develop presbyopia, glaucoma, dry eyes, cataracts and temporal arteritis. 容易有老花眼、青光眼、乾眼症、老年性黃斑變性、白內障和顳動脈炎。通常由於外部因素，發生神經損傷，導致聽力困難。","intro":""},{"part":"ears","label":"Ear 耳朵","young":"Provides hearing.提供聽覺。\n","old-shorter":"Usually due to external factors, nerve damage通常由於外部因素，發","old-longer":"Usually due to external factors, nerve damage occurs, causing hearing difficulties.通常由於外部因素，發生神經損傷，導致聽力困難。","intro":""},{"part":"mouth","label":"Mouth 嘴巴","young":"Eat and taste food or talk.吃和品嚐食物或說話","old-shorter":"Teeth can't bite, gums recede容易牙齒咬不動東西","old-longer":"Teeth can't bite, gums recede and bleed.容易牙齒咬不動東西，牙齦萎縮出血","intro":""},{"part":"arms","label":"Arm 手臂","young":"Provides balance while moving. Connected to hands, which hold and manipulate objects.在移動時提供平衡。 與手相連，幫助手握住並操控物體。","old-shorter":"Bones and joints get older, muscle loss, causing骨頭和關節退化，肌肉","old-longer":"Bones and joints get older, muscle loss, causing arm weakness. Because of sympathetic hyperexcitability, hands may shake.骨頭和關節退化，肌肉流失，導致手臂容易沒力氣，舉不起東西。 由於交感神經過度興奮，容易導致手抖。","intro":""},{"part":"legs","label":"Leg 腿","young":"Locomotion for movement of body.用於移動自身。\r\n","old-shorter":"Knees may lack calcium, muscles shrink. May膝蓋容易缺少鈣質，肌","old-longer":"Knees may lack calcium, muscles shrink. May cause difficulty in walking.膝蓋容易缺少鈣質，肌肉萎縮，可能導致走路困難。","intro":""},{"part":"back","label":"Back 背","young":"Provides the power to move the human torso, and it can bend significantly.提供了人體軀幹活動的力量，它可以進行大幅度的彎曲。","old-shorter":"Decreased elasticity in soft tissue between the椎骨之間的軟組織彈性","old-longer":"Decreased elasticity in soft tissue between the vertebrae. Because the ligaments press on the spinal nerves and narrow the foramen, it can easily lead to back pain or lower back pain.椎骨之間的軟組織彈性降低。因為韌帶壓迫到脊椎神經並導致椎孔狹窄，所以容易導致背部疼痛或腰部痠痛。","intro":""},{"part":"core","label":"Core 腹部","young":"Center of the body holds major internal organs and provides stability for the rest of the body. Important for movement between standing, sitting, and lying positions.身體的中心，容納主要的內部器官並為身體的其他部分提供穩定性。 對站立、坐姿和臥姿之間的運動很重要。","old-shorter":"Excessive gas can easily make the belly bigger.過多的氣體容易讓肚子","old-longer":"Excessive gas can easily make the belly bigger. Due to the loss of muscle and the increase of fat, it will become less powerful. 過多的氣體容易讓肚子會變大。由於肌肉流失，油脂變多，所以會變得比較沒有力氣。","intro":""},{"part":"lungs","label":"lungs 肺","young":"Transport oxygen into the blood and expel carbon dioxide from the blood to maintain the normal metabolism of the human body. 將氧氣運輸到血液中，並將體內二氧化碳從血液中排出，以維持人體正常的新陳代謝。\n","old-shorter":"The muscle and other tissues beside the氣道的肌肉和其他","old-longer":"The muscle and other tissues beside the airways may lose the power to keep the airways completely open.靠近氣道的肌肉和其他的組織可能失去了保持氣道完全打開的能力。","intro":""},{"part":"Liver","label":"Liver 肝","young":"Make and secrete bile to the gallbladder in order to expel emulsified fat from the intestines.製造及分泌膽汁至膽囊， 以便排出腸道乳化脂肪。","old-shorter":"Some deterioration of protein digestion ability蛋白質消化、分解能力","old-longer":"Some deterioration of protein digestion ability, may cause lack of energy and increase feelings of tiredness. People with liver problems may get yellow skin. 蛋白質消化、分解能力衰退，體力、氣力不足，疲勞等。有肝臟問題的人可能會出現黃色的皮膚。","intro":""},{"part":"Intestines","label":"Intestines 腸道","young":"Intestines have the functions of digestion, absorption, transportation and excretion.腸道有消化吸收、運輸和排泄的功能。","old-shorter":"Some slowing in the movement of contents 腸道裡的東西通過大腸","old-longer":"Some slowing in the movement of contents through the large intestine. More water absorbed can cause fecal matter to become harder. 腸道裡的東西通過大腸的速度變的比較慢。腸道吸收更多的水分會導致糞便變得更硬。","intro":""},{"part":"Heart","label":"Heart 心臟","young":"The main function of the heart is to send blood to the body.心臟的主要功能是給身體輸血。","old-shorter":"The valves inside the heart, which control 心臟內控制血流方向的","old-longer":"The valves inside the heart, which control the direction of blood flow, thicken and become stiffer. Ability to pump blood throughout the body may lower. 心臟內控制血流方向的瓣膜變厚變硬。心臟向全身泵血的能力可能會降低。","intro":""},{"part":"Stomach","label":"Stomach 肚子/腹部","young":"Digestion and absorption take place here.腹部是大部分消化道的所在，消化吸收都在這裡發生。","old-shorter":"The mucus membrane of the stomach thins 胃的黏膜隨著年齡的增","old-longer":"The mucus membrane of the stomach thins with age resulting in lower levels of mucus, hydrochloric acid, and digestive enzymes. The ability to withstand damage decreases, possibly causing gastritis. 胃的黏膜隨著年齡的增長而變薄，導致黏液、鹽酸和消化酶的水平降低。承受損傷的能力下降，可能引起胃炎。","intro":""},{"part":"Kidneys","label":"Kidneys 腎臟","young":"The kidneys filter toxins from the blood.腎臟過濾血中毒素。","old-shorter":"Amount of kidney tissue decreases and kidney 腎組織數量減少，腎功","old-longer":"Amount of kidney tissue decreases and kidney function diminishes. Blood vessels supplying the kidneys can become hardened. Blood is filtered more slowly. 腎組織數量減少，腎功能下降。供應腎臟的血管會變硬。血液過濾變慢。","intro":""},{"part":"Bladder","label":"Bladder 膀胱","young":"Store and excrete urine.儲存及排出尿液。","old-shorter":"The elastic tissue becomes stiffer and the彈性組織變得更硬，膀","old-longer":"The elastic tissue becomes stiffer and the bladder becomes less stretchy. Ability of the bladder to hold urine decreases. 彈性組織變得更硬，膀胱變得不那麼有彈性。膀胱容納尿液的能力下降。","intro":""},{"part":"Brain","label":"Brain 大腦","young":"The functions of the brain include memory, problem solving, language and spatial thinking, and emotion, and are also responsible for controlling bodily activities. 大腦的功能包括記憶、解決問題、語言和空間思維、及情感，也負責控制身體的活動。","old-shorter":"Memory deteriorates easily because brains記憶力容易退化。原因","old-longer":"Memory deteriorates easily because brains shrink in volume.記憶力容易退化。原因是因為隨著年齡的增長，大腦的體積縮小了。","intro":""}]

// let mode = 'linux'
let mode = 'doku'

let infographicData = {
    baseLink: 'https://renickbell.net/ed/2022service/lib/exe/fetch.php?media=old-man-info:',
    'main-page': [
        "all-shadow.svg",
        "all.svg",
        "bladder.svg",
        "brain.svg",
        "grey-shadow.png",
        "grey-shadow.svg",
        "heart.svg",
        "ingram-lines.svg",
        "ingram-shadow.svg",
        "inside-old.png",
        "inside-young.png",
        "intestines.svg",
        "kidneys.svg",
        "liver.svg",
        "lungs.svg",
        "old-lines.png",
        "stomach.svg",
        "young-lines.png"
    ],
    'body-parts': [
        "big-arms.png",
        "big-back.png",
        "big-core.png",
        "big-ears.png",
        "big-eye.png",
        "big-legs.png",
        "big-mouth.png",
        "small-arms.png",
        "small-bladder.png",
        "small-brain.png",
        "small-core.png",
        "small-ears.png",
        "small-eye.png",
        "small-heart.png",
        "small-intestines.png",
        "small-kidney.png",
        "small-legs.png",
        "small-liver.png",
        "small-lung.png",
        "small-mouth.png",
        "small-stomach.png"
    ],
    sounds: {
        "arms": [
            "heavy.wav",
            "i-cant-bend-my-arms.wav",
            "too-heavy.wav",
            "yoga.wav",
            "我可能需要多做點瑜珈讓我柔軟一點.wav",
            "我的肝跟石頭一樣硬.wav",
            "這對我來說太重了_我抬不起來.wav"
        ],
        "back": [
            "My-back-is-killing-me..wav",
            "back.wav",
            "heavy.wav",
            "too-heavy.wav",
            "yoga.wav",
            "我的背痛到要我的命.wav",
            "這對我來說太重了我抬不起來.wav"
        ],
        "bladder": [
            "I-can’t-hold-my-pee-any-longer.wav",
            "I_think_I_peed_my_pants.wav",
            "Peeing_is_so_painful.wav",
            "尿尿好痛苦.wav",
            "我好像尿在褲子上了.wav",
            "我已經憋不住了.wav"
        ],
        "brain": [
            "What_did_I_eat_for_lunch.wav",
            "Where_am_I.wav",
            "Where_are_my_glasses.wav",
            "Who_are_you.wav",
            "你是誰.wav",
            "我在哪.wav"
        ],
        "core": [
            "I_can’t_get_up_from_bed.wav",
            "I’m_turning_yellow.wav",
            "我沒辦法從床上起來.wav",
            "我的皮膚越來越黃了.wav"
        ],
        "ears": [
            "Speak_up_kid.wav",
            "i-cant-hear-myself.wav",
            "i-cant-hear-stuff.wav",
            "my-hearing-is-dying.wav",
            "speak-up.wav",
            "小子，講話大聲一點.wav"
        ],
        "eyes": [
            "blur-effect-in-eyes.mp3",
            "cant-see-properly.mp3",
            "glasses.wav",
            "small-wrds.wav",
            "我的眼鏡在哪裡.wav",
            "這些字太小了，我看不見.wav"
        ],
        "heart": [
            "My_heart_is_beating_like_the_first_time_I_met_my_wife.wav",
            "Stop_scaring_me,_my_weak_heart_can’t_take_it.wav",
            "別再嚇我了我的心臟承受不住.wav",
            "我的心跳的跟我第一次見到我老婆一樣快.wav"
        ],
        "intestines": [
            "My_poop_is_hard_as_a_diamond.wav",
            "toilet_for_two_hours_already.wav",
            "我的大便跟鑽石一樣硬.wav"
        ],
        "kidneys": ["I_have_kidney_stones.wav", "我有石頭在我的腎裡面.wav"],
        "legs": [
            "Maybe_I_need_to_do_more_yoga_to_make_my_legs_more_flexible.wav",
            "My_feet_feel_so_heavy.wav",
            "bed.wav",
            "heavy.wav",
            "yoga.wav",
            "我可能需要多做點瑜珈讓我柔軟一點__1_.wav",
            "我的肝跟石頭一樣硬.wav",
            "我的腳感覺好重.wav"
        ],
        "liver": ["My_liver_is_as_hard_as_a_rock.wav", "my_lungs_hurt.wav"],
        "lungs": ["breath_heavily.wav", "我的肺好痛.wav"],
        "mouth": [
            "dry.wav",
            "my-teeth-just-fell-off.wav",
            "my_mouth_is_dry.wav",
            "我的嘴巴好乾.wav"
        ],
        "nuetral": ["i-am-ingram-i-am-old.mp3", "我吃過午餐了嗎.wav"],
        "stomach": [
            "there’s_a_hole_on_my_stomach.wav",
            "我已經蹲馬桶兩個小時了.wav",
            "我的肚子上有一個洞.wav"
        ]
    },
    'logos-and-icons': [
        "back-highlight.png",
        "back.png",
        "left-highlight.png",
        "left.png",
        "main-page",
        "max-audio.png",
        "max-highlight.png",
        "min-audio.png",
        "min-highlight.png",
        "no-audio.png",
        "no-highlight.png",
        "nuetral-highlight.png",
        "nuetral.png",
        "right-highlight.png",
        "right.png"
    ],
}

let loadingImageElem = new Image()
let loadingSoundElem = new Audio()
infographicData['main-page'].forEach(x => {loadingImageElem.src = infographicData.baseLink + x})
infographicData['body-parts'].forEach(x => {loadingImageElem.src = infographicData.baseLink + x})
Object.keys(infographicData.sounds).forEach(x => {  infographicData.sounds[x].forEach(s => {loadingSoundElem.src = infographicData.baseLink + s})})

//--------------------------------------------------------------------------
//Event Listeners:
//--------------------------------------------------------------------------

let mouse = new Point(0, 0)
let lastMousePosition=new Point(0,0)
let mouseSpeed=0
let scrollPosition=new Point(0,0)
let mouseDown = false

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)

     //Mouse speed original: https://stackoverflow.com/a/6417110/19515980
    //slightly modified:
    mouseSpeed = Math.max( Math.abs(mouse.x-lastMousePosition.x), Math.abs(mouse.y-lastMousePosition.y) );
         lastMousePosition.x = mouse.x;
         lastMousePosition.y = mouse.y;
    if (mouse.x >= window.innerWidth - 3 && mouseDown == false){
        checkIfOpenSettings(mouse)
   }
}))

document.addEventListener('pointerup',function (e){
    mouseDown=false
     setTimeout(()=>{
        mouseDown=false
        mouseSpeed=0
    },300)
    if (e.target === document.documentElement && settings.state === true){
        toggleSettingsTab()
    }
//     if (e.target.id=='settingsOpener' && settingsCooldown==false){
//         settingsCooldown=true
//         console.log('open settings Now')
// //         toggleSettingsTab()
//         setTimeout(()=>{
//             settingsCooldown=false
//         },300)
//     }
//     console.log('mouse up')
})

let settingsCooldown = false;

// document.addEventListener('pointerdown',function (e){
//     const startPos=mouse
//     //console.log('mousedown',mouse,startPos)
//     //HERE
//     //Why is it from first stpes to second spets(calling) startPos changes
//     if (e.target.id=='settingsOpener' && mouseDown==false && settingsCooldown==false){
//         settingsCooldown=true
// //         waitForMouseHold(new Point(mouse.x,mouse.y))
//         console.log('first steps taken',startPos,mouse)
//     }
//     mouseDown=true
// })

let currentMouseOver = document.documentElement
document.addEventListener('mouseover',function (e){
    currentMouseOver=e
    if (e.target.className === 'labels' && mouseSpeed < 140.8){
        //Detecting label hover:
        waitRewrite(e.target)
        focusedTag = e.target.id
        //document.documentElement.style.cursor = 'pointer'
    }
    /*
    try{
        if (currentMouseOverpopUpRect.style.opacity === '0'){
            document.documentElement.style.cursor = 'pointer'
        }
    }
    catch{}
    */
    //checkIfHideRect(e)
})

document.addEventListener('mouseout',function (e){
    currentMouseOver=undefined
    //checkIfHideRect(e)
})

window.addEventListener('resize', function (e){
    console.log('resize detected')
//     settingsOpener.style.top = mouse.y + 'px'
//     settingsResizeReposition()
    //positionSettingsOpener()
    positionInsideLabels()
    positionOutsideLabels()
    //popUpRect.style.top = figure.getBoundingClientRect().bottom + 'px'
    popUpRect.style.top = mouse.y + 'px'
    if (detailedView.style.display === 'grid'){
            moveSecondBackButton()
    }
})

document.addEventListener('click', (e) => {
    mouseDown=true
    if (e.target.id=='backLogo' || e.target.id=='backText' || e.target.id=='backLogo2' || e.target.id=='backText2'){
    console.log('click option 1')
    closeLotsOfInfo()
    //fixVolumeControlsPosition()
    }
    else if (e.target.part!='settings' && settings.state == true && settingsCooldown == false){
    console.log('click option 2')
    hideSettings()
    }
    else if (popUpRect.style.opacity=='1'){
        console.log('click option 3')
        checkIfOpenLotsOfInfo(e)
    }
    //checkIfCloseNotification(e)
});

//--------------------------------------------------------------------------

function setUp (){
    document.getElementsByTagName('body')[0].className='fadeInBody'
    textArea.innerHTML=objInArray(csvArray,'part','general-young').intro+objInArray(csvArray,'part','general-old').intro
    setUpSettings()
    createLabelMaps()
    createInsideLabelMaps()
    popUpRect.style.opacity = '0'
}

document.documentElement.style.height = "99%";
document.documentElement.style.height = "99%";

function highlightHover (id){
    let oldSrc=document.getElementById(id).src
    document.getElementById(id).src=document.getElementById(id).alt
    document.getElementById(id).alt=oldSrc
}

//--------------------------------------------------------------------------
//Settings code:

let settingsInfo = {
    width: document.getElementById('settings').getBoundingClientRect().width,
    height: document.getElementById('settings').getBoundingClientRect().height,
    borderLeft: 9,
    borderRight: 1,
}

let originalSettingsOpenerPosition; 
/*
function setUpSettings (){
    let settings = document.getElementById('settings')
    settings.style.position = 'absolute'
    settings.style.right = settingsInfo.borderLeft + settingsInfo.borderRight + 2 + 'px'
    settings.style.top = settingsInfo.height + 'px'
    settings.style.width = (settingsInfo.width * 0.01) + 'px'
    settingsTab.style.display = 'none'
    document.getElementById('settings').state = false
    settingsOpener.className = 'fadeIn'
    setTimeout(()=>{
        positionSettingsOpener()
    },1000)
}
*/

function setUpSettings (){
    let settings = document.getElementById('settings')
    settings.style.overflow = 'auto'
    settings.style.position = 'absolute'
    settings.style.right = settingsInfo.borderLeft + settingsInfo.borderRight + 2 + 'px'
    settings.style.top = settingsInfo.height + 'px'
    settings.style.width = (settingsInfo.width * 0.01) + 'px'
    settingsTab.style.display = 'none'
    settingsTab.style.width = settings.getBoundingClientRect().width +'px'
    settingsTab.style.height = settings.getBoundingClientRect().height +'px'
    document.getElementById('settings').state = false
//     audioControls.style.position = 'absolute'
//     audioControls.style.top=settings.getBoundingClientRect().height/1.3+'px'
//     volumeControls.style.position = 'absolute'
//     volumeControls.style.top='-23px'
//     settingsOpener.className = 'fadeIn'
    settings.style.zIndex= '5'
//     settingsOpener.style.zIndex= '6'
    setTimeout(()=>{
//         settingsOpener.style.left = settings.getBoundingClientRect().x +'px'
//         settingsOpener.style.top = settings.getBoundingClientRect().y + settings.getBoundingClientRect().height/2 +'px'
        originalSettingsOpenerPosition = settings.getBoundingClientRect().x - 9
        console.log('after x', originalSettingsOpenerPosition)
        settings.style.position = 'fixed'
//         settingsOpener.style.position = 'fixed'
    },1000)
}

function settingsResizeReposition (){
    let settings = document.getElementById('settings')
    settings.style.position = 'absolute'
    settings.style.overflow = 'auto'
    settingsTab.style.width = settings.getBoundingClientRect().width +'px'
    settingsTab.style.height = settings.getBoundingClientRect().height +'px'
    document.getElementById('settings').state = false
//     audioControls.style.position = 'absolute'
//     audioControls.style.top=settings.getBoundingClientRect().height/1.3+'px'
//     volumeControls.style.position = 'absolute'
//     volumeControls.style.top='-23px'
//     settingsOpener.className = 'fadeIn'
    settings.style.zIndex= '5'
//     settingsOpener.style.zIndex= '6'
}

function createSettingsTab () {
   // settings.style.width=window.innerWidth/8+'px'
    settings.style.height=window.innerHeight/5+'px'
    document.getElementById('young-old').style.top=settings.getBoundingClientRect().height/9+'px'
    document.getElementById('oldYoungToggle').style.top=settings.getBoundingClientRect().height/7+'px'
    document.getElementById('external-internal').style.top=settings.getBoundingClientRect().height/2.6+'px'
    document.getElementById('inOutToggle').style.top=settings.getBoundingClientRect().height/2.4+'px'
//     audioControls.style.position = 'absolute'
//     audioControls.style.top=settings.getBoundingClientRect().height/0.4+'px'
//     volumeControls.style.top=settings.getBoundingClientRect().height/20+'px'
}

function positionSettingsOpener (){
//     settingsOpener.style.transitionProperty = undefined
//     settingsOpener.style.left = settings.getBoundingClientRect().x + 'px' 
//     settingsOpener.style.top = settings.getBoundingClientRect().y + settings.getBoundingClientRect().height/2 +'px'
    originalSettingsOpenerPosition = settings.getBoundingClientRect().x - 1
//     settingsOpener.style.transitionProperty = 'left'
}

document.getElementById('settings').state = false

function toggleSettingsTab (){
    if (settings.getBoundingClientRect().width > settingsInfo.width * 0.1){
        hideSettings()
    }
    else{
        showSettings()
        settings.state = true
    }
}

function showSettings (){
    let settings = document.getElementById('settings')
    let settingsTab = document.getElementById('settingsTab')
//     changeArrowToNuetral()
    settingsCooldown = true
    document.documentElement.style.cursor = 'w-resize';
    setTimeout(()=>{
        setTimeout(() => {
            settingsResizeReposition()
        }, 450)
        settingsTab.style.display = 'block    '
        settingsTab.className = 'fadeIn'
        document.documentElement.style.cursor = 'auto';
        settingsCooldown = false
        settings.state = true
    },400)
    settings.style.overflow = 'hidden'
    settings.state = true
    settings.style.width = settingsInfo.width +'px'
//     settingsOpener.style.position = 'absolute'
//     settingsOpener.style.left = originalSettingsOpenerPosition - settingsInfo.width +'px'
//     settingsOpener.style.left = '84%'
}

function hideSettings (){
//     console.log('SHIT')
//     let settings = document.getElementById('settings')
//     let settingsTab = document.getElementById('settingsTab')
// //     nuetralToArrow()
//     settingsCooldown = true
//     document.documentElement.style.cursor = 'e-resize';
//     setTimeout(()=>{
//         document.documentElement.style.cursor = 'auto';
//         settingsCooldown = false
//     },400)
//     settings.style.overflow = 'hidden'
//     settings.state = false
//     settings.style.width = (settingsInfo.width * 0.01) + 'px'
//     settingsTab.style.display = 'none'
//     settingsOpener.style.left  = originalSettingsOpenerPosition +'px'
}

// function changeArrowToNuetral (){
//     let settingsOpener = document.getElementById('settingsOpener')
//     settingsOpener.innerText = '▮'
//     //settingsOpener.style.left = settingsOpener.getBoundingClientRect().left - (settingsOpener.getBoundingClientRect().width/2) + 'px'
// //     settingsOpener.style.left = '80%'
// }

// function nuetralToArrow (){
//     let settingsOpener = document.getElementById('settingsOpener')
//     //settingsOpener.style.left = settingsOpener.getBoundingClientRect().left + (settingsOpener.getBoundingClientRect().width/2) + 'px'
// //     settingsOpener.style.left = '-10px'
// }

let openSettingsCooldown=false
function checkIfOpenSettings (oldPos){
    setTimeout(()=>{
        if (mouse.x >= window.innerWidth - 3 && openSettingsCooldown == false){
            console.log('mouse on the right of screen')
            openSettingsCooldown=true
            settings.style.position = 'absolute'
//             settingsOpener.style.position = 'absolute'
            toggleSettingsTab()
            setTimeout(()=>{
                openSettingsCooldown=false
                settings.style.position = 'fixed'
//                 settingsOpener.style.position = 'fixed'
            },700)
        }
    },200)
}

// function waitForMouseHold (startPos){
//     console.log('taking second step',startPos)
//     setTimeout(()=>{
//         if ( mouseDown==true && settingsCooldown==true){
//             console.log('calling',startPos,mouse)
// //             checkForClickAndPull(startPos)
//         }
//         else {
//             settingsCooldown=false
//         }
//     },400)
// }

// function checkForClickAndPull (startPos){
//     console.log('pulling',startPos,mouse)
//     settingsCooldown=true
//     setTimeout(()=>{
//         settingsCooldown=false
//     },1000)
//     let settings=document.getElementById('settings')
//     //document.documentElement.style.overflow='hidden'
//     settingsTab.style.display = 'block'
//     let alreadyOpened = false
//     let settingsFullyOpenedPosition = settingsInfo.borderLeft + settingsInfo.borderRight
//     settings.style.position = 'absolute'
// //     settingsOpener.style.position = 'absolute'
//     if (mouse.x > window.innerWidth){
//         console.log('option hide')
//         hideSettings()
//     }
//     if (mouse.x > window.innerWidth - settingsFullyOpenedPosition){
//         settings.mode = true
//         alreadyOpened=true
//         console.log('option show')
//         settings.style.width = settingsInfo.width +'px' 
//         document.documentElement.style.cursor = 'e-resize';
//         setTimeout(()=>{
//             document.documentElement.style.cursor = 'auto';
//             settingsCooldown = false
//         },400)
//     }
//     else{
//         settings.mode = false
//         settings.style.width = window.innerWidth - mouse.x +'px'
//         settingsCooldown = true
//         document.documentElement.style.cursor = 'col-resize';
//         setTimeout(()=>{
//             document.documentElement.style.cursor = 'auto';
//             settingsCooldown = false
//         },400)
//     }
//     console.log('real',startPos,mouse.x)
//     if (mouse.x < startPos.x && settings.mode == false){
//         console.log('chose to open')
//         settingsTab.style.display='block'
//         //settings.style.left = +'px'
//         //changeArrowToNuetral()
//         showSettings()
//     }
//     else if (mouse.x > startPos.x  && alreadyOpened==false){
//         console.log('chose to close')
//         //nuetralToArrow()
//         //fixSettingsPostionLandscape()
//         hideSettings()
//     }
//     else if (mouseDown==true){
//     //document.documentElement.style.overflow='auto'
//         setTimeout(()=>{
//             checkForClickAndPull(startPos)
//         },50)
//     }
//     setTimeout(() => {
//         settings.style.position = 'fixed'
// //         settingsOpener.style.position = 'fixed'
//     }, 100)
// }

let inOutCooldown = false
function toggleInOut (){
    if (inOutCooldown==false){
        inOutCooldown=true
        setTimeout(()=>{
            inOutCooldown=false
        },100)
    }
    else {
        setTimeout(()=>{
            toggleInOut()
        },202)
    }
    if (getTime()>1){
        let toggled=document.getElementById('external-internal')
        if (inOutText.state!='on'){
            inOutText.textContent='Internal'
            toggled.innerHTML='External/<b><u>Internal</u></b>'
            //document.getElementById('inOutText').style.paddingTop='12px'
            if (oldYoungText.state == 'on'){
                figure.src = infographicData.baseLink + 'old-insides.png'
            }
            else{
                figure.src = infographicData.baseLink + 'young-insides.png'
            }
            figure.useMap = '#insideMap'
        }
        else{
            inOutText.textContent='External'
            toggled.innerHTML='<b><u>External</u></b>/Internal'
            document.getElementById('inOutText').style.textIndent='1px'
            //document.getElementById('inOutText').style.paddingTop='8px'
            //figure.src = 'young-lines.png'
            if (oldYoungText.state == 'on'){
                figure.src = infographicData.baseLink + 'old-lines.png'
            }
            else{
                figure.src = infographicData.baseLink + 'young-lines.png'
            }
            figure.useMap = '#figureMap'
        }
        toggledToggleBar('inOutText')
        //insideImg.style.top = young.getBoundingClientRect().top+ 'px'
    }
}

function toggledToggleBar (id){
    let toggled=document.getElementById(id)
    if (toggled.state!='on'){
        toggled.state='on'
        toggled.style.paddingLeft = "0px";
        toggled.style.textIndent = "0px";
    }
    else {
        toggled.state='off'
        toggled.style.paddingLeft = "30px";
        toggled.style.textIndent = "0px";
    }
}

function toggleOldYoung (){
    toggledToggleBar('oldYoungText')
    let toggled=document.getElementById('young-old')
    if (oldYoungText.state=='on'){
        oldYoungText.textContent=' Old'
        toggled.innerHTML='Young/<b><u>Old</u></b>'
        //figure.src = 'old-insides.png'
       // if (oldYoungText.state === 'on'){
            //hideYoung()
        //}
        //insideImg.src='main-page/inside-old.png'
        if (document.getElementById('oldSound').muted == false){
        new Audio(infographicData.baseLink + 'i-am-ingram-i-am-old.mp3').play()
        }
        console.log('here correctly triggered', inOutText.state)
        if (inOutText.state === 'on' && mode !== 'doku'){
            console.log('yooo')
            figure.src = 'old-insides.png'
        }
        else if (mode !== 'doku'){
            figure.src = 'old-lines.png'
        }
        else if (mode === 'doku' && inOutText.state === 'on'){
            figure.src = infographicData.baseLink + 'old-insides.png'
        }
        else if (mode === 'doku'){
            figure.src = infographicData.baseLink + 'old-lines.png'
        }


    }
    else{
        oldYoungText.textContent=' Young'
        toggled.innerHTML='<b><u>Young</u></b>/Old'
        /*
        if (insides.style.display!='block'){
            showYoung()
        }
        insideImg.src='main-page/inside-young.png'
        */
        figure.src = 'young-insides.png'
        if (document.getElementById('oldSound').muted==false){
            new Audio(infographicData.baseLink + 'not-old.mp3').play()
        }
        if (inOutText.state === 'on'){
            figure.src = infographicData.baseLink + 'young-insides.png'
        }
        else{
            figure.src = infographicData.baseLink + 'young-lines.png'
        }
    }
}

//End of settings code.
//--------------------------------------------------------------------------
//Change whole page cursor style: https://stackoverflow.com/a/2213331/19515980
/*
let rect = document.createElement('div')

rect.id = 'rect'

rect.style.left = figure.getBoundingClientRect().x + figure.getBoundingClientRect().width * 0.03389271238844277 - 5 +'px'

rect.style.top = figure.getBoundingClientRect().y - 5+ 'px'

document.documentElement.appendChild(rect)
*/

let labelMaps = []
function createLabelMaps (){
    let labels = ['eyes', 'mouth', 'back', 'legs', 'ears', 'arms', 'core']
    labelMaps = labels.map(x =>{
        let elem = document.createElement('area') 
        elem.className = 'labels'
        elem.shape = 'rect'
        elem.id = x
        //elem.href = JSON.stringify(x)
        elem.className = 'labels'
        document.getElementsByName('figureMap')[0].appendChild(elem)
        return elem
    })
    setTimeout(() => {
        positionOutsideLabels()
    },200)
    return true
}

let insideLabelMaps = []
function createInsideLabelMaps (){
    let labels = ['brain', 'heart', 'liver', 'bladder', 'lungs', 'stomach', 'intestines']
    labelMaps = labels.map(x =>{
        let elem = document.createElement('area') 
        elem.className = 'labels'
        elem.shape = 'rect'
        elem.id = x
        //elem.href = JSON.stringify(x)
        elem.className = 'labels'
        document.getElementsByName('insideMap')[0].appendChild(elem)
        return elem
    })
    setTimeout(() => {
        positionInsideLabels()
    },200)
    return true
}

function positionInsideLabels (){
    let figureInfo = figure.getBoundingClientRect()
    let posInfo = [figureInfo.width / 19.68421052631579] 
    posInfo.push(figureInfo.height / 76.77744233898747)
    posInfo.push(figureInfo.width / 7.090429621107131)
    posInfo.push(figureInfo.height / 19.666671752929688)
     brain.coords = posInfo.toString()
    posInfo = [figureInfo.width / 39.68421052631579] 
    posInfo.push(figureInfo.height / 19.77744233898747)
    posInfo.push(figureInfo.width / 7.090429621107131)
    posInfo.push(figureInfo.height / 8.666671752929688)
    heart.coords = posInfo.toString()
    posInfo = [figureInfo.width / 20.98421052631579] 
    posInfo.push(figureInfo.height / 2.87744233898747)
    posInfo.push(figureInfo.width / 7.090429621107131)
    posInfo.push(figureInfo.height / 2.466671752929688)
    liver.coords = posInfo.toString()
    posInfo = [figureInfo.width / 19.88421052631579] 
    posInfo.push(figureInfo.height / 1.50044233898747)
    posInfo.push(figureInfo.width / 7.090429621107131)
    posInfo.push(figureInfo.height / 1.400671752929688)
    bladder.coords = posInfo.toString()
    posInfo = [figureInfo.width / 1.25001000631579] 
    posInfo.push(figureInfo.height / 7.09764233898747)
    posInfo.push(figureInfo.width / 1.138429621107131)
    posInfo.push(figureInfo.height / 6.009999752929688)
    lungs.coords = posInfo.toString()
    posInfo = [figureInfo.width / 1.25001000631579] 
    posInfo.push(figureInfo.height / 3.60744233898747)
    posInfo.push(figureInfo.width / 1.138429621107131)
    posInfo.push(figureInfo.height / 3.196671752929688)
    stomach.coords = posInfo.toString()
    posInfo = [figureInfo.width / 1.25001000631579] 
    posInfo.push(figureInfo.height / 1.54044233898747)
    posInfo.push(figureInfo.width / 1.046429621107131)
    posInfo.push(figureInfo.height / 1.500471752929688)
    intestines.coords = posInfo.toString()
}

function positionOutsideLabels (){
    let figureInfo = figure.getBoundingClientRect()
    /*
    let posInfo = [figureInfo.x + figureInfo.width * 0.03389271238844277 - (figureInfo.width / 9.550333251953125) / 2]
    posInfo.push(figureInfo.top - (figureInfo.height / 31.9360009765625) / 2)
    posInfo.push(posInfo[0] + (figureInfo.width / 9.550333251953125))
    posInfo.push(posInfo[1] + (figureInfo.height / 31.9360009765625))
    */
    let posInfo = [figureInfo.width / 19.68421052631579] 
    posInfo.push(figureInfo.height / 76.77744233898747)
    posInfo.push(figureInfo.width / 7.090429621107131)
    posInfo.push(figureInfo.height / 19.666671752929688)
    eyes.coords = posInfo.toString()
    posInfo = [figureInfo.width / 39.68421052631579] 
    posInfo.push(figureInfo.height / 19.77744233898747)
    posInfo.push(figureInfo.width / 7.090429621107131)
    posInfo.push(figureInfo.height / 8.666671752929688)
    mouth.coords = posInfo.toString()
    posInfo = [figureInfo.width / 20.98421052631579] 
    posInfo.push(figureInfo.height / 2.87744233898747)
    posInfo.push(figureInfo.width / 7.090429621107131)
    posInfo.push(figureInfo.height / 2.466671752929688)
    back.coords = posInfo.toString()
    posInfo = [figureInfo.width / 19.88421052631579] 
    posInfo.push(figureInfo.height / 1.50044233898747)
    posInfo.push(figureInfo.width / 7.090429621107131)
    posInfo.push(figureInfo.height / 1.400671752929688)
    legs.coords = posInfo.toString()
    posInfo = [figureInfo.width / 1.25001000631579] 
    posInfo.push(figureInfo.height / 7.09764233898747)
    posInfo.push(figureInfo.width / 1.138429621107131)
    posInfo.push(figureInfo.height / 6.009999752929688)
    console.log('pos', posInfo)
    ears.coords = posInfo.toString()
    posInfo = [figureInfo.width / 1.25001000631579] 
    posInfo.push(figureInfo.height / 3.60744233898747)
    posInfo.push(figureInfo.width / 1.138429621107131)
    posInfo.push(figureInfo.height / 3.196671752929688)
    arms.coords = posInfo.toString()
    posInfo = [figureInfo.width / 1.25001000631579] 
    posInfo.push(figureInfo.height / 1.54044233898747)
    posInfo.push(figureInfo.width / 1.046429621107131)
    posInfo.push(figureInfo.height / 1.500471752929688)
    core.coords = posInfo.toString()
}

//--------------------------------------------------------------------------
//Popuprect code:

let selectedPart;
function showRect (elem){
    selectedPart = elem
    if (popUpRect.style.opacity=='0'){
        let elemInfo=elem.getBoundingClientRect()
        browserZoomLevel = Math.round(window.devicePixelRatio * 100);
        selectedPart.style.backgroundColor='white'
        //selectedPart.style.borderColor='white'
        selectedPart.style.borderRight=window.innerWidth/10-selectedPart.getBoundingClientRect().width+3+'px solid white'
        let mapPos = elem.coords.split(',')
        if (browserChromiumBased === false){
            openPopUpRect(elemInfo.x + JSON.parse(mapPos[0]) + window.scrollX,elemInfo.y + window.scrollY + JSON.parse(mapPos[1]))
        }
        else {
            //openPopUpRect(elemInfo.x + window.scrollX - figure.getBoundingClientRect().x, elemInfo.y + window.scrollY + JSON.parse(mapPos[1])/*-figure.getBoundingClientRect().y*/)
            openPopUpRect(mouse.x - window.innerWidth/20, mouse.y - window.innerHeight / 40)
        }
        checkPopUpRectPosition(popUpRect)
    setTimeout(()=>{
        if (typeof checkForOverlap(popUpRect)=='object'){
            checkForOverlap(popUpRect).forEach(x=>{
                if (x!=selectedPart){
                    x.style.zIndex='-20'
                }
    })}},200)
    setTimeout
        (()=>{
        if (typeof checkForOverlap(popUpRect)=='object'){
            checkForOverlap(popUpRect).forEach(x=>{
                if (x!=selectedPart){
                    x.style.zIndex='-20'
                }
    })}},350)
    let popUpRectInfo = findShortInfo(selectedPart)
    popUpRect.innerHTML= '<strong>' + popUpRectInfo.label + '</strong> <br>'+ displayInfo(popUpRectInfo)
    }}

function openPopUpRect (x,y){
    console.log('new pop up pos', x, y)
    popUpRect.style.left=x+'px'
    popUpRect.style.top= y+'px'
    popUpRect.style.width=window.innerWidth/10+'px'
    popUpRect.style.opacity='1'
    popUpRect.style.height=window.innerHeight/5.9+'px'
}

function waitRewrite (elem){
    setTimeout(()=>{
        if (popUpRect.style.opacity == '0' && mouseSpeed<10){
            console.log('showing')
            showRect(elem)
        }
        //There might be a problem
        else if (popUpRect.style.opacity=='0'){
            setTimeout(()=>{
                waitRewrite(elem)
            },100)
        }
        else{
            console.log('showing')
            showRect(elem)
        }
    },50)
}

function checkIfHideRect (e){
    try{
        if (e.target != popUpRect && popUpRect.style.opacity=='1' && e.target!=selectedPart && e.target.parentElement != popUpRect && e.target.id!=focusedTag && e!=undefined){
            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'
            selectedPart=undefined
        },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
}

function checkPopUpRectPosition (rect){
    let rectPos=rect.getBoundingClientRect()
    if (rectPos.x<0){
        rect.style.left='10px'
    }
    else if (rectPos.x>window.innerWidth-rectPos.width){
        rect.style.left=window.innerWidth-rectPos.width-40+'px'
    }
    if (rectPos.y<0){
        rect.style.top='10px'
    }
    else if (rectPos.y>window.innerHeight-rectPos.height){
        rect.style.top=window.innerHeight-rectPos.height-40+'px'
    }
}

function checkForOverlap (elem){
    let overLaps=[]
    for (let i = 0; i < document.getElementsByClassName('labels').length; i++) {
        if (document.getElementsByClassName('labels')[i]!=elem && checkIfTouching(elem.getBoundingClientRect(),document.getElementsByClassName('labels')[i].getBoundingClientRect())){
            overLaps.push(document.getElementsByClassName('labels')[i])
        }
    }
    if (overLaps.length>0){
        return overLaps
    }
    else{
        return false}
}

function checkIfTouching (info1,info2){
    if (info1.x>=info2.x && info1.x<info2.x+info2.width && info1.y>info2.y && info1.y<info2.y+info2.height){
        return true
    }
    if (info2.x>=info1.x && info2.x<info1.x+info1.width && info2.y>info1.y && info2.y<info1.y+info1.height){
        return true
    }
        return false
}

function findShortInfo (target){
    console.log('target.id', target.id)
    let outputInfo;
    csvArray.forEach(x=>{
        if (target.id.toLowerCase()==x.part.toLowerCase()){
            outputInfo = x
        }
    })
    if (outputInfo!=undefined){
        return outputInfo
}}

function displayInfo (target){
    if (document.getElementById('oldYoungText').state!='on'&& target['young']!=undefined){
        return target['young']
    }
    else if (target['old-shorter']!=undefined){
        return target['old-shorter']
    }
    else{
return 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mollis orci nec ullamcorper pellentesque. Phasellus vitae imperdiet arcu, ut tempor risus. Cras faucibus magna ligula, ut tincidunt justo placerat laoreet. Duis id justo sollicitudin, fringilla massa in, volutpat nisl. Donec lobortis tempus cursus. Fusce pellentesque turpis lacus, a facilisis nibh tincidunt et. Donec imperdiet tincidunt neque, id euismod lacus egestas eget.'
    }
}
//END of PopUpRect code.
//--------------------------------------------------------------------------

//--------------------------------------------------------------------------
//LotsOfInfo code starts here:
//detailedView code starts here:

function checkIfOpenLotsOfInfo (e){
    if (e.target.className == 'labels' || e.target==popUpRect || e.target.parentElement === popUpRect){
        infographicDownTransitionAnimation()
    }
}

function infographicDownTransitionAnimation (){
    document.getElementById('title').innerHTML+=' - Old Man '+titleCase(selectedPart.id)
    document.getElementById('infographicContent').className='down'
    if (popUpRect.style.opacity === '1'){
        //popUpRect.animate({duration:1000}).dy(window.outerHeight)}
        movePopUpRectDown()
        document.documentElement.style.backgroundColor='hsl(0,0%,95%)'
        document.getElementById('infographicContent').style.opacity= '0'
        setTimeout(()=>{
            openLotsOfInfo(selectedPart)
        },100)
    }
}

function movePopUpRectDown (){
    popUpRect.style.opacity = '0'
    popUpRect.style.top = '120%'
    popUpRect.style.height = '0px'
}

//let lotsOfInfoRect=document.getElementById('lotsOfInfoRect')
let popUpRectVisibility=true
function openLotsOfInfo (target){
    playSound(selectedPart)
    findLongInfo(selectedPart)
    hideRect()
    popUpRectVisibility=false
    //title.style.top='-100px';
    //document.getElementById('textArea').style.height='0px'
    //document.getElementById('textArea').className='fadeOut'
    let tab=document.getElementById('detailedView')
    tab.style.display = 'grid'
    infographicContent.style.display = 'none'
    tab.style.zIndex = '10'
    let bigImg = document.getElementById('bigImg')
    let smallImg = document.getElementById('smallImg')
    let smallInfo = smallImg.getBoundingClientRect()
    let bigInfo = bigImg.getBoundingClientRect()
    let textBox = document.getElementById('lotsOfInfo')
//     bigImg.src+=target.id+'.png'
    applyBigImgSrc(target, bigImg)
    //Young images need -y- infront of the .png
    smallImg.src=getSmallImgSrc(target)
    moveSecondBackButton()
    backText.style.top = backLogo.getBoundingClientRect().y + 'px'
}

function findLongInfo (target){
    let outputText;
    csvArray.forEach(x=>{
        if (target.id.toLowerCase()==x.part.toLowerCase()){
            outputText=getCorrectText(x)
        }
    })
    if (outputText!=undefined){
        document.getElementById('lotsOfInfo').innerHTML=outputText
        console.log('outputText', outputText)
        }
}

function getCorrectText (x){
//     if (oldYoungText.textContent==' Young' && x['young-longer']!=undefined){
//         return x['young-longer']
//     }
//     else if (oldYoungText.textContent==' Old' && x['old-longer']!= undefined){
//         console.log('returning old')
//         return x['old-longer']
//     }
//     else {
//         return 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mollis orci nec ullamcorper pellentesque. Phasellus vitae imperdiet arcu, ut tempor risus. Cras faucibus magna ligula, ut tincidunt justo placerat laoreet. Duis id justo sollicitudin, fringilla massa in, volutpat nisl. Donec lobortis tempus cursus. Fusce pellentesque turpis lacus, a facilisis nibh tincidunt et. Donec imperdiet tincidunt neque, id euismod lacus egestas eget.'
//     }
    return x['old-longer']
}

function moveSecondBackButton (){
    let backButton=document.getElementById('backLogo2')
    let backText=document.getElementById('backText2')
    backButton.style.left=window.innerWidth-190+'px'
    backButton.style.top=window.innerHeight-130+'px'
    backText.style.left=window.innerWidth-160+'px'
    backText.style.top=window.innerHeight-130+'px'
}

function getSmallImgSrc (target){
//     console.log('wefwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwAA: ', target.id, infographicData.baseLink + 'body-parts/small-'+target.id.toLowerCase()+'.png'
// )
    if (mode !== 'doku'){
        return infographicData.baseLink + 'body-parts/small-'+target.id.toLowerCase()+'.png'
    }
    else {
       return infographicData.baseLink + 'small-'+ target.id + '.png'
    }
}

function applyBigImgSrc (target, bigImg){
    if (mode !== 'doku' && inOutText.textContent=='Internal'){
        bigImg.src = infographicData.baseLink + 'main-page/' + target.id + '.svg'
    }
    else if (mode !== 'doku'){
        bigImg.src += target.id+'.png'
    }
    else if (inOutText.textContent=='Internal'){
        bigImg.src = infographicData.baseLink + target.id + '.svg'
    }
    else {
        bigImg.src = infographicData.baseLink + 'big-' + target.id + '.png'
    }
}

let language='chinese'
// function playSound (target){
//     console.log('hi attempting to play sound',selectedPart.id)
//     if (document.getElementById('oldSound').muted==false){
//         ws.send(makeMessage("directory","sounds/"+selectedPart.id+'/'))
//         setTimeout(()=>{
//             pictures=JSON.parse(pictures)
//             let foundAudio=pickAudio(pictures)
//             console.log('foundAudio',foundAudio)
//             if (language=='chinese'){
//                 let foundChineseAudio=false
//                 while (foundChineseAudio==false){
//                     foundAudio=pickAudio(pictures)
//                     foundChineseAudio=checkForLetter(foundAudio[0])==true
//                 }
//             }
//             new Audio('sounds/'+target.id+'/'+foundAudio).play()
//         },1000)
//     }
// }

function playSound (target){
    if (document.getElementById('oldSound').muted==false && mode === 'linux'){
        let availableSounds = infographicData.sounds[target.id]
        console.log('sounds', availableSounds.length, target.id)
        new Audio('sounds/'+target.id+'/'+pickAudio(availableSounds)).play()
        return true
    }
    else if (document.getElementById('oldSound').muted==false){
        let availableSounds = infographicData.sounds[target.id]
        console.log('sounds', availableSounds.length, target.id)
        new Audio(infographicData.baseLink + pickAudio(availableSounds)).play()
        return true
    }
}

function pickAudio (audio){
    return audio[randomRange(0,audio.length-1)]
}

function closeLotsOfInfo (){
    popUpRectVisibility=true
    infographicContent.style.display = 'grid'
    document.getElementById('infographicContent').className = 'up'
    infographicContent.style.opacity = '1'
    document.getElementById('textArea').style.height='auto'
    //document.getElementById('textArea').className='fadeIn'
    document.getElementById('title').innerHTML='<strong> Old Man Ingram </strong>'
    let tab=document.getElementById('detailedView')
    let bigImg=document.getElementById('bigImg')
    let smallImg=document.getElementById('smallImg')
    let smallInfo=smallImg.getBoundingClientRect()
    let bigInfo=bigImg.getBoundingClientRect()
    let textBox=document.getElementById('lotsOfInfo')
    tab.style.display='none'
    tab.style.zIndex = '-10'
    bigImg.src='body-parts/big-'
    setTimeout(() =>{
        infographicContent.style.opacity = '1'
        settingsResizeReposition()
    }, 100)
    //infographicUpTransitionAnimation()
    /*
    if (inOutText.textContent=='Internal'){
        showInsides()
    }
    else if (oldYoungText.textContent==' Young'){
        document.getElementById('old').style.display='none';
        document.getElementById('young').style.display='block';
    }
    else {
        document.getElementById('old').style.display='block';
        document.getElementById('young').style.display='none';
    }
    */
}

function infographicUpTransitionAnimation (){
    document.getElementById('title').innerHTML='Old Man Ingram'
    document.getElementById('infographicContent').className='up'
    document.documentElement.style.backgroundColor='transparent'
    document.getElementById('infographicContent').style.opacity='0'
}

//LotsOfInfo code ends here:
//detailedView code ends here:
//--------------------------------------------------------------------------
//--------------------------------------------------------------------------
//Websocket Code:
//instructions: when sending a csv file name, use makeMessage("csv",youFileName), works the same as direcotry and text

function makeMessage (type,message){
    let mObj = {
        type: type,
        message: message
    }
    let returnObj = JSON.stringify(mObj)
    return returnObj
}

// async function waitingForFile (selectedPart){
//     return new Promise((resolve,reject) => {
//         resolve(ws.send(makeMessage("directory","sounds/"+selectedPart.id+'/')))
//     });
// }

function removeNotifications (){
    let notification=document.getElementsByClassName('notification')
    for (let i = 0; i < notification.length; i++) {
        notification[i].remove()
    }
    if (notification.length!=0){
        removeNotifications()
    }
}

async function getInfoFromLink (link){
    let jsonData = await fetch(link)
    let parsedData = await jsonData.json()
    return parsedData
}
//helped by chatgpt
//https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

async function definecsvArray (){
//     csvArray = await getInfoFromLink('http://127.0.0.1:8080/old-ingram-info-data.JSON')
    setUp()
    removeNotifications()
}


definecsvArray()
let pictures;
let instructions;
//ws.send(makeMessage("directory","body-parts"))

function objInArray(array, key, keyName) {
    if (typeof array == "object") {
        try {
            return array.filter(x => x[key] == keyName)[0]
        } catch (err) {
            console.log(err)
        }
    } else {
        throw("first argument should be an array")
    }
}


//objInArray(csvArray,'part','eyes')

//Websocket CODE ENDS HERE
//--------------------------------------------------------------------------
let notificationBox = document.getElementById('notification')

notificationBox.onpointerup = hideNotification

function hideNotification (){
        notificationBox.style.top = '-100%'
        setTimeout(() => {
            notificationBox.style.display = 'none'
            notificationBox.style.transition = 'none'
            notificationBox.style.right = '3%'
            notificationBox.style.transition = ''
            if (mode === 'doku'){
                notificationBox.style.top = '10%'
            }
            else {
                notificationBox.style.top = '2%'
            }
        }, 1000)
}

function showNotification () {
//     notificationBox.style.transition = ''
    notificationBox.style.display = 'block'
}

function notifyUser (message){
    notificationBox.innerText = message
    showNotification()
    setTimeout(() => {
        if (notificationBox.style.display === 'block'){
            hideNotification()
        }
    }, 8000)
}

window.addEventListener("load", (event) => {
    setTimeout(() =>{
        notifyUser('Click on labels for more info/點擊身體標籤了解更多')
        showSettingsTip()
        showSettings()
    }, 1000)
})

settings.addEventListener('mousemove', checkIfShowCloseSettingsPrompt) 

settings.addEventListener('mousedown', checkIfOpenSettingsFromBorder) 

function getMousePosRelativeToSettings (event){
    // Get the position of the element relative to the viewport
    const rect = settings.getBoundingClientRect();
    // Calculate the mouse position relative to the element's top-left corner
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;
    return {x: mouseX, y: mouseY}
}

function checkIfShowCloseSettingsPrompt(event) {
    let mouseRelativePos = getMousePosRelativeToSettings(event)
    if (mouseRelativePos.x <= 8){
        settings.style.cursor = 'w-resize'
    }
    else {
        settings.style.cursor = 'default'
    }
}

function checkIfOpenSettingsFromBorder (e){
    let mouseRelativePos = getMousePosRelativeToSettings(e)
    if (mouseRelativePos.x <= 8){
        toggleSettingsTab()
        settings.state = true
    }
}

function showSettingsTip (){
    settingsTip.style.left = '120%'
    settingsTip.style.display = 'block'
    settingsTip.innerText = '<'
    settingsTip.style.top = settings.getBoundingClientRect().top + settingsTip.getBoundingClientRect().height / 4 + 'px'
    settingsTip.className = 'fadeOut'
    settingsTip.style.left = '70%'
    setTimeout(() => {
        settingsTip.style.display = 'none'
        settingsTip.style.left = '120%'
    }, 980)
}

//https://www.w3schools.com/css/tryit.asp?filename=trycss_grid_layout_named
//https://www.w3schools.com/css/css_grid.asp
document.getElementById('dw__navbar').remove()
document.documentElement.appendChild(document.getElementById('infographic') )
let dokuElems = document.getElementsByClassName('dokuwiki')

for (let i = 0; i < dokuElems.length; i++) {
dokuElems[i].remove()
}
document.body.remove()
document.documentElement.style.fontSize = '100%'
function stopChromFromMoving (){
    let figPos = figure.getBoundingClientRect()
    figure.style.position = 'fixed'
    figure.style.height = '90%'
    figure.style.width = 'auto'
    figure.style.left = figPos.x + 'px'
    figure.style.top = figPos.y + 'px'
}

if (browserChromiumBased === true){
stopChromFromMoving()
}

//a lot of code helped by chatgpt
        </script>
    </body>
    </div>
</html>