//print out all the different types of talent trees
var i = 0;

document.write("<table width = 706><tr><td valign=top>");

//box top
document.write("<table border = '0' width = \"100%\" cellpadding = \"0\" cellspacing = \"0\"><tr><td><img src = \"talents_files/top-left.gif\" width = 14 height = 13></td><td background = \"talents_files/top.gif\"><img src = \"talents_files/pixel.gif\"></td><td><img src = \"talents_files/top-right.gif\" width = 19 height = 13></td></tr><tr><td background = \"talents_files/left.gif\"><img src = \"talents_files/pixel.gif\"</td><td>");

//finally we get to arrange and print out all the info
for (var printTreeID = 0; printTreeID < numberOfTrees; printTreeID++)
{
	var tier = 0;
	var treeID;		

	treeID = tree[printTreeID];	
	
	if (printTreeID != 0) {
		document.write("<div id = '"+ treeID +"Tree' style=visibility:hidden;display:none>");
	} else {
		document.write("<div id = '"+ treeID +"Tree' style=visibility:visible>");
	}	

			var vertical = 7;
			var verticalCounter;
			var horizontal = 4;			
			var horizontalCounter;	
	
	//begin while loop
	while (talent[i] && talent[i][0] == printTreeID &&  i != (talent.length - 1)){
	
		//if (talent[i][0] == printTreeID)
		//{	
			
			var treeName = nltree[printTreeID];
			treeName = treeName.toLowerCase();
			treeName = treeName.replace(" ", "");
			
			document.write("<table width = '300' border = 0 cellspacing=0 cellpadding=0 background=images/"+ treeName +"/background.jpg><tr><td style=padding-left:10;padding-right:10 align = 'center'><table border = 0 cellpadding = 10 cellspacing = 0>");
			
			for (verticalCounter = 1; verticalCounter <= vertical; verticalCounter++)
			{
				document.write("<tr>");
				for (horizontalCounter = 1; horizontalCounter <= horizontal; horizontalCounter++)
				{
					document.write("<td>");
					if (talent[i] && talent[i][3] == horizontalCounter && talent[i][4] == verticalCounter)
					{

						var imageName;
						talentName = talent[i][1];
						imageName = nltalent[i][0];
						imageName = imageName.toLowerCase();
						imageName = imageName.replace(":", "");
						imageName = imageName.replace(" ", "");
						imageName = imageName.replace(" ", "");
						imageName = imageName.replace(" ", "");
						imageName = imageName.replace(" ", "");
					
						//rank
						document.write("<div id = wrapper99><div id = \"rankTopStyle\"><table><tr><td nowrap><span id=modifyRankTopColor"+ i +" style=color:ffffff class=mySmall><span id=modifyRankTop"+ i +" style=color:ffffff class=mySmall>"+ rankTop[i][0] +"</span>/"+ talent[i][2] +"</span></td></tr></table></div></div>");
						
						//description
						document.write("<div id = 'talentMouseOver"+ i +"' style=visibility:hidden;><div id = wrapper><div id = \"descriptionTopStyle\"><table border = 0 cellpadding = 0 cellspacing = 0><tr><td></td><td bgcolor=d5d5d7 height = 1></td><td></td></tr><tr><td bgcolor=a5a5a5 width = 1></td><td><table width=350 border=0 cellspacing=0 cellpadding=5 bordercolor=000000><tr><td style=\"filter: alpha(opacity=90);\" bgcolor=020303><span style=color:white;font-weight:bold;>"+ talent[i][1] +"</span>");
						document.write("<br><span class = mySmall style=color:white>Rank: <span id=modifyRankTopDescription"+ i +" class=mySmall>"+ rankTop[i][0] + "</span>/"+ talent[i][2] +"</span>");

						if (talent[i][5])	//if the talent requires other talents
						{
							requirement = talent[i][5][0];
							requirementPoints = talent[i][5][1];
							requirementName = talent[requirement][1];
						
							document.write("<span id='requiresTalent"+ i +"' style=color:red class=mySmall><br>Requires "+ requirementPoints +" points in "+ requirementName +"</span>");			
						}
			
						if (talent[i][4] != 1)	//if the talent requires other talents
						{ 
							document.write("<span id='requiresPoints"+ i +"' style=color:red class=mySmall><br>Requires "+ ((talent[i][4]*5)-5) +" points in "+ tree[talent[i][0]] +" Talents</span>");
						}

						document.write("<p><span id = 'modifyDescriptionTop"+ i +"' style=color:FFFFFF>"+ rankTop[i][1] +"</span></span>");
						
						//description next
						document.write("<span id = 'rankNextTop"+ i +"' style='visibility:hidden; display:none;' style=color:white><p><small>Next Rank:</small><br><span id = 'modifyDescriptionTopNext"+ i +"' style=color:FFFFFF>"+ rankTop[i][2] +"</span><br></span>");

						document.write("<table border = 0 cellpadding = 0 cellspacing = 0 width=100% height=0><tr><td width=50%><span id='learnClickLeft"+ i +"' class=mySmall></span></td><td width=50% align=right><span id='learnClickRight"+ i +"' class=mySmall></span></td></tr></table>");							
						document.write("</span></td></tr></table></td><td bgcolor=a5a5a5 width=1></td></tr><tr><td></td><td bgcolor = 4f4f4f height = 2></td><td></td></tr></table></div></div></div>");


						document.write("<div id = wrapper50><div id = iconOver><img src=talents_files/icon-over-grey.gif onClick='rankTopOnClick("+ i +");return false;' border = 0 onMouseOver='unhideTalent("+ i +"); this.style.cursor=\"hand\";' onMouseOut='hideTalent("+ i +");' onContextMenu='rankTopOnRightClick("+ i +"); return false;'></div></div>");


						if (rankTop[i][0] > 1)
							document.write("<div id = 'iconOverGreen"+ i +"' style = 'position: relative; z-index:50;'><div id = iconOver><img src=talents_files/icon-over-green.gif border = 0 onMouseOver='unhideTalent("+ i +"); this.style.cursor=\"hand\";' onMouseOut='hideTalent("+ i +");' onContextMenu='rankTopOnRightClick("+ i +"); return false;' onClick='rankTopOnClick("+ i +");return false;'></div></div>");
						else
							document.write("<div id = 'iconOverGreen"+ i +"' style = 'visibility:hidden; position: relative; z-index:50;'><div id = iconOver><img src=talents_files/icon-over-green.gif border = 0 onMouseOver='unhideTalent("+ i +"); this.style.cursor=\"hand\";' onMouseOut='hideTalent("+ i +");' onContextMenu='rankTopOnRightClick("+ i +"); return false;' onClick='rankTopOnClick("+ i +");return false;'></div></div>");													
						if (rankTop[i][0] == talent[i][2])
							document.write("<div id = 'iconOverYellow"+ i +"' style = 'position: relative; z-index:50;'><div id = iconOver><img src=talents_files/icon-over-yellow.gif border = 0 onMouseOver='unhideTalent("+ i +"); this.style.cursor=\"hand\";' onMouseOut='hideTalent("+ i +");' onContextMenu='rankTopOnRightClick("+ i +"); return false;' onClick='rankTopOnClick("+ i +");return false;'></div></div>");
						else 
							document.write("<div id = 'iconOverYellow"+ i +"' style = 'visibility:hidden; position: relative; z-index:50;'><div id = iconOver><img src=talents_files/icon-over-yellow.gif border = 0 onMouseOver='unhideTalent("+ i +"); this.style.cursor=\"hand\";' onMouseOut='hideTalent("+ i +");' onContextMenu='rankTopOnRightClick("+ i +"); return false;' onClick='rankTopOnClick("+ i +");return false;'></div></div>");

						if (rankTop[i][0] == 0)							
							document.write("<div id = 'talentThumb"+ i +"' style = 'visibility:hidden; position: relative'><div id = wrapper49><img src = talents_files/"+ imageName +".jpg width = 43 height = 45 border = 0 onMouseOver='unhideTalent("+ i +"); this.style.cursor=\"hand\";' onMouseOut='hideTalent("+ i +");' onContextMenu='rankTopOnRightClick("+ i +"); return false;' onClick='rankTopOnClick("+ i +");return false;'></div></div>");
						else
							document.write("<div id = 'talentThumb"+ i +"' style = 'position: relative'><div id = wrapper49><img src = talents_files/"+ imageName +".jpg width = 43 height = 45 border = 0 onMouseOver='unhideTalent("+ i +"); this.style.cursor=\"hand\";' onMouseOut='hideTalent("+ i +");' onContextMenu='rankTopOnRightClick("+ i +"); return false;' onClick='rankTopOnClick("+ i +");return false;'></div></div>");						
							
						if (talent[i][5]) {
									
							thisTalentX = talent[i][3];		
							thisTalentY = talent[i][4];

							requiredTalentX = talent[requirement][3];
							requiredTalentY = talent[requirement][4];

							if (thisTalentX == requiredTalentX) {  //up and down
							
								if ((thisTalentY - 1) == requiredTalentY) {
									document.write("<div id=wrapper50><div id=arrowdown1><img src=talents_files/down-1-grey.gif></div></div>");
									document.write("<span id='arrowGreen"+ i +"' style = 'visibility:hidden;'><div id=wrapper50><div id=arrowdown1><img src=talents_files/down-1-green.gif></div></div></span>");
									document.write("<span id='arrowYellow"+ i +"' style = 'visibility:hidden;'><div id=wrapper50><div id=arrowdown1><img src=talents_files/down-1-yellow.gif></div></div></span>");
								} else if ((thisTalentY - 2) == requiredTalentY) {
									document.write("<div id=wrapper50><div id=arrowdown2><img src=talents_files/down-2-grey.gif></div></div>");
									document.write("<div id=wrapper50><div id=arrowdown2 style = 'visibility:hidden;'><span id='arrowGreen"+ i +"'><img src=talents_files/down-2-green.gif></span></div></div>");
									document.write("<div id=wrapper50><div id=arrowdown2 style = 'visibility:hidden;'><span id='arrowYellow"+ i +"'><img src=talents_files/down-2-yellow.gif></span></div></div>");
								} else if ((thisTalentY - 3) == requiredTalentY) {
									document.write("<div id=wrapper50><div id=arrowdown3><img src=talents_files/down-3-grey.gif></div></div>");
									document.write("<div id=wrapper50><div id=arrowdown3><span id='arrowGreen"+ i +"' style = 'visibility:hidden;'><img src=talents_files/down-3-green.gif></span></div></div>");
									document.write("<span id='arrowYellow"+ i +"' style = 'visibility:hidden;'><div id=wrapper50><div id=arrowdown3><img src=talents_files/down-3-yellow.gif></div></div></span>");
								}
							} else if (thisTalentY == requiredTalentY) {  //across
								if (requiredTalentX == (thisTalentX - 1)) {
									document.write("<div id=wrapper50><div id=arrowacrossright><img src=talents_files/across-right-grey.gif></div></div>");
									document.write("<span id='arrowGreen"+ i +"' style = 'visibility:hidden;'><div id=wrapper50><div id=arrowacrossright><img src=talents_files/across-right-green.gif></div></div></span>");
									document.write("<span id='arrowYellow"+ i +"' style = 'visibility:hidden;'><div id=wrapper50><div id=arrowacrossright><img src=talents_files/across-right-yellow.gif></div></div></span>");
								}
							} else if (thisTalentX == (requiredTalentX-1)){
								document.write("<div id=wrapper50><div id=arrowdownleft><img src=talents_files/down-left-grey.gif></div></div>");								
								document.write("<span id='arrowGreen"+ i +"' style = 'visibility:hidden;'><div id=wrapper50><div id=arrowdownleft><img src=talents_files/down-left-green.gif></div></div></span>");
								document.write("<span id='arrowYellow"+ i +"' style = 'visibility:hidden;'><div id=wrapper50><div id=arrowdownleft><img src=talents_files/down-left-yellow.gif></div></div></span>");
							} else if ((thisTalentX-1) == requiredTalentX) {
								document.write("<div id=wrapper50><div id=arrowdownright><img src=talents_files/down-right-grey.gif></div></div>");
								document.write("<span id='arrowGreen"+ i +"' style = 'visibility:hidden;'><div id=wrapper50><div id=arrowdownright><img src=talents_files/down-right-green.gif></div></div></span>");
								document.write("<span id='arrowYellow"+ i +"' style = 'visibility:hidden;'><div id=wrapper50><div id=arrowdownright><img src=talents_files/down-right-yellow.gif></div></div></span>");								
							}
							
							if (query) {
								if (saveTemplate[i] == talent[i][2])
									document.getElementById("arrowYellow"+ i).style.visibility = "visible";
							}
							
						}
						

							document.write("<img src = talents_files/"+ imageName +"-off.jpg width = 43 height = 45 border = 0 onMouseOver='unhideTalent("+ i +");' onMouseOut='hideTalent("+ i +");' onContextMenu='rankTopOnRightClick("+ i +"); return false;' onClick='rankTopOnClick("+ i +");return false;'>");
						i++;
					}
					else
						document.write("&nbsp;");
					document.write("</td>");						
				}
				document.write("</tr>");
			}

			document.write("</table></td></tr></table>");
			
	}		
	document.write("</div>");		
}
//end for loop

