/* -*- JavaScript -*-
 *
 * Copyright (c) 2006
 * Spoken Language Systems Group
 * MIT Computer Science and Artificial Intelligence Laboratory
 * Massachusetts Institute of Technology
 *
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without
 * restriction, including without limitation the rights to use, copy,
 * modify, merge, publish, distribute, sublicense, and/or sell copies
 * of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
 * BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
 * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 *
 **/

var g_mediaPlayer = null;
var karaoke;
var resultsManager;

var loginOK = false;
var editOK = false;

var isIE = (navigator.appName.indexOf("Microsoft") != -1);

function ResultsManager(){
	this.editPane = document.getElementById('edit-pane');
	this.selectedPane = null;
	this.selectedItem = null;
	this.backItem = null;
}

new ResultsManager();

ResultsManager.prototype.onBack = function(){
	if (this.backItem){
		this.selectPane(false, this.backItem);
		this.backItem = null;
		document.getElementById('back-span').className = 'disable-item';
	}
}

ResultsManager.prototype.selectPane = function(setBack, item){
	var pane = null;
	var spn = null;
	// Try to keep the caret from vanishing in Firefox
	document.getElementById('query').focus();
	if (item){
		pane = document.getElementById(item+'-pane');
		spn = document.getElementById(item+'-span');
	}
	if (setBack && item && this.selectedItem && this.selectedItem != item){
		this.backItem = this.selectedItem;
		document.getElementById('back-span').className = '';
	}
	if (this.selectedItem != item){
		var selectedPane = document.getElementById(this.selectedItem+'-pane');
		if (selectedPane){
			selectedPane.style.display = "none";
		}
		var selectedSpan = document.getElementById(this.selectedItem+'-span');
		if (selectedSpan){
			selectedSpan.className = '';
		}
	}
	this.selectedItem = item;
	if (pane){
		pane.style.display = 'block';
	}
	if (spn){
		spn.className = 'disable-item';
	}
	return pane;
}

ResultsManager.prototype.getSelectedItem = function(){
	return this.selectedItem;
}

ResultsManager.prototype.getSelectedPane = function(){
	return this.selectedPane;
}

ResultsManager.prototype.getEditPane = function(){
	return this.editPane;
}

ResultsManager.prototype.hide = function(){
	this.selectPane(false, null);
}

function StopDisplay(){
   var outerThis = this;
   this.showStopped = function(stopReason){
	  if (!stopReason)
	    return;
	  if (!outerThis.busyContainer){
        outerThis.busyContainer = document.createElement("DIV");
        outerThis.busyContainer.id = "busy-container";
        document.body.appendChild(outerThis.busyContainer);
        outerThis.busyContainer.style.left = "30%";
        outerThis.busyContainer.style.top = "30%";
	  }

      outerThis.busyContainer.innerHTML=stopReason;
      outerThis.busyContainer.style.display = "block";
   }

   this.showResumed = function(){
      if (outerThis.busyContainer){
        outerThis.busyContainer.style.display = "none";
      }
   }
}

queue.stopDisplay = new StopDisplay();

function onLoad() {
	resultsManager = new ResultsManager();
    queue.post("Getting Categories...", categoriesURL, {}, fillInCategories);
}

function fillInCategories(xml){
   var categories = xml.getElementsByTagName('category');
   var catmenu = document.getElementById('catmenu');
   catmenu.innerHTML = '';
   var option = makeelt(catmenu, 'option', null);
   option.value = '';
   styleText(option, 'Any category');

   for(var i = 0; i<categories.length; i++){
      var category = categories[i];
      option = makeelt(catmenu, 'option', null);
      option.value = category.getAttribute("categoryid");
      styleText(option, category.getAttribute("name"));
   }
   onResize();
   if (!g_mediaPlayer)
      return;
   resultsManager.selectPane(false, "help");
   karaoke.playTutorial(false);
   document.getElementById('query').focus();
}

