<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Wikipedia 3D</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<link rel="stylesheet" href="css/wb.css" type="text/css">
		<link rel="stylesheet" href="css/ui-darkness/jquery-ui-1.8.15.custom.css" type="text/css">
		<script src="js/query-min.js" type="text/javascript"></script>
		<script src="js/jsw-min.js" type="text/javascript"></script>
		<script type="text/javascript"
		src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools.js"></script>
		<script src="js/" type="text/javascript"></script>
		<script type="text/javascript">

			DEF_LANG = '<?php
if (isset($_REQUEST["lang"])) {
	print($_REQUEST["lang"]);
} else if (isset($_SERVER["HTTP_ACCEPT_LANGUAGE"])) {
	print(substr($_SERVER["HTTP_ACCEPT_LANGUAGE"], 0, 2));
} else {
	print("en");
}
?>';

			DEF_WPAGE = '<?php
if (isset($_REQUEST["p"])) {
	print($_REQUEST["p"]);
} else {

}
?>';
			DEF_BG = 'images/cube/night_1/';
			BG_ARR = {
				'Moonlight' : 'images/cube/night_1/',
				'Daylight' : 'images/cube/plain_sky_1/',
				'Mars Scene 1' : 'images/cube/mars_1/'
			};

		</script>
		<script type="text/javascript" src="js/main.js"></script>
	</head>
	<body  onunload="GUnload();">

		<div id="centered">
			<div id="hd">
				<h1>Wikipedia 3D</h1>
			</div>
			<div id="main">
				<div id="content" onmouseover="self.focus();"><img src="images/loading.gif" alt="loadinf"/>
				</div>
				<div style="margin:0; padding:.4em; ">
					<div id="tabs"  style="display: none;">
						<ul>
							<li>
								<a href="#tabs-Controls">Controls</a>
							</li>
							<li>
								<a href="#tabs-GMap">Map</a>
							</li>
							<li>
								<a href="#tabs-Favourites">Favourites</a>
							</li>
							<li>
								<a href="#tabs-Blacklist">Blacklist</a>
							</li>
							<li>
								<a href="#tabs-Options">Options</a>
							</li>
							<li>
								<a href="#tabs-Help">Help</a>
							</li>
							<li>
								<a href="#tabs-About">About</a>
							</li>
						</ul>
						<div id="tabs-Controls">
							<form onSubmit="return false;" method="post">
								<span id="toolbar" class="ui-widget-header ui-corner-all" > <select id="langsel"></select>
									<button id="reset" >
										clear
									</button>
									<input type="text" id="ac" value="" onmouseover="self.focus();return true;"/>
								</span>
							</form>
						</div>
						<div id="tabs-GMap">
							<iframe height="320" id="mapFrame" src="gmap_iframe.html" width="800" SCROLLING="no"></iframe>
						</div>
						<div id="tabs-Favourites"></div>
						<div id="tabs-Blacklist"></div>
						<div id="tabs-Options">
							<p>
								<fieldset style="display:inline; padding:8px;">
									<legend>
										Appearance:
									</legend>
									Backgound (Skycube) : <select id="bgsel"></select>
								</fieldset>
								<fieldset style="display:inline; padding:8px;">
									<legend>
										Options:
									</legend>
									Maximal Number of Examples to fetch : <input  type="text" id="maxtypefetch" />
								</fieldset>
							</p>
						</div>
						<div id="tabs-Help">
							<h3>A 3D Wikipedia Interface</h3>
							<ul style="text-align:left;">
								<li>
									<b>Type</b> something in the textfield in the Controls Tab and
									wait for the autocomplete to return some results ...
