/**** 
* Plugins
****/ 
var tween = LK.import("@upit/tween.v1");

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

/**** 
* Game Code
****/ 
var background1 = LK.getAsset('background1', {
	anchorX: 0.0,
	anchorY: 0.0,
	x: 0,
	y: 0
});
game.addChildAt(background1, 0);
var scrollbar = LK.getAsset('scrollbar', {
	anchorX: 1.0,
	anchorY: 0.0,
	x: 2048,
	y: 0,
	visible: false // Initially hidden
});
game.addChild(scrollbar);
var scrollbutton = LK.getAsset('scrollbutton', {
	anchorX: 1.0,
	anchorY: 0.5,
	x: 2048,
	y: 0,
	visible: false // Initially hidden
});
game.addChild(scrollbutton);
var background2 = LK.getAsset('background2', {
	anchorX: 0.0,
	anchorY: 0.0,
	x: 0,
	y: 0,
	speed: 10,
	// Speed property for background2
	visible: false // Initially hidden
});
game.addChildAt(background2, 1);
background2.children.forEach(function (child) {
	return child.visible = false;
});
var background3 = LK.getAsset('background3', {
	anchorX: 0.0,
	anchorY: 0.0,
	x: 0,
	y: 0,
	speed: 10,
	// Speed property for background3
	visible: false // Initially hidden
});
game.addChildAt(background3, 2);
background3.children.forEach(function (child) {
	return child.visible = false;
});
var scrollbar3 = LK.getAsset('scrollbar', {
	anchorX: 1.0,
	anchorY: 0.0,
	x: 2048,
	y: 0,
	visible: false // Initially hidden
});
game.addChild(scrollbar3);
var scrollbutton3 = LK.getAsset('scrollbutton', {
	anchorX: 1.0,
	anchorY: 0.5,
	x: 2048,
	y: 0,
	visible: false // Initially hidden
});
game.addChild(scrollbutton3);
var slotSpacing3 = 50; // Define the space between slots for background3
for (var i = 0; i < 4; i++) {
	var slot3 = LK.getAsset('Slot', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: i * (slotSpacing3 + 450) + slotSpacing3 + 200,
		y: 300 // Arbitrary y position
	});
	background3.addChildAt(slot3, background3.children.length);
	// Add tree1 to the first slot on the left
	if (i === 0) {
		var tree1 = LK.getAsset('tree1', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: slot3.x,
			y: slot3.y
		});
		background3.addChild(tree1);
		// Add dragging functionality to tree1
		tree1.down = function (x, y, obj) {
			var duplicate = LK.getAsset('tree1', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				y: y
			});
			game.addChild(duplicate);
			duplicate.dragging = true;
			duplicate.data = obj;
			background3.visible = false;
			scrollbar3.visible = false;
			scrollbutton3.visible = false;
			background3.children.forEach(function (child) {
				child.visible = false;
			});
			duplicate.down = function (x, y, obj) {
				this.dragging = true;
				this.data = obj;
			};
			duplicate.move = function (x, y, obj) {
				if (this.dragging) {
					var newPosition = this.parent.toLocal(obj.global);
					this.x = newPosition.x;
					this.y = newPosition.y;
				}
			};
			duplicate.up = function () {
				this.dragging = false;
				this.data = null;
			};
		};
		tree1.move = function (x, y, obj) {
			if (this.dragging) {
				var newPosition = this.parent.toLocal(obj.global);
				this.x = newPosition.x;
				this.y = newPosition.y;
			}
		};
		tree1.up = function () {
			this.dragging = false;
			this.data = null;
		};
	}
	// Add tree2 to the second slot
	else if (i === 1) {
		var tree2 = LK.getAsset('tree2', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: slot3.x,
			y: slot3.y
		});
		background3.addChild(tree2);
		// Add dragging functionality to tree2
		tree2.down = function (x, y, obj) {
			var duplicate = LK.getAsset('tree2', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				y: y
			});
			game.addChild(duplicate);
			duplicate.dragging = true;
			duplicate.data = obj;
			background3.visible = false;
			scrollbar3.visible = false;
			scrollbutton3.visible = false;
			background3.children.forEach(function (child) {
				child.visible = false;
			});
			duplicate.down = function (x, y, obj) {
				this.dragging = true;
				this.data = obj;
			};
			duplicate.move = function (x, y, obj) {
				if (this.dragging) {
					var newPosition = this.parent.toLocal(obj.global);
					this.x = newPosition.x;
					this.y = newPosition.y;
				}
			};
			duplicate.up = function () {
				this.dragging = false;
				this.data = null;
			};
		};
		tree2.move = function (x, y, obj) {
			if (this.dragging) {
				var newPosition = this.parent.toLocal(obj.global);
				this.x = newPosition.x;
				this.y = newPosition.y;
			}
		};
		tree2.up = function () {
			this.dragging = false;
			this.data = null;
		};
		// Add tree3 to the third slot
	} else if (i === 2) {
		var tree3 = LK.getAsset('tree3', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: slot3.x,
			y: slot3.y
		});
		background3.addChild(tree3);
		// Add dragging functionality to tree3
		tree3.down = function (x, y, obj) {
			var duplicate = LK.getAsset('tree3', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				y: y
			});
			game.addChild(duplicate);
			duplicate.dragging = true;
			duplicate.data = obj;
			background3.visible = false;
			scrollbar3.visible = false;
			scrollbutton3.visible = false;
			background3.children.forEach(function (child) {
				child.visible = false;
			});
			duplicate.down = function (x, y, obj) {
				this.dragging = true;
				this.data = obj;
			};
			duplicate.move = function (x, y, obj) {
				if (this.dragging) {
					var newPosition = this.parent.toLocal(obj.global);
					this.x = newPosition.x;
					this.y = newPosition.y;
				}
			};
			duplicate.up = function () {
				this.dragging = false;
				this.data = null;
			};
		};
		tree3.move = function (x, y, obj) {
			if (this.dragging) {
				var newPosition = this.parent.toLocal(obj.global);
				this.x = newPosition.x;
				this.y = newPosition.y;
			}
		};
		tree3.up = function () {
			this.dragging = false;
			this.data = null;
		};
		// Add tree4 to the fourth slot
	} else if (i === 3) {
		var tree4 = LK.getAsset('tree4', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: slot3.x,
			y: slot3.y
		});
		background3.addChild(tree4);
		// Add dragging functionality to tree4
		tree4.down = function (x, y, obj) {
			var duplicate = LK.getAsset('tree4', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				y: y
			});
			game.addChild(duplicate);
			duplicate.dragging = true;
			duplicate.data = obj;
			background3.visible = false;
			scrollbar3.visible = false;
			scrollbutton3.visible = false;
			background3.children.forEach(function (child) {
				child.visible = false;
			});
			duplicate.down = function (x, y, obj) {
				this.dragging = true;
				this.data = obj;
			};
			duplicate.move = function (x, y, obj) {
				if (this.dragging) {
					var newPosition = this.parent.toLocal(obj.global);
					this.x = newPosition.x;
					this.y = newPosition.y;
				}
			};
			duplicate.up = function () {
				this.dragging = false;
				this.data = null;
			};
		};
		tree4.move = function (x, y, obj) {
			if (this.dragging) {
				var newPosition = this.parent.toLocal(obj.global);
				this.x = newPosition.x;
				this.y = newPosition.y;
			}
		};
		tree4.up = function () {
			this.dragging = false;
			this.data = null;
		};
		// Removed tree5 from the fifth slot in background3
		var tree4 = LK.getAsset('tree4', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: slot3.x,
			y: slot3.y
		});
		background3.addChild(tree4);
		// Add dragging functionality to tree4
		tree4.down = function (x, y, obj) {
			var duplicate = LK.getAsset('tree4', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				y: y
			});
			game.addChild(duplicate);
			duplicate.dragging = true;
			duplicate.data = obj;
			background3.visible = false;
			scrollbar3.visible = false;
			scrollbutton3.visible = false;
			background3.children.forEach(function (child) {
				child.visible = false;
			});
			duplicate.down = function (x, y, obj) {
				this.dragging = true;
				this.data = obj;
			};
			duplicate.move = function (x, y, obj) {
				if (this.dragging) {
					var newPosition = this.parent.toLocal(obj.global);
					this.x = newPosition.x;
					this.y = newPosition.y;
				}
			};
			duplicate.up = function () {
				this.dragging = false;
				this.data = null;
			};
		};
		tree4.move = function (x, y, obj) {
			if (this.dragging) {
				var newPosition = this.parent.toLocal(obj.global);
				this.x = newPosition.x;
				this.y = newPosition.y;
			}
		};
		tree4.up = function () {
			this.dragging = false;
			this.data = null;
		};
		var tree3 = LK.getAsset('tree3', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: slot3.x,
			y: slot3.y
		});
		background3.addChild(tree3);
		// Add dragging functionality to tree3
		tree3.down = function (x, y, obj) {
			var duplicate = LK.getAsset('tree3', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				y: y
			});
			game.addChild(duplicate);
			duplicate.dragging = true;
			duplicate.data = obj;
			background3.visible = false;
			scrollbar3.visible = false;
			scrollbutton3.visible = false;
			background3.children.forEach(function (child) {
				child.visible = false;
			});
			duplicate.down = function (x, y, obj) {
				this.dragging = true;
				this.data = obj;
			};
			duplicate.move = function (x, y, obj) {
				if (this.dragging) {
					var newPosition = this.parent.toLocal(obj.global);
					this.x = newPosition.x;
					this.y = newPosition.y;
				}
			};
			duplicate.up = function () {
				this.dragging = false;
				this.data = null;
			};
		};
		tree3.move = function (x, y, obj) {
			if (this.dragging) {
				var newPosition = this.parent.toLocal(obj.global);
				this.x = newPosition.x;
				this.y = newPosition.y;
			}
		};
		tree3.up = function () {
			this.dragging = false;
			this.data = null;
		};
		var tree2 = LK.getAsset('tree2', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: slot3.x,
			y: slot3.y
		});
		background3.addChild(tree2);
		// Add dragging functionality to tree2
		tree2.down = function (x, y, obj) {
			var duplicate = LK.getAsset('tree2', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				y: y
			});
			game.addChild(duplicate);
			duplicate.dragging = true;
			duplicate.data = obj;
			background3.visible = false;
			scrollbar3.visible = false;
			scrollbutton3.visible = false;
			background3.children.forEach(function (child) {
				child.visible = false;
			});
			duplicate.down = function (x, y, obj) {
				this.dragging = true;
				this.data = obj;
			};
			duplicate.move = function (x, y, obj) {
				if (this.dragging) {
					var newPosition = this.parent.toLocal(obj.global);
					this.x = newPosition.x;
					this.y = newPosition.y;
				}
			};
			duplicate.up = function () {
				this.dragging = false;
				this.data = null;
			};
		};
		tree2.move = function (x, y, obj) {
			if (this.dragging) {
				var newPosition = this.parent.toLocal(obj.global);
				this.x = newPosition.x;
				this.y = newPosition.y;
			}
		};
		tree2.up = function () {
			this.dragging = false;
			this.data = null;
		};
	}
}
// Add 4 slots below the first slots that are synced in background3
for (var i = 0; i < 4; i++) {
	var slot3 = LK.getAsset('Slot', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: i * (slotSpacing3 + 450) + slotSpacing3 + 200,
		y: 900 // Increase y position to add more space
	});
	background3.addChildAt(slot3, background3.children.length);
}
// Add another 4 slots below the second 4 slots
for (var i = 0; i < 4; i++) {
	var slot3 = LK.getAsset('Slot', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: i * (slotSpacing3 + 450) + slotSpacing3 + 200,
		y: 1500 // Increase y position to add more space
	});
	background3.addChildAt(slot3, background3.children.length);
}
// Add another 4 slots below the third 4 slots
for (var i = 0; i < 4; i++) {
	var slot3 = LK.getAsset('Slot', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: i * (slotSpacing3 + 450) + slotSpacing3 + 200,
		y: 2100 // Increase y position to add more space
	});
	background3.addChildAt(slot3, background3.children.length);
}
scrollbutton3.down = function (x, y, obj) {
	this.dragging = true;
	this.data = obj;
	this.alpha = 0.5;
};
scrollbutton3.up = function () {
	this.alpha = 1;
	this.dragging = false;
	this.data = null;
};
scrollbutton3.move = function (x, y, obj) {
	if (this.dragging) {
		var newPosition = this.parent.toLocal(obj.global);
		// Limit the y position of the scrollbutton to the height of the scrollbar
		this.y = Math.max(Math.min(newPosition.y, scrollbar3.height - this.height / 2), this.height / 2);
		// Calculate the ratio of the scrollbutton's position to the scrollbar's height
		var ratio = (this.y - this.height / 2) / (scrollbar3.height - this.height);
		// Move the background3 up or down based on the ratio and the speed
		background3.y = -ratio * (background3.height - game.height);
	}
};
var buildAsset = LK.getAsset('Build', {
	anchorX: 0.5,
	// Center the anchor point horizontally
	anchorY: 0.0,
	// Anchor point at the top
	x: 150,
	// Position on the left side of the screen
	y: 400 // Position directly below the pause button
});
game.addChild(buildAsset);
var button1Asset = LK.getAsset('button1', {
	anchorX: 0.5,
	anchorY: 0.0,
	x: 400,
	y: 0,
	visible: false // Initially hidden
});
game.addChild(button1Asset);
var button2Asset = LK.getAsset('button2', {
	anchorX: 0.5,
	anchorY: 0.0,
	x: button1Asset.x + button1Asset.width + 10,
	y: 0,
	visible: false // Initially hidden
});
game.addChild(button2Asset);
// Add text 'House' to button1
var button1Text = new Text2('House', {
	size: 80,
	fill: 0xFFFFFF
});
button1Text.anchor.set(0.5, 0.5); // Center the text on the button
button1Text.x = button1Asset.x;
button1Text.y = button1Asset.y + button1Asset.height / 2;
button1Text.visible = false;
game.addChild(button1Text);
// Add text 'Tree' to button2
var button2Text = new Text2('Tree', {
	size: 80,
	fill: 0xFFFFFF
});
button2Text.anchor.set(0.5, 0.5); // Center the text on the button
button2Text.x = button2Asset.x;
button2Text.y = button2Asset.y + button2Asset.height / 2;
button2Text.visible = false;
game.addChild(button2Text);
// Add click event to button2 to toggle visibility of background3, its slots, and scroll components
button2Asset.down = function (x, y, obj) {
	// Toggle visibility of background3 and its components
	background3.visible = !background3.visible;
	scrollbar3.visible = !scrollbar3.visible;
	scrollbutton3.visible = !scrollbutton3.visible;
	background3.children.forEach(function (child) {
		child.visible = background3.visible;
	});
};
// Add click event to button1 to toggle visibility of background2, its slots, and scroll components
button1Asset.down = function (x, y, obj) {
	// Toggle visibility of background2 and its components
	background2.visible = !background2.visible;
	scrollbar.visible = !scrollbar.visible;
	scrollbutton.visible = !scrollbutton.visible;
	background2.children.forEach(function (child) {
		child.visible = background2.visible;
	});
};
// Add click event to build asset to hide background2 and background3 with their components
buildAsset.down = function (x, y, obj) {
	button1Asset.visible = !button1Asset.visible;
	button1Text.visible = !button1Text.visible;
	button2Asset.visible = !button2Asset.visible;
	button2Text.visible = !button2Text.visible;
	background2.visible = false;
	scrollbar.visible = false;
	scrollbutton.visible = false;
	background3.visible = false;
	scrollbar3.visible = false;
	scrollbutton3.visible = false;
};
var slotSpacing = 50; // Define the space between slots
for (var i = 0; i < 4; i++) {
	var slot = LK.getAsset('Slot', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: i * (slotSpacing + 450) + slotSpacing + 200,
		// Position slots with space between them
		y: 300 // Arbitrary y position
	});
	background2.addChildAt(slot, background2.children.length);
	// Add house1 to the first slot on the left
	if (i === 0) {
		var house1 = LK.getAsset('house1', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: slot.x,
			y: slot.y
		});
		background2.addChild(house1);
		// Add click event to hide the slot's background when the image is clicked
		house1.down = function (x, y, obj) {
			slot.visible = false;
			slot.children.forEach(function (child) {
				child.visible = false;
			});
			background2.visible = false;
			scrollbar.visible = false;
			scrollbutton.visible = false;
			background2.children.forEach(function (child) {
				child.visible = false;
			});
			this.dragging = true;
			this.data = obj;
		};
		// Add house2 to the second slot on the left
	} else if (i === 1) {
		var house2 = LK.getAsset('house2', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: slot.x,
			y: slot.y
		});
		background2.addChild(house2);
		// Add click event to hide the slot's background when the image is clicked
		house2.down = function (x, y, obj) {
			slot.visible = false;
			slot.children.forEach(function (child) {
				child.visible = false;
			});
			background2.visible = false;
			scrollbar.visible = false;
			scrollbutton.visible = false;
			background2.children.forEach(function (child) {
				child.visible = false;
			});
			this.dragging = true;
			this.data = obj;
		};
		// Add duplication functionality
		house2.down = function (x, y, obj) {
			var duplicate = LK.getAsset('house2', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				// Duplicate at cursor x position
				y: y // Duplicate at cursor y position
			});
			game.addChild(duplicate);
			duplicate.dragging = true;
			duplicate.data = obj;
			// Hide background2 and its components
			background2.visible = false;
			scrollbar.visible = false;
			scrollbutton.visible = false;
			background2.children.forEach(function (child) {
				child.visible = false;
			});
			// Enable dragging for the duplicate
			duplicate.down = function (x, y, obj) {
				this.dragging = true;
				this.data = obj;
			};
			duplicate.move = function (x, y, obj) {
				if (this.dragging) {
					var newPosition = this.parent.toLocal(obj.global);
					this.x = newPosition.x;
					this.y = newPosition.y;
				}
			};
			duplicate.up = function () {
				this.dragging = false;
				this.data = null;
			};
		};
		house2.move = function (x, y, obj) {
			if (this.dragging) {
				var newPosition = this.parent.toLocal(obj.global);
				this.x = newPosition.x;
				this.y = newPosition.y;
			}
		};
		house2.up = function () {
			this.dragging = false;
			this.data = null;
		};
		// Add house3 to the third slot on the left
	} else if (i === 2) {
		var house3 = LK.getAsset('house3', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: slot.x,
			y: slot.y
		});
		background2.addChild(house3);
		// Add click event to hide the slot's background when the image is clicked
		house3.down = function (x, y, obj) {
			slot.visible = false;
			slot.children.forEach(function (child) {
				child.visible = false;
			});
			background2.visible = false;
			scrollbar.visible = false;
			scrollbutton.visible = false;
			background2.children.forEach(function (child) {
				child.visible = false;
			});
			this.dragging = true;
			this.data = obj;
		};
		// Add duplication functionality
		house3.down = function (x, y, obj) {
			var duplicate = LK.getAsset('house3', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				// Duplicate at cursor x position
				y: y // Duplicate at cursor y position
			});
			game.addChild(duplicate);
			duplicate.dragging = true;
			duplicate.data = obj;
			// Hide background2 and its components
			background2.visible = false;
			scrollbar.visible = false;
			scrollbutton.visible = false;
			background2.children.forEach(function (child) {
				child.visible = false;
			});
			// Enable dragging for the duplicate
			duplicate.down = function (x, y, obj) {
				this.dragging = true;
				this.data = obj;
			};
			duplicate.move = function (x, y, obj) {
				if (this.dragging) {
					var newPosition = this.parent.toLocal(obj.global);
					this.x = newPosition.x;
					this.y = newPosition.y;
				}
			};
			duplicate.up = function () {
				this.dragging = false;
				this.data = null;
			};
		};
		house3.move = function (x, y, obj) {
			if (this.dragging) {
				var newPosition = this.parent.toLocal(obj.global);
				this.x = newPosition.x;
				this.y = newPosition.y;
			}
		};
		house3.up = function () {
			this.dragging = false;
			this.data = null;
		};
		// Add house4 to the fourth slot on the left
	} else if (i === 3) {
		var house4 = LK.getAsset('house4', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: slot.x,
			y: slot.y
		});
		background2.addChild(house4);
		// Add click event to hide the slot's background when the image is clicked
		house4.down = function (x, y, obj) {
			slot.visible = false;
			slot.children.forEach(function (child) {
				child.visible = false;
			});
			background2.visible = false;
			scrollbar.visible = false;
			scrollbutton.visible = false;
			background2.children.forEach(function (child) {
				child.visible = false;
			});
			this.dragging = true;
			this.data = obj;
		};
		// Add duplication functionality
		house4.down = function (x, y, obj) {
			var duplicate = LK.getAsset('house4', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				// Duplicate at cursor x position
				y: y // Duplicate at cursor y position
			});
			game.addChild(duplicate);
			duplicate.dragging = true;
			duplicate.data = obj;
			// Hide background2 and its components
			background2.visible = false;
			scrollbar.visible = false;
			scrollbutton.visible = false;
			background2.children.forEach(function (child) {
				child.visible = false;
			});
			// Enable dragging for the duplicate
			duplicate.down = function (x, y, obj) {
				this.dragging = true;
				this.data = obj;
			};
			duplicate.move = function (x, y, obj) {
				if (this.dragging) {
					var newPosition = this.parent.toLocal(obj.global);
					this.x = newPosition.x;
					this.y = newPosition.y;
				}
			};
			duplicate.up = function () {
				this.dragging = false;
				this.data = null;
			};
		};
		house4.move = function (x, y, obj) {
			if (this.dragging) {
				var newPosition = this.parent.toLocal(obj.global);
				this.x = newPosition.x;
				this.y = newPosition.y;
			}
		};
		house4.up = function () {
			this.dragging = false;
			this.data = null;
		};
		// Add duplication functionality
		house1.down = function (x, y, obj) {
			var duplicate = LK.getAsset('house1', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				// Duplicate at cursor x position
				y: y // Duplicate at cursor y position
			});
			game.addChild(duplicate);
			duplicate.dragging = true;
			duplicate.data = obj;
			// Hide background2 and its components
			background2.visible = false;
			scrollbar.visible = false;
			scrollbutton.visible = false;
			background2.children.forEach(function (child) {
				child.visible = false;
			});
			// Enable dragging for the duplicate
			duplicate.down = function (x, y, obj) {
				this.dragging = true;
				this.data = obj;
			};
			duplicate.move = function (x, y, obj) {
				if (this.dragging) {
					var newPosition = this.parent.toLocal(obj.global);
					this.x = newPosition.x;
					this.y = newPosition.y;
				}
			};
			duplicate.up = function () {
				this.dragging = false;
				this.data = null;
			};
		};
		house1.move = function (x, y, obj) {
			if (this.dragging) {
				var newPosition = this.parent.toLocal(obj.global);
				this.x = newPosition.x;
				this.y = newPosition.y;
			}
		};
		house1.up = function () {
			this.dragging = false;
			this.data = null;
		};
	}
}
// Add 4 slots below the first slots that are synced in background2
for (var i = 0; i < 4; i++) {
	var slot = LK.getAsset('Slot', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: i * (slotSpacing + 450) + slotSpacing + 200,
		y: 900 // Increase y position to add more space
	});
	background2.addChildAt(slot, background2.children.length);
	// Add house5 to the first slot in the second row
	if (i === 0) {
		var house5 = LK.getAsset('house5', {
			anchorX: 0.5,
			anchorY: 0.5,
			x: slot.x,
			y: slot.y
		});
		background2.addChild(house5);
		// Add click event to hide the slot's background when the image is clicked
		house5.down = function (x, y, obj) {
			slot.visible = false;
			slot.children.forEach(function (child) {
				child.visible = false;
			});
			background2.visible = false;
			scrollbar.visible = false;
			scrollbutton.visible = false;
			background2.children.forEach(function (child) {
				child.visible = false;
			});
			this.dragging = true;
			this.data = obj;
		};
		// Add duplication functionality
		house5.down = function (x, y, obj) {
			var duplicate = LK.getAsset('house5', {
				anchorX: 0.5,
				anchorY: 0.5,
				x: x,
				// Duplicate at cursor x position
				y: y // Duplicate at cursor y position
			});
			game.addChild(duplicate);
			duplicate.dragging = true;
			duplicate.data = obj;
			// Hide background2 and its components
			background2.visible = false;
			scrollbar.visible = false;
			scrollbutton.visible = false;
			background2.children.forEach(function (child) {
				child.visible = false;
			});
			// Enable dragging for the duplicate
			duplicate.down = function (x, y, obj) {
				this.dragging = true;
				this.data = obj;
			};
			duplicate.move = function (x, y, obj) {
				if (this.dragging) {
					var newPosition = this.parent.toLocal(obj.global);
					this.x = newPosition.x;
					this.y = newPosition.y;
				}
			};
			duplicate.up = function () {
				this.dragging = false;
				this.data = null;
			};
		};
		house5.move = function (x, y, obj) {
			if (this.dragging) {
				var newPosition = this.parent.toLocal(obj.global);
				this.x = newPosition.x;
				this.y = newPosition.y;
			}
		};
		house5.up = function () {
			this.dragging = false;
			this.data = null;
		};
	}
}
// Add another 4 slots below the second 4 slots
for (var i = 0; i < 4; i++) {
	var slot = LK.getAsset('Slot', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: i * (slotSpacing + 450) + slotSpacing + 200,
		y: 1500 // Increase y position to add more space
	});
	background2.addChildAt(slot, background2.children.length);
}
// Add another 4 slots below the third 4 slots
for (var i = 0; i < 4; i++) {
	var slot = LK.getAsset('Slot', {
		anchorX: 0.5,
		anchorY: 0.5,
		x: i * (slotSpacing + 450) + slotSpacing + 200,
		y: 2100 // Increase y position to add more space
	});
	background2.addChildAt(slot, background2.children.length);
}
scrollbutton.down = function (x, y, obj) {
	this.dragging = true;
	this.data = obj;
	this.alpha = 0.5;
};
scrollbutton.up = function () {
	this.alpha = 1;
	this.dragging = false;
	this.data = null;
};
scrollbutton.move = function (x, y, obj) {
	if (this.dragging) {
		var newPosition = this.parent.toLocal(obj.global);
		// Limit the y position of the scrollbutton to the height of the scrollbar
		this.y = Math.max(Math.min(newPosition.y, scrollbar.height - this.height / 2), this.height / 2);
		// Calculate the ratio of the scrollbutton's position to the scrollbar's height
		var ratio = (this.y - this.height / 2) / (scrollbar.height - this.height);
		// Move the background2 up or down based on the ratio and the speed
		background2.y = -ratio * (background2.height - game.height);
		// Removed synchronization of scrollbar with background2 movement
	}
};
// Removed up functionality from scrollbutton;

