functional searcg

src/gui/GuiButton.hx

@@ -80,6 +80,15 @@ class GuiButton extends GuiAnim {
 		}
 		if (buttonType == Radio) {
 			pressed = true;
+			// Unpress all the other radios
+			for (c in this.parent.children) {
+				if (c != this && c is GuiButton) {
+					var cb:GuiButton = cast c;
+					if (cb.buttonType == Radio) {
+						cb.pressed = false;
+					}
+				}
+			}
 		}
 	}
 

src/gui/GuiScrollCtrl.hx

@@ -84,7 +84,7 @@ class GuiScrollCtrl extends GuiControl {
 	}
 
 	public override function render(scene2d:Scene) {
-		updateScrollVisual();
+		this.dirty = true;
 
 		if (scene2d.contains(scrollBarY))
 			scene2d.removeChild(scrollBarY);
@@ -95,12 +95,19 @@ class GuiScrollCtrl extends GuiControl {
 		scene2d.addChild(scrollBarY);
 		scene2d.addChild(clickInteractive);
 
+		updateScrollVisual();
+
 		super.render(scene2d);
 	}
 
 	public function updateScrollVisual() {
 		var renderRect = this.getRenderRectangle();
 
+		if (maxScrollY < renderRect.extent.y) {
+			scrollBarY.clear();
+			return;
+		}
+
 		var scrollBarYSize = renderRect.extent.y * renderRect.extent.y / maxScrollY;
 
 		this.scrollY = Util.clamp(scrollY, 0, renderRect.extent.y - scrollBarYSize);

src/gui/GuiTextInput.hx

@@ -15,10 +15,17 @@ class GuiTextInput extends GuiControl {
 	var text:TextInput;
 	var justify:Justification = Left;
 
+	var onTextChange:String->Void;
+
 	public function new(font:h2d.Font) {
 		super();
 		this.text = new TextInput(font);
 		this.text.textColor = 0;
+		this.text.onChange = () -> {
+			if (onTextChange != null) {
+				onTextChange(this.text.text);
+			}
+		};
 	}
 
 	public override function render(scene2d:Scene) {

src/gui/GuiTextListCtrl.hx

@@ -1,5 +1,10 @@
 package gui;
 
+import h3d.Engine;
+import h2d.Tile;
+import h2d.Bitmap;
+import h3d.mat.Texture;
+import shaders.GuiClipFilter;
 import h2d.Graphics;
 import gui.GuiControl.MouseState;
 import h2d.Scene;
@@ -9,7 +14,6 @@ import src.MarbleGame;
 
 class GuiTextListCtrl extends GuiControl {
 	public var texts:Array<String>;
-
 	public var onSelectedFunc:Int->Void;
 
 	var font:Font;
@@ -17,8 +21,19 @@ class GuiTextListCtrl extends GuiControl {
 	var g:Graphics;
 	var _prevSelected:Int = -1;
 
+	var bmp:Bitmap;
+	var textTexture:Texture;
+	var _dirty = true;
+
+	public var selectedColor:Int = 0x206464;
+	public var selectedFillColor:Int = 0xC8C8C8;
+
 	public var textYOffset:Int = 0;
 
+	public var scroll:Float = 0;
+
+	public var scrollable:Bool = false;
+
 	public function new(font:Font, texts:Array<String>) {
 		super();
 		this.font = font;
@@ -33,44 +48,101 @@ class GuiTextListCtrl extends GuiControl {
 		this.g = new Graphics();
 	}
 
-	public override function render(scene2d:Scene) {
+	public function setTexts(texts:Array<String>) {
 		var renderRect = this.getRenderRectangle();
+		for (textObj in this.textObjs) {
+			textObj.remove();
+		}
+		this.textObjs = [];
+		for (text in texts) {
+			var tobj = new Text(font);
+			tobj.text = text;
+			tobj.textColor = 0;
+			textObjs.push(tobj);
+		}
+		this.texts = texts;
+		this._prevSelected = -1;
+		if (this.onSelectedFunc != null)
+			this.onSelectedFunc(-1);
+		this._dirty = true;
 
-		g.setPosition(renderRect.position.x, renderRect.position.y);
-		if (scene2d.contains(g))
-			scene2d.removeChild(g);
-		scene2d.addChild(g);
+		redrawSelectionRect(renderRect);
 
 		for (i in 0...textObjs.length) {
 			var text = textObjs[i];
-			text.setPosition(Math.floor(renderRect.position.x + 5), Math.floor(renderRect.position.y + (i * (text.font.size + 4) + 5 + textYOffset)));
-			if (scene2d.contains(text))
-				scene2d.removeChild(text);
-			scene2d.addChild(text);
+			text.setPosition(Math.floor((!scrollable ? renderRect.position.x : 0) + 5),
+				Math.floor((!scrollable ? renderRect.position.y : 0) + (i * (text.font.size + 4) + 5 + textYOffset - this.scroll)));
 
 			if (_prevSelected == i) {
-				text.textColor = 0x206464;
+				text.textColor = selectedColor;
+			}
+		}
+	}
+
+	public override function render(scene2d:Scene) {
+		var renderRect = this.getRenderRectangle();
+
+		if (scene2d.contains(g))
+			scene2d.removeChild(g);
+		scene2d.addChild(g);
+		g.setPosition(renderRect.position.x, renderRect.position.y - this.scroll);
+
+		if (scrollable) {
+			if (textTexture != null)
+				textTexture.dispose();
+
+			var htr = this.getHitTestRect();
+
+			textTexture = new Texture(cast htr.extent.x, cast htr.extent.y, [Target]);
+			if (bmp != null) {
+				bmp.tile = Tile.fromTexture(textTexture);
+			} else {
+				bmp = new Bitmap(Tile.fromTexture(textTexture));
+			}
+
+			if (scene2d.contains(bmp))
+				scene2d.removeChild(bmp);
+
+			scene2d.addChild(bmp);
+
+			bmp.setPosition(htr.position.x, htr.position.y);
+		}
+
+		for (i in 0...textObjs.length) {
+			var text = textObjs[i];
+			text.setPosition(Math.floor((!scrollable ? renderRect.position.x : 0) + 5),
+				Math.floor((!scrollable ? renderRect.position.y : 0) + (i * (text.font.size + 4) + 5 + textYOffset - this.scroll)));
+			if (!scrollable) {
+				if (scene2d.contains(text))
+					scene2d.removeChild(text);
+				scene2d.addChild(text);
+			}
+
+			if (_prevSelected == i) {
+				text.textColor = selectedColor;
 			}
 		}
 
-		if (_prevSelected != -1) {
-			g.clear();
-			g.beginFill(0xC8C8C8);
-			g.drawRect(0, 5 + (_prevSelected * (font.size + 4)) - 3, renderRect.extent.x, font.size + 4);
-			g.endFill();
-		} else {
-			g.clear();
-		}
+		redrawSelectionRect(renderRect);
+		redrawText();
 
 		super.render(scene2d);
 	}
 
+	public function calculateFullHeight() {
+		return (this.texts.length * (font.size + 4));
+	}
+
 	public override function dispose() {
 		super.dispose();
 		for (text in textObjs) {
 			text.remove();
 		}
 		this.g.remove();
+		if (this.scrollable) {
+			this.textTexture.dispose();
+			this.bmp.remove();
+		}
 	}
 
 	public override function onRemove() {
@@ -98,9 +170,10 @@ class GuiTextListCtrl extends GuiControl {
 		for (i in 0...textObjs.length) {
 			var selected = i == hoverIndex || i == this._prevSelected;
 			var text = textObjs[i];
-			text.textColor = selected ? 0x206464 : 0;
+			text.textColor = selected ? selectedColor : 0;
 			// fill color = 0xC8C8C8
 		}
+		this._dirty = true;
 		// obviously in renderRect
 	}
 
@@ -112,6 +185,7 @@ class GuiTextListCtrl extends GuiControl {
 			text.textColor = 0;
 			// fill color = 0xC8C8C8
 		}
+		this._dirty = true;
 	}
 
 	public override function onMousePress(mouseState:MouseState) {
@@ -121,25 +195,90 @@ class GuiTextListCtrl extends GuiControl {
 		var renderRect = this.getRenderRectangle();
 		var yStart = renderRect.position.y;
 		var dy = mousePos.y - yStart;
-		var selectedIndex = Math.floor(dy / (font.size + 4));
+		var selectedIndex = Math.floor((dy + this.scroll) / (font.size + 4));
 		if (selectedIndex >= this.texts.length) {
 			selectedIndex = -1;
 		}
 		if (_prevSelected != selectedIndex) {
+			this._dirty = true;
 			_prevSelected = selectedIndex;
 
-			if (selectedIndex != -1) {
-				g.clear();
-				g.beginFill(0xC8C8C8);
-				g.drawRect(0, 5 + (selectedIndex * (font.size + 4)) - 3, renderRect.extent.x, font.size + 4);
-				g.endFill();
-			} else {
-				g.clear();
-			}
+			redrawSelectionRect(renderRect);
 		}
 
 		if (onSelectedFunc != null) {
 			onSelectedFunc(selectedIndex);
 		}
 	}
+
+	function redrawSelectionRect(renderRect:Rect) {
+		if (_prevSelected != -1) {
+			g.clear();
+			g.beginFill(selectedFillColor);
+
+			// Check if we are between the top and bottom, render normally in that case
+			var topY = 2 + (_prevSelected * (font.size + 4)) + g.y;
+			var bottomY = 2 + (_prevSelected * (font.size + 4)) + g.y + font.size + 4;
+			var topRectY = renderRect.position.y;
+			var bottomRectY = renderRect.position.y + renderRect.extent.y;
+
+			if (topY >= topRectY && bottomY <= bottomRectY)
+				g.drawRect(0, 5 + (_prevSelected * (font.size + 4)) - 3, renderRect.extent.x, font.size + 4);
+			// We need to do math the draw the partially visible top selected
+			if (topY <= topRectY && bottomY >= topRectY) {
+				g.drawRect(0, this.scroll, renderRect.extent.x, topY + font.size + 4 - renderRect.position.y);
+			}
+			// Same for the bottom
+			if (topY <= bottomRectY && bottomY >= bottomRectY) {
+				g.drawRect(0, this.scroll
+					+ renderRect.extent.y
+					- font.size
+					- 4
+					+ (topY + font.size + 4 - bottomRectY), renderRect.extent.x,
+					renderRect.position.y
+					+ renderRect.extent.y
+					- (topY));
+			}
+			g.endFill();
+		} else {
+			g.clear();
+		}
+	}
+
+	public override function onScroll(scrollX:Float, scrollY:Float) {
+		super.onScroll(scrollX, scrollY);
+		var renderRect = this.getRenderRectangle();
+
+		this.scroll = scrollY;
+		var hittestrect = this.getHitTestRect();
+		for (i in 0...textObjs.length) {
+			var text = textObjs[i];
+			text.y = Math.floor((i * (text.font.size + 4) + 5 + textYOffset - scrollY));
+			g.y = renderRect.position.y - scrollY;
+
+			// if (text.y < hittestrect.position.y - text.textHeight || text.y > hittestrect.position.y + hittestrect.extent.y)
+			// 	text.visible = false;
+			// else {
+			// 	text.visible = true;
+			// }
+		}
+		redrawSelectionRect(hittestrect);
+		this._dirty = true;
+	}
+
+	function redrawText() {
+		if (this.scrollable) {
+			if (this._dirty) {
+				textTexture.clear(0, 0);
+				for (txt in this.textObjs)
+					txt.drawTo(textTexture);
+				this._dirty = false;
+			}
+		}
+	}
+
+	public override function renderEngine(engine:Engine) {
+		redrawText();
+		super.renderEngine(engine);
+	}
 }

src/gui/OOBInsultGui.hx

@@ -132,7 +132,7 @@ class OOBInsultGui extends GuiImage {
 			"Wow, you truly are bad, probably one of the worst Marble Blast players to ever live on this planet. Or you just keep failing to good runs. Are you sure you aren\'t playing an easy level while this message pops up? Whatever, those messages will now repeat themselves (with a few exceptions), but for now, please remember this:\n\n\nYOU suck!",
 			"SING WITH ME:\n\nForty nine thousand nine hundred and ninety nine times Out of Bounds, forty nine thousand nine hundred and ninety nine times Out of Bounds, knock a marble off the level, fifty thousand times Out of Bounds!",
 			"What\'s that in the sky? Is it a plane? Is it a bird? No! It\'s the marble! And it\'s way off the level!!! Congratulations on hitting 300,000 Out of Bounds mark. You may now suck more.",
-			"1,000,000 times Out of Bounds?!?! You seriously love this game, don\'t you? Well then, thanks for playing PlatinumQuest! Please keep this bad playing up and continue to go Out of Bounds. We\'ll just laugh at how bad you are. Also, this is the final message as from now on they\'re all repeats. Thank you for sucking at PlatinumQuest!",
+			"1,000,000 times Out of Bounds?!?! You seriously love this game, don\'t you? Well then, thanks for playing Marble Blast Platinum! Please keep this bad playing up and continue to go Out of Bounds. We\'ll just laugh at how bad you are. Also, this is the final message as from now on they\'re all repeats. Thank you for sucking at Marble Blast Platinum!",
 			"You have no life. This is official."
 		];
 

src/gui/PlayMissionGui.hx

@@ -61,7 +61,7 @@ class PlayMissionGui extends GuiImage {
 			currentSelectionStatic = MissionList.missionList["platinum"]["beginner"].length - 1;
 		}
 
-		currentSelection = PlayMissionGui.currentSelectionStatic;
+		// currentSelection = PlayMissionGui.currentSelectionStatic;
 		currentCategory = PlayMissionGui.currentCategoryStatic;
 		currentGame = PlayMissionGui.currentGameStatic;
 
@@ -181,7 +181,9 @@ class PlayMissionGui extends GuiImage {
 		var pmSearch = new GuiButton(loadButtonImages("data/ui/play/search"));
 		pmSearch.position = new Vector(315, 325);
 		pmSearch.extent = new Vector(43, 43);
-		// todo search button functionality
+		pmSearch.pressedAction = (e) -> {
+			MarbleGame.canvas.pushDialog(new SearchGui(currentGame));
+		}
 		pmBox.addChild(pmSearch);
 
 		var pmPrev = new GuiButton(loadButtonImages("data/ui/play/prev"));
@@ -777,6 +779,8 @@ class PlayMissionGui extends GuiImage {
 				index = 0;
 			}
 
+			var selectionChanged = currentSelection != index;
+
 			currentSelection = index;
 			currentSelectionStatic = currentSelection;
 
@@ -892,29 +896,31 @@ class PlayMissionGui extends GuiImage {
 
 			setScoreHover(scoreButtonHover);
 
-			pmPreview.bmp.tile = tmpprevtile;
-			#if js
-			switch (previewTimeoutHandle) {
-				case None:
-					previewTimeoutHandle = Some(js.Browser.window.setTimeout(() -> {
-						currentMission.getPreviewImage(prevImg -> {
-							pmPreview.bmp.tile = prevImg;
-						});
-					}, 75));
-				case Some(previewTimeoutHandle_id):
-					js.Browser.window.clearTimeout(previewTimeoutHandle_id);
-					previewTimeoutHandle = Some(js.Browser.window.setTimeout(() -> {
-						currentMission.getPreviewImage(prevImg -> {
-							pmPreview.bmp.tile = prevImg;
-						});
-					}, 75));
+			if (selectionChanged) {
+				pmPreview.bmp.tile = tmpprevtile;
+				#if js
+				switch (previewTimeoutHandle) {
+					case None:
+						previewTimeoutHandle = Some(js.Browser.window.setTimeout(() -> {
+							currentMission.getPreviewImage(prevImg -> {
+								pmPreview.bmp.tile = prevImg;
+							});
+						}, 75));
+					case Some(previewTimeoutHandle_id):
+						js.Browser.window.clearTimeout(previewTimeoutHandle_id);
+						previewTimeoutHandle = Some(js.Browser.window.setTimeout(() -> {
+							currentMission.getPreviewImage(prevImg -> {
+								pmPreview.bmp.tile = prevImg;
+							});
+						}, 75));
+				}
+				#end
+				#if hl
+				currentMission.getPreviewImage(prevImg -> {
+					pmPreview.bmp.tile = prevImg;
+				}); // Shit be sync
+				#end
 			}
-			#end
-			#if hl
-			currentMission.getPreviewImage(prevImg -> {
-				pmPreview.bmp.tile = prevImg;
-			}); // Shit be sync
-			#end
 		}
 
 		setCategoryFunc(currentGame, currentCategoryStatic, false);

src/gui/SearchGui.hx

@@ -0,0 +1,245 @@
+package gui;
+
+import h2d.Tile;
+import hxd.BitmapData;
+import src.MarbleGame;
+import hxd.res.BitmapFont;
+import h3d.Vector;
+import src.ResourceLoader;
+import src.Settings;
+
+class SearchGui extends GuiImage {
+	public function new(game:String) {
+		var img = ResourceLoader.getImage("data/ui/search/window.png");
+		super(img.resource.toTile());
+
+		this.horizSizing = Center;
+		this.vertSizing = Center;
+		this.position = new Vector(76, 8);
+		this.extent = new Vector(487, 463);
+
+		var missionList = [];
+		for (diff in MissionList.missionList[game]) {
+			for (mis in diff) {
+				missionList.push({
+					mis: mis,
+					name: mis.title,
+					artist: mis.artist,
+					path: mis.path
+				});
+			}
+		}
+
+		var displayList = missionList.map(x -> x.name);
+		displayList.sort((x, y) -> (x > y) ? 1 : (x == y ? 0 : -1));
+		missionList.sort((x, y) -> x.name > y.name ? 1 : (x.name == y.name ? 0 : -1));
+		var retrieveMissionList = missionList;
+
+		var searchMissionList:GuiTextListCtrl = null;
+		var scrollCtrl:GuiScrollCtrl = null;
+
+		var currentSortBy = "title";
+
+		function sortBy(type:String, txt:String = "") {
+			if (type == "title") {
+				retrieveMissionList = missionList.filter(x -> StringTools.contains(x.name.toLowerCase(), txt.toLowerCase()));
+				displayList = retrieveMissionList.map(x -> x.name);
+				displayList.sort((x, y) -> (x > y) ? 1 : (x == y ? 0 : -1));
+				retrieveMissionList.sort((x, y) -> x.name > y.name ? 1 : (x.name == y.name ? 0 : -1));
+			}
+			if (type == "artist") {
+				retrieveMissionList = missionList.filter(x -> StringTools.contains(x.artist.toLowerCase(), txt.toLowerCase()));
+				retrieveMissionList.sort((x, y) -> x.artist > y.artist ? 1 : (x.artist == y.artist ? 0 : -1));
+				displayList = retrieveMissionList.map(x -> '${x.name} By ${x.artist}');
+			}
+			if (type == "file") {
+				retrieveMissionList = missionList.filter(x -> StringTools.contains(x.path.toLowerCase(), txt.toLowerCase()));
+				retrieveMissionList.sort((x, y) -> x.path > y.path ? 1 : (x.path == y.path ? 0 : -1));
+				var idxofslash = 0;
+				displayList = retrieveMissionList.map(x -> {
+					var idxofslash = 0;
+					var slashcount = 0;
+					for (i in 0...x.path.length) {
+						if (x.path.charCodeAt(x.path.length - i - 1) == '/'.code) {
+							slashcount++;
+							if (slashcount == 2) {
+								idxofslash = x.path.length - i - 1;
+								break;
+							}
+						}
+					}
+					return '${x.path.substr(idxofslash + 1)}';
+				});
+			}
+			searchMissionList.setTexts(displayList);
+			scrollCtrl.setScrollMax(searchMissionList.calculateFullHeight());
+		}
+
+		function loadButtonImages(path:String) {
+			var normal = ResourceLoader.getResource('${path}_n.png', ResourceLoader.getImage, this.imageResources).toTile();
+			var hover = ResourceLoader.getResource('${path}_h.png', ResourceLoader.getImage, this.imageResources).toTile();
+			var pressed = ResourceLoader.getResource('${path}_d.png', ResourceLoader.getImage, this.imageResources).toTile();
+			var disabledObj = ResourceLoader.getResource('${path}_i.png', ResourceLoader.getImage, this.imageResources);
+			var disabled = disabledObj != null ? disabledObj.toTile() : null;
+			return [normal, hover, pressed, disabled];
+		}
+
+		var markerFelt32fontdata = ResourceLoader.getFileEntry("data/font/MarkerFelt.fnt");
+		var markerFelt32b = new BitmapFont(markerFelt32fontdata.entry);
+		@:privateAccess markerFelt32b.loader = ResourceLoader.loader;
+		var markerFelt32 = markerFelt32b.toSdfFont(cast 26 * Settings.uiScale, MultiChannel);
+		var markerFelt24 = markerFelt32b.toSdfFont(cast 18 * Settings.uiScale, MultiChannel);
+		var markerFelt18 = markerFelt32b.toSdfFont(cast 14 * Settings.uiScale, MultiChannel);
+
+		var domcasual32fontdata = ResourceLoader.getFileEntry("data/font/DomCasualD.fnt");
+		var domcasual32b = new BitmapFont(domcasual32fontdata.entry);
+		@:privateAccess domcasual32b.loader = ResourceLoader.loader;
+		var domcasual32 = domcasual32b.toSdfFont(cast 26 * Settings.uiScale, MultiChannel);
+		var domcasual64 = domcasual32b.toSdfFont(cast 58 * Settings.uiScale, MultiChannel);
+		var domcasual24 = domcasual32b.toSdfFont(cast 20 * Settings.uiScale, MultiChannel);
+
+		var searchCancel = new GuiButton(loadButtonImages("data/ui/search/cancel"));
+		searchCancel.vertSizing = Top;
+		searchCancel.position = new Vector(21, 395);
+		searchCancel.extent = new Vector(94, 45);
+		searchCancel.pressedAction = (e) -> {
+			MarbleGame.canvas.popDialog(this);
+		}
+		this.addChild(searchCancel);
+
+		var selectedIdx:Int = -1;
+
+		var searchPlay = new GuiButton(loadButtonImages("data/ui/search/play"));
+		searchPlay.position = new Vector(370, 395);
+		searchPlay.extent = new Vector(94, 45);
+		searchPlay.disabled = true;
+		searchPlay.pressedAction = (e) -> {
+			if (selectedIdx != -1) {
+				var mis = retrieveMissionList[selectedIdx];
+				cast(this.parent, Canvas).marbleGame.playMission(mis.mis);
+			}
+		}
+		this.addChild(searchPlay);
+
+		var searchTitle = new GuiText(domcasual24);
+		searchTitle.position = new Vector(52, 19);
+		searchTitle.extent = new Vector(64, 25);
+		searchTitle.text.textColor = 0x696969;
+		searchTitle.text.text = "Title:";
+		this.addChild(searchTitle);
+
+		var searchEdit = new GuiTextInput(domcasual24);
+		searchEdit.position = new Vector(91, 19);
+		searchEdit.extent = new Vector(373, 29);
+		searchEdit.onTextChange = (txt) -> {
+			sortBy(currentSortBy, txt);
+		};
+		this.addChild(searchEdit);
+
+		scrollCtrl = new GuiScrollCtrl(ResourceLoader.getResource("data/ui/common/philscroll.png", ResourceLoader.getImage, this.imageResources).toTile());
+		scrollCtrl.position = new Vector(19, 65);
+		scrollCtrl.extent = new Vector(447, 317);
+		this.addChild(scrollCtrl);
+
+		searchMissionList = new GuiTextListCtrl(markerFelt24, displayList);
+		searchMissionList.selectedColor = 0;
+		searchMissionList.horizSizing = Width;
+		searchMissionList.position = new Vector(4, -1);
+		searchMissionList.extent = new Vector(432, 2880);
+		searchMissionList.textYOffset = -6;
+		searchMissionList.scrollable = true;
+		searchMissionList.onSelectedFunc = (sel) -> {
+			selectedIdx = sel;
+			if (retrieveMissionList.length <= selectedIdx || selectedIdx < 0) {
+				searchPlay.disabled = true;
+			} else {
+				searchPlay.disabled = false;
+			}
+		}
+		scrollCtrl.addChild(searchMissionList);
+		scrollCtrl.setScrollMax(searchMissionList.calculateFullHeight());
+
+		var optionsPopup:GuiButton = null;
+
+		var searchOptions = new GuiButton(loadButtonImages("data/ui/search/options"));
+		searchOptions.vertSizing = Top;
+		searchOptions.horizSizing = Right;
+		searchOptions.position = new Vector(121, 395);
+		searchOptions.extent = new Vector(94, 45);
+		searchOptions.pressedAction = (e) -> {
+			MarbleGame.canvas.pushDialog(optionsPopup);
+		}
+		this.addChild(searchOptions);
+
+		var temprev = new BitmapData(1, 1);
+		temprev.setPixel(0, 0, 0);
+		var tmpprevtile = Tile.fromBitmap(temprev);
+
+		optionsPopup = new GuiButton([tmpprevtile, tmpprevtile, tmpprevtile]);
+		optionsPopup.horizSizing = Width;
+		optionsPopup.vertSizing = Height;
+		optionsPopup.position = new Vector(0, 0);
+		optionsPopup.extent = new Vector(640, 480);
+		optionsPopup.pressedAction = (e) -> {
+			MarbleGame.canvas.popDialog(optionsPopup, false);
+		}
+
+		var optionsPopupInner = new GuiControl();
+		optionsPopupInner.horizSizing = Center;
+		optionsPopupInner.vertSizing = Center;
+		optionsPopupInner.position = new Vector(80, 7);
+		optionsPopupInner.extent = new Vector(480, 465);
+		optionsPopup.addChild(optionsPopupInner);
+
+		var optionsBgR = ResourceLoader.getResource('data/ui/search/more.png', ResourceLoader.getImage, this.imageResources).toTile();
+
+		var optionsBg = new GuiImage(optionsBgR);
+		optionsBg.position = new Vector(0, 281);
+		optionsBg.extent = new Vector(348, 148);
+		optionsPopupInner.addChild(optionsBg);
+
+		var searchByFile = new GuiButton(loadButtonImages("data/ui/search/file"));
+		searchByFile.buttonType = Radio;
+		searchByFile.position = new Vector(229, 32);
+		searchByFile.extent = new Vector(68, 45);
+		searchByFile.pressedAction = (e) -> {
+			searchTitle.text.text = "File:";
+			currentSortBy = "file";
+			sortBy("file");
+		};
+		optionsBg.addChild(searchByFile);
+
+		var searchByartist = new GuiButton(loadButtonImages("data/ui/search/artist"));
+		searchByartist.buttonType = Radio;
+		searchByartist.position = new Vector(159, 32);
+		searchByartist.extent = new Vector(72, 45);
+		searchByartist.pressedAction = (e) -> {
+			searchTitle.text.text = "Artist:";
+			currentSortBy = "artist";
+			sortBy("artist");
+		};
+		optionsBg.addChild(searchByartist);
+
+		var searchByTitle = new GuiButton(loadButtonImages("data/ui/search/name"));
+		searchByTitle.buttonType = Radio;
+		searchByTitle.position = new Vector(92, 32);
+		searchByTitle.extent = new Vector(68, 45);
+		searchByTitle.pressed = true;
+		searchByTitle.pressedAction = (e) -> {
+			searchTitle.text.text = "Title:";
+			currentSortBy = "title";
+			sortBy("title");
+		};
+		optionsBg.addChild(searchByTitle);
+
+		var searchRandom = new GuiButton(loadButtonImages("data/ui/search/random"));
+		searchRandom.vertSizing = Top;
+		searchRandom.position = new Vector(44, 32);
+		searchRandom.extent = new Vector(44, 44);
+		searchRandom.pressedAction = (e) -> {
+			var mis = missionList[Math.floor(Math.random() * missionList.length)];
+			cast(this.parent, Canvas).marbleGame.playMission(mis.mis);
+		}
+		optionsBg.addChild(searchRandom);
+	}
+}