function createMediaPlayer(width, height){
   // Make sure that media player is supported
   var enabled = false;
   var mimetype;
   var i;
   for(i=0; i<navigator.plugins.length; i++){
	  var plugin = navigator.plugins[i];
	  var j;
	  if (plugin.name.indexOf("RealPlayer") >= 0){
	    enabled = true;
	    mimetype = plugin[0];
	  } else {
	  	for(j=0; j<plugin.length; j++){
	   	  mimetype = plugin[j];
	      // The enabledPlugin test doesn't work on OS X
	      if (mimetype.type=="audio/x-pn-realaudio-plugin" ||
	          mimetype.description.indexOf("RealPlayer") >= 0){
             enabled = true;
             break;
	      }
	    }
	  }
	  if (enabled){
	    break;
	  }
   }
   if (isIE){
   	  // On IE you need to try all the various com objects that might be realplayer
      enabled = (detectActiveXControl('rmocx.RealPlayer G2 Control') ||
        detectActiveXControl('RealPlayer.RealPlayer(tm) ActiveX Control (32-bit)') ||
        detectActiveXControl('RealVideo.RealVideo(tm) ActiveX Control (32-bit)'));
   }
   if (!enabled){
	  resultsManager.selectPane(false, "real");
      return;
   }

   var mediaPlayer = new RealPlayerController();	
   //var mediaPlayer = new QuickTimeController();
   var videoContainer = document.getElementById('video-container');
   mediaPlayer.createPlayer(videoContainer, width, height, initialmediaURL);
   
   return mediaPlayer;
}

function onResize() {
   var totalHeight;
   var totalWidth;
   if (document.compatMode == "CSS1Compat"){
      totalWidth = document.body.parentNode.clientWidth;
      totalHeight = document.body.parentNode.clientHeight;

   } else {
      totalWidth = document.body.clientWidth;
      totalHeight = document.body.clientHeight;
   }
   var logo = document.getElementById('logo');
   var logoWidth = logo.clientWidth;
   totalHeight -= 2*10;
   var videoContainer = document.getElementById("video-container");
   var width = 280;

   if (totalWidth > logoWidth+320+20){
      if (totalWidth > logoWidth+400+20){
	 width = 400;
      } else {
	 width = 310;
      }
      videoContainer.style.width = width+"px";
   }
   videoContainer.parentNode.style.width = width+"px";
   videoContainer.parentNode.parentNode.style.width = width+"px";
   var leftPane = document.getElementById('left-pane');
   leftPane.style.width=(totalWidth-width-40)+"px";
   leftPane.style.display = "none";
   leftPane.style.display = "block";

   var height = Math.round(width * 3 / 4);
   g_mediaPlayer = createMediaPlayer(width, height);
   if (!g_mediaPlayer)
      return;

   var karaokeText = document.getElementById("karaoke-text");
   karaoke = new Karaoke(g_mediaPlayer, karaokeText);
   karaoke.start();

   karaokeText.style.height = (totalHeight - height-36 - 50) + "px";

   var queryPane = document.getElementById("query-pane");
   var resultsPane = document.getElementById("results-pane");

   var rph = totalHeight-queryPane.parentNode.offsetHeight-logo.parentNode.offsetHeight-40;
   if (!isIE){
      rph-=45;
   }
   resultsPane.style.height = rph+"px";
}

function positionSashThumb(percent) {
   return;
   var img = document.getElementById("sash-thumb");
   img.style.top = percent + "%";
}

function onMouseOverShowTooltip(elmt, evt) {
   showTooltip(elmt, elmt.firstChild);
}

function onMouseOutHideTooltip(elmt, evt) {
   hideTooltip();
}

function registerEvent(elmt, eventName, handler) {
   var handler2 = function(evt) {
      evt = (evt) ? evt : ((event) ? event : null);
      if (evt) {
	 handler(elmt, evt);
      }
   }
   
   if (isIE) {
      elmt.attachEvent("on" + eventName, handler2);
   } else {
      elmt.addEventListener(eventName, handler2, true);
   }
}

function getAbsoluteCoordinates(elmt) {
   var x = 0;
   var y = 0;

   if (!isIE){
      var k = elmt;
      while(k != document.body){
	 x -= k.scrollLeft;
	 y -= k.scrollTop;
	 k = k.parentNode;
      }
   }

   while (elmt.offsetParent) {
      x += elmt.offsetLeft;
      y += elmt.offsetTop;

      if (isIE){
	 x-=elmt.scrollLeft;
	 y-=elmt.scrollTop;
      }

      elmt = elmt.offsetParent;
   }

   return {x: x, y: y};
}

