/**** 
* Classes
****/ 
var InfoDisplay = Container.expand(function () {
	var self = Container.call(this);
	// Properties
	self.scrollContainer = new ScrollContainer();
	self.addChild(self.scrollContainer);
	self.currentCategory = null;
	// Initialize InfoDisplay with a width and height
	self.init = function (width, height) {
		self.scrollContainer.init(width, height);
	};
	// Display information from a specific category
	self.showInfo = function (title, content) {
		self.scrollContainer.clearContent();
		self.currentCategory = title;
		// Create title text
		var titleText = new Text2(title, {
			size: 80,
			fill: 0xFFFFFF
		});
		titleText.anchor.set(0, 0);
		titleText.x = 50;
		titleText.y = 30;
		// Create content text
		var contentText = new Text2(content, {
			size: 60,
			fill: 0xFFFFFF,
			wordWrap: true,
			wordWrapWidth: self.scrollContainer.maskRect.width - 100
		});
		contentText.anchor.set(0, 0);
		contentText.x = 50;
		contentText.y = titleText.y + titleText.height + 30;
		// Add texts to scroll container
		self.scrollContainer.addContent(titleText);
		self.scrollContainer.addContent(contentText);
	};
	// Show formatted stats information
	self.showStats = function (title, statsObj) {
		self.scrollContainer.clearContent();
		self.currentCategory = title;
		// Create title text
		var titleText = new Text2(title, {
			size: 80,
			fill: 0xFFFFFF
		});
		titleText.anchor.set(0, 0);
		titleText.x = 50;
		titleText.y = 30;
		// Create formatted stats content
		var contentText = new Text2("Strength: " + statsObj.strength + "\n" + "Agility: " + statsObj.agility + "\n" + "Defense: " + statsObj.defense + "\n" + "Magic: " + statsObj.magic, {
			size: 60,
			fill: 0xFFFFFF
		});
		contentText.anchor.set(0, 0);
		contentText.x = 50;
		contentText.y = titleText.y + titleText.height + 30;
		// Add texts to scroll container
		self.scrollContainer.addContent(titleText);
		self.scrollContainer.addContent(contentText);
	};
	return self;
});
var ScrollContainer = Container.expand(function () {
	var self = Container.call(this);
	// Properties
	self.content = new Container();
	self.addChild(self.content);
	self.maskRect = null;
	self.scrollY = 0;
	self.maxScrollY = 0;
	self.contentHeight = 0;
	self.viewportHeight = 0;
	self.isDragging = false;
	self.lastY = 0;
	self.dragStartY = 0;
	self.dragStartScrollY = 0;
	// Initialize the scroll container with a specific size
	self.init = function (width, height) {
		self.viewportHeight = height;
		// Create mask to hide content outside container
		self.maskRect = LK.getAsset('BGMenu', {
			anchorX: 0,
			anchorY: 0,
			width: width,
			height: height,
			alpha: 0
		});
		self.addChild(self.maskRect);
		// Set up interactivity
		self.interactive = true;
		self.content.mask = self.maskRect;
	};
	// Add content to the container
	self.addContent = function (element) {
		self.content.addChild(element);
		self.updateContentSize();
	};
	// Clear all content
	self.clearContent = function () {
		self.content.removeChildren();
		self.scrollY = 0;
		self.updateContentSize();
		self.updateScroll();
	};
	// Update the size of the content
	self.updateContentSize = function () {
		// Calculate total content height by examining all children
		self.contentHeight = 0;
		for (var i = 0; i < self.content.children.length; i++) {
			var child = self.content.children[i];
			self.contentHeight = Math.max(self.contentHeight, child.y + child.height);
		}
		// Update maximum scroll value
		self.maxScrollY = Math.max(0, self.contentHeight - self.viewportHeight);
	};
	// Scroll to specific position
	self.scrollTo = function (y) {
		self.scrollY = Math.max(0, Math.min(y, self.maxScrollY));
		self.updateScroll();
	};
	// Update scroll position
	self.updateScroll = function () {
		self.content.y = -self.scrollY;
	};
	// Event handlers
	self.down = function (x, y, obj) {
		self.isDragging = true;
		self.lastY = y;
		self.dragStartY = y;
		self.dragStartScrollY = self.scrollY;
	};
	self.move = function (x, y, obj) {
		if (self.isDragging) {
			var deltaY = self.lastY - y;
			self.scrollY += deltaY;
			self.scrollY = Math.max(0, Math.min(self.scrollY, self.maxScrollY));
			self.updateScroll();
			self.lastY = y;
		}
	};
	self.up = function (x, y, obj) {
		self.isDragging = false;
	};
	return self;
});
var Slime = Container.expand(function () {
	var self = Container.call(this);
	// Create and attach the slime asset
	var slimeGraphics = self.attachAsset('ClasicSlime', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 500,
		height: 500
	});
	// Initialize tracking variables for position
	self.lastX = 0;
	self.lastY = 0;
	// Update method called every frame
	self.update = function () {
		// Track last position
		self.lastX = self.x;
		self.lastY = self.y;
	};
	return self;
});

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

