function SegmentRow(num) {
		// create parent container div
		var segrow = document.createElement("div");
		segrow.className = "segment notplaying";
			
		// add toggle button
		var togbut = document.createElement("img");
		togbut.src = "images/video/tree/noplay_collapsed.jpg";
		togbut.style.height = "12px";
		togbut.style.width = "12px";
		togbut.style.display = "inline";
		togbut.style.verticalAlign = "middle";
		togbut.style.margin = "0px 2px 0px 2px";
		togbut.onclick = function() {
			if (segrow.isexpanded) segrow.collapse();
			else {
				segrow.treenode.collapseAllSegments();
				segrow.expand();
			}
		};
		segrow.appendChild(togbut);

		// add segment popularity bar
		var height = segmentData[num].numViews;
		var popbar = document.createElement("img");
		popbar.src = "images/video/tree/red1px.gif";
		if (height > 10) { height = 10; }   //This is to fix for sometimes the height value is way off when redrawing?            
		popbar.style.height = height + "px";
		popbar.style.width = "5px";
		popbar.style.display = "inline";
		popbar.style.verticalAlign = "bottom";
		popbar.style.margin = "0px 2px 2px 1px";
		popbar.alt = "Popularity: " + height;
		segrow.appendChild(popbar);		
		
		// add segment text row
		var sectime = segmentData[num].startTime;
		var segtextcont = document.createElement("div");
		segtextcont.style.display = "inline";
		var segtextstr = document.createElement("span");
		segtextstr.className = "tree_text";
		segtextstr.title = "jump to " + getProperTime(sectime);
		segtextstr.innerHTML = getProperTime(sectime) + " : " + segmentData[num].topic;
		segtextstr.onclick = function() {
			segrow.treenode.collapseAllSegments();			
			segrow.play();
			seekedWithNote = true;
			vnplayer.sendEvent("SEEK", sectime + 1);
		}
		segtextstr.href = "javascript: return false";
		segtextcont.appendChild(segtextstr);
		segrow.appendChild(segtextcont);				
		
		// add subsegment container
		segrow.hassubsegments = false;
		var subsegcont = document.createElement("div");
		subsegcont.className = "subsegment_cont notplaying";
		var ssdLength = subSegmentData.length
		if(ssdLength > 0){
			var j = 0, len = ssdLength;
			while(j < len && subSegmentData[j].startTime < segmentData[num].startTime) j++;
			if (segmentData[num+1]) {  //If the loop goes "too far" break out or you'll get an error 
				while ( subSegmentData[j] && (subSegmentData[j].startTime < segmentData[num+1].startTime) ) {
					subsegcont.appendChild(new SubsegmentRow(j));
					j++;
				}
			}
			else {           // the last Segment - error here if there are no subsegments...
				while (j < ssdLength) {
					//addTreeSubsegmentText(subsegcont, subSegmentData[j].startTime, subSegmentData[j].text);
					subsegcont.appendChild(new SubsegmentRow(j));
					j++;
				}
			}
		}
		subsegcont.expand = function() { subsegcont.style.display = "block"; }
		subsegcont.collapse = function(){ subsegcont.style.display = "none"; }
		segrow.appendChild(subsegcont);
		
		segrow.treenode = null;		// A reference to the tree container up one node level. This is set in makeNoteTree()
		segrow.isplaying = false;
		segrow.isexpanded = false;
		segrow.text = segtextstr.innerHTML;
		segrow.subsegments = subsegcont.childNodes;
		segrow.hassubsegments = (subsegcont.childNodes.length > 0);
		
		segrow.expand = function() {
			togbut.src = (segrow.isplaying ? "images/video/tree/play_expanded.jpg" : "images/video/tree/noplay_expanded.jpg");
			if(segrow.hassubsegments) {
				subsegcont.expand();
				segrow.isexpanded = true;				
			}
		}
		segrow.collapse = function() {
			togbut.src = (segrow.isplaying ? "images/video/tree/play_collapsed.jpg" : "images/video/tree/noplay_collapsed.jpg");
			subsegcont.collapse();
			segrow.isexpanded = false;		
		}		
		segrow.play = function() {
			segrow.isplaying = true;
			segrow.expand();
			segrow.className = "segment playing";
		}
		segrow.noplay = function() {
			segrow.isplaying = false;		
			segrow.collapse();
			segrow.className = "segment notplaying";
		}
		segrow.settext = function(txt) { segtextstr.innerHTML = txt; }

		return segrow;
}
function SubsegmentRow(num){
	var subsegrow = document.createElement("div");
	subsegrow.className = "subsegment";
	
	// add image
	var textimg = document.createElement("img");
	textimg.src = "images/video/tree/subseg.jpg";
	textimg.style.display = "inline";
	textimg.style.verticalAlign = "middle";
	textimg.style.margin = "0px 2px 0px 2px";
	textimg.style.height = "4px";
	textimg.style.width = "4px";
	subsegrow.appendChild(textimg);
	
	// add text
	var sectime = subSegmentData[num].startTime;
	var textstr = document.createElement("span");
	textstr.className = "tree_text";
	textstr.innerHTML = subSegmentData[num].text;
	textstr.title = "jump to " + getProperTime(sectime);
	textstr.onclick = function() {
		seekedWithNote = true;
		vnplayer.sendEvent("SEEK", sectime + 1);
	}
	subsegrow.appendChild(textstr);
	
	subsegrow.text = textstr.innerHTML;
	
	subsegrow.play = function() { subsegrow.className = "subsegment playing"; }
	subsegrow.noplay = function() { subsegrow.className = "subsegment notplaying"; }	
	subsegrow.settext = function(txt) { textstr.innerHTML = txt; }
	
	return subsegrow;
}
function makeNoteTree() {
	var treeCon = $get("pnlVideoNotesTree");

	while(treeCon.hasChildNodes()) treeCon.removeChild(treeCon.childNodes[0]);
	
	//Check if there is no tree (i.e. they have it in videoonly=true mode, if yes then don't build the tree, etc.
	if (treeCon != null) {
		noTree = true;

		for (var i = 0, len = segmentData.length; i < len; i++) {
			var segrow = new SegmentRow(i);
			segrow.treenode = treeCon;
			treeCon.appendChild(segrow);
		}
		
		treeCon.segments = treeCon.childNodes;
		
		treeCon.collapseAllSegments = function() {
			var segrows = treeCon.segments;
			for (var i = 0, len = segrows.length; i < len; i++) segrows[i].collapse();
		}
	}
}