//box bottom
document.write("</td><td background = \"talents_files/right.gif\"><img src = \"talents_files/pixel.gif\"></td></tr>");
document.write("<tr><td><img src = \"talents_files/bot-left-big.gif\"></td>");

document.write("<td background = \"talents_files/bot-big.gif\" width=100% style=padding-bottom:13><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td width=50%>Points Left: <span id=tabPointsAvailable class=mySmallBlack style=font-weight:bold>"+ rankPoints +"</span></td><td align=right width=50%><nobr><span id=tabNameTree class=mySmallBlack>"+ tree[0] +"</span> Talents: <span id=tabPoints class=mySmallBlack style=font-weight:bold>0</span></nobr></td></tr></table></td>");

document.write("<td><img src = \"talents_files/bot-right-big.gif\"></td></tr>");

document.write("<tr><td>");
document.write("<div id=wrapper50><div id=tabsUp><table border=0 cellpadding=0 cellspacing=0><tr><td>&nbsp;&nbsp;&nbsp;&nbsp;</td>");

for (x = 0; x < numberOfTrees; x++)
{
		document.write("<td>");
		document.write("<img src=talents_files/tab-up-left.gif></td><td style=padding-left:8;padding-right:8;padding-bottom:13; background=talents_files/tab-up-middle.gif><span id='"+ tree[x] +"Tab' onmouseover=this.style.cursor='hand' onclick=changeTree("+ x +");><nobr>"+ tree[x] +"</nobr></span></td><td><img src=talents_files/tab-up-right.gif>");		
		document.write("</td>");
}