/**** 
* Game Code
****/ 
// Create BGMenu for bottom half of screen
var bgMenu = LK.getAsset('BGMenu', {
	anchorX: 0,
	anchorY: 0,
	x: 0,
	y: 2032 / 2,
	width: 2048,
	height: 3532 / 2
});
game.addChild(bgMenu);
// Create info display for slime information
var infoDisplay = new InfoDisplay();
infoDisplay.init(2048, 800);
infoDisplay.x = 0;
infoDisplay.y = bgMenu.y + 400;
game.addChild(infoDisplay);
// Create category buttons
var categories = ["Description", "History", "Location", "Favorite Food", "Ability", "Stats", "Rarity", "Lifespan"];
var categoryButtons = [];
var buttonWidth = 2048 / 4;
var buttonHeight = 100;
var marginY = 20;
// Create and position category buttons
for (var i = 0; i < categories.length; i++) {
	var row = Math.floor(i / 4);
	var col = i % 4;
	var buttonBg = LK.getAsset('Interfaz', {
		anchorX: 0.5,
		anchorY: 0.5,
		width: buttonWidth - 20,
		height: buttonHeight,
		alpha: 0.7
	});
	var buttonText = new Text2(categories[i], {
		size: 40,
		fill: 0xFFFFFF
	});
	buttonText.anchor.set(0.5, 0.5);
	buttonBg.addChild(buttonText);
	buttonBg.interactive = true;
	buttonBg.categoryIndex = i;
	buttonBg.down = function () {
		showCategoryInfo(this.categoryIndex);
	};
	buttonBg.x = buttonWidth * col + buttonWidth / 2;
	buttonBg.y = bgMenu.y + marginY + row * (buttonHeight + marginY) + buttonHeight / 2;
	categoryButtons.push(buttonBg);
	game.addChild(buttonBg);
}
// Create BG for top half of screen
var bg = LK.getAsset('BG', {
	anchorX: 0,
	anchorY: 0,
	x: 0,
	y: 0,
	width: 2048,
	height: 2032 / 2
});
game.addChild(bg);
// Create interface element at the top of BGMenu
var interfaz = LK.getAsset('Interfaz', {
	anchorX: 0.5,
	anchorY: 0,
	width: 2048,
	height: 400
});
// Position the interface at the top of BGMenu
interfaz.x = bgMenu.width / 2;
interfaz.y = bgMenu.y;
game.addChild(interfaz);
// Create left button
var leftButton = LK.getAsset('BotonChange', {
	anchorX: 0.5,
	anchorY: 0.5,
	scaleX: -1,
	// Flip horizontally to point left
	x: -800,
	y: interfaz.height / 2
});
// Add event handlers for left button
leftButton.interactive = true;
leftButton.down = function () {
	changeSlime('prev');
};
interfaz.addChild(leftButton);
// Create right button
var rightButton = LK.getAsset('BotonChange', {
	anchorX: 0.5,
	anchorY: 0.5,
	x: 800,
	y: interfaz.height / 2
});
// Add event handlers for right button
rightButton.interactive = true;
rightButton.down = function () {
	changeSlime('next');
};
interfaz.addChild(rightButton);
// Create a list of slime assets
var slimes = ['ClasicSlime', 'WaterSlime', 'FireSlime'];
var slimeNames = ['Clasic Slime', 'Water Slime', 'Fire Slime'];
var currentSlimeIndex = 0;
// Create slime information lists
var descriptions = ['A classic slime found everywhere. Bouncy and friendly.', 'A water slime that lives near lakes and rivers. Can dissolve into liquid form.', 'A hot-tempered fire slime. Can reach temperatures of over 1000 degrees.'];
var histories = ['Existed since ancient times, these slimes are the most common species.', 'Evolved from classic slimes that adapted to aquatic environments 500 years ago.', 'Born from volcanic activity, these rare slimes first appeared 200 years ago.'];
var locations = ['Forests, plains, and dungeons across the world.', 'Lakes, rivers, and rainy regions with high humidity.', 'Volcanic areas, deserts, and near thermal activity.'];
var favoriteFoods = ['Leaves and fruits that fall to the ground.', 'Algae and small water plants.', 'Coal and spicy peppers.'];
var abilities = ['Can bounce very high and split into smaller slimes.', 'Can pass through small cracks by transforming into water.', 'Can ignite objects and provide heat for cooking.'];
var stats = [{
	strength: 3,
	agility: 5,
	defense: 2,
	magic: 1
}, {
	strength: 2,
	agility: 7,
	defense: 1,
	magic: 5
}, {
	strength: 6,
	agility: 3,
	defense: 4,
	magic: 7
}];
var rarities = ['Common (80% chance of encounter)', 'Uncommon (35% chance of encounter)', 'Rare (10% chance of encounter)'];
var lifespans = ['Up to 100 years in the wild, 150 in captivity.', 'Around 75 years, but can rejuvenate by merging with fresh water.', 'Only 30-40 years, but reproduce much faster than other slimes.'];
// Create text display for slime name
var slimeNameText = new Text2(slimeNames[currentSlimeIndex], {
	size: 100,
	fill: 0xFFFFFF
});
slimeNameText.anchor.set(0.5, 0.5);
slimeNameText.x = 0;
slimeNameText.y = interfaz.height / 2;
interfaz.addChild(slimeNameText);
// Create a slime and add it to the scene
var slime = new Slime();
// Position slime at the center of BG
slime.x = bg.width / 2;
slime.y = bg.height / 2;
game.addChild(slime);
// Function to show information for a specific category
function showCategoryInfo(categoryIndex) {
	var category = categories[categoryIndex];
	var content = "";
	switch (category) {
		case "Description":
			infoDisplay.showInfo(category, descriptions[currentSlimeIndex]);
			break;
		case "History":
			infoDisplay.showInfo(category, histories[currentSlimeIndex]);
			break;
		case "Location":
			infoDisplay.showInfo(category, locations[currentSlimeIndex]);
			break;
		case "Favorite Food":
			infoDisplay.showInfo(category, favoriteFoods[currentSlimeIndex]);
			break;
		case "Ability":
			infoDisplay.showInfo(category, abilities[currentSlimeIndex]);
			break;
		case "Stats":
			infoDisplay.showStats(category, stats[currentSlimeIndex]);
			break;
		case "Rarity":
			infoDisplay.showInfo(category, rarities[currentSlimeIndex]);
			break;
		case "Lifespan":
			infoDisplay.showInfo(category, lifespans[currentSlimeIndex]);
			break;
	}
}
// Function to change the slime asset
function changeSlime(direction) {
	// Update the index based on direction
	if (direction === 'next') {
		currentSlimeIndex = (currentSlimeIndex + 1) % slimes.length;
	} else {
		currentSlimeIndex = (currentSlimeIndex - 1 + slimes.length) % slimes.length;
	}
	// Remove old slime graphic and add new one
	slime.removeChildren();
	var slimeGraphics = slime.attachAsset(slimes[currentSlimeIndex], {
		anchorX: 0.5,
		anchorY: 0.5,
		width: 500,
		height: 500
	});
	// Initialize tracking variables for position after changing slimes
	slime.lastX = slime.x;
	slime.lastY = slime.y;
	// Update the slime name text
	slimeNameText.setText(slimeNames[currentSlimeIndex]);
	// If there's currently displayed information, update it for the new slime
	if (infoDisplay.currentCategory !== null) {
		var categoryIndex = categories.indexOf(infoDisplay.currentCategory);
		if (categoryIndex !== -1) {
			showCategoryInfo(categoryIndex);
		}
	}
}
// Initialize with the first category information displayed
showCategoryInfo(0);

===================================================================
--- original.js
+++ change.js
@@ -364,8 +364,11 @@
 		anchorY: 0.5,
 		width: 500,
 		height: 500
 	});
+	// Initialize tracking variables for position after changing slimes
+	slime.lastX = slime.x;
+	slime.lastY = slime.y;
 	// Update the slime name text
 	slimeNameText.setText(slimeNames[currentSlimeIndex]);
 	// If there's currently displayed information, update it for the new slime
 	if (infoDisplay.currentCategory !== null) {