var alignmentId;
var labelCategoryIndex=6;
var treeHeight;
var treeWidth;
var alignWidth;
var treeImage;
var alignImage;
var backImage;
var mapImage;
var mapStart;
var backImage;

function initTreeAlignment() 
{
  var alignDoc = window.frames['alignFrame'].document
  var alignBody = alignDoc.body;
  //initAlignmentImage(alignBody);
  alignBody.style.marginLeft = '0';
  alignBody.style.marginTop = '0';
  alignBody.id = "alignBody";
  backImage = alignBody.firstChild; //alignDoc.createElement("img");
  //alignBody.appendChild(backImage);
  backImage.setAttribute('style','z-index: 0;');
  backImage.width = alignWidth;
  backImage.height = treeHeight;
  backImage.src = 'GetAlignmentImage?setId=0&treeId=0&back=1&alignId='+alignmentId;

  alignImage = alignDoc.createElement("img");
  alignBody.appendChild(alignImage);

  alignImage.setAttribute('style','z-index: 1;');
  alignImage.style.position='absolute';
  alignImage.style.left=0;
  alignImage.style.top=0;
  alignImage.width = alignWidth;
  alignImage.height = treeHeight;

  alignImage.src = 'GetAlignmentImage?alignId='+alignmentId;


  var treeBody = window.frames['treeFrame'].document.body;
  //initTreeImage(treeBody);
  treeBody.style.marginLeft = '0';
  treeBody.style.marginTop = '0';
  treeBody.id = "treeBody";
  treeImage = treeBody.firstChild;
  treeImage.width = treeWidth;
  treeImage.height = treeHeight;
  treeImage.id = "treeImage";

  //treeImage.onclick=function(event){treeClick(event);}
  treeImage.src = 'GetTreeImage?alignId='+alignmentId+'&labCat='+labelCategoryIndex;


}

function initMap()
{
  mapImage = document.getElementById('MapImage');
  mapImage.onclick=function(event){clickMap(event);}
  var now = new Date();
  mapImage.src = 'GetMapImage?time='+now.getTime();
  mapStart = 1;

}
function navMap(form)
{
  url = 'GetMapImage?'
  if (form.focalGene && form.focalGene.value)
    {
      url += 'focalGene='+form.focalGene.value+'&';
    }
  if (form.scroll && form.scroll.value)
    {
      url += 'scroll='+form.start.value;
    }  
  mapImage.src = url;
}

function scrollMap(dir)
{
  //alert("scrollMap: "+dir);
  var now = new Date();
  document.getElementById('MapImage').src = 'GetMapImage?scroll='+dir+'&time='+now.getTime();	
  url = 'GetMapImage?getPosXML';
  //alert('sending xml request: '+url);
  loadXMLDoc(url, updateMapPos)
}

function updateMapPos()
{  
  if (req.readyState == 4)// only if req shows "loaded"
    {
      if (req.status == 200) 
	{
	  mapPos = req.responseXML.documentElement.getAttribute("pos");
	  //alert("retrieved map position XML\n pos="+mapPos);
	} 
      else 
	{
            alert("There was a problem retrieving the XML data:\n" +
                req.statusText);
        }
    }
}

function slideMap(offset)
{
  mapStart += offset;
  mapImage.src = 'GetMapImage?start='+mapStart;
}

function alignmentQuery(form)
{
  url = 'GetAlignmentList?db='+form.db.value;
  if (form.gi.value)
    url += '&gi='+form.gi.value;
  if (form.acc.value)
    url += '&acc='+form.acc.value;
  if (form.term.value)
    url += '&term='+form.term.value;
  window.location.href = url;
}

function clickMap(event)
{
  x = 0; 
  y = 0;
  if (event)
    {
      x = event.clientX;
      y = event.clientY;
      el = event.target;
      do {
	x -= el.offsetLeft;
	y -= el.offsetTop;
      }
      while ((el = el.offsetParent));
    }
  else
    {
      event = window.event;
      x = event.offsetX;
      y = event.offsetY;
    }
  url = 'GetMapImage?x='+x+'&y='+y;
  //alert('sending xml request: '+url);
  loadXMLDoc(url, processMapClick)
    //mapImage.src = url;
}

function processMapClick() 
{  
  if (req.readyState == 4)// only if req shows "loaded"
    {
      if (req.status == 200) 
	{
 	  feature = req.responseXML.documentElement;
	  type = feature.getAttribute("type");
	  featureId = feature.attributes.getNamedItem("id").nodeValue;
	  if (type == "ALN")
	    {
	      window.location.href = 'GetAlignment?al='+featureId;
	    }
	if (type == 'PRO')
            {	
	       //alert('got PRO object, id='+featureId);
	       window.location.href = 'GetProtein?seqId='+featureId;
            }	
	} 
      else 
	{
            alert("There was a problem retrieving the XML data:\n" +
                req.statusText);
        }
    }
}

function toggleDisplay(elemId)
{
  elem = document.getElementById(elemId);
  elem.style.display = elem.style.display == 'none' ? 'block' : 'none';
}


function setTreeLabels(form)
{
  labelCategoryIndex = form.tipLabels.value;
  treeImage.src = 'GetTreeImage?alignId='+alignmentId+'&labCat='+labelCategoryIndex;

  backImage.src = 'GetAlignmentImage?alignId='+alignmentId+'&back=1';
  alignImage.src = 'GetAlignmentImage?alignId='+alignmentId;
  //alert("labelCategoryIndex changed to "+labelCategoryIndex);
}


var req;

function loadXMLDoc(url, callBackFunction) 
{
  try
    {
      req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    }
  catch(e) { req = false;}
  if(req) 
    {
      req.onreadystatechange = callBackFunction;
      req.open("GET", url, true);
      req.send("");
    }
}

function processTreeUpdate() 
{
  if (req.readyState == 4)
    {  // state 4 means "loaded"
      if (req.status == 200) 
	{ // 200 means no error
	  alert('req='+req+"\nresponseXML="+req.responseXML+"\ntreeHeight"+treeHeight);
	  //newTreeImage = req.responseXML.document.getElementById('treeImage');
	  loadTreeImage(treeSet, treeIndex, alignmentId, labelCategoryIndex);
	} 
      else 
	{
            alert("There was a problem retrieving the XML data:\n" +
                req.statusText);
        }
    }
}