===================================================================
--- original.js
+++ change.js
@@ -299,10 +299,9 @@
 		tree4.up = function () {
 			this.dragging = false;
 			this.data = null;
 		};
-		// Add tree4 to the fourth slot
-	} else if (i === 3) {
+		// Removed tree5 from the fifth slot in background3
 		var tree4 = LK.getAsset('tree4', {
 			anchorX: 0.5,
 			anchorY: 0.5,
 			x: slot3.x,
@@ -352,59 +351,8 @@
 		tree4.up = function () {
 			this.dragging = false;
 			this.data = null;
 		};
-		var tree4 = LK.getAsset('tree4', {
-			anchorX: 0.5,
-			anchorY: 0.5,
-			x: slot3.x,
-			y: slot3.y
-		});
-		background3.addChild(tree4);
-		// Add dragging functionality to tree4
-		tree4.down = function (x, y, obj) {
-			var duplicate = LK.getAsset('tree4', {
-				anchorX: 0.5,
-				anchorY: 0.5,
-				x: x,
-				y: y
-			});
-			game.addChild(duplicate);
-			duplicate.dragging = true;
-			duplicate.data = obj;
-			background3.visible = false;
-			scrollbar3.visible = false;
-			scrollbutton3.visible = false;
-			background3.children.forEach(function (child) {
-				child.visible = false;
-			});
-			duplicate.down = function (x, y, obj) {
-				this.dragging = true;
-				this.data = obj;
-			};
-			duplicate.move = function (x, y, obj) {
-				if (this.dragging) {
-					var newPosition = this.parent.toLocal(obj.global);
-					this.x = newPosition.x;
-					this.y = newPosition.y;
-				}
-			};
-			duplicate.up = function () {
-				this.dragging = false;
-				this.data = null;
-			};
-		};
-		tree4.move = function (x, y, obj) {
-			if (this.dragging) {
-				var newPosition = this.parent.toLocal(obj.global);
-				this.x = newPosition.x;
-				this.y = newPosition.y;
-			}
-		};
-		tree4.up = function () {
-			this.dragging = false;
-			this.data = null;
-		};
 		var tree3 = LK.getAsset('tree3', {
 			anchorX: 0.5,
 			anchorY: 0.5,
 			x: slot3.x,
@@ -536,62 +484,8 @@
 		x: i * (slotSpacing3 + 450) + slotSpacing3 + 200,
 		y: 2100 // Increase y position to add more space
 	});
 	background3.addChildAt(slot3, background3.children.length);
-	// Add tree5 to the fifth slot in background5
-	if (i === 0) {
-		var tree5 = LK.getAsset('tree5', {
-			anchorX: 0.5,
-			anchorY: 0.5,
-			x: slot3.x,
-			y: slot3.y // Position tree5 in the first slot of the second line
-		});
-		background3.addChild(tree5);
-		// Add dragging functionality to tree5
-		tree5.down = function (x, y, obj) {
-			var duplicate = LK.getAsset('tree5', {
-				anchorX: 0.5,
-				anchorY: 0.5,
-				x: x,
-				y: y
-			});
-			game.addChild(duplicate);
-			duplicate.dragging = true;
-			duplicate.data = obj;
-			background3.visible = false;
-			scrollbar3.visible = false;
-			scrollbutton3.visible = false;
-			background3.children.forEach(function (child) {
-				child.visible = false;
-			});
-			duplicate.down = function (x, y, obj) {
-				this.dragging = true;
-				this.data = obj;
-			};
-			duplicate.move = function (x, y, obj) {
-				if (this.dragging) {
-					var newPosition = this.parent.toLocal(obj.global);
-					this.x = newPosition.x;
-					this.y = newPosition.y;
-				}
-			};
-			duplicate.up = function () {
-				this.dragging = false;
-				this.data = null;
-			};
-		};
-		tree5.move = function (x, y, obj) {
-			if (this.dragging) {
-				var newPosition = this.parent.toLocal(obj.global);
-				this.x = newPosition.x;
-				this.y = newPosition.y;
-			}
-		};
-		tree5.up = function () {
-			this.dragging = false;
-			this.data = null;
-		};
-	}
 }
 scrollbutton3.down = function (x, y, obj) {
 	this.dragging = true;
 	this.data = obj;