document.write("</tr></table></div></div>");

document.write("<div id=wrapper50><div id=tabs><table border=0 cellpadding=0 cellspacing=0><tr><td>&nbsp;&nbsp;&nbsp;&nbsp;</td>");

for (x = 0; x < numberOfTrees; x++)
{
		document.write("<td>");
		document.write("<span id=tabUp"+ x +" style=visibility:hidden><table border=0 cellpadding=0 cellspacing=0><tr><td><img src=talents_files/tab-down-left.gif></td><td nowrap style=padding-left:8;padding-right:8;padding-bottom:12; background=talents_files/tab-down-middle.gif><span id='"+ tree[x] +"Tab2' onmouseover=this.style.cursor='hand' onclick=changeTree("+ x +");><nobr>"+ tree[x] +"</nobr></span></td><td><img src=talents_files/tab-down-right.gif></td></tr></table></span>");				document.write("</td>");
}



document.write("</tr></table></div></div>");


document.write("</td></tr></table>");

document.write("</td><td width=10%><img src = \"talents_files/pixel.gif\"></td><td valign=top width = 350>");

//box top
document.write("<table border = \"0\" width = \"100%\" cellpadding = \"0\" cellspacing = \"0\"><tr><td><img src = \"talents_files/top-left.gif\" width = 14 height = 13></td><td background = \"talents_files/top.gif\"><img src = \"talents_files/pixel.gif\" height = 1 width = 325></td><td><img src = \"talents_files/top-right.gif\" width = 19 height = 13></td></tr><tr><td background = \"talents_files/left.gif\"><img src = \"talents_files/pixel.gif\"</td><td style=padding:7 bgcolor=E5CDA1 width = 350>");
document.write("<table width = 100%><tr><td nowrap width = \"50%\"><b>Level Required</b>: <span id=levelRequired class=mySmallBlack>"+ theRequiredLevel +"</span><br><b>Points Spent</b>: <span id=modifyRankPoints class=mySmallBlack>0</span></td>");

