/**** 
* Classes
****/ 
var ColorPalette = Container.expand(function () {
	var self = Container.call(this);
	// Available colors
	self.colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff, 0x000000, 0xffffff];
	self.colorButtons = [];
	// Create color buttons
	for (var i = 0; i < self.colors.length; i++) {
		var colorButton = LK.getAsset('brush', {
			anchorX: 0.5,
			anchorY: 0.5,
			scaleX: 2,
			scaleY: 2
		});
		colorButton.tint = self.colors[i];
		colorButton.x = 150 + i % 4 * 100;
		colorButton.y = 100 + Math.floor(i / 4) * 100;
		colorButton.colorIndex = i;
		// Add selection indicator
		colorButton.isSelected = i === 0;
		if (colorButton.isSelected) {
			colorButton.scaleX = 2.5;
			colorButton.scaleY = 2.5;
		}
		self.addChild(colorButton);
		self.colorButtons.push(colorButton);
	}
	self.down = function (x, y, obj) {
		var localPos = self.toLocal(obj.parent.toGlobal(obj.position));
		// Check which color was clicked
		for (var i = 0; i < self.colorButtons.length; i++) {
			var button = self.colorButtons[i];
			var dx = localPos.x - button.x;
			var dy = localPos.y - button.y;
			var distance = Math.sqrt(dx * dx + dy * dy);
			if (distance < 40) {
				// Deselect all buttons
				for (var j = 0; j < self.colorButtons.length; j++) {
					self.colorButtons[j].isSelected = false;
					self.colorButtons[j].scaleX = 2;
					self.colorButtons[j].scaleY = 2;
				}
				// Select clicked button
				button.isSelected = true;
				button.scaleX = 2.5;
				button.scaleY = 2.5;
				// Update canvas brush color
				if (drawingCanvas) {
					drawingCanvas.setBrushColor(self.colors[i]);
				}
				break;
			}
		}
	};
	return self;
});
// Set a light background for the art app
var DrawingCanvas = Container.expand(function () {
	var self = Container.call(this);
	// Create canvas background
	var canvasBackground = self.attachAsset('canvas', {
		anchorX: 0,
		anchorY: 0
	});
	// Drawing state
	self.isDrawing = false;
	self.brushSize = 20;
	self.brushColor = 0xff0000;
	self.lastX = 0;
	self.lastY = 0;
	// Array to store drawn strokes
	self.strokes = [];
	self.startDrawing = function (x, y) {
		self.isDrawing = true;
		self.lastX = x;
		self.lastY = y;
		// Create new stroke
		var newStroke = [];
		newStroke.push({
			x: x,
			y: y
		});
		self.strokes.push(newStroke);
		// Draw initial point
		self.drawPoint(x, y);
	};
	self.continueDrawing = function (x, y) {
		if (!self.isDrawing) return;
		// Add point to current stroke
		var currentStroke = self.strokes[self.strokes.length - 1];
		currentStroke.push({
			x: x,
			y: y
		});
		// Draw line from last position to current
		self.drawLine(self.lastX, self.lastY, x, y);
		self.lastX = x;
		self.lastY = y;
	};
	self.stopDrawing = function () {
		self.isDrawing = false;
	};
	self.drawPoint = function (x, y) {
		var point = LK.getAsset('brush', {
			anchorX: 0.5,
			anchorY: 0.5,
			scaleX: self.brushSize / 20,
			scaleY: self.brushSize / 20
		});
		point.tint = self.brushColor;
		point.x = x;
		point.y = y;
		self.addChild(point);
	};
	self.drawLine = function (x1, y1, x2, y2) {
		// Draw multiple points between start and end to create smooth line
		var distance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
		var steps = Math.max(1, Math.floor(distance / 5));
		for (var i = 0; i <= steps; i++) {
			var t = i / steps;
			var x = x1 + (x2 - x1) * t;
			var y = y1 + (y2 - y1) * t;
			self.drawPoint(x, y);
		}
	};
	self.clearCanvas = function () {
		// Remove all drawn elements except canvas background
		for (var i = self.children.length - 1; i >= 1; i--) {
			self.children[i].destroy();
			self.children.splice(i, 1);
		}
		self.strokes = [];
	};
	self.setBrushSize = function (size) {
		self.brushSize = Math.max(5, Math.min(50, size));
	};
	self.setBrushColor = function (color) {
		self.brushColor = color;
	};
	return self;
});

