//this draws the pop-up boxes which contain 2 sample lines of data from a given atn,tty,or rel/rela

function drawContentBox(contentArea,event,linkText) {



//determine x coordinate
var coordX = event.clientX + 25;

//determine y coordinate

//window.pageYOffset doesn't work in IEs :( //
   if (navigator.userAgent.indexOf("MSIE") != -1 ) {
   var coordY = event.clientY + document.body.scrollTop;
   var coordY = event.clientY + document.documentElement.scrollTop;
   }
   else {
   var coordY = event.clientY + window.pageYOffset; 
   }
///////////////////////////////////////////////////////////////
//find appropriate divs and table to build content;	
  var contentDiv = document.getElementById(contentArea);
  var contentTable = contentDiv.getElementsByTagName("table")[0];
  var totalRows = contentTable.getElementsByTagName("tr");
  var firstRow = contentTable.getElementsByTagName("tr")[0];
  var thTags = firstRow.getElementsByTagName("th");
  var placeHolder = document.getElementById("placeholder");
 
 placeHolder.style.position = "absolute";
 placeHolder.style.top = coordY.toString()+"px";
 placeHolder.style.left = coordX.toString()+"px";
 
  
  var containerDiv = document.createElement("div");
  containerDiv.className = "metaDrawBoxContainer";
 
  var metaBoxHeader = document.createElement("div");
  metaBoxHeader.className = "metaBoxHeader";
  metaBoxHeader.style.width = "100%";
  var metaBoxFooter = document.createElement("div");
  metaBoxFooter.className = "metaBoxFooter";
  var boxNotesLeft = document.createElement("span");
  var boxNotesRight = document.createElement("span");
  boxNotesLeft.className = "boxNotesLeft";
  boxNotesRight.className = "boxNotesRight";
  boxNotesLeft.innerHTML+= "<a href = '#"+contentArea+"' onclick = \"new Effect.Highlight('"+contentArea+"',{ startcolor: \'#FFCCCC\',endcolor:\'#ffffff\' });\">see more samples</a>&nbsp;&nbsp;(Click and hold to drag this window)";
 // boxNotesLeft.innerHTML+= "<a href = '#"+contentArea+"' onclick = 'document.write("+document.getElementById(contentArea.toString())+");' >see more samples</a>&nbsp;&nbsp;";
  boxNotesRight.innerHTML+= "<a href = 'javascript:closeWindow();'>X</a>";
  var boxHeader = document.createElement("span");
  boxHeader.className = "boxHeader";
  
  
  ///build rounded corners of inner box
  var tl = document.createElement("div");
  tl.className = "tl";
  var tr = document.createElement("div");
  tr.className = "tr";
  
  
  var bl = document.createElement("div");
  bl.className = "bl";
  var br = document.createElement("div");
  br.className = "br";
  //rather silly fix for IE6 (big suprise)
  if (navigator.userAgent.indexOf("MSIE 6.0") != -1 ) {

  br.style.bottom = "8px";
  bl.style.bottom = "8px";
								  
  }
				
  metaBoxHeader.appendChild(boxNotesLeft);
  metaBoxHeader.appendChild(boxNotesRight);
  metaBoxHeader.appendChild(boxHeader);
  var tableHolder = document.createElement("div");
  tableHolder.className = "tableHolder";
  var newTable = document.createElement("table");
  newTable.setAttribute('cellpadding','10');
  newTable.setAttribute('summary','This table provides a few samples of ' + contentArea + 'in the UMLS Metathesaurus');
  newTable.className = "metaDrawBox";
  newTable.style.width = "90%";
  var firstTR = document.createElement("tr");
  newTable.appendChild(firstTR);
//iterate through the th tags  
  for (var i = 0; i < thTags.length; i++) {
  
  var thContent = thTags[i].innerHTML;
  var thTag = document.createElement("th");
  thTag.innerHTML = thContent;
  firstTR.appendChild(thTag);  
  
  }
 
  


var remainingRows = contentTable.getElementsByTagName("tr"); 
//we only want the first two lines of of the table.  
//To do: build in condition to handle if there is only one line of data, for example with mapping atns ///


 for (var i = 1; i < remainingRows.length; i++) { 
  
  //we only want 2 sample rows
  if (i > 2) break;
  var trTag= document.createElement("tr");
  var tdTags = remainingRows[i].getElementsByTagName("td");
  var trTagStyle = remainingRows[i].className;
  
  
      for (var j = 0; j < tdTags.length; j++) {
		
		var tdTagContent = tdTags[j].innerHTML;
		var tdTag = document.createElement("td"); 
		var tdTagClass = tdTags[j].className;
		tdTag.setAttribute('valign','top');
		tdTag.innerHTML = tdTagContent;
		trTag.appendChild(tdTag);
		
		if(trTagStyle == "inversesamplerow" && (tdTagClass == "rel" || tdTagClass == "rela")) {
			
		tdTag.style.color = "#CC6633";	
		}
		
		
			  
	  }
  newTable.appendChild(trTag);
	 
 }
tableHolder.appendChild(newTable);
boxHeader.innerHTML+= "Sample Data ("+linkText+")";
placeHolder.appendChild(tl);
placeHolder.appendChild(tr);
placeHolder.appendChild(metaBoxHeader);
placeHolder.appendChild(tableHolder);
placeHolder.appendChild(metaBoxFooter);
placeHolder.appendChild(bl);
placeHolder.appendChild(br);




///VERY important for IE
placeHolder.innerHTML+="";
/////////////////////////


new Draggable (placeHolder, {revert:false, ghosting:true});
 
 
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////end function drawContentBox
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


//this closes the window by clearing out the placeholder div and resetting the display//
function closeWindow() {
	
document.getElementById('placeholder').innerHTML = '';
document.getElementById('placeholder').style.display = 'none';



}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////end function closeWindow
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


//this is for accessibility with those using tab and enter to navigate through the page.  Allows enter key to not cause a pop-up event,
//but rather jump down to the tag


function checkKeyType(jumpTag,event) {
	
//var keycode;
if (event.keyCode == 13) {
	
//alert("Enter key was pressed");	
document.location.href = "#"+jumpTag;
closeWindow();

}

	
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////end function checkKeyType
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////