start [Light]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
 ====== Light 光, Perception 知覺, and Reality 現實 ======
=== Understanding the nature of light and how it and other factors affect our perceptions of reality ===
=== A presentation of work by a group of students in experimental education in Taipei, Taiwan ===
<html>
<meta property="og:image" content="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=logo.png" />
<style>
    .level4 {
  opacity: 0;
  transitionProperty: opacity;
  transitionDuration: 2s;
    }
body{
    opacity: 0
}
.imageCarosel{
        overflow:hidden;
        border-width:2px;
        border-style:solid;
        border-color:black;
        background-color:grey;
}

.mainImg{
        position:absolute;
        transition-property:left;
        transition-duration: 0.5s;
        transition-delay: 100ms;
        cursor:ew-resize;
}

.left{
        z-Index:2;
        line-height: 34px;
        display: inline-block;
        white-space: nowrap;
          -webkit-transform: scaleX(-1);
            transform: scaleX(-1);
        opacity:0.5;
          color: grey;
          background-color:transparent;
          border:none;
        }

.left:hover{
        opacity:0.9;
}


.right{
        z-Index:2;
        line-height: 34px;
        display: inline-block;
        opacity:0.5;
        color: grey;
        background-color:transparent;
          border:none;
}

.right:hover{
        opacity:0.9;
}
.arrow{
        z-Index:3;
        line-height: 34px;
        position:absolute;
        top:50%;
        opacity:0.2;
        color: grey;
}
/* Make text go to the middle:
 * https://stackoverflow.com/a/14061404/19515980
 *
 * */
/*
 * .moveLeft{
 *     transition:4s;
 *         transform:translateX(-3000)
 *         }
 *
 *         .moveRight{
 *             transition:4s;
 *                 transform:translateX(3000)
 *                 }
 *                 */


</style>
<script>

//setup:

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)
  }
}

// A safer version of splice

function safeSplice(inputArray, amountToRemove,indexToRemove,replaceWith) {
  let array1 = inputArray.slice(0, indexToRemove )
if (replaceWith!=undefined){
array1.push(replaceWith)}
  let array2 = inputArray.slice(indexToRemove + amountToRemove, inputArray.length)
  return array1.concat(array2)
}
/*
let info=[{
    imageSrc:'./what is this.png',
    portraitSrc:'./measure-portrait.PNG',
    href:'https://renickbell.net/jrhigh/2022exploring/doku.php?id=about-space_invaders',
    description:'hi,hi,hi',
},{
    imageSrc:'./steve-color-scrolling.png',
    portraitSrc:'./homework-portrait.PNG',
    href:'https://renickbell.net/jrhigh/2022exploring/doku.php?id=my_planet',
    description:'hio,hio,hio',
},{
    imageSrc:'./steve-drawing-fractals.png',
    portraitSrc:'./circuits-portrait.jpg',
    href:'https://renickbell.net/jrhigh/2022exploring/doku.php?id=agriculture',
    description:'hiv,hiv,hiv',
}]
*/

let info=[{
    imageSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=image-carosel-photography-walk.png',
    portraitSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=portrait-image-carosel-photography-walk.png',
    href:'https://renickbell.net/ed/2023light/doku.php?id=photography-walk',
    description:'about our students',
},{
    imageSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=image-carosel-retail-spaces.png',
    portraitSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=portrait-image-carosel-retail-spaces.png',
    href:'https://renickbell.net/ed/2023light/doku.php?id=retail-spaces',
    description:'arduino',
},{
    imageSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=image-carosel-social-experiment-design.png',
    portraitSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=portrait-image-carosel-social-experiemnt-design.png',
    href:'https://renickbell.net/ed/2023light/doku.php?id=experiment-design',
    description:'arduino',
},{
    imageSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=image-carosel-desing-for-influence.png',
    portraitSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=portrait-image-carosel-desgin-for-influence.png',
    href:'https://renickbell.net/ed/2023light/doku.php?id=design-influence',
    description:'arduino',
},{
    imageSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=image-carosel-buildng-uv-sensor.png',
    portraitSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=portrait-image-carosel-building-uv-sensors.png',
    href:'https://renickbell.net/ed/2023light/doku.php?id=uv-sensors',
    description:'arduino',
},{
    imageSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=image-carosel-landscape-art-photography.png',
    portraitSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=portrait-image-carosel-art-photography.png',
    href:'https://renickbell.net/ed/2023light/doku.php?id=photos-art',
    description:'arduino',
},{
    imageSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=image-carosel-landscape-generating-photos-with-code.png',
    portraitSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=portrait-image-carosel-jimp.png',
    href:'https://renickbell.net/ed/2023light/doku.php?id=generative-photos',
    description:'arduino',
},{
    imageSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=image-carosel-illustrating-light-with-code.png',
    portraitSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=portrait-image-carosel-illustrating-light-with-code.png',
    href:'https://renickbell.net/ed/2022service/doku.php?id=arduino',
    description:'arduino',
}]