function showTooltip(elmtTarget, elmtContent) {
   elmtContent = elmtContent.cloneNode(true);
   elmtContent.style.display = "block";
   
   var tooltipContainer = document.getElementById("tooltip-container");
   if (!tooltipContainer) {
      tooltipContainer = document.createElement("DIV");
      tooltipContainer.id = "tooltip-container";
      tooltipContainer.innerHTML = "&nbsp;";
      
      document.body.appendChild(tooltipContainer);
   }
   
   if (tooltipContainer.firstChild) {
      tooltipContainer.removeChild(tooltipContainer.firstChild);
   }
   
   tooltipContainer.appendChild(elmtContent);
   tooltipContainer.style.display = "block";
   
   var c = getAbsoluteCoordinates(elmtTarget);
   if (c.x + tooltipContainer.offsetWidth > document.body.offsetWidth) {
      tooltipContainer.style.left = (c.x + elmtTarget.offsetWidth - tooltipContainer.offsetWidth) + "px";
   } else {
      tooltipContainer.style.left = c.x + "px";
   }
   tooltipContainer.style.top = (c.y + elmtTarget.offsetHeight + 10) + "px";
}

function hideTooltip() {
   var tooltipContainer = document.getElementById("tooltip-container");
   if (tooltipContainer) {
      tooltipContainer.style.display = "none";
   }
}

function eventTarget(e){
   // Work around for non-compliant browsers
   return e ? e.target : window.event.srcElement;
}

// Safari gives text node for event target on mouse out
function eventSpan(e){
   var node = eventTarget(e);
   if (node.nodeName == 'SPAN'){
   	return node;
   } else {
     return node.parentNode;
   }
   	
}

function getNodeNamed(node, name){
   while(node && node.nodeName != name){
      node = node.parentNode;
   }
   return node;
}

function getNodeAttribute(node, eltname, attrname){
   return getNodeNamed(node, eltname).getAttribute(attrname);
}

function nodeQuery(node){
   return getNodeAttribute(node, "results", "query");
}

function nodeSegment(node){
   return getNodeNamed(node, "segment");
}

function nodeLecture(node){
   return getNodeNamed(node, "lecture");
}

function nodeLectureid(node){
   return getNodeAttribute(node, "lecture", "lectureid");
}

function nodemedia(node){
   return getNodeAttribute(node, "lecture", "mediaurl");
}

function indexElements(xml, index, elementName, attrName){
   var subIndex = {};
   var elements = xml.getElementsByTagName(elementName);
   for(var i = 0; i < elements.length; i++){
      var element = elements[i];
      var id = element.getAttribute(attrName);
      if (id){
	 subIndex[id] = element;
      }
   }
   index[attrName] = subIndex;
}

function getLectureHits(kvals, fn){
   queue.post("Searching...", lecturesURL, kvals, fn);
}

function getIndexedLectureHits(kvals, fn){
   getLectureHits(kvals, function(xml){
		     var index = {};
		     indexElements(xml, index, 'course', 'courseid');
		     indexElements(xml, index, 'seminarseries', 'seriesid');
		     fn(xml, index);
		  });
}

function getWordHits(kvals, fn){
   queue.post("Searching...", timesURL, kvals, fn);
}

function timeStr(msecs){
   var secs = Math.floor(msecs/1000);
   msecs-=secs*1000;
   var mins = Math.floor(secs/60);
   secs-=mins*60;
   var hours = Math.floor(mins/60);
   mins-=hours*60;
   var result = "";
   if (hours > 0){
      result+=hours+":";
   }
   if (hours > 0){
      if (mins < 10){
	 result+='0';
      }
   }
   result+=mins+":";
   if (secs < 10){
      result+='0';
   }
   result+=secs;

   return result;
}

function styleText(parent, tspec){
   if (typeof tspec == 'string'){
      parent.appendChild(document.createTextNode(tspec));
      return;
   }
   for(var i = 0; i < tspec.length; i++){
      var elt = tspec[i];
      if (typeof elt == 'string'){
	 parent.appendChild(document.createTextNode(elt));
      } else if (typeof elt == 'object'){
	 var span = document.createElement('span');
	 span.className = elt[0];
	 span.appendChild(document.createTextNode(elt[1]));
	 parent.appendChild(span);
      } else {
	 parent.appendChild(document.createTextNode("[What's this? ("+(typeof elt)+")"+elt+"]"));
      }
   }
}

function makeelt(parent, etype, cls){
   var elt = document.createElement(etype);
   if (etype)
      elt.className = cls;
   if (parent)
      parent.appendChild(elt);
   return elt;
}

function onBack(){
	resultsManager.onBack();
	return false;
	}

function onAbout(){
   //karaoke.playTutorial(true);
   resultsManager.selectPane(true, "about");
   return false;
}

function onHelp(){
	resultsManager.selectPane(true, "help");
	return false;
}

function onLogin(){
	resultsManager.selectPane(true, "login");
	return false;
}

