steve-wang-image-carosel-tests [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>
<style>
    body {
        stylemargin: 0;
        stylepadding: 0;
        style/*font: 75%/120% sans-serif;*/
    }

.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-placeholder1.png',
    portraitSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=image-carosel-placeholder1-potrait.png',
    href:'https://renickbell.net/ed/2022service/doku.php?id=about-students',
    description:'about our students',
},{
    imageSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=image-carosel-placeholder2.png',
    portraitSrc:'https://renickbell.net/ed/2023light/lib/exe/fetch.php?media=image-carosel-placeholder2-potrait.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)
}

let higs; 
window.addEventListener("load", function(e){
     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)
//higs.sequenceActions(higs.quickRight)
higs.quickRight()
//higs.autoScroller()
/*
    setTimeout(()=>{
        if (deviceOrientation=='landscape'){
            higs.carosel.style.height=window.innerHeight+'px';
            higs.carosel.style.width=window.innerWidth-100+'px';      
            document.getElementById('design_and_change_for_assistance_and_pressure_alleviation_of_the_elderly_stressed_and_general_public_計畫如何做出改變來協助年長者及社會大眾紓解壓力').appendChild(higs.carosel)
            higs.caroselLocation=new Point(0,300)
        }
        else{
            higs.carosel.style.height=window.innerHeight+'px';
            higs.carosel.style.width=window.innerWidth+'px';      
            document.getElementById('design_and_change_for_assistance_and_pressure_alleviation_of_the_elderly_stressed_and_general_public_計畫如何做出改變來協助年長者及社會大眾紓解壓力').appendChild(higs.carosel)
            higs.caroselLocation=new Point(100,300)
        }
    },400)
    */
    setTimeout(()=>{
           //higs.carosel.style.width=document.getElementsByClassName('permalink')[0].getBoundingClientRect().right-higs.carosel.getBoundingClientRect().x+'px';      
      higs.carosel.style.width='80%'
           // higs.carosel.style.width='1600px'
            //higs.carosel.style.height='400px'
            document.getElementById('a_presentation_of_work_by_a_group_of_students_in_experimental_education_in_taipei_taiwan').appendChild(higs.carosel)
            higs.caroselLocation=new Point(0,900)
            setTimeout(()=>{
                higs.addSpaceAbove(2)
                //higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+'px';
           // higs.carosel.style.height='800px'
                higs.carosel.style.height=higs.mainImg1.getBoundingClientRect().height+'px'
            },100)
    },300)
})

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>