let carosels=[]

let browserZoomLevel;

//Make imagecaorsel class and to move use assign element to css class and use transition, transform translate.
class ImageCarosel{
    constructor (sizePoint,info,domLocation,caroselLocation){
        this.domLocation=domLocation
        this.type=domLocation
        if (sizePoint=='auto'){
            sizePoint=new Point(window.innerWidth-10,window.innerHeight-10)
        }
        if (domLocation=='main'){
            this.carosel=document.createElement('div')
            this.carosel.style.position='relative'
            this.carosel.style.left='0px'
            this.carosel.style.top='0px'
            this.carosel.style.width=sizePoint.x+'px'
            this.carosel.style.height=sizePoint.y+'px'
	    this.caroselLocation=new Point(0,0)
        }
        else if (domLocation=='doku'){
            //document.getElementById('dokuwiki__content').appendChild(this.carosel)
            document.getElementById('design_and_change_for_assistance_and_pressure_alleviation_of_the_elderly_stressed_and_general_public_計畫如何做出改變來協助年長者及社會大眾紓解壓力').appendChild(this.carosel)
        }
        else{
            this.carosel=document.createElement('div')
            this.carosel.style.left=caroselLocation.x
            this.carosel.style.top=caroselLocation.y
            this.carosel.style.width=sizePoint.x
            this.carosel.style.height=sizePoint.y
	    this.caroselLocation=caroselLocation
        }
        this.carosel.className='imageCarosel'
        this.carosel.ondragstart=(()=>{return false})
        this.carosel.ondrop=(()=>{return false})
        if (domLocation=='body' || domLocation==undefined || domLocation=='main'){
            document.body.appendChild(this.carosel)
        }
        else if (domLocation=='doku'){
            //document.getElementById('dokuwiki__content').appendChild(this.carosel)
            document.getElementById('design_and_change_for_assistance_and_pressure_alleviation_of_the_elderly_stressed_and_general_public_計畫如何做出改變來協助年長者及社會大眾紓解壓力').appendChild(this.carosel)
	}
        else{
            document.getElementById(domLocation).appendChild(this.carosel)
        }
        this.info=info
        this.currentImage=0
        this.mainImg1=document.createElement('img')
        this.mainImg1.src=info[0].imageSrc
        if (deviceOrientation=='landscape'){
            this.mainImg1.href=this.info[1].href
        }
        else{
            this.mainImg1.href=this.info[1].portraitSrc
        }
        this.mainImg1.className='mainImg'
        this.mainImg2=document.createElement('img')
        this.mainImg2.href=this.info[0].href
        if (deviceOrientation=='landscape'){
            this.mainImg2.src=info[1].imageSrc
        }
        else{
            this.mainImg2.src=this.info[0].portraitSrc
        }
        this.mainImg2.className='mainImg'
        if (domLocation=='main' || domLocation=='doku'){
            this.mainImg1.style.width='100%'
            this.mainImg1.style.height='auto'
            this.mainImg2.style.width='100%'
            this.mainImg2.style.height='auto'
        }
        this.carosel.appendChild(this.mainImg1)
        this.carosel.appendChild(this.mainImg2)
        this.mainImg1.style.position='absolute'
        this.mainImg2.style.position='absolute'
        this.centeredImg=this.mainImg2
        this.caroselSize=sizePoint
        setTimeout(()=>{
            this.correctCenteredImgPosition=new Point(this.carosel.style.left.slice(0,this.carosel.style.left.length-2),this.carosel.style.top.slice(0,this.carosel.style.left.length-2))
        },100)
        this.imageCaroselNumber=carosels.length
        this.queue=[]
    }
    createArrows(){
        /*
        this.left=document.createElement('button')
        this.left.className='left'
        this.left.onclick= (()=>{this.switchLeft()})
        this.left.style.position='absolute'
        this.left.style.left='0%'
        this.left.style.top='50%'
        this.left.textContent='⇦'
        this.left.style.width=browserZoomLevel/2+'px'
        this.left.style.height=browserZoomLevel/2+'px'
        this.left.style.fontSize=browserZoomLevel/2+'px'
        */
        this.right=document.createElement('button')
        this.right.className='right'
        //this.right.onclick=(()=>{this.sequenceActions(this.quickRight)})
        //this.right.onclick=(()=>{this.quickRight()})
        this.right.onclick=(()=>{this.sequenceActions('quickRight')})
        this.right.style.position='absolute'
        this.right.style.right='0%'
        this.right.style.top='50%'
        let arrowSizes=browserZoomLevel/2
        if (arrowSizes<84 && deviceOrientation=='landscape'){
            arrowSizes=84
        }
        else if (arrowSizes>100 && deviceOrientation=='landscape'){
            arrowSizes=100
        }
        else if (deviceOrientation=='portrait'){
            console.log('acknowledged')
            arrowSizes=browserZoomLevel/6
        }
        this.right.style.width=arrowSizes+'px'
        this.right.style.height=arrowSizes+'px'
        this.right.style.fontSize=arrowSizes+'px'
        this.right.textContent='⇨'
        this.left=this.right.cloneNode(true)
        //this.left.onclick=(()=>{this.quickLeft()})
        //this.left.onclick= (()=>{this.sequenceActions(this.quickLeft)})
        this.left.onclick=(()=>{this.sequenceActions('quickLeft')})
        this.left.style.position='absolute'
        this.left.style.left='0%'
        this.left.style.top='50%'
        this.left.className='left'
        /*
        this.mainImg1.style.position='absolute'
        this.mainImg2.style.position='absolute'
        let arrowSizes=browserZoomLevel/2
        this.mainImg1.style.width=this.mainImg1.getBoundingClientRect().width-arrowSizes-100+'px'
        this.mainImg1.style.height=this.mainImg1.getBoundingClientRect().height-arrowSizes-100+'px'
        this.mainImg2.style.width=this.mainImg2.getBoundingClientRect().width-arrowSizes-100+'px'
        this.mainImg2.style.height=this.mainImg2.getBoundingClientRect().height-arrowSizes-100+'px'
        this.mainImg1.style.left=this.mainImg1.getBoundingClientRect().x+arrowSizes+'px'
        this.mainImg2.style.left=this.mainImg1.getBoundingClientRect().x+arrowSizes+'px'
        this.mainImg1.style.position='auto'
        this.mainImg2.style.position='auto'
        */
        this.correctCenteredImgPosition=new Point(this.centeredImg.getBoundingClientRect().x,this.centeredImg.getBoundingClientRect().y)
        this.carosel.insertBefore(this.right,this.mainImg2)
        this.carosel.insertBefore(this.left,this.mainImg1)
    }
    checkForNormalMovements (){
        if (this.queue.includes('switchRight') ||this.queue.includes('switchLeft')){
            return true
        }
        else {
            return false
        }
    }
    sequenceActions (action){
        let beforeLength=this.queue.length
        console.log(action)
        if (action=='quickLeft' && this.queue.length>0 && this.checkForNormalMovements()==true || action=='quickRight' && this.queue.length>0 && this.checkForNormalMovements()==true){
            this.cutQueue(action)
        }
        else{
            this.queue.push(action)
        }
        if (this.queue.length==1 ){
            sequencingSwitchingImages(this.imageCaroselNumber)
        }
    }
    cutQueue (action){
        this.queue.forEach((x,i)=>{
            if (x!='quickRight'&& x!='quickLeft'){
                this.queue=[...safeSplice(this.queue,this.queue.length-i-1,i),action,...safeSplice(this.queue,i,0)]
            console.log('trying',this.queue)
            }
        })
    }
    quickRight (){
        console.log('quick right')
        this.currentImage-=1
        if (this.currentImage<0){
            this.currentImage=this.info.length-1
        }
        if (this.centeredImg==this.mainImg1){
            this.changeContent(this.mainImg2)
            setTimeout(()=>{
                this.mainImg2.style.transitionProperty='none'
                this.mainImg2.style.left=this.correctCenteredImgPosition.x-this.mainImg2.getBoundingClientRect().width+'px'
                this.centeredImg.style.left=this.carosel.getBoundingClientRect().right+this.centeredImg.getBoundingClientRect().width+'px'
                this.mainImg2.style.transitionProperty='left'
                this.mainImg2.style.left=this.correctCenteredImgPosition.x+'px'
                this.centeredImg=this.mainImg2
            },100)
        }
        else{
            this.changeContent(this.mainImg1)
            setTimeout(()=>{
                this.mainImg1.style.transitionProperty='none'
                this.mainImg1.style.left=this.correctCenteredImgPosition.x-this.mainImg1.getBoundingClientRect().width+'px'
            this.centeredImg.style.left=this.carosel.getBoundingClientRect().right+this.centeredImg.getBoundingClientRect().width+'px'
                this.mainImg1.style.transitionProperty='left'
                this.mainImg1.style.left=this.correctCenteredImgPosition.x+'px'
                this.centeredImg=this.mainImg1
            },100)
        }
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(true)
            },10*35)
        })
    }
    quickLeft (){
        console.log('quick left')
        this.currentImage-=1
        if (this.currentImage<0){
            this.currentImage=this.info.length-1
        }
        if (this.centeredImg==this.mainImg1){
            this.changeContent(this.mainImg2)
            this.mainImg2.style.transitionProperty='none'
            this.mainImg2.style.left=this.correctCenteredImgPosition.x+this.mainImg2.getBoundingClientRect().width+'px'
            this.centeredImg.style.left=this.correctCenteredImgPosition.x-this.centeredImg.getBoundingClientRect().width+'px'
            this.mainImg2.style.transitionProperty='left'
            this.mainImg2.style.left=this.correctCenteredImgPosition.x+'px'
            this.centeredImg=this.mainImg2
        }
        else{
            this.changeContent(this.mainImg1)
            this.mainImg1.style.transitionProperty='none'
            this.mainImg1.style.left=this.correctCenteredImgPosition.x+this.mainImg1.getBoundingClientRect().width+'px'
            this.centeredImg.style.left=this.correctCenteredImgPosition.x-this.centeredImg.getBoundingClientRect().width+'px'
            this.mainImg1.style.transitionProperty='left'
            this.mainImg1.style.left=this.correctCenteredImgPosition.x+'px'
            this.centeredImg=this.mainImg1
        }
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(true)
            },10*35)
        })
    }
    switchRight (){
        console.log('switch right')
        this.currentImage-=1
        if (this.currentImage<0){
            this.currentImage=this.info.length-1
        }
        if (this.centeredImg==this.mainImg1){
            this.changeContent(this.mainImg2)
            setTimeout(()=>{
                this.mainImg2.style.transitionProperty='none'
                this.mainImg2.style.left=this.correctCenteredImgPosition.x-this.mainImg2.getBoundingClientRect().width+'px'
                this.centeredImg.style.left=this.carosel.getBoundingClientRect().right+this.centeredImg.getBoundingClientRect().width+'px'
                this.mainImg2.style.transitionProperty='left'
                this.mainImg2.style.left=this.correctCenteredImgPosition.x+'px'
                this.centeredImg=this.mainImg2
            },100)
        }
        else{
            this.changeContent(this.mainImg1)
            setTimeout(()=>{
                this.mainImg1.style.transitionProperty='none'
                this.mainImg1.style.left=this.correctCenteredImgPosition.x-this.mainImg1.getBoundingClientRect().width+'px'
            this.centeredImg.style.left=this.carosel.getBoundingClientRect().right+this.centeredImg.getBoundingClientRect().width+'px'
                this.mainImg1.style.transitionProperty='left'
                this.mainImg1.style.left=this.correctCenteredImgPosition.x+'px'
                this.centeredImg=this.mainImg1
            },100)
        }
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve(true)
            },10*35)
        })
    }
    handleClicks (e){
        console.log(e.target,this.centeredImg)
        if (e.target==this.centeredImg){
            window.open(this.centeredImg.href)
        }
    }
    autoScroller (){
        this.scrollInterval=setInterval(()=>{
            if (this.queue.length==0 && imageAutoSwitchCooldown==false){
                imageAutoSwitchCooldown=true
                resetImageSwitchCooldown()
                this.sequenceActions('switchRight')
            }
        },8000)
    }
    imageJumpAnimationRight (amount){
        this.currentImage-=amount
        if (this.currentImage<0){
            this.currentImage=this.info.length+this.currentImage
        }
        this.centeredImg.style.left=this.carosel.getBoundingClientRect().right*3+'px'
        let jumpInterval=setInterval(()=>{
            this.centeredImg.style.left=this.correctCenteredImgPosition.x+'px'
        },amount/0.3)
        setTimeout(()=>{
            clearInterval(jumpInterval)
            this.changeContent(this.centeredImg)
        },amount/0.6)
    }
    textDesciption (){
        this.infoText=document.createElement('div')
        this.infoText.style.backgroundColor='grey'
        this.infoText.style.textAlign = "right";
        this.infoText.style.font='25px'
        this.infoText.style.color='black'
        this.infoText.style.wordWrap='break-word'
        //https://stackoverflow.com/a/23842462/19515980
        this.infoText.style.overflow='auto'
        this.mainImg1.style.height=this.carosel.getBoundingClientRect().height-100+'px'
        this.mainImg2.style.height=this.carosel.getBoundingClientRect().height-100+'px'
        this.infoText.textContent='wgwgwegwegwegweg .'
        this.infoText.style.position='absolute'
        this.infoText.style.top=this.carosel.getBoundingClientRect().height-100+'px'
        this.infoText.style.left='0px'
        this.infoText.style.width=this.carosel.getBoundingClientRect().width-3+'px'
        this.infoText.style.height='100px';
        this.carosel.appendChild(this.infoText)
    }
    changeContent (toChangeTo){
            toChangeTo.href=this.info[this.currentImage].href
            if (deviceOrientation=='landscape'){
                toChangeTo.src=this.info[this.currentImage].imageSrc
            }
            else{
                toChangeTo.src=this.info[this.currentImage].portraitSrc
            }
        }
     addSpaceAbove (amount){
         for (let i = 0; i < amount; i++) {
             this.carosel.parentElement.insertBefore(document.createElement('br'),this.carosel)
         }
    }
}