<br />								try <b>different languages</b> by changing the option in the Controls Tab 
									
								</li>
								<li>
									<h4>Keyboard Commands:</h4>
									<ul style="text-align:left;">
									<li><b>- W -</b>: Forward</li>
									<li><b>- S -</b>: Backward</li>
									<li><b>- A -</b>: Left </li>
									<li><b>- D -</b>: Right</li>
									<li><b>- R -</b>: Up </li>
									<li><b>- F -</b>: Down</li>
									<li><b>- PageUP -</b>: Previous item</li>
									<li><b>- PageDOWN -</b>: Next item</li>
									<li><b>- SPACE -</b>: toggle point of view</li>

								</ul><br />
									 or use arrow keys to move around. <br />
									 Click and drag the mouse to look around !
									
								</li>
								<li>
									Double Clicking on the map, opens Wikipedia entries of the surrounding area.
									
								</li>
								<li>
Drag Favourites to the 3D Area to open them, each item will open in the language it was saved in, if available the corresponding item in the currently selected language will also be opened.
To remove an item from the favourites list, simply drag and drop it over the trashcan symbol.									
								</li>
							</ul>
							<img src="images/HELP_Image_1a.png" />
	
							<ul style="text-align:left;">
								<li> A: <b>Click textlabel</b> to show the WikiPage text. To open related items CONTROL+Click for one or SHIFT+Click for many random links corresponding to that subject.
								</li>
								<li> B . the language of the subject .
								</li>
								<li> C . removes an item from the grid 
								</li>
								<li> D . blacklists an item, so it will not show up as random subject
								</li>
								<li> E . Placemark Icon, click it to scroll the map at the bottom to that location.<br />
									SHIFT+Click to find Wikipedia Pages near that location. 
								</li>
								<li> F . make the item a favourite item, favourites are automatically saved in your Browser
								</li>
								<li> G . Solo that item. removes all other items but this one.
								</li>
								<li> H . Wikipedia Categories.  Clicking shows a list, CONTROL+Click opens exactly one and SHIFT+Click several random items. 
								</li>
								<li> I . <a href="http://en.wikipedia.org/wiki/YAGO_%28ontology%29" target="_blank">YAGO</a> types.  Clicking shows a list, CONTROL+Click opens exactly one and SHIFT+Click several random items.
								</li>
								<li> J . <b>click</b> on an items image to move your viewpoint (camera) to it

								</li>
							</ul>

						</div>

						<div id="tabs-About">
							<h3>A 3D Wikipedia Interface</h3>
							<p style="">
								Started as a skills demo by <a href="#">Lukas Goldschmidt</a>
								<br />
								Libraries used : <a href="http://jquery.com/" target="_blank">JQuery</a>,<a href="http://jqueryui.com/" target="_blank">JQuery-UI</a>, <a href="http://moo4q.com/" target="_blank">Moo4Q</a> (<a href="http://mootools.net/" target="_blank">MooTools</a>), <a href="https://github.com/mrdoob/three.js/" target="_blank">Three.js</a>, <a href="http://code.google.com/p/colorjizz/" target="_blank">ColorJizz</a>
								<br />
								APIs used : <a href="http://www.mediawiki.org/wiki/API:Main_page" target="_blank">Wikipedia API</a>, <a href="http://dbpedia.org/sparql" target="_blank">DBPedia SPARQL</a>, <a href="http://www.geonames.org/" target="_blank">Geonames.org</a>
								<br />
								IDE used :
								<br />
								<a href="http://www.aptana.com/" target="_blank"><img src="http://b.vimeocdn.com/ps/362/36243_300.jpg" alt="aptana logo" style="border:0; width:24px; height:24px;" /> Aptana Studio 3</a>
							</p>
						</div>
					</div>
				</div>
			</div>
			<div id="ft">
				<hr />
				&copy; 2011 <a href="mailto:lukas.goldschmidt@googlemail.com">lukas goldschmidt</a>
				<br>
			</div>
		</div>
		<div id="dialog-message" style="display: none;" title="A Message"></div>
		<div id="dialog-busy" title="Working ..."><img src="images/websedit-ag-bar2.gif" alt="loading"/>
		</div>
	</body>
</html>
