var HW = {};

var $$ = function (selector, parent) {
    return Array.prototype.slice.call((parent ? parent : document).querySelectorAll(selector));
};


var loop = function (arr, callback, method) {
	method = method || 'forEach';
	return Array.prototype[method].call(arr, callback);
};

HW.circMotif = function(canvas) {			
			const ctx = canvas.getContext('2d');
			const circleSize = 80; // Size of the circles
			const padding = 3; // Padding between circle and square
			
			const canvasWidth = window.innerWidth + 6;
			const numRows = 2; // Number of rows
			
			// Calculate the square size based on the available width and padding
			const squareSize = (canvasWidth - 2 * padding) / Math.ceil(canvasWidth / (circleSize + 2 * padding));
			
			// Calculate the number of circles that can fit in a row
			const numCirclesPerRow = Math.floor(canvasWidth / squareSize);
			
			// Calculate the total width of the circles and padding
			const totalWidth = numCirclesPerRow * squareSize;
			
			// Calculate the left margin to center the circles
			const marginLeft = (canvasWidth - totalWidth) / 2;
			
			// Calculate the canvas height based on the number of rows
			const canvasHeight = numRows * squareSize;
			
			// Set the canvas dimensions
			canvas.width = canvasWidth;
			canvas.height = canvasHeight;
			
			// Clear the canvas
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			
			// Loop through the rows and columns to draw the circles
			for (let row = 0; row < numRows; row++) {
			    for (let col = 0; col < numCirclesPerRow; col++) {
			        // Calculate the x and y coordinates for the current circle
			        const x = marginLeft + col * squareSize;
			        const y = row * squareSize;
			
			        // Determine the starting color combination for each row
			        const isBlueCircle = ((row + col) % 2 === 0);
			
			        // Set the fill color and draw the square
			        ctx.fillStyle = (isBlueCircle) ? 'blue' : 'white';
			        ctx.fillRect(x, y, squareSize, squareSize);
			
			        // Draw the circle
			        ctx.beginPath();
			        ctx.arc(x + squareSize / 2, y + squareSize / 2, circleSize / 2, 0, 2 * Math.PI);
			        ctx.fillStyle = (isBlueCircle) ? 'white' : 'blue';
			        ctx.fill();
			    }
			}
		}			
		
		HW.doCircMotif = function() {
			var $circleZazz = $$('.circle-zazz');
			
			loop($circleZazz, function(el){
			   HW.circMotif(el);
			})
			
		}

			
			HW.doCircMotif();