// COMMENTS!
/*
	MULTI
	LINE
	COMMENTS!
*/
fonts:{ //load fonts, so they are just loaded once
	button-font:{ //load font and set the name "button-font", with which it can then be used
		file: "ComicSans.ttf"
	}
}
variables:{
	scene: "gray_background" //set variable "scene"
}
elementTemplates:{
	jns47-tooltip:{
		variables:[ { name: "content", type: "string"}, {name: "name", type: "string"} ]
		div:{
			name: "jns47-tooltip_border_" + $name //variable name
			pos:{ x: cursor.x, y: cursor.y} //cursor.x, cusror.y = variable with cursor position
			size:{ width: children[0].size.width + 8px, height: children[0].size.height + 8px} //will go deeper in defintion and use the children size (if there's no absolute value coming, defines it with 0px, 0px)
			background:{ color: #909090 }
			content:{
				div:{
					name: "jns47-tooltip_main_" + $name
					pos:{ x: 4px, y: 4px} //border of 4 px
					size:{ width: children[0].size.width, height: children[0].size.height}
					background:{ color: #ffffff }
					content:{
						text{
							name: "jns47-tooltip_text_" + $name
							content: $content // variable content
							color: #101010
							align:{ x: center, y: center }
							pos:{ x: 0, y: 0 }
							font:{
								name: "button-font"
								charSize:{ width: 30px, height: auto } //width fixed, height auto - to fit width of one char
							}
						}
					}
				}
			}
		}
	}
}
classStyles:{
	button:{
		definitions:{
			pos:{ x: 0, y: 6.25%}
			size:{ width: 70%, height: 6.25%}
			background:{ color: #909090 }
			focusable: true //if there is no focusable line, it's false
			content.text{ //all texts inside a element with the class get this style
				color: #101010
				align:{ x: left, y: center }
				pos:{ x: 12%, y: 0 } //12% from left, 0 from center
				font:{
					name: "button-font"
					charSize:{ width: 3%, height: 80% }
				}
			}
		}
	}
}
ui:{
	name: "main_menu" //name = ID
	div:{
		name: "background"
		pos:{ x: 0, y: 0 } //comma if multiple values in one line
		size:{
			width: 100vw //optional comma if one value per line (auto-comma at end of the line if you don't have one)
			height: 100vh
		}
		background:{ color: #a0a0a0 }
		content:{
			div:{
				name: "logo-wrapper"
				// x = 0, y = 0 is start of the container, for position based on the screen use vw and vh
				pos:{ x: 0, y: 0 } //comma if multiple values in one line
				size:{ width: 100%, height: 12% }
				background:{ color: #ffffff }
				content:{
					rectangle:{ //rectangle has position and size
						name: "logo"
						pos:{ x: 2%, y: 2% }
						size:{ width: 20%, height: 96% }
						draw:{
							image:{ //draw the image on the rectangle
								file: "/assets/logo.tga"
								position:{
									x: start
									y: center
								}
								size: contain
							}
						}
					}
				}
			}
			div:{
				name: "main"
				pos:{ x: 0, y: 12% }
				size:{ width: 100%, height: 88% }
				background:{
					bikeView:{
						scene: $scene //map, uses variable "scene"
						pose: "bike_stand" //rider and bike pose

						showBike: true
						bike: bike_current //bike_current = variable
						bikeDirtLevel: 0

						showRider: true
						rider:{ //possible to use rider_current instead
							Helmet: rider_current.helmet //includes goggles and helmet cam
							kit:{
								manufacturer: "Alpinestars"
								model: "Racer Supermatic"
								color: "Black White"
							}
							gloves: rider_current.gloves
							boots: rider_current.boots
							protection: rider_current.protection
						}

						camera:{
							position: position3D(50, 10, 100) //x, y, z
							angle: angle3D(0, 12, 0) // rotation horizontal, rotation vertical, rotation camera? (upside-down view for example)
							fov: 100
						}
					}
				}
				content:{
					div:{
						name: "sidebar-wrapper"
						pos:{ x: 0, y: 0 }
						size:{ width: 25%, height: 88% }
						background:{ color: transparent }
						content:{
							polygon:{ //polygon has just points
								name: sidebar
								points:[ //array
									{ x: 0, y: 0 }
									{ x: 100%, y: 0 }
									{ x: 0, y: 100% }
									{ x: 80%, y: 100% }
								]
								draw:{
									color: #ffffff
								}
							}
							div:{ //getting drawn over the polygon because it's drawn top-to-bottom
								name: "testing_btn"
								classes: ["button"]
								pos:{ x: 0, y: 6.25%} //overwrites class position
								events:{
									onHover:{
										children[0].draw.color = #000000; //change first children (polygon) color to black
										playSound("hover.wav");
									}
									onClick:{
										children[0].draw.color = #ff0000; //change first children (polygon) color to red
										playSound("click.wav");
										openUI("testing_menu");
									}
								}
								content:{
									polygon:{
										name: "testing_plgn"
										points:[
											{ x: 0, y: 0 }
											{ x: 10%, y: 0 }
											{ x: 0, y: 100% }
											{ x: 5%, y: 100% }
										]
										draw:{
											color: #707070
										}
									}
									text:{
										name: "testing_txt"
										content: languageText("testing.title", language_current) // languageText = function, returns text with ID "testing.title" in the language language_current, language_current = variable
									}
									jns47-tooltip:{ //custom defined element with just two variables, "content" and "name"
										name: "testing_tltp"
										content: languageText("testing.tooltip", language_current)
									}
								}
							}
							div:{
								name: "race_btn"
								classes: ["button"]
								events:{
									onHover:{
										children[0].draw.color = #000000;
										playSound("hover.wav");
									}
									onClick:{
										children[0].draw.color = #ff0000;
										playSound("click.wav");
										openUI("race_menu");
									}
								}
								content:{
									polygon:{
										name: "race_plgn"
										points:[
											{ x: 0, y: 0 }
											{ x: 10%, y: 0 }
											{ x: 0, y: 100% }
											{ x: 5%, y: 100% }
										]
										draw:{
											color: #707070
										}
									}
									text:{
										name: "race_txt"
										content: languageText("race.title", language_current)
										color(connection.isEstablished == true): #600000 //makes no sense, but it's just and example for conditional style
									}
									jns47-tooltip:{
										name: "race_tltp"
										content: languageText("race.tooltip", language_current)
									}
								}
							}
							div:{
								name: "bike_btn"
								classes: ["button"]
								events:{
									onHover:{
										children[0].draw.color = #000000;
										playSound("hover.wav");
									}
									onClick:{
										children[0].draw.color = #ff0000;
										playSound("click.wav");
										openUI("bike_menu");
									}
								}
								content:{
									polygon:{
										name: "bike_plgn"
										points:[
											{ x: 0, y: 0 }
											{ x: 10%, y: 0 }
											{ x: 0, y: 100% }
											{ x: 5%, y: 100% }
										]
										draw:{
											color: #707070
										}
									}
									text:{
										name: "bike_txt"
										content: languageText("bike.title", language_current)
									}
									jns47-tooltip:{
										name: "bike_tltp"
										content: languageText("bike.tooltip", language_current)
									}
								}
							}
							div:{
								name: "replays_btn"
								classes: ["button"]
								events:{
									onHover:{
										children[0].draw.color = #000000;
										playSound("hover.wav");
									}
									onClick:{
										children[0].draw.color = #ff0000;
										playSound("click.wav");
										openUI("replays_menu");
									}
								}
								content:{
									polygon:{
										name: "replays_plgn"
										points:[
											{ x: 0, y: 0 }
											{ x: 10%, y: 0 }
											{ x: 0, y: 100% }
											{ x: 5%, y: 100% }
										]
										draw:{
											color: #707070
										}
									}
									text:{
										name: "replays_txt"
										content: languageText("replays.title", language_current)
									}
									jns47-tooltip:{
										name: "replays_tltp"
										content: languageText("replays.tooltip", language_current)
									}
								}
							}
							div:{
								name: "best_laps_btn"
								classes: ["button"]
								events:{
									onHover:{
										children[0].draw.color = #000000;
										playSound("hover.wav");
									}
									onClick:{
										children[0].draw.color = #ff0000;
										playSound("click.wav");
										openUI("best_laps_menu");
									}
								}
								content:{
									polygon:{
										name: "best_laps_plgn"
										points:[
											{ x: 0, y: 0 }
											{ x: 10%, y: 0 }
											{ x: 0, y: 100% }
											{ x: 5%, y: 100% }
										]
										draw:{
											color: #707070
										}
									}
									text:{
										name: "best_laps_txt"
										content: languageText("best_laps.title", language_current)
									}
									jns47-tooltip:{
										name: "best_laps_tltp"
										content: languageText("best_laps.tooltip", language_current)
									}
								}
							}
							div:{
								name: "profile_btn"
								classes: ["button"]
								events:{
									onHover:{
										children[0].draw.color = #000000;
										playSound("hover.wav");
									}
									onClick:{
										children[0].draw.color = #ff0000;
										playSound("click.wav");
										openUI("profile_menu");
									}
								}
								content:{
									polygon:{
										name: "profile_plgn"
										points:[
											{ x: 0, y: 0 }
											{ x: 10%, y: 0 }
											{ x: 0, y: 100% }
											{ x: 5%, y: 100% }
										]
										draw:{
											color: #707070
										}
									}
									text:{
										name: "profile_txt"
										content: languageText("profile.title", language_current)
									}
									jns47-tooltip:{
										name: "profile_tltp"
										content: languageText("profile.tooltip", language_current)
									}
								}
							}
							div:{
								name: "settings_btn"
								classes: ["button"]
								events:{
									onHover:{
										children[0].draw.color = #000000;
										playSound("hover.wav");
									}
									onClick:{
										children[0].draw.color = #ff0000;
										playSound("click.wav");
										openUI("settings_menu");
									}
								}
								content:{
									polygon:{
										name: "settings_plgn"
										points:[
											{ x: 0, y: 0 }
											{ x: 10%, y: 0 }
											{ x: 0, y: 100% }
											{ x: 5%, y: 100% }
										]
										draw:{
											color: #707070
										}
									}
									text:{
										name: "settings_txt"
										content: languageText("settings.title", language_current)
									}
									jns47-tooltip:{
										name: "settings_tltp"
										content: languageText("settings.tooltip", language_current)
									}
								}
							}
							div:{
								name: "inspect_bike_btn"
								classes: ["button"]
								events:{
									onHover:{
										children[0].draw.color = #000000;
										playSound("hover.wav");
									}
									onClick:{
										children[0].draw.color = #ff0000;
										playSound("click.wav");
										openUI("inspect_bike_menu");
									}
								}
								content:{
									polygon:{
										name: "inspect_bike_plgn"
										points:[
											{ x: 0, y: 0 }
											{ x: 10%, y: 0 }
											{ x: 0, y: 100% }
											{ x: 5%, y: 100% }
										]
										draw:{
											color: #707070
										}
									}
									text:{
										name: "inspect_bike_txt"
										content: languageText("inspect_bike.title", language_current)
									}
									jns47-tooltip:{
										name: "inspect_bike_tltp"
										content: languageText("inspect_bike.tooltip", language_current)
									}
								}
							}
							div:{
								name: "exit_btn"
								classes: ["button"]
								events:{
									onHover:{
										children[0].draw.color = #000000;
										playSound("hover.wav");
									}
									onClick:{
										children[0].draw.color = #ff0000;
										playSound("click.wav");
										openUI("exit_box");
									}
								}
								content:{
									polygon:{
										name: "exit_plgn"
										points:[
											{ x: 0, y: 0 }
											{ x: 10%, y: 0 }
											{ x: 0, y: 100% }
											{ x: 5%, y: 100% }
										]
										draw:{
											color: #707070
										}
									}
									text:{
										name: "exit_txt"
										content: languageText("exit.title", language_current)
									}
									jns47-tooltip:{
										name: "exit_tltp"
										content: languageText("exit.tooltip", language_current)
									}
								}
							}
						}
					}
				}
			}
		}
	}
}