//Displays the interface for the Photograph Display system
    //Copyright (C) 2009  Peter Davies

    //This program is free software: you can redistribute it and/or modify
    //it under the terms of the GNU General Public License as published by
    //the Free Software Foundation, either version 3 of the License, or
    //(at your option) any later version.

    //This program is distributed in the hope that it will be useful,
    //but WITHOUT ANY WARRANTY; without even the implied warranty of
    //MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    //GNU General Public License for more details.

    //You should have received a copy of the GNU General Public License
    //along with this program.  If not, see <http://www.gnu.org/licenses/>.



var ie=document.all;			//determines if the browser is Internet Explorer
var nn6=document.getElementById&&!document.all;
var truevar="  True          ";		//Matches what will be in the Configuration file if Standard Operation is true

try 					//Internet Explorer
  {
  Configuration=new ActiveXObject("Microsoft.XMLDOM");	//creates objects for the xml documents
  ImgReference=new ActiveXObject("Microsoft.XMLDOM");
  }
catch(e)
  {
  try 					//Firefox, Mozilla, Opera, etc.
    {
    Configuration=document.implementation.createDocument("","",null);
    ImgReference=document.implementation.createDocument("","",null);
    }
  catch(e)
    {
    alert(e.message);
    }
  }
Configuration.async=false;
Configuration.load("Configuration.xml");		//loads the Configuration file
ImgReference.async=false;
ImgReference.load("ImgReference.xml");			//loads the Image Reference file

  
if(ie)
  {
  var Cvar = Configuration.getElementsByTagName("config")[0];	//extracts nodes from the Configuration file
  var StandardOp = Cvar.childNodes[0].childNodes[0].nodeValue;
  var IconPath = Cvar.childNodes[1].childNodes[0].nodeValue;
  var bgcolour = Cvar.childNodes[2].childNodes[0].nodeValue;
  var bdcolour = Cvar.childNodes[3].childNodes[0].nodeValue;
  var txcolour = Cvar.childNodes[4].childNodes[0].nodeValue;

  var Ivar = ImgReference.getElementsByTagName("images")[0];	//extracts nodes from the Image Reference file
  var ImgTot = Ivar.childNodes[0].childNodes[0].childNodes[0].nodeValue;
  var Img = new Array(ImgTot);
  for(i = 0; i <= ImgTot; i++)
    {
    Img[i] = new Array(2);		//creates a 2-dimensional array for the coordinates and filenames of the images
    Img[i][0] = Ivar.childNodes[i+1].childNodes[0].childNodes[0].nodeValue;
    Img[i][1] = Ivar.childNodes[i+1].childNodes[1].childNodes[0].nodeValue;
    Img[i][2] = Ivar.childNodes[i+1].childNodes[2].childNodes[0].nodeValue;
    }
  }
else
  {
  var Cvar = Configuration.getElementsByTagName("config")[0];	//extracts nodes from the Configuration file
  var StandardOp = Cvar.childNodes[1].childNodes[0].nodeValue;
  var IconPath = Cvar.childNodes[3].childNodes[0].nodeValue;
  var bgcolour = Cvar.childNodes[5].childNodes[0].nodeValue;
  var bdcolour = Cvar.childNodes[7].childNodes[0].nodeValue;
  var txcolour = Cvar.childNodes[9].childNodes[0].nodeValue;

  var Ivar = ImgReference.getElementsByTagName("images")[0];	//extracts nodes from the Image Reference file
  var ImgTot = Ivar.childNodes[1].childNodes[1].childNodes[0].nodeValue;
  var Img = new Array(ImgTot);
  for(i = 0; i <= ImgTot; i++)
    {
    Img[i] = new Array(2);		//creates a 2-dimensional array for the coordinates and filenames of the images
    Img[i][0] = Ivar.childNodes[2*i+3].childNodes[1].childNodes[0].nodeValue;
    Img[i][1] = Ivar.childNodes[2*i+3].childNodes[3].childNodes[0].nodeValue;
    Img[i][2] = Ivar.childNodes[2*i+3].childNodes[5].childNodes[0].nodeValue;
    }
  }


if (ImgTot < 25);	//if there are fewer than 25 images, preloads them into the browser's cache
  {
  preloadimg;
  }

document.writeln("<style><!--.dragme{position:absolute;}--></style>");	//creates a moveable class for the icon
document.writeln("<font color = txcolour>");
document.writeln("<table bgcolor=");		//draws a table
document.writeln(bgcolour);
document.writeln("bordercolor=");
document.writeln(bdcolour);
document.writeln("border=3>");
document.writeln("<tr>");
document.writeln("<td><img name='map'></td>");
document.writeln("<td><img name='icon' class='dragme'></td>");
document.writeln("<td><img name='photo'></td>");
document.writeln("</tr>");
document.writeln("</table>");
document.writeln("</form>");
document.images["map"].src = (Img[0][2]);
document.images["icon"].src = IconPath;
mapPic = document.images["map"];
iconPic = document.images["icon"];
photoPic = document.images["photo"]
iconPic.style.left = getX(photoPic) + (photoPic.width - iconPic.width)/2;
iconPic.style.top = getY(photoPic) + (photoPic.height - iconPic.height)/2;