document.write("<td rowspan=2>&nbsp;&nbsp;&nbsp;</td><td align=right valign=bottom>");

document.write("<table>");

for (var jia = 0; jia < tree.length; jia++){
	document.write("<tr><td width = \"50%\"><nobr><span class=mySmallBlack onClick = changeTree("+ jia +") onmouseover=this.style.cursor='hand'><b>"+tree[jia]+"</b></span> <small>(<span onmouseover=this.style.cursor='hand' onClick=resetTree("+ jia +") class=mySmallBlack><u>reset</u></span>)</small>:</td><td align=right>&nbsp;&nbsp;<span id='"+ tree[jia] +"PointsTopRight' class=mySmallBlack>"+ pointsTree[jia] +"</span></nobr></td></tr>");
}

document.write("</table>");

document.write("</td></tr>");

document.write("<tr><td><small><nobr><span onmouseover=this.style.cursor='hand' onClick=printableVersion();><u>printable version</u></span></nobr></small><br><small><nobr><span onmouseover=this.style.cursor='hand' onClick=saveTheTemplate();><u>save template</u></span></nobr></small></td><td align=right><span onmouseover=this.style.cursor='hand' onClick=resetTreeAll() class=mySmallBlack><u>reset all</u></span></td></tr>");

document.write("</table>");



