<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Wikigraph</title>
		
		<!-- JSaurus Libraries -->
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/Thesaurus.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/ThesaurusNode.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/ThesaurusRelation.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/Controller.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/ParticleRelation.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/ParticleSystem.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/Particle.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/HTMLRenderer.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/SVGRenderer.js"></script>
		
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/Timer.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/EventHandler.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/HTTP.js"></script>
		
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/HyperbolicViewer.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/DefaultViewer.js"></script>
		
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/XMLLoader.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/DebugLoader.js"></script>
		<script language="JavaScript" src="http://www.cpoet.net/sitemap/jsaurus/WikiHTTPLoader.js"></script>

		<script language="JavaScript">
			var renderer;
			var controller;
			var loader;
			var fpsTimer;
			/**
			*
			*/
			function getFrameWidth()
			{
				var width;
				if (document.all)
				{
					width = document.documentElement.offsetWidth - 5;
				}
				else 
				{
					width = window.innerWidth - 5;
				}

				return width;
			}
			
			/**
			*
			*/
			function getFrameHeight()
			{
				var height;
				if (document.all)
				{
					height = document.documentElement.offsetHeight - 5;
				}
				else
				{
					height = window.innerHeight - 5;
				}
				
				return height;
			}
			
			function init(graphpanel) 
			{
				/*Create controller create a thesaurus with nodes and relations later*/
				controller = new Controller();		
				document.onmousemove = new EventHandler(controller, controller.onDocumentMouseMove);
				document.onmousedown = new EventHandler(controller, controller.onDocumentMouseDown);
				document.onmouseup = new EventHandler(controller, controller.onDocumentMouseUp);
				document.onmousescroll = new EventHandler(controller, controller.onDocumentMouseWheel);
				
				
				/*Get the dimension of the frame. The dimension forms the borders of the model*/
				framewidth = getFrameWidth();
				frameheight = getFrameHeight();
				var framedepth = 100;
				
				/*Create a renderer what will displays the model of the thesaurus's nodes and relations*/
				var particleSystem = new ParticleSystem();
				var viewer = new HyperbolicViewer(framewidth, frameheight, 3);
				
				if (document.implementation.hasFeature("org.w3c.dom.svg", '1.1'))
				{
					renderer = new SVGRenderer(0, 0, framewidth, frameheight, framedepth, particleSystem, viewer, graphpanel);
				}
				else
				{
					renderer = new HTMLRenderer(0, 0, framewidth, frameheight, framedepth, particleSystem, viewer, graphpanel);
				}
				
				loader = new XMLLoader(controller, renderer);
				loader.load("http://www.cpoet.net/sitemap/jsaurus/cpoetmap.xml");
				/*loader = new WikiHTTPLoader(controller, renderer, 2);
				loader.load("en.wikipedia.org", "Wiki");*/
		
				controller.setRenderer(renderer);
				
				this.fpsTimer = new Timer(1);
				this.fpsTimer.register(renderer);
				this.fpsTimer.start();
				
			}
		</script>
		
		
		
	</head>
	<body onload="init('graphview')">
		<div style="position:absolute;top:0px;background-color:rgb(200,200,200);">
		<script>
			function searchTopic(topic)
			{
				controller.clear();
				renderer.resetView();
				
				var framewidth = getFrameWidth();
				var frameheight = getFrameHeight();
				//var loader = new WikiHTTPLoader(controller, renderer, 2, 4);
				loader.load("en.wikipedia.org", topic);
			}
			
			function zoom(value)
			{
				renderer.viewer.focalLength = value;
				
				document.getElementById('zoom_in').name = value-(-1);
				document.getElementById('zoom_out').name = value-1;
				
			}
			
			function setfocalLength(value)
			{
				renderer.viewer.focalLength = value;
			}
			
			function setViewer(value)
			{
				var viewer;
				if (value == 1)
				{
					/*DEFAULT*/
					viewer = new DefaultViewer(framewidth, frameheight);
					
				}
				else if (value == 2)
				{
					/*HYPERBOLIC*/
					viewer = new HyperbolicViewer(framewidth, frameheight, 4);
				}
				renderer.viewer = viewer;
			}
			
			function play(mod)
			{
				var model_play = '>';
				var model_pause = "||";
				var domElement = document.getElementById('ctrl_play');
				if (mod == 0)
				{
					renderer.doCalc = false;
					domElement.name = 1;
					domElement.value = model_play;
					
				}
				else
				{
					renderer.doCalc = true;
					domElement.name = 0;
					domElement.value = model_pause;
				}
			}
		</script>					
			<div style="border-width:1px;border-style:solid;padding:0 1em 0 1em;float:left;z-Index:200">
				Zoom:
				<input id='zoom_in' type="button" name="4" value="+"  onclick="zoom(document.getElementById('zoom_in').name)"/>
				<input id='zoom_out' type="button" name="2" value="-" onclick="zoom(document.getElementById('zoom_out').name)"/>
			</div>
			<div style="border-width:1px;border-style:solid;padding:0 1em 0 1em;z-Index:200">
				<input id='ctrl_play' type="button" name="0" value="||"  onclick="play(document.getElementById('ctrl_play').name)"/>
			</div>
		</div>
		<div style="clear:both;" id="graphview">
		</div>
		
	</body>

</html>
