var i = 0;

//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 +"Tree2' style=visibility:hidden;display:none>");
	} else {
		document.write("<div id = '"+ treeID +"Tree2' style=visibility:visible>");
	}	
	
	//begin while loop
	while (talent[i] && talent[i][0] == printTreeID &&  i <= talent.length) {
	
		var treeName = nltree[printTreeID];
		treeName = treeName.toLowerCase();
		treeName = treeName.replace(" ", "");
	
		if (talent[i][0] == printTreeID) {	
			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(" ", "");

			//tier
			if (talent[i][4] != tier) {
				tier = talent[i][4];
				document.write ("<h3 class = \"title\">"+ tree[printTreeID] +" - Tier "+ tier + "</h3>");
				
				document.write("<table border = \"0\" width = \"706\" 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>");
				document.write("<td width = \"100%\" style = \"padding: 5px\">");
				
			}
		
			//Icon
			document.write("<table border = 0 cellpadding = 0 cellspacing = 0 width = 100%><tr><td style = 'padding-right: 10px;' rowspan = 5 valign = top width = 51><div id = \"wrapper\"><div id = \"iconOverParchment\"><img src = \"talents_files/icon-over-parchment.gif\" border = 0 onmouseover=this.style.cursor='hand' onContextMenu='rankBottomOnRightClick("+ i +"); return false;' onclick = 'rankBottomOnClick("+ i +");' alt = 'Left Click to Learn and Right Click to Unlearn'></div></div><img src = talents_files/"+ imageName +".jpg width = 51 height = 53></td>");
			
			//Name
			document.write("<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;\">&nbsp;<a name =\"" +talentName +"\"></a><b>"+ talentName + "</b>");
			
			//Rank
			document.write(" - <span style = \"color:white;\"");
						
			if (talent[i][2] != 1)  //if the max rank is 1, don't make it clickable
				document.write(" style = text-decoration:underline; onmouseover=this.style.cursor='hand' onContextMenu='rankBottomOnRightClick("+ i +"); return false;' onclick = 'rankBottomOnClick("+ i +");'");
				
			document.write("><small>rank</span> <span class = mySmall id = modifyRank"+ i +" style = \"color:white;\">1</span>/"+ talent[i][2] +"</small></td><td width = \"1\"><img src = \"talents_files/minisubheader-end.gif\" width = \"1\" height = \"16\"></td></tr></table></td></tr>");

			//Minimum Level
			document.write("<tr><td><span><small>Minimum Level: <span class = mySmallBlack id = modifyMinLevel"+i+">"+ minLevel[i] +"</span></small></span></td></tr>");
			
			if (talent[i][5]) {
				requirement = talent[i][5][0];
				requirementPoints = talent[i][5][1];
				requirementName = talent[requirement][1];
								
				document.write("<tr><td><span><small><font color = CC0000>Requires "+ requirementPoints +" points in <a href = \"#"+ requirementName +"\">"+ requirementName +"</a></font></small></span></td></tr>");
			}
			
			if (talent[i][4] != 1) { 
				document.write("<tr><td><span><small><font color = CC0000>Requires "+ ((talent[i][4] * 5) - 5) +" points in "+ tree[talent[i][0]] +" Mastery</font></small></span></td></tr>");
			}
			
			//Description
			document.write("<tr><td><span class = \"smallBold\"><span id = modifyDescription"+ i +">"+ rankBottom[i][1] +"</span></td></tr>");
			
			document.write("</table>");
			
			var tierPlus = tier + 1;
			var iPlus = i + 1;
			
			if (!(talent[iPlus]) || talent[iPlus][4] == tierPlus || (talent[i][4] == 7 && talent[iPlus][4] != 7)) {
				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('<br>');			

			i++;
			
		}
		//end while loop
		
	}		
	
	document.write("</div>");		
}
//end for loop

changeTree(0);