var doc = document,
    win = window,
    body = doc.body;

var ww = win.innerWidth,
    wh = win.innerHeight;

var c = doc.createElement('canvas'),
    ctx = c.getContext('2d');

var half_PI = Math.PI / 2,
    two_PI = Math.PI * 2,
    ease = 0.01;


var k = {
    offsetRotation: 0,
    offsetScale: 0.8,
    offsetX: 0,
    offsetY: 0,
    radius: 1100,
    slices: 24,
    zoom: 1.5
};

body.appendChild(c);
c.width = k.radius * 2;
c.height = k.radius * 2;

var img = new Image();
img.crossOrigin = "Anonymous";  // This allows the image to be used with canvas (necessary for some external images)
img.onload = function() {
    var fill = ctx.createPattern(img, 'repeat');

    var scale, step, cx;

    scale = k.zoom * (k.radius / Math.min(img.width, img.height));
    step = two_PI / k.slices;
    cx = img.width / 2;

    function draw() {
        ctx.clearRect(0, 0, c.width, c.height);  // Clear canvas before drawing each frame
        ctx.fillStyle = fill;

        for (var i = 0; i <= k.slices; i++) {
            ctx.save();
            ctx.translate(k.radius, k.radius);
            ctx.rotate(i * step);
            ctx.beginPath();
            ctx.moveTo(-0.5, -0.5);
            ctx.arc(0, 0, k.radius, step * -0.51, step * 0.51);
            ctx.rotate(half_PI);
            ctx.scale(scale, scale);
            ctx.scale([-1, 1][i % 2], 1);
            ctx.translate(k.offsetX - cx, k.offsetY);
            ctx.rotate(k.offsetRotation);
            ctx.scale(k.offsetScale, k.offsetScale);
            ctx.fill();

            ctx.restore();
        }
    }

    var tx = k.offsetX;
    var ty = k.offsetY;
    var tr = k.offsetRotation;

    win.addEventListener('mousemove', mousemove, false);

    function mousemove(e) {
        var cx, cy, dx, dy, hx, hy;
        cx = ww / 2;
        cy = wh / 2;
        dx = e.pageX / ww;
        dy = e.pageY / wh;
        hx = dx - 0.1;
        hy = dy - 0.1;
        tx = hx * k.radius * -0.8;
        ty = hy * k.radius * 0.8;
    }

    c.style.position = 'fixed';
    c.style.marginLeft = -k.radius + 'px';
    c.style.marginTop = -k.radius + 'px';
    c.style.left = '50%';
    c.style.top = '50%';

    function update() {
        tr -= 0.002;

        k.offsetX += (tx - k.offsetX) * ease;
        k.offsetY += (ty - k.offsetY) * ease;
        k.offsetRotation += (tr - k.offsetRotation) * ease;

        draw();

        requestAnimationFrame(update);
    }

    update();
};
//Paste your image here:
img.src = 'https://images.unsplash.com/photo-1473951574080-01fe45ec8643?q=80&w=2104&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D';

// Create the button element
var button = doc.createElement('button');
button.className = 'btn';
button.textContent = 'Back';

// Style the button
button.style.position = 'fixed';
button.style.bottom = '20px'; // Adjust as needed
button.style.right = '20px'; // Adjust as needed

// Append button to the body
body.appendChild(button);

// CSS for the button
var buttonStyle = `
.btn {
    width: 100px; /* Adjust width as needed */
    height: 40px;
    background: linear-gradient(to right, #1E2022, #52616B);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
    font-size: 16px;
    color: #F0F5F9;
    font-weight: 500;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    outline: none;
}
`;

// Append the style to the head of the document
var styleElement = doc.createElement('style');
styleElement.innerHTML = buttonStyle;
doc.head.appendChild(styleElement);

// Event listener for the button
button.addEventListener('click', function() {
    // Handle button click action here, for example, go back in history
    window.history.back();
});

// Create a container for the menu
var menuContainer = doc.createElement('div');
menuContainer.style.position = 'fixed';
menuContainer.style.top = '20px'; // Adjust top position as needed
menuContainer.style.left = '20px'; 
menuContainer.style.width = '200px'; // Adjust width as needed
menuContainer.style.height = '300px'; 
menuContainer.style.background = '#f0f0f0';
menuContainer.style.padding = '20px';
menuContainer.style.border = 'none'; 
menuContainer.style.borderRadius = '5px';
menuContainer.style.boxShadow = '0 2px 10px rgba(0, 0, 0, .4)';
menuContainer.style.zIndex = '1000'; // Ensure menu is above other content
menuContainer.style.display = 'flex'; // Use flexbox for layout
menuContainer.style.flexDirection = 'column'; // Stack items vertically
body.appendChild(menuContainer);

// Function to update the kaleidoscope based on current parameters
function updateKaleidoscope() {
    // Update image URL
    img.src = imageUrlInput.value;

    // Update number of slices
    k.slices = parseInt(slicesInput.value);

    // Update speed of change (tr)
    k.offsetRotationSpeed = parseFloat(speedInput.value);

    // Recalculate scale based on new image dimensions
    scale = k.zoom * (k.radius / Math.min(img.width, img.height));
    cx = img.width / 2;
}

// Image URL input
var imageUrlLabel = doc.createElement('label');
imageUrlLabel.textContent = 'Image URL:';
menuContainer.appendChild(imageUrlLabel);

var imageUrlInput = doc.createElement('input');
imageUrlInput.type = 'text';
imageUrlInput.value = img.src; // Initial value from the loaded image
imageUrlInput.style.width = '100%';
menuContainer.appendChild(imageUrlInput);

// Number of slices input
var slicesLabel = doc.createElement('label');
slicesLabel.textContent = 'Number of Slices:';
menuContainer.appendChild(slicesLabel);

var slicesInput = doc.createElement('input');
slicesInput.type = 'number';
slicesInput.value = k.slices;
slicesInput.style.width = '100px';
menuContainer.appendChild(slicesInput);

// Speed of change input
var speedLabel = doc.createElement('label');
speedLabel.textContent = 'Speed:';
menuContainer.appendChild(speedLabel);

var speedInput = doc.createElement('input');
speedInput.type = 'number';
speedInput.value = 0.002; // Initial value for speed
speedInput.step = 0.001; // Adjust step as needed
speedInput.style.width = '100px';
menuContainer.appendChild(speedInput);

// Submit button to apply changes
var submitButton = doc.createElement('button');
submitButton.textContent = 'Apply Changes';
submitButton.style.marginTop = '10px';
submitButton.style.width = '100%';
submitButton.style.height = '40px';
submitButton.style.background = 'linear-gradient(to right, #1E2022, #52616B)';
submitButton.style.color = '#F0F5F9';
submitButton.style.fontWeight = '500';
submitButton.style.cursor = 'pointer';
submitButton.style.border = 'none';
submitButton.style.borderRadius = '5px';
submitButton.style.outline = 'none';
menuContainer.appendChild(submitButton);

// CSS for the menu container
var menuContainerStyle = `
    .menu-container {
        position: fixed;
        top: 20px;
        left: 20px;
        width: 200px;
        height: 300px;
        background: #f0f0f0;
        padding: 20px;
        border: none;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        border: 2px solid transparent; /* Transparent border initially */
    }

    .menu-container:hover {
        border-color: #52616B; /* Border color on hover */
    }
`;

// Append the style to the head of the document
var styleElement = doc.createElement('style');
styleElement.innerHTML = menuContainerStyle;
doc.head.appendChild(styleElement);

// Event listener for submit button
submitButton.addEventListener('click', function() {
    updateKaleidoscope();
});