<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg" 
      >
<head>

<title>Dynamic tree construction 2</title>

<link rel="stylesheet" type="text/css" href="oetree.css"></link>

<script type="text/javascript" src="obj_core.js"></script>
<script type="text/javascript" src="obj_construction.js"></script>

<script type="text/javascript">
//<![CDATA[
<!--

var Explanation = ' Choose a tab for the sentence you want to see.\n';
Explanation += ' Mouseover a node to see more information about it.\n';
Explanation += ' Control-click on a node to make it the head of the tree.\n';
Explanation += ' Shift-click on a node to make its parent the head of the tree.';

var TabArray = new Array();

function InitializeTabs(){
	var TRow = document.getElementById('TabRow');
	var El, T;
	if (TRow != null){
	  while (TRow.childNodes.length > 0){TRow.removeChild(TRow.childNodes[0]);}
		for (var t=0; t<Sentences.length; t++){
  		El = document.createElementNS(xhtmlns, 'td');
  		El.setAttribute('id', 'SenTab' + (t+1));
  		El.setAttribute('class', 'Tab');
  		El.addEventListener('click', TabClick, true);
  		T = document.createTextNode('S ' + (t+1));
  		El.appendChild(T);
  		TRow.appendChild(El);
		}
	}
	TabArray.length = 0;
	for (var i=0; i<Sentences.length; i++){
		TabArray.push(document.getElementById('SenTab' + (i+1)));
	}
}

function ShowTab(TabNum){
	for (var i=0; i<TabArray.length; i++){
		if (i == TabNum-1){
			TabArray[i].style.borderWidth = '1px 1px 0px 1px';
			TabArray[i].style.backgroundColor = '#ffffff';
			S = Sentences[TabNum-1];
			DrawFullTree(S);
		}
		else{
			TabArray[i].style.borderWidth = '1px 1px 1px 1px';
			TabArray[i].style.backgroundColor = '#dddddd';		
		}
	}
}

var TabNum = 0;

function TabClick(evt){
	var E = evt.target;
	var EId = E.getAttribute('id');
	TabNum = parseInt(EId.substring(6, EId.length));
	ShowTab(TabNum);
}

//-->
//]]>
</script>

  </head>
  <body onload="StartUp()">
<h2>Syntax tree using SVG <button onclick="alert(Explanation)">Instructions</button></h2>
<table id="Tabs">
<tr id="TabRow">

</tr>
</table>
<svg:svg id="TheTree" width="800" height="800" viewBox="0 0 800 800">

<!-- elements will be drawn here -->

</svg:svg>
  </body>
</html>