function loadImg (){
    let imageElemForLoading= new Image()
    if (deviceOrientation == ' portrait'){
        info.forEach(x=>{
            imageElemForLoading.src=x.portraitSrc
        })
    }
    else{
        info.forEach(x=>{
            imageElemForLoading.src=x.imageSrc
        })
    }
}


function manuallyMoveHtmlToRight (elem,startX,moveBy,times,counter){
    if (counter==undefined){
        counter=1}
    elem.style.left=startX+moveBy*counter+'px'
    if (counter<times){
        setTimeout(()=>{
            manuallyMoveHtmlToRight(elem,startX,moveBy,times,counter+1)},14)}
}


function manuallyMoveHtmlToLeft (elem,startX,moveBy,times,counter){
    if (counter==undefined){
        counter=1}
    elem.style.left=startX-moveBy*counter+'px'
    if (counter<times){
        setTimeout(()=>{
            manuallyMoveHtmlToLeft(elem,startX,moveBy,times,counter+1)},14)}
}

/*
async function sequencingSwitchingImages (imageCaroselNumber){
   await carosels[imageCaroselNumber][carosels[imageCaroselNumber][queue][0]]()
   carosels[imageCaroselNumber][queue]=safeSplice(carosels[imageCaroselNumber][queue],1,0)
    if (carosels[imageCaroselNumber][queue].length>0){
        sequencingSwitchingImages(imageCaroselNumber)
    }
}

async function sequencingSwitchingImages (imageCaroselNumber){
   let currentImageCarosel=carosels[imageCaroselNumber]
   await currentImageCarosel[currentImageCarosel.queue[0]]()
   //document.getElementById('console_output').innerHTML+='<br><br>'+currentImageCarosel.queue[0]
   currentImageCarosel.queue=safeSplice(currentImageCarosel.queue,1,0)
    if (currentImageCarosel.queue.length>0){
        sequencingSwitchingImages(imageCaroselNumber)
    }
}

*/

