@extends('layouts.app')
@push('header-js')
	<script src="https://unpkg.com/jsgif@1.0.2/libgif.js"></script>
@endpush

@section('content')
	Gif:
	<img hidden src="{{ asset('images/our-work/kose-uv-brightening/Laptop_Animation1.gif') }}" rel:auto_play="0"
	    rel:rubbable="0" />
	<hr />
	Frames:
	<div id="frames">
	</div>
	<hr />
	Canvas:
	<hr />
	<!-- Change the width base on the gif image width and height -->
	<!-- widht 30 * gif width  -->
	<!-- height rub.get_length() * gif height / 30  --> 
	<canvas id="myCanvas" style="border:1px solid #d3d3d3;" width="1200" height="650"></canvas>
@endsection

@push('js')
	<script>
		$(document).ready(function () {
		    const c = document.getElementById("myCanvas");
		    const ctx = c.getContext("2d", { willReadFrequently: true });
		    const columns = 20; // Number of columns for the grid
		    let canvasWidth = 0;
		    let canvasHeight = 0;
		    let currentColumn = 0;
		    let currentRow = 0;

		     // Get the available viewport dimensions
            const viewportWidth = window.innerWidth;
            const viewportHeight = window.innerHeight;

		    $('img').each(function (idx, img_tag) {
		      	if (/^.+\.gif$/.test($(img_tag).prop("src"))) {
		        	var rub = new SuperGif({ gif: img_tag, progressbar_height: 0 });
		        	rub.load(function () {
		        		frameWidth = rub.get_canvas().width;
		          		frameHeight = rub.get_canvas().height;

		          		// Adjust the canvas dimensions based on the frame size and grid
		          		const totalFrames = rub.get_length();
		          		const targetFrameCount = 360;
		          		const skipRate = Math.ceil(totalFrames / targetFrameCount);
		          		const rows = Math.ceil(targetFrameCount / columns);

		          		// Calculate the optimal canvas dimensions
                        let canvasWidth = frameWidth * columns;
                        let canvasHeight = frameHeight * rows;

                        // Scale the canvas to fit within the viewport while maintaining aspect ratio
	                    // const scale = Math.min(viewportWidth / canvasWidth, viewportHeight / canvasHeight);
	                    const scale = 0.5;
	                    // console.log(scale);
	                    canvasWidth *= scale;
	                    canvasHeight *= scale;

		          		c.width = canvasWidth;
		          		c.height = canvasHeight;

		          		// rub.get_length();
		          		for (let i = 0; i < totalFrames; i+=skipRate) {
			            	rub.move_to(i);
			            	var frameCanvas = rub.get_canvas();
			            	// var canvas = cloneCanvas(rub.get_canvas());

			            	// Calculate the position in the grid
			            	const x = currentColumn * frameWidth * scale;
			            	const y = currentRow * frameHeight * scale;

			            	// Draw the frame onto the main canvas
			            	ctx.drawImage(frameCanvas, x, y, frameWidth * scale, frameHeight* scale);

			            	// Update the column and row indices
			            	currentColumn++;
			            	if (currentColumn >= columns) {
			              		currentColumn = 0;
			              		currentRow++;
			            	}

		            		// const img = $('<img id = "' + i + '"src= "' + canvas + '">');
		            		// $("#frames").append(img);
		          		}
		        	});
		      	}
		    });
	  	});

	  	function cloneCanvas(oldCanvas) {
	    	var img = oldCanvas.toDataURL("image/png");
	    	return img;
	  	}
	</script>
@endpush