function onEditFlag(){
	karaoke.flagEdit();
	return false;
}

function onEdit(){
	karaoke.finishEdit();
	return false;
}

function onEditReset(){
	karaoke.clearEdits();
	return false;
}

function onPassword(){
	var userid = document.getElementById('userid').value;
	var pw = document.getElementById('password').value;

	var noncePost = {};
	noncePost.userid = userid;
	queue.post("Login nonce", nonceURL, noncePost, function(xml){
		var nonce = xml.getElementsByTagName('nonce')[0].getAttribute('nonce');
		var salt = xml.getElementsByTagName('nonce')[0].getAttribute('salt');
		var phash = b64_md5(salt+pw);
		clientHash = b64_md5(phash+nonce);
		var post = {};
		post.clientHash = clientHash;
		queue.post("Login authenticate", loginURL, post, function(xml){
		    login = xml.getElementsByTagName('login')[0];
			loginOK = login.getAttribute('success')=='true';
			editOK = login.getAttribute('edit')=='true';
			if (editOK){
				document.getElementById('edit-menu-pane').style.display = 'inline';
				document.getElementById('login-menu-pane').style.display = 'none';
			}
			onBack();	
		});
		});

	return false;
}

function onLectureQuery(){
   var post = {};
   post.query = document.getElementById('query').value;
   post.categoryid = document.getElementById('catmenu').value;
   post.fillLecture = true;
   post.depth = 2;
   getIndexedLectureHits(post, showLectureHits);
   return false;
}

function showLectureHits(xml, index){
   var queryResultsDetailPane = document.getElementById('query-results-detail-pane');
   queryResultsDetailPane.innerHTML = "";

   var lectures = xml.getElementsByTagName("lecture");
   // Search summary
   var qresults = xml.getElementsByTagName('results')[0];
   var query = qresults.getAttribute('query');
   var categoryName = qresults.getAttribute('categoryName');
   var queryResultsSummaryPane = document.getElementById('query-results-summary-pane');
   queryResultsSummaryPane.innerHTML = '';
   var nlectures = parseInt(lectures.length);
   styleText(queryResultsSummaryPane, [['query-hits', lectures.length]]);
   styleText(queryResultsSummaryPane, ' result'+((nlectures != 1) ? 's' : ''));
   if (query){
      styleText(queryResultsSummaryPane, ' for ');
      styleText(queryResultsSummaryPane, [['query-high', query]]);
   }
   if (categoryName){
      styleText(queryResultsSummaryPane, ' in "'+categoryName+'"');
   }

   // Search results
   for(var i =0; i < lectures.length; i++){
      var divResult = makeelt(queryResultsDetailPane, 'div', 'result');
      showLectureHit(i, lectures[i], index, divResult, i==0);
   }
   resultsManager.selectPane(true, "query-results");
}

function showLectureHit(resultno, lecture, index, divResult, expand){
   var number = lecture.getAttribute('number');
   var name = lecture.getAttribute('name');
   var lecturer = lecture.getAttribute('lecturer');
   var duration = parseInt(lecture.getAttribute("duration"));
   var courseid = parseInt(lecture.getAttribute('courseid'));
   var seriesid = parseInt(lecture.getAttribute('seriesid'));
   var date = lecture.getAttribute('date');
   var keywords = lecture.getAttribute('keywords');
   var divResultTitle = makeelt(divResult, 'div', 'result-title');
   styleText(divResultTitle, [(resultno+1)+'. ', name]);

   var divDuration = makeelt(divResult, 'div', 'result-lecture-duration');
   styleText(divDuration, timeStr(duration));

   var divResultSubtitle = makeelt(divResult, 'div', 'result-subtitle');

   var tspec = [];

   var subtext = '';
   var needComma = false;
   var pushTspec = function(x){
      if (needComma)
	 subtext+=', '
      subtext+=x;
      needComma = true;
   }

   if (courseid){
      var course = index['courseid'][courseid];
      var inst = course.getAttribute('institution');
      var dept = course.getAttribute('department');
      var cnum = course.getAttribute('number');
      var cnam = course.getAttribute('name');
      var year = course.getAttribute('year');

      if (number){
	 pushTspec("Lecture "+number);
      }
      pushTspec(cnam);
      pushTspec(dept);
      pushTspec(inst);
      pushTspec(year);
   }

   if (seriesid){
      var series = index['seriesid'][seriesid];
      var inst = series.getAttribute('institution');
      var snam = series.getAttribute('name');
      var host = series.getAttribute('host');
      pushTspec(snam);
   }

   if (date){
      pushTspec(date);
   }
   if (lecturer){
      subtext+=' ('+lecturer+')';
   }
   styleText(divResultSubtitle, [subtext]);
   makeTrackContainer(divResult, lecture, duration, expand);
}