mapLeft = getX(mapPic);		//finds the position of the map on the page
mapTop = getY(mapPic);

mapPic.onmouseup = click;		//picks up clicks on the map and icon
iconPic.onmouseup = iconclick;

function iconclick(e)
  {
  if (ie)
    {
    var curx = window.event.clientX - mapLeft + document.body.scrollLeft - 1;	//finds mouse coordinates relative to the map
    var cury = window.event.clientY - mapTop + document.body.scrollTop - 1;		
    if (window.event.clientX > mapLeft && window.event.clientX < (mapLeft + mapPic.width) && window.event.clientY > mapTop && window.event.clientY < (mapTop + mapPic.height))		//checks that the click was within the map area
      {
      iconPic.style.left = curx + mapLeft - (iconPic.width / 2);		//positions the icon
      iconPic.style.top = cury + mapTop - iconPic.height - 1;
      }
    }
  else
    {
    var curx = e.clientX - mapLeft + document.body.scrollLeft + 1;		//finds mouse coordinates relative to the page
    var cury = e.clientY - mapTop + document.body.scrollTop + 1;
    if (e.clientX > mapLeft && e.clientX < (mapLeft + mapPic.width) && e.clientY > mapTop && e.clientY < (mapTop + mapPic.height))	//checks that the click was within the map area
      {
      iconPic.style.left = (curx + mapLeft - (iconPic.width / 2)) + "px";	//positions the icon
      iconPic.style.top = cury + mapTop - iconPic.height - 1 + "px";
      }
    }
  picCalc(curx,cury);		//determines the image to display
  }

function click(e)
  {
  var curx = ie ? window.event.offsetX : e.layerX - mapLeft + 1;	//finds mouse coordinates relative to the map
  var cury = ie ? window.event.offsetY: e.layerY - mapTop + 1;
  iconPic.style.left = curx + mapLeft - (iconPic.width / 2) + "px";	//positions the icon
  iconPic.style.top = cury + mapTop - iconPic.height - 1 + "px";
  picCalc(curx,cury);		//determines the image to display
  }


function picCalc(x,y)
  {
  if(StandardOp==truevar)	//standard operation	
    {
      xmlhttpPost("../cgi-bin/Lookup.cgi",x,y);	
    }
  else
    {
    var closez = +Infinity;		//sets the shortest distance to an image to infinity (meaning that any actual first distance will be shorter)
    for(i = 1; i <= ImgTot; i++)	//goes through each of the images
      {
      var curz = Math.pow((Img[i][0] - x),2) + Math.pow((Img[i][1] - y),2);	//calculates the distance coefficient
      if(curz < closez)
        {
        closez = curz;
        var closeimg = Img[i][2];	//stores the image number if it is closest
        }
      }
    }
  
  document.images["photo"].src = closeimg;	//displays the image
  }

function getX(e)	//calculates the total horizontal displacement of an element
  {
  var x = 0;
  while(e)
    {
    x += e.offsetLeft;	//adds the current element's offset
    e = e.offsetParent;	//goes to the element which contains that element
    }
  return x + 2;
  }

function getY(e)	//calculates the total vertical displacement of an element
  {
  var y = 0;
  while(e)
    {
    y += e.offsetTop;	//adds the current element's offset
    e = e.offsetParent;	//goes to the element which contains that element
    }
  return y + 2;
  }

function xmlhttpPost(strURL,xval,yval) 
  {
  var xmlHttpReq = false;
  var self = this;
  if (window.XMLHttpRequest) //firefox
    {
    self.xmlHttpReq = new XMLHttpRequest();	//creates a new XmlHttpRequest
    }
  else if (window.ActiveXObject) //Internet Explorer
    {
    self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");	//creates a new XmlHttpRequest
    }
  self.xmlHttpReq.open('POST', strURL, true);	
  self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');	//sets the content type in the header
  self.xmlHttpReq.onreadystatechange = function() {
  if (self.xmlHttpReq.readyState == 4) 		//checks if a response has been received
    {
    updatepage(self.xmlHttpReq.responseText);	//updates the page
    }
  }
  var querytext =  "&x=" + xval + "&y=" + yval;	//collects the data to send
  self.xmlHttpReq.send(querytext);		//sends the XmlHttpRequest
  }

function updatepage(str)
  {
  var newImg = Img[parseInt(str)][2];
  photoPic.src = newImg;	//displays the image corresponding to the number returned by the perl program
  }

function preloadimg()	//places images in the page header, so they will be pre-loaded by the browser
  {
  var preloadstr;
  for(i = 0; i <= ImgTot; i++)
    {
    preloadstr = preloadstr + "<img src ='" + Img[i][2] + "'/>";	
    }
    document.head.innerhtml = document.head.innerhtml + "<script type='text/javascript'>" + preloadstr + "</script>";
}