let imageAutoSwitchCooldown=false
async function sequencingSwitchingImages (imageCaroselNumber){
   imageAutoSwitchCooldown=true
   let currentImageCarosel=carosels[imageCaroselNumber]
   await currentImageCarosel[currentImageCarosel.queue[0]]()
   currentImageCarosel.queue=safeSplice(currentImageCarosel.queue,1,0)
    if (currentImageCarosel.queue.length>0){
        sequencingSwitchingImages(imageCaroselNumber)
        resetImageSwitchCooldown(currentImageCarosel)
    }
}

function resetImageSwitchCooldown (currentImageCarosel){
    setTimeout(()=>{
        if (currentImageCarosel.queue.length==0){
            imageAutoSwitchCooldown=false
        }
        else {
            setTimeout(()=>{
                resetImageSwitchCooldown(currentImageCarosel)
            },5000)
        }
    },3000)
}

document.body.style.transitionProperty = 'opacity'
document.body.style.transitionDuration = '4s'
let higs;
window.addEventListener("load", function(e){
    document.body.style.opacity = '1'
      document.getElementsByClassName('level4')[1].style.opacity = '0'
      document.getElementsByClassName('level4')[1].style.transitionProperty = 'opacity'
      document.getElementsByClassName('level4')[1].style.transitionDuration = '5s'
      //document.getElementsByClassName('level4')[0].style.opacity = '1'
     browserZoomLevel = Math.round(window.devicePixelRatio * 100);
if (window.innerWidth<window.innerHeight){
    console.log('portrait mode')
    deviceOrientation='portrait'
}
else{
    console.log('landscape mode')
    deviceOrientation='landscape'
}
loadImg()
console.log('loaded')
//higs=new ImageCarosel(new Point(1920,1000),info,'main')
//hhigs=new ImageCarosel('auto',info,'main')
higs=new ImageCarosel('doku',info,'main')
higs.createArrows()
carosels.push(higs)
    document.getElementById('a_presentation_of_work_by_a_group_of_students_in_experimental_education_in_taipei_taiwan').appendChild(higs.carosel)
        higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+'px'
//higs.sequenceActions(higs.quickRight)
higs.quickRight()
//higs.autoScroller()
    setTimeout(()=>{
           //higs.carosel.style.width=document.getElementsByClassName('permalink')[0].getBoundingClientRect().right-higs.carosel.getBoundingClientRect().x+'px';
      higs.carosel.style.width='80%'
        higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+'px'
           // higs.carosel.style.width='1600px'
            //higs.carosel.style.height='400px'
            higs.caroselLocation=new Point(0,900)
              document.getElementsByClassName('level4')[1].style.opacity = '1'
            setTimeout(()=>{
                higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+'px'
                higs.addSpaceAbove(2)
                setTimeout(() => {
                    higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+'px'
                }, 1000)
            },700)
    },400)
})

