var openHelp = document.getElementById("helpButton");
openHelp.onclick = function() {
    Swal.fire({
        title: 'Οδηγίες',
        html: `Επιλύουμε το παζλ που απεικονίζει έναν καταρράκτη.<br><br>Σέρνουμε τα κομμάτια στην σωστή τους θέση. Όταν ένα κομμάτι τοποθετηθεί σε σωστή θέση τότε κλειδώνεται.<br><br>`,
        showConfirmButton: false,
        showCloseButton: true,
        heightAuto: false
    })
}

const canvas = document.getElementById('cvs');
const ctx = canvas.getContext('2d');

let start = 0;
let img = new Image(), pieces = [], rows, cols, pieceW, pieceH;
let dragging = null, offsetX=0, offsetY=0;


function setup() {
    rows = 3;
    cols = 5;
    canvas.width = img.width;
    canvas.style.width = "72%";
    canvas.height = img.height;
    pieceW = canvas.width / cols;
    pieceH = canvas.height / rows;
    pieces = [];
  
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        let px = Math.random() * (canvas.width - pieceW);
        let py = Math.random() * (canvas.height - pieceH);
        pieces.push({
          c, r,
          x: px,
          y: py,
          solved: false
        });
      }
    }
    draw();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  
    for (let p of pieces.filter(p => p.solved)) {
      ctx.globalAlpha = 1;
      drawPiece(p);
    }
  
    for (let p of pieces.filter(p => !p.solved)) {
      ctx.globalAlpha = 0.8;
      drawPiece(p);
    }
  
    ctx.globalAlpha = 1.0;
  }
  
  function drawPiece(p) {
    ctx.drawImage(
      img,
      p.c * img.width / cols, p.r * img.height / rows,
      img.width / cols, img.height / rows,
      p.x, p.y, pieceW, pieceH
    );
  }
  
  function hit(x, y) {
    for (let i = pieces.length - 1; i >= 0; i--) {
      const p = pieces[i];
      if (!p.solved &&
          x > p.x && x < p.x + pieceW &&
          y > p.y && y < p.y + pieceH) {
        return p;
      }
    }
    return null;
  }
  
  function pointerDown(e) {
    if (start === 0) start = Date.now();
    const rect = canvas.getBoundingClientRect();
    let x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
    let y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
    const scale = canvas.width / canvas.offsetWidth;
    x *= scale;
    y *= scale;
    const p = hit(x, y);
    if (p) {
      dragging = p;
      offsetX = x - p.x;
      offsetY = y - p.y;
      // bring to front
      pieces = pieces.filter(z => z !== p);
      pieces.push(p);
      draw();
    }
    e.preventDefault();
    
  }
  
  function pointerMove(e) {
    if (!dragging) return;
    const rect = canvas.getBoundingClientRect();
    let x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left;
    let y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top;
    const scale = canvas.width / canvas.offsetWidth;
    x *= scale;
    y *= scale;
    dragging.x = x - offsetX;
    dragging.y = y - offsetY;
    if (dragging.x < 0) dragging.x = 0;
    if (dragging.x > canvas.width - pieceW) dragging.x = canvas.width - pieceW;
    if (dragging.y < 0) dragging.y = 0;
    if (dragging.y > canvas.height - pieceH) dragging.y = canvas.height - pieceH;
    draw();
  }
  
  function pointerUp() {
    if (dragging) {
      const px = dragging.c * pieceW, py = dragging.r * pieceH;
      if (Math.hypot(dragging.x - px, dragging.y - py) < pieceW / 3) {
        dragging.x = px;
        dragging.y = py;
        dragging.solved = true;
      }
      dragging = null;
      draw();
  
      if (pieces.every(p => p.solved)) {
        setTimeout(() =>  Swal.fire({
            title: 'Μπράβο!',
            html: `Το πάζλ λύθηκε σε : <b>${((Date.now() - start) / 1000).toFixed(1).replace(".", ",")} δευτερόλεπτα</b>`,
            showConfirmButton: false,
            showCloseButton: true,
            heightAuto: false
        }), 100);
      }
    }
  }
  
  // Event bindings
  canvas.addEventListener('mousedown', pointerDown);
  canvas.addEventListener('mousemove', pointerMove);
  canvas.addEventListener('mouseup', pointerUp);
  canvas.addEventListener('touchstart', pointerDown);
  canvas.addEventListener('touchmove', pointerMove);
  canvas.addEventListener('touchend', pointerUp);
  

img.src = 'assets/katarakths.jpg';
img.onload = setup;
let container = document.body;
function fullscreen() {
    
    if(isFullscreen()) {
        document.exitFullscreen();
        return;
    }
    
    if (container.requestFullscreen) {
        container.requestFullscreen();
    } else if (container.msRequestFullscreen) {
        container.msRequestFullscreen();
    } else if (container.mozRequestFullScreen) {
        container.mozRequestFullScreen();
    } else if (container.webkitRequestFullscreen) {
        container.webkitRequestFullscreen();
    }

    //force landscape
    if (screen.orientation) {
        screen.orientation.lock("landscape").catch(e => {});
    }
}

function isFullscreen() {
    return document.fullscreenElement === document.body ||
           document.webkitFullscreenElement === document.body ||
           document.msFullscreenElement === document.body;
}

document.getElementById("fullscreenButton").addEventListener("click", fullscreen);