function makeTrackContainer(divResult, lecture, duration, expand){
   var segments = lecture.getElementsByTagName("segment");
   var divContainer = makeelt(divResult, 'div', 'track-container');
   var divTrack = makeelt(divContainer, 'div', 'track');

   var barw = 100;
   var minwid = Math.floor(50/(segments.length+1));
   var exwid = barw-segments.length*minwid;
   var togglefun;
   var query = nodeQuery(lecture);

   for(var i =0; i<segments.length; i++){
      (function(i, query){
	  var segment = segments[i];
	  var beginTime = parseInt(segment.getAttribute("beginTime"));
	  var endTime = parseInt(segment.getAttribute("endTime"));
	  var segdur = endTime-beginTime;

	  var exseg = Math.floor((segdur*exwid)/duration);
	  var count = parseInt(segment.getAttribute("count"));
	  var hasHits = count > 0;

	  // Avoid accumulated rounding problems
	  duration-=segdur;
	  exwid-=exseg;

	  var divTrackSegment = makeelt(divTrack, 'div', 'track-segment');
	  divTrackSegment.style.width = minwid+exseg+"%";


	  var toolTip= '';
	  var mins = Math.floor((segdur+30000)/60000);

	  var divSegmentLite;
	  var divInner;
	  if (hasHits){
	     divSegmentLite = makeelt(divTrackSegment, 'div', 'track-segment-hilite');

	     divInner = makeelt(divSegmentLite, 'div', 'track-segment-hilite-inner');

	  } else {
	     divSegmentLite = makeelt(divTrackSegment, 'div', 'track-segment-lolite');
	     divInner = makeelt(divSegmentLite, 'div', 'track-segment-lolite-inner');
	  }
	  var divPlay = makeelt(divInner, 'div', 'small-play-button');
	  var playTip = makeelt(divPlay, 'div', 'tooltip-contents');
	  toolTip= "Play from "+timeStr(beginTime);
	  playTip.innerHTML = toolTip;
	  registerEvent(divPlay, "mouseover", onMouseOverShowTooltip);
	  registerEvent(divPlay, "mouseout", onMouseOutHideTooltip);

	  divSegmentLite.onclick = function(){
	     karaoke.playSegment(segment);
	  };

	  var divInfo = makeelt(divTrackSegment, 'div', 'track-segment-info');
	  var infoTip = makeelt(divInfo, 'div', 'tooltip-contents');
	  if (hasHits){
	     toolTip="Show/hide hits for "+query+".";
	  } else {
	     toolTip="Show/hide blurbs.";
	  }
	  infoTip.innerHTML = toolTip;
	  registerEvent(divInfo, "mouseover", onMouseOverShowTooltip);
	  registerEvent(divInfo, "mouseout", onMouseOutHideTooltip);

	  var divTrackUtts = makeelt(divContainer, 'div', 'track-utterances-empty');
	  
	  divInfo.onclick = function(){
	    toggleSegmentText(segment,query,divTrackUtts, divInfo);
	  };

	  if (count > 0 && expand){
	     togglefun = function(){toggleSegmentText(segment, query, divTrackUtts, divInfo); }
	     expand = false;
	  }
       })(i, query)};
   makeelt(divContainer, 'div', 'track-utterances-place-holder');
   if (togglefun){
      togglefun();
   }
}