function getDeviceType () {
  const ua = navigator.userAgent;
  if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
    return "tablet";
  }
  if (
    /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
      ua
    )
  ) {
    return "mobile";
  }
  return "desktop";
};

let deviceType=getDeviceType()

document.addEventListener("click", e => {
    if (e.target.href!=undefined && e.target.className=='mainImg'){
        window.open(e.target.href)
    }
})

let lastDeltaX=0
let lastDeltaY=0
document.addEventListener("wheel", e => {
    if (e.wheelDelta<0 && e.deltaY==0){
        checkIfSwitchImageLeft(e.target)
    }
    else if (e.deltaX>lastDeltaX && e.deltaY==0){
        checkIfSwitchImageRight(e.target)
    }
    lastDeltaX=JSON.parse(JSON.stringify(e.deltaX))
    lastDeltaY=JSON.parse(JSON.stringify(e.deltaY))
})

let mouse = new Point(0, 0)
let lastMousePosition=new Point(0,0)
let scrollPosition=new Point(0,0)

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)
}))

let switchImageCooldown=false
if (deviceType!='mobile'){
    document.addEventListener('pointermove', ((e) => {
        mouse.x = e.pageX
        mouse.y = e.pageY
        if (mouse.x>=window.innerWidth-2 && switchImageCooldown==false){
            checkIfSwitchImageRight()
        }
        else if (mouse.x<2 && switchImageCooldown==false){
            checkIfSwitchImageLeft()
        }
    }))
}