document.write("<p><img src = \"talents_files/pixel.gif\" height = 1 width = 300>");

document.write("<table border=0 cellpadding=0 cellspacing=0 width=100%>");

var rightTreeID = -1;
for (var blah = 0; blah != talent.length; blah++){
	if (talent[blah][0] != rightTreeID) {
		rightTreeID = talent[blah][0];
		document.write("<tr><td width=100%><table cellspacing = \"0\" cellpadding = \"0\" border = \"0\" width = \"100%\"><tr><td width = \"1\"><img src = \"talents_files/minisubheader-end.gif\" width = \"1\" height = \"16\"></td><td bgcolor = \"#05374A\" width = \"100%\"><span class = \"smallBold\" style = \"color:white;\" onClick = changeTree("+ rightTreeID +"); onmouseover=this.style.cursor='hand'>&nbsp;<b><u>"+tree[rightTreeID]+" Talents</u></b> - </span><span class=mySmall>&nbsp;<span id='"+ tree[rightTreeID] +"Points' style=color:white class=mySmall>"+ pointsTree[rightTreeID] +"</span> point<span style=color:white id='letterS"+ rightTreeID +"' class=mySmall>s</span></td><td width = \"1\"><img src = \"talents_files/minisubheader-end.gif\" width = \"1\" height = \"16\"></td></tr></table></td></tr>");
	}

if (saveTemplate[blah] > 0)
	document.write("<tr><td colspan=2><span id='displayRight"+ blah +"'><span style=text-align:left;float:left;>&nbsp;&nbsp;"+ talent[blah][1] +"</span><span style=text-align:right;float:right;>&nbsp;&nbsp;rank <span id='modifyRankRight"+ blah +"' class=mySmallBlack>"+ saveTemplate[blah] +"</span>/<span class=mySmallBlack>"+ talent[blah][2] +"</span></span><br></span></td></tr>");
else
	document.write("<tr><td colspan=2><span id='displayRight"+ blah +"' style='visibility:hidden;display:none;'><span style=text-align:left;float:left;>&nbsp;&nbsp;"+ talent[blah][1] +"</span><span style=text-align:right;float:right;>&nbsp;&nbsp;rank <span id='modifyRankRight"+ blah +"' class=mySmallBlack>0</span>/<span class=mySmallBlack>"+ talent[blah][2] +"</span></span><br></span></td></tr>");
	
}

