import { loadEvents } from './events.js'
import { loadStatus } from './status.js'
import { scanlinesAnimation } from './cuteTexture.js'
import { noiseAnimation } from './cuteTexture.js'

loadEvents();
loadStatus();

// =================================== background texture
 let textureVideo = document.querySelectorAll('main > #texture');

for (let video of textureVideo){
  video.style.visibility = 'collapse';
}

let textureCanvas = document.querySelector('main > canvas');
textureCanvas.style.visibility = 'visible';

console.log(textureCanvas);

//console.log(textureVideo)

scanlinesAnimation();
// ======================================== stops here !


let target = document.querySelector('#posterWindow');

let startTarget = target.querySelector('.posterTitle');

console.log('selected target :', startTarget);

let startX, startY;
let clicked = false;

startTarget.addEventListener('mousedown', (event) => {
  startX = event.pageX;
  startY = event.pageY;
  clicked = true;
  console.log('clicking...')
})

startTarget.addEventListener('touchstart', (event) => {
  startX = event.pageX;
  startY = event.pageY;
  clicked = true;
  console.log('touching...')
})

document.addEventListener('mousemove', (event) => {
  if(clicked){
    console.log('moving...')
    let currentX = event.pageX;
    let currentY = event.pageY;
    let moveX = target.offsetLeft + currentX - startX;
    target.style.left =  moveX + 'px';
    let moveY = target.offsetTop + currentY - startY;
    target.style.top = moveY + 'px';
    startX = currentX;
    startY = currentY;
  }
});

document.addEventListener('touchmove', (event) => {
  if(clicked){
    console.log('moving...')
    let currentX = event.pageX;
    let currentY = event.pageY;
    let moveX = target.offsetLeft + currentX - startX;
    target.style.left =  moveX + 'px';
    let moveY = target.offsetTop + currentY - startY;
    target.style.top = moveY + 'px';
    startX = currentX;
    startY = currentY;
  }
});

document.addEventListener('mouseup', () => {
  console.log('STOP !')
  clicked = false;
})

document.addEventListener('touchend', () => {
  console.log('STOP !')
  clicked = false;
})