if (deviceType!='mobile'){
    window.addEventListener("resize", function(e){
        if (window.innerWidth<window.innerHeight){
            //document.location.reload()
                console.log('Resize detected: portrait mode')
                deviceOrientation='portrait'
                higs.sequenceActions('quickRight')
                setTimeout(()=>{
                    higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px'
                },300)
            }
            //adaptToOrientationChange()
        else{
            //document.location.reload()
            console.log('Resize detected: landscape mode')
                deviceOrientation='landscape'
                higs.sequenceActions('quickRight')
               setTimeout(()=>{
                    higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px'
                },200)
            //adaptToOrientationChange()
        }
    })
}
else{
    screen.orientation.onchange=(()=>{
        if (screen.orientation.type == 'portrait-primary' || screen.orientation.type == 'portrait-secondary'){
            //document.location.reload()
                console.log('Resize detected: portrait mode')
                deviceOrientation='portrait'
                higs.sequenceActions('quickRight')
                setTimeout(()=>{
                    higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px'
                },300)
            }
            //adaptToOrientationChange()
        else{
            //document.location.reload()
            console.log('Resize detected: landscape mode')
                deviceOrientation='landscape'
                higs.sequenceActions('quickRight')
               setTimeout(()=>{
                    higs.carosel.style.height=higs.centeredImg.getBoundingClientRect().height+'px'
                },200)
            //adaptToOrientationChange()
        }
    })
}

//Screen orientation on mobile devies: https://stackoverflow.com/a/5499030/19515980
//screen.orientation: https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
//screenorientation API: https://developer.mozilla.org/en-US/docs/Web/API/ScreenOrientation



function adaptToOrientationChange (){
    let returnCarosels=[]
    carosels.forEach(x=>{
        returnCarosels.push(new ImageCarosel (x.caroselSize,x.info,x.type,x.caroselLocation))
    })
    removeAllCarosels()
    carosels=returnCarosels
}

function removeAllCarosels (){
    let caroselElems=document.getElementsByClassName('imageCarosel')
    for (let i = 0; i < caroselElems.length; i++) {
        caroselElems[i].remove()
    }
}