document.write("</table>");

//box bottom
document.write("</td><td background = \"talents_files/right.gif\"><img src = \"talents_files/pixel.gif\"></td></tr>");
document.write("<tr><td><img src = \"talents_files/bot-left.gif\" width = 14 height = 25></td><td background = \"talents_files/bot.gif\"><img src = \"talents_files/pixel.gif\"></td><td><img src = \"talents_files/bot-right.gif\" width=19 height=25></td></tr></table>");

document.write("</td></tr><tr><td valign=top>");
/*
document.write("<div id=wrapper50><div id=tabsUp><table border=0 cellpadding=0 cellspacing=0><tr><td>&nbsp;&nbsp;&nbsp;&nbsp;</td>");

for (x = 0; x < numberOfTrees; x++)
{
		document.write("<td>");
		document.write("<img src=talents_files/tab-up-left.gif></td><td style=padding-left:8;padding-right:8;padding-bottom:13; background=talents_files/tab-up-middle.gif><span id='"+ tree[x] +"Tab' onmouseover=this.style.cursor='hand' onclick=changeTree("+ x +");>"+ tree[x] +"</span></td><td><img src=talents_files/tab-up-right.gif>");		
		document.write("</td>");
}

document.write("</tr></table></div></div>");

document.write("<div id=wrapper50><div id=tabs><table border=0 cellpadding=0 cellspacing=0><tr><td>&nbsp;&nbsp;&nbsp;&nbsp;</td>");

for (x = 0; x < numberOfTrees; x++)
{
		document.write("<td>");
		document.write("<span id=tabUp"+ x +" style=visibility:hidden><table border=0 cellpadding=0 cellspacing=0><tr><td><img src=talents_files/tab-down-left.gif></td><td style=padding-left:8;padding-right:8;padding-bottom:12; background=talents_files/tab-down-middle.gif><span id='"+ tree[x] +"Tab2' onmouseover=this.style.cursor='hand' onclick=changeTree("+ x +");>"+ tree[x] +"</span></td><td><img src=talents_files/tab-down-right.gif></td></tr></table></span>");		
		document.write("</td>");
}

document.write("</tr></table></div></div>");
*/
document.write("</td></tr></table>");

document.getElementById(tree[0] + "Tab").style.fontWeight = "bold";  //bold the first tree
document.getElementById(tree[0] + "Tab2").style.fontWeight = "bold";  //bold the first tree
document.getElementById('tabUp1').style.visibility = "visible";
document.getElementById('tabUp2').style.visibility = "visible";

document.write ("<br><br>");