/**** 
* Initialize Game
****/ 
var game = new LK.Game({
	backgroundColor: 0x000000
});

/**** 
* Game Code
****/ 
// Set a light background for the art app
// Canvas drawing assets
game.setBackgroundColor(0xf0f0f0);
// Create drawing canvas
var drawingCanvas = game.addChild(new DrawingCanvas());
// Create color palette
var colorPalette = game.addChild(new ColorPalette());
// Create UI elements
var titleText = new Text2('Art Canvas', {
	size: 80,
	fill: 0x333333
});
titleText.anchor.set(0.5, 0);
titleText.x = 2048 / 2;
titleText.y = 20;
game.addChild(titleText);
// Create clear button
var clearButton = LK.getAsset('canvas', {
	anchorX: 0.5,
	anchorY: 0.5,
	scaleX: 0.2,
	scaleY: 0.1
});
clearButton.tint = 0xcccccc;
clearButton.x = 2048 - 200;
clearButton.y = 150;
game.addChild(clearButton);
var clearText = new Text2('Clear', {
	size: 40,
	fill: 0x000000
});
clearText.anchor.set(0.5, 0.5);
clearText.x = clearButton.x;
clearText.y = clearButton.y;
game.addChild(clearText);
// Brush size controls
var brushSizeText = new Text2('Brush Size: 20', {
	size: 50,
	fill: 0x333333
});
brushSizeText.anchor.set(0, 0);
brushSizeText.x = 150;
brushSizeText.y = 250;
game.addChild(brushSizeText);
// Size buttons
var smallBrushButton = LK.getAsset('brush', {
	anchorX: 0.5,
	anchorY: 0.5,
	scaleX: 0.5,
	scaleY: 0.5
});
smallBrushButton.tint = 0x666666;
smallBrushButton.x = 200;
smallBrushButton.y = 350;
game.addChild(smallBrushButton);
var mediumBrushButton = LK.getAsset('brush', {
	anchorX: 0.5,
	anchorY: 0.5,
	scaleX: 1,
	scaleY: 1
});
mediumBrushButton.tint = 0x666666;
mediumBrushButton.x = 300;
mediumBrushButton.y = 350;
game.addChild(mediumBrushButton);
var largeBrushButton = LK.getAsset('brush', {
	anchorX: 0.5,
	anchorY: 0.5,
	scaleX: 2,
	scaleY: 2
});
largeBrushButton.tint = 0x666666;
largeBrushButton.x = 400;
largeBrushButton.y = 350;
game.addChild(largeBrushButton);
// Game event handlers
game.down = function (x, y, obj) {
	// Check if clear button was pressed
	var dx = x - clearButton.x;
	var dy = y - clearButton.y;
	if (Math.abs(dx) < 100 && Math.abs(dy) < 30) {
		drawingCanvas.clearCanvas();
		return;
	}
	// Check brush size buttons
	var smallDx = x - smallBrushButton.x;
	var smallDy = y - smallBrushButton.y;
	if (Math.sqrt(smallDx * smallDx + smallDy * smallDy) < 30) {
		drawingCanvas.setBrushSize(10);
		brushSizeText.setText('Brush Size: 10');
		return;
	}
	var mediumDx = x - mediumBrushButton.x;
	var mediumDy = y - mediumBrushButton.y;
	if (Math.sqrt(mediumDx * mediumDx + mediumDy * mediumDy) < 30) {
		drawingCanvas.setBrushSize(20);
		brushSizeText.setText('Brush Size: 20');
		return;
	}
	var largeDx = x - largeBrushButton.x;
	var largeDy = y - largeBrushButton.y;
	if (Math.sqrt(largeDx * largeDx + largeDy * largeDy) < 30) {
		drawingCanvas.setBrushSize(40);
		brushSizeText.setText('Brush Size: 40');
		return;
	}
	// Start drawing on canvas (avoid drawing on UI area)
	if (y > 400) {
		drawingCanvas.startDrawing(x, y);
	}
};
game.move = function (x, y, obj) {
	// Continue drawing if in canvas area
	if (y > 400) {
		drawingCanvas.continueDrawing(x, y);
	}
};
game.up = function (x, y, obj) {
	drawingCanvas.stopDrawing();
};