function toggleSegmentText(segment, query, divTrackUtts, divSegmentInfo){
   var children = divSegmentInfo.parentNode.parentNode.childNodes;
   var i;
   var j;
   var k;
   for(i=0; i<children.length; i++){
      var gchildren = children[i].childNodes;
      for(j=0; j<gchildren.length; j++){
	 var div = gchildren[j];
         if (div.className == "track-segment-info-selected"){
            div.className = "track-segment-info";
         }
      }
   }

   children = divTrackUtts.parentNode.childNodes;
   for(i=0; i<children.length; i++){
      if (children[i].className == "track-utterances"){
         children[i].className = "track-utterances-hidden";
         divSegmentInfo.className = "track-segment-info";
         if (children[i] == divTrackUtts)
            return;
      }
   }
            
   divSegmentInfo.className = "track-segment-info-selected";
   if (divTrackUtts.className == 'track-utterances-hidden'){
      divTrackUtts.className = 'track-utterances';
      return;
   }

   var post = {};
   var highlight = parseInt(segment.getAttribute("count")) > 0;
   if (highlight){
      post.query = query;
      post.padding = 10000;
   } else {
      var summary = segment.getAttribute("summary");
      var words = summary.split(' ');
      var i;
      var query = '';
      for(i=0; i< Math.min(words.length, 2); i++){
	 if (query)
	    query+=' ';
	 query+=words[i];
      }
      post.query = query;
      post.padding = 2000;
   }
   post.lectureid = nodeLectureid(segment);
   post.beginTime = segment.getAttribute("beginTime");
   post.endTime = segment.getAttribute("endTime");
   post.depth=4;

   getLectureHits(post, function(xml){getSegmentText(xml, divTrackUtts, highlight);});
}

function getSegmentText(xml, divTrackUtts, highlight){
   var inner = isIE ? "<table width='90%'></table>" : "<table width='100%'></table>";
   divTrackUtts.innerHTML = "<table width='90%'></table>";
   var tbody = divTrackUtts.childNodes[0];
   var fragments = xml.getElementsByTagName("fragment");
   var i;
   for(i = 0; i < fragments.length; i++){
      (function(i){
	  var fragment = fragments[i];
	  
	  var count = fragment.getAttribute("count");
	  var beginTime = parseInt(fragment.getAttribute("beginTime"));
	  var beginStr = timeStr(beginTime);
	  var endTime = parseInt(fragment.getAttribute("endTime"));
	  var kar = makeKaraokeText(fragment, highlight);
	  var summary = kar.text;
	  var tr = tbody.insertRow(tbody.rows.length);
	  tr.style.cursor = 'pointer';
	  var td = tr.insertCell(tr.cells.length);
	  var tip = makeelt(td, 'div', 'tooltip-contents');
	  tip.innerHTML = "Start playing from "+beginStr;
	  registerEvent(td, "mouseover", onMouseOverShowTooltip);
	  registerEvent(td, "mouseout", onMouseOutHideTooltip);

	  makeelt(td, 'div', 'small-play-button');
	  td.vAlign = 'top';
	  td.width = '25px';
	  td.height = '100%';

	  td.onclick = function(){karaoke.playFromFragment(fragment, highlight);};

	  td = tr.insertCell(tr.cells.length);
	  td.vAlign = "top";
	  td.appendChild(summary);
       })(i)}
   divTrackUtts.className = "track-utterances";
}

function makeKaraokeText(frag, highlight){
   var i;
   var j;
   var k = 0;
   var nwords = 0;
   var children = frag.childNodes;
   for(j=0; j < children.length; j++){
      if (children[j].nodeName == "word")
	 nwords++;
   }

   var times = new Array(nwords);
   var text = document.createElement("span");
   var pwords = 0;
   var lecture = nodeLecture(frag);
   var fragspan = document.createElement("span");
   fragspan.onclick = function(e){
      karaoke.playFromLectureWord(eventTarget(e), lecture, highlight, times);
   }
   for(j=0; j<frag.childNodes.length;j++){
      if (pwords > 0){
	 fragspan.appendChild(document.createTextNode(' '));
      }
      var word = frag.childNodes[j];
      if (word.nodeName != "word")
	 continue;
      pwords++;
      var span = document.createElement("span");
      var tnode = document.createTextNode(word.getAttribute("text"));

      if (highlight && word.getAttribute('term') == 'true'){
	 span.style.backgroundColor = '#FFFF84';
      }
      span.onmouseover = function(e){eventSpan(e).className = "hover";};
      span.onmouseout = function(e){eventSpan(e).className = "";}

      span.appendChild(tnode);
      fragspan.appendChild(span);

      times[k++] = {'beginTime' : parseInt(word.getAttribute('beginTime')),
		    'elt' : span};
   }
   /*
   (function(fragment){
       fragspan.onclick = function(){karaoke.playFromFragment(fragment, highlight);};
    })(frag);
*/
   text.appendChild(fragspan);

   return {'text' : text};
}

function printlnc(s){
   resultsManager.getDebugPane().innerHTML = '';
   println(s);
 }

function println(s){
	var text = document.createTextNode(s);
   	var debugPane = document.getElementById('debug-pane');
   	resultsManager.selectPane(true, "debug");
	debugPane.appendChild(text);
    debugPane.appendChild(document.createElement('br'));
}