<!--
	Declare which languages this document supports.
	Note that it will inherit if you've got iframes which don't declare this.
-->
<meta name='languages' content='en,fr,ar'/>

<!--

Optionally declare src='..' on the above meta tag to change where your text actually comes from.

(src='/Languages/' is the default).

When you use a group, like &GroupName.VariableName;, it goes in a sub-folder.

So for example you'll see &Example.LocalizationTitle; below. When set to English, it's coming from
resources://Languages/Example/en.xml 

-->

<!-- The PowerUI logo in the middle of the screen. -->
<div style='background:url(powerUI-logo.png) no-repeat;background-position:center;height:100%;position:fixed;'></div>


<style type='text/css'>

html{
	background:url(noise-background.png);
}

.padded{
	padding:20px;
}

body{
	overflow-y:auto;
}

</style>

<div style='padding:25px;'>
	<b>
		<u id='nitro_title'>
			&Example.LocalizationTitle;
		</u>
	</b>
	<br>
	<br>
	&Example.SelectLanguage; <span id='languageSelect'></span>
	<br>
	<br>
	&Example.LocalizationIntro;
	<br>
	<br>
	<br>
	&Example.SelectAUsername; <input type='text' value='Bob' onkeyup='changeUsername(event)'/> 
	&Example.SelectGender; 
	<select onchange='changeGender(event)'>
		<option value=''>&Example.Either;</option>
		<option value='boy'>&Example.Boy;</option>
		<option value='girl'>&Example.Girl;</option>
	</select>
	<br>
	<br>
	&Example.AWonderfulStory;
</div>

<script type='text/javascript'>

/*
 Javascript is totally optional - everything it can do, C# can do too (see also UI.document, a static reference)
*/

// Get a reference to the UI class ('PowerUI' is a global reference to the PowerUI namespace):
var UI = PowerUI.UI;

function changeUsername(e){
	
	// Grab the username:
	var username=e.target.value;
	
	// We don't want the player to write HTML, so let's escape it (this bit's of course optional):
	username=escapeHTML(username);
	
	// Write to our username variable:
	UI.Variables["Username"]=username;
	
}

function changeGender(e){
	
	// Note that gender is of course optional!
	UI.Gender=e.target.value;
	
}

function changeLanguage(e){
	
	// Value is the language code, so all we need to do is this:
	UI.Language=e.target.value;
	
}

// Set the starting language:
// UI.Language="fr";

// Set the default username variable:
UI.Variables["Username"]="Bob";

// Build a language dropdown with all available languages.
// This is more advanced and is of course optional.
var dropdown="<select onchange='changeLanguage(event)'>";

// Get all languages:
var allLanguages=document.languages.all;

// For each one..
for(var i=0;i<allLanguages.length;i++){
	
	// Grab the language:
	var lang=allLanguages[i];
	
	// Add to our current dropdown text:
	dropdown+="<option value='"+lang.Code+"'";
	
	// Is this the current language?
	if(lang.Code==UI.Language){
		// current language - make it selected by default on the dropdown.
		dropdown+=" selected";
	}
	
	// Add the name and the rest of the option:
	dropdown+=">"+lang.Name+"</option>";
}

// All done!
dropdown+="</select>";

// Write it to the UI:
document.getElementById("languageSelect").innerHTML=dropdown;

</script>