function checkIfSwitchImageRight (target){
    setTimeout(()=>{
        if (target !=undefined && switchImageCooldown==false){
            switchImageCooldown=true
            carosels.forEach(x=>{
                if (x.mainImg1==target || x.mainImg2==target){
                    x.sequenceActions('quickRight')
                }
            })
        setTimeout(()=>{
                switchImageCooldown=false},700)
        }
        if (mouse.x>=window.innerWidth-2 && switchImageCooldown==false){
            switchImageCooldown=true
            carosels.forEach(x=>{
                x.sequenceActions('quickRight')
            })
        setTimeout(()=>{
                switchImageCooldown=false},700)
        }
    },200)
}

function checkIfSwitchImageLeft (target){
    setTimeout(()=>{
        if (target !=undefined && switchImageCooldown==false){
            switchImageCooldown=true
            carosels.forEach(x=>{
                if (x.mainImg1==target || x.mainImg2==target){
                    x.sequenceActions('quickLeft')
                }
            })
        setTimeout(()=>{
                switchImageCooldown=false},700)
        }
        else if (mouse.x<2 && switchImageCooldown==false){
            switchImageCooldown=true
            carosels.forEach(x=>{
                x.sequenceActions('quickLeft')
            })
        setTimeout(()=>{
                switchImageCooldown=false},700)
        }
    },200)
}
function createWikiSpacing (){
    for (let i = 0; i < (1/browserZoomLevel)*3000; i++) {     document.getElementById('design_and_change_for_assistance_and_pressure_alleviation_of_the_elderly_stressed_and_general_public_計畫如何做出改變來協助年長者及社會大眾紓解壓力').appendChild(document.createElement('br'))
    }
}
//https://thewebdev.info/2021/03/10/how-to-detect-page-zoom-levels-in-modern-browsers/
//open link: https://stackoverflow.com/questions/13071967/adding-an-onclick-function-to-go-to-url-in-javascript
//https://www.quackit.com/javascript/javascript_refresh_page.cfm#:~:text=In%20JavaScript%2C%20you%20refresh%20the,server%20(instead%20of%20cache).
//For wrap text help: https://stackoverflow.com/a/23842462/19515980
//swiping code by: https://stackoverflow.com/a/23230280/19515980
//UserAgent by: Abdessalam Benharira: https://abdessalam.dev/blog/detect-device-type-javascript/
//STEVE CODE:


/*
let startPoint;
window.addEventListener("touchstart", function(e){
    console.log('start',e.touches[0].clientX)
    startPoint=JSON.parse(JSON.stringify(new Point(e.touches[0].clientX,e.touches[0].clientY)))
})

window.addEventListener("touchend", function(e){
    console.log('end',e)
    if (startPoint.x<e.clientX){
        console.log('swiped left',e.clientX)
        checkIfSwitchImageLeft(e.target)
    }
    else {
        console.log('swiped right')
        checkIfSwitchImageRight(e.target)
        }
})
*/

window.addEventListener('touchstart', handleTouchStart, false);
window.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function getTouches(evt) {
  return evt.touches ||             // browser API
         evt.originalEvent.touches; // jQuery
}

function handleTouchStart(evt) {
    const firstTouch = getTouches(evt)[0];
    xDown = firstTouch.clientX;
    yDown = firstTouch.clientY;
};

let swipeCooldown=false
function handleTouchMove(evt) {
console.log('swipe 1')
    if ( ! xDown || ! yDown ) {
        return;
    }
console.log('swipe 2')
    var xUp = evt.touches[0].clientX;
    var yUp = evt.touches[0].clientY;

    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;

    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
        if ( xDiff > 0 && swipeCooldown==false) {
            evt.preventDefault()
            console.log('swiped left')
            swipeCooldown=true
            checkIfSwitchImageLeft(evt.target)
            setTimeout(()=>{
                swipeCooldown=false
            },500)
        }
        else if (swipeCooldown==false) {
            evt.preventDefault()
            console.log('swiped right')
            swipeCooldown=true
            checkIfSwitchImageRight(evt.target)
            setTimeout(()=>{
                swipeCooldown=false
            },500)
        }
    } else {
        if ( yDiff > 0 ) {
        } else {
        }
    }
    /* reset values */
    xDown = null;
    yDown = null;
};

//swiping code by: https://stackoverflow.com/a/23230280/19515980

</script>
</html>


<html>
<body onload="removeBootstrapStyle()">
   <script>
   function redirectPage(url) {
    window.location.href = url;
}

  function removeBootstrapStyle(){
    [...document.getElementsByClassName("button btn")].forEach(e => e.className = "button");
    [...document.getElementsByClassName("title page-header pb-3 mb-4 mt-5")].forEach(f => f.className = "title");
  }
