//TODO make possible to view and move shifters with mouse. change horizontal/vertical to 4 types: L/R/T/B directions

const canvas = document.getElementById('pixelCanvas');
const ctx = canvas.getContext('2d');
const pixelData = ctx.createImageData(canvas.width, canvas.height);
const shifterControls = document.getElementById('shifterControls');
const shifterSpeedInput = document.getElementById('shifterSpeed');
const shifterColorInput = document.getElementById('shifterColor');
const applyShifterButton = document.getElementById('applyShifter');

let shifters = [];
let currentShifter = null;

function drawPixelData() {
    ctx.putImageData(pixelData, 0, 0);
}

function applyShifter() {
    if (currentShifter) {
        currentShifter.speed = parseInt(shifterSpeedInput.value);
        currentShifter.color = shifterColorInput.value;
    }
}

function updateShifters() {
    shifters.forEach(shifter => {
        if (shifter.direction === 'horizontal') {
            for (let y = 0; y < canvas.height; y++) {
                for (let x = 0; x < canvas.width - shifter.width; x++) {
                    const index = (y * canvas.width + x) * 4;
                    const newIndex = (y * canvas.width + x + shifter.width) * 4;
                    pixelData.data[index] = pixelData.data[newIndex];
                    pixelData.data[index + 1] = pixelData.data[newIndex + 1];
                    pixelData.data[index + 2] = pixelData.data[newIndex + 2];
                    pixelData.data[index + 3] = pixelData.data[newIndex + 3];
                }
                for (let x = canvas.width - shifter.width; x < canvas.width; x++) {
                    const index = (y * canvas.width + x) * 4;
                    pixelData.data[index] = parseInt(shifter.color.slice(1, 3), 16);
                    pixelData.data[index + 1] = parseInt(shifter.color.slice(3, 5), 16);
                    pixelData.data[index + 2] = parseInt(shifter.color.slice(5, 7), 16);
                    pixelData.data[index + 3] = 255;
                }
            }
        } else if (shifter.direction === 'vertical') {
            for (let x = 0; x < canvas.width; x++) {
                for (let y = 0; y < canvas.height - shifter.height; y++) {
                    const index = (y * canvas.width + x) * 4;
                    const newIndex = ((y + shifter.height) * canvas.width + x) * 4;
                    pixelData.data[index] = pixelData.data[newIndex];
                    pixelData.data[index + 1] = pixelData.data[newIndex + 1];
                    pixelData.data[index + 2] = pixelData.data[newIndex + 2];
                    pixelData.data[index + 3] = pixelData.data[newIndex + 3];
                }
                for (let y = canvas.height - shifter.height; y < canvas.height; y++) {
                    const index = (y * canvas.width + x) * 4;
                    pixelData.data[index] = parseInt(shifter.color.slice(1, 3), 16);
                    pixelData.data[index + 1] = parseInt(shifter.color.slice(3, 5), 16);
                    pixelData.data[index + 2] = parseInt(shifter.color.slice(5, 7), 16);
                    pixelData.data[index + 3] = 255;
                }
            }
        }
    });
    drawPixelData();
}

function animate() {
    updateShifters();
    requestAnimationFrame(animate);
}

function addShifter(direction, width, height, speed, color) {
    shifters.push({ direction, width, height, speed, color });
}

function selectShifter(shifter) {
    currentShifter = shifter;
    shifterSpeedInput.value = shifter.speed;
    shifterColorInput.value = shifter.color;
}

addShifter('horizontal', 50, 0, 1, '#ff0000');
addShifter('vertical', 0, 50, 1, '#00ff00');
addShifter('vertical', 0, 20, 1, '#f0ff00');

applyShifterButton.addEventListener('click', applyShifter);

animate();