</script>
    <style>
        .button {
            width: 400px;
            height: 400px;
            background-color: none;
            position: relative;
            overflow: hidden;
            margin: 3px;
        }

        @media only screen and (max-width: 767px) {
            .button {
                width: 79%;
                height: 79%;
                background-color: none;
                position: relative;
                overflow: hidden;
                margin: 3px;
            }
            .title {
            font-family:'Arial', sans-serif;
            position: absolute;
            top:  1.7%;
            left: 10%;
            font-size: 10%;
            color: white;
            font-weight:650;
            }
        .description {
            line-height: 1.2;
            position: absolute;
            top: 150%;
            left: 10%;
            font-size: 20%;
            color: white;
            transition: top 0.45s ease-in-out;
            overflow-wrap: normal;
            word-break: normal;
            max-width: 330px;
        }

        }


        .image {
            width: 100%;
            height: 100%;
        }

        .overlay {
            width: 100%;
            height: 50%;
            background-color: black;
            position: absolute;
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 0.45s;
            opacity: 0.8;
        }

        .overlay2 {
            width: 100%;
            height: 50%;
            top: 50%;
            background-color: black;
            position: absolute;
            transform-origin: right;
            transform: scaleX(0);
            transition: transform 0.45s;
            opacity: 0.8;
        }

        .button:hover {
            cursor: pointer;
        }

        .button:hover .overlay {
            transform: scaleX(1);
        }

        .button:hover .overlay2 {
            transform: scaleX(1);
        }

        .title {
            font-family:'Arial', sans-serif;
            position: absolute;
            top:  1.7%;
            left: 10%;
            font-size: 40px;
            color: white;
            font-weight:650;
        }

        .description {
            line-height: 1.2;
            position: absolute;
            top: 150%;
            left: 10%;
            font-size: 21px;
            color: white;
            transition: top 0.45s ease-in-out;
            overflow-wrap: normal;
            word-break: normal;
            max-width: 330px;
        }

        .button:hover .description {
            top: 25%
        }

        .button:hover .title {
            animation: glow 0.5s ease-in;
            animation-delay: 0.2s;
            animation-fill-mode: forwards;
        }

        .button {
            float: left;
            font-family: Arial, Helvetica, sans-serif;
        }

        @-webkit-keyframes glow {
            from {
                text-shadow: 0 0 0px rgb(170, 170, 170);
            }

            to {
                text-shadow: 0 0 20px rgb(170, 170, 170), 0 0 30px rgb(170, 170, 170), 0 0 40px rgb(170, 170, 170);
            }
        }
    </style>

    <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=light')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Light</h1>
        <p class="description">Light makes apparent what our most often relied upon sense can observe. The absence of light hides what might otherwise be obvious. In addition to observable light, light which is beyond the scope of normal human vision also affects and is utilized by us on a daily basis.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-light.jpg">
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=perception')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Perception</h1>
        <p class="description">The process of perception starts with sensory input. The class learned about our five main senses, and other senses that that science has identified. We learned about how sensory input might be ignored or misreceived based on different factors.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-perception.jpg">
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=reality')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Reality</h1>
        <p class="description">We often define “reality” to refer to the state of existence or the world as it is, independent of subjective perception or interpretation. At the same time, we can’t help but wonder if reality can exist outside of observation and experience of an observer.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-reality.jpg">
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=about-website')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">This Website</h1>
        <p class="description">What is “real”, what is “reality”? How can we be sure that we see the world as it really is, and afterwards are making decisions and conducting actions based on logical thinking and reliable facts? The main topic of this period deals with reality, light, perception, and shaping behavior through shaping perception.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-this-website.jpg">
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=about-students')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Our Students</h1>
        <p class="description">This education program currently involves a small group of students. Each is unique and talented in their own way, with different strengths and contributions to our team. We are incredibly proud of the growth that each has made and see their potential to become great achievers in varying fields in the future.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-our-students.jpg">
    </div>
    <div onclick="redirectPage('https://renickbell.net/ed/2023light/doku.php?id=photos-art')" class="button">
        <div class="overlay"></div>
        <div class="overlay2"></div>
        <h1 class="title">Art Photography</h1>
        <p class="description">This semester we studied many things about photography. Students learned how to control exposure, how to compose their photos, and how to use accessories like lighting and tripods. They practiced taking different types of photos, including landscapes and portraits.</p>
        <img class="image" src="https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=button-art-photography.jpg